/* ==========================================================
   CLEARCODE CREATIVE V2
   Modern Luxury + Editorial + Creative Studio
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

:root {

  --cream: #f2efe8;
  --cream-light: #faf8f3;
  --paper: #f7f4ee;

  --ink: #111111;
  --ink-soft: #1b1b1b;
  --charcoal: #171817;
  --charcoal-light: #232422;

  --gray: #75756f;
  --gray-light: #a5a49d;

  --line: rgba(17, 17, 17, 0.16);
  --line-light: rgba(255, 255, 255, 0.15);

  --accent: #345cff;
  --accent-soft: #dce3ff;

  --serif: "Playfair Display", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --mono: "DM Mono", monospace;

  --shell:
    min(
      calc(100% - 80px),
      1380px
    );

  --header-height: 88px;

}


/* ==========================================================
   RESET
========================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  min-width: 320px;

  overflow-x: hidden;

  color: var(--ink);

  background:
    var(--cream);

  font-family:
    var(--sans);

  line-height: 1.55;

  -webkit-font-smoothing:
    antialiased;

}


body.menu-open {
  overflow: hidden;
}


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


button,
input,
textarea,
select {
  font: inherit;
}


button {
  color: inherit;
}


img {
  display: block;
  width: 100%;
}


::selection {
  color: white;
  background: var(--accent);
}


.section-shell {

  width: var(--shell);

  margin: 0 auto;

}


/* ==========================================================
   GRAIN
========================================================== */

.page-grain {

  position: fixed;

  inset: 0;

  z-index: 9999;

  pointer-events: none;

  opacity: 0.035;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");

}


/* ==========================================================
   REVEAL
========================================================== */

.reveal {

  opacity: 0;

  transform:
    translateY(28px);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;

}


.reveal.visible {

  opacity: 1;

  transform:
    translateY(0);

}


/* ==========================================================
   COMMON
========================================================== */

.micro-label,
.eyebrow {

  font-family:
    var(--mono);

  font-size: 0.72rem;

  font-weight: 500;

  letter-spacing: 0.16em;

  text-transform: uppercase;

}


.arrow-link {

  display: inline-flex;

  align-items: center;

  gap: 15px;

  margin-top: 28px;

  padding-bottom: 5px;

  border-bottom:
    1px solid currentColor;

  font-size: 0.9rem;

  font-weight: 700;

}


.arrow-link span {

  transition:
    transform 0.25s ease;

}


.arrow-link:hover span {

  transform:
    translate(4px, -4px);

}


.button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  min-height: 54px;

  padding:
    0 24px;

  border:
    1px solid transparent;

  font-size: 0.84rem;

  font-weight: 700;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;

}


.button span {

  transition:
    transform 0.25s ease;

}


.button:hover span {

  transform:
    translate(4px, -4px);

}


.button-dark {

  color: white;

  background:
    var(--ink);

}


.button-dark:hover {

  background:
    var(--accent);

  transform:
    translateY(-2px);

}


.button-light {

  color: var(--ink);

  background:
    var(--cream-light);

}


.button-light:hover {

  color: white;

  background:
    var(--accent);

}


.button-text {

  min-height: auto;

  padding:
    0 0 5px;

  border-bottom:
    1px solid var(--ink);

}


/* ==========================================================
   HEADER
========================================================== */

.site-header {

  position: fixed;

  top: 0;
  left: 0;

  z-index: 1000;

  width: 100%;

  height:
    var(--header-height);

  display: flex;

  align-items: center;

  color: var(--ink);

  transition:
    background 0.3s ease,
    height 0.3s ease,
    box-shadow 0.3s ease;

}


.site-header.scrolled {

  height: 74px;

  background:
    rgba(242, 239, 232, 0.91);

  border-bottom:
    1px solid var(--line);

  box-shadow:
    0 10px 40px
    rgba(0, 0, 0, 0.045);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

}


.header-inner {

  width:
    min(
      calc(100% - 64px),
      1450px
    );

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 36px;

}


.brand {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  flex-shrink: 0;

}


.brand-symbol {

  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  border:
    1px solid var(--ink);

  font-family:
    var(--mono);

  font-size: 0.75rem;

  letter-spacing: -0.05em;

  transition:
    color 0.25s ease,
    background 0.25s ease;

}


.brand:hover
.brand-symbol {

  color: white;

  background:
    var(--accent);

  border-color:
    var(--accent);

}


.brand-wording {

  display: flex;

  flex-direction: column;

  line-height: 1;

}


.brand-wording strong {

  font-size: 0.98rem;

  letter-spacing: -0.04em;

}


.brand-wording small {

  margin-top: 5px;

  color:
    var(--gray);

  font-family:
    var(--mono);

  font-size: 0.57rem;

  letter-spacing: 0.19em;

  text-transform: uppercase;

}


.desktop-nav {

  display: flex;

  align-items: center;

  gap: 30px;

  margin-left: auto;

}


.desktop-nav a {

  position: relative;

  font-size: 0.78rem;

  font-weight: 600;

}


.desktop-nav a::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: -7px;

  width: 100%;
  height: 1px;

  background:
    var(--ink);

  transform:
    scaleX(0);

  transform-origin:
    right;

  transition:
    transform 0.25s ease;

}


.desktop-nav a:hover::after {

  transform:
    scaleX(1);

  transform-origin:
    left;

}


.header-cta {

  display: inline-flex;

  align-items: center;

  gap: 13px;

  min-height: 44px;

  padding:
    0 18px;

  color: white;

  background:
    var(--ink);

  font-size: 0.74rem;

  font-weight: 700;

}


.header-cta span {

  transition:
    transform 0.25s ease;

}


.header-cta:hover {

  background:
    var(--accent);

}


.header-cta:hover span {

  transform:
    translate(3px, -3px);

}


.mobile-menu-button {

  display: none;

  width: 45px;
  height: 45px;

  border:
    1px solid var(--line);

  background:
    transparent;

  cursor: pointer;

}


.mobile-menu-button span {

  display: block;

  width: 18px;
  height: 1px;

  margin: 5px auto;

  background:
    currentColor;

}


/* ==========================================================
   MOBILE MENU
========================================================== */

.mobile-menu {

  position: fixed;

  inset: 0;

  z-index: 900;

  visibility: hidden;

  opacity: 0;

  color: white;

  background:
    var(--charcoal);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;

}


.mobile-menu.open {

  visibility: visible;

  opacity: 1;

}


.mobile-menu-inner {

  min-height: 100%;

  padding:
    130px 30px 40px;

  display: flex;

  flex-direction: column;

}


.mobile-menu nav {

  display: flex;

  flex-direction: column;

  margin-top: 50px;

}


.mobile-menu nav a {

  display: flex;

  align-items: center;

  gap: 20px;

  padding:
    15px 0;

  border-bottom:
    1px solid var(--line-light);

  font-family:
    var(--serif);

  font-size:
    clamp(
      2.2rem,
      12vw,
      4.4rem
    );

  line-height: 1;

}


.mobile-menu nav a span {

  font-family:
    var(--mono);

  font-size: 0.65rem;

}


.mobile-menu-bottom {

  margin-top: auto;

  padding-top: 40px;

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 20px;

}


.mobile-menu-bottom p {

  color:
    rgba(255, 255, 255, 0.5);

  font-size: 0.78rem;

}


.mobile-project-link {

  display: inline-flex;

  gap: 12px;

  padding-bottom: 4px;

  border-bottom:
    1px solid white;

  font-size: 0.78rem;

}


/* ==========================================================
   HERO
========================================================== */

.hero {

  position: relative;

  min-height: 100vh;

  padding:
    calc(var(--header-height) + 54px)
    0 35px;

  overflow: hidden;

}


.hero-grid-lines {

  position: absolute;

  inset: 0;

  pointer-events: none;

  background-image:

    linear-gradient(
      90deg,
      transparent
      calc(25% - 0.5px),
      rgba(17,17,17,0.055)
      25%,
      transparent
      calc(25% + 0.5px)
    ),

    linear-gradient(
      90deg,
      transparent
      calc(50% - 0.5px),
      rgba(17,17,17,0.055)
      50%,
      transparent
      calc(50% + 0.5px)
    ),

    linear-gradient(
      90deg,
      transparent
      calc(75% - 0.5px),
      rgba(17,17,17,0.055)
      75%,
      transparent
      calc(75% + 0.5px)
    );

}


.hero-shell {

  position: relative;

  z-index: 2;

  width:
    min(
      calc(100% - 64px),
      1450px
    );

  min-height:
    calc(
      100vh
      - var(--header-height)
      - 89px
    );

  margin: 0 auto;

  display: flex;

  flex-direction: column;

}


.hero-top-meta {

  display: flex;

  justify-content: space-between;

  padding-bottom: 24px;

  border-bottom:
    1px solid var(--line);

  color: var(--gray);

  font-family:
    var(--mono);

  font-size: 0.62rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}


.hero-main {

  flex: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(430px, 0.65fr);

  gap:
    clamp(
      30px,
      6vw,
      100px
    );

  align-items: center;

  padding:
    64px 0;

}


.hero-copy {

  position: relative;

}


.eyebrow {

  margin-bottom: 25px;

}


.hero-title {

  font-size:
    clamp(
      4rem,
      7.4vw,
      8.5rem
    );

  font-weight: 600;

  letter-spacing:
    -0.075em;

  line-height: 0.87;

}


.hero-line {

  display: block;

}


.hero-line em {

  font-family:
    var(--serif);

  font-weight: 500;

}


.hero-outline-line {

  margin-top: 9px;

  color: transparent;

  -webkit-text-stroke:
    1.5px var(--ink);

}


.hero-lower {

  max-width: 730px;

  margin-top: 45px;

  display: grid;

  grid-template-columns:
    minmax(240px, 1fr)
    auto;

  gap: 45px;

  align-items: end;

}


.hero-description {

  color: #555650;

  font-size:
    clamp(
      0.92rem,
      1.1vw,
      1.08rem
    );

  line-height: 1.75;

}


.hero-actions {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 20px;

}


/* ==========================================================
   HERO ARTBOARD
========================================================== */

.hero-artboard {

  position: relative;

  min-height: 590px;

}


.artboard-label {

  position: absolute;

  top: 0;
  right: 0;

  z-index: 5;

  font-family:
    var(--mono);

  font-size: 0.6rem;

  letter-spacing: 0.15em;

}


.hero-browser {

  position: absolute;

  top: 50px;
  right: 0;

  width: 88%;

  overflow: hidden;

  border:
    1px solid rgba(17,17,17,0.18);

  background:
    var(--cream-light);

  box-shadow:
    0 35px 85px
    rgba(0,0,0,0.10);

  transform:
    rotate(2.3deg);

  transition:
    transform 0.5s ease;

}


.hero-artboard:hover
.hero-browser {

  transform:
    rotate(0deg)
    translateY(-5px);

}


.browser-bar {

  height: 42px;

  padding:
    0 15px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom:
    1px solid var(--line);

}


.browser-dots {

  display: flex;

  gap: 5px;

}


.browser-dots span {

  width: 6px;
  height: 6px;

  border:
    1px solid var(--ink);

  border-radius: 50%;

}


.browser-bar small {

  color: var(--gray);

  font-family:
    var(--mono);

  font-size: 0.52rem;

}


.browser-design {

  min-height: 385px;

  padding:
    65px 45px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  color: white;

  background:
    var(--charcoal);

}


.browser-mini-label {

  margin-bottom: 45px;

  color:
    rgba(255,255,255,0.45);

  font-family:
    var(--mono);

  font-size: 0.55rem;

  letter-spacing: 0.17em;

}


.browser-design h2 {

  max-width: 350px;

  font-family:
    var(--serif);

  font-size:
    clamp(
      2.6rem,
      4vw,
      4rem
    );

  font-style: italic;

  font-weight: 500;

  line-height: 0.95;

}


.browser-design p {

  margin-top: 25px;

  color:
    rgba(255,255,255,0.54);

  font-size: 0.76rem;

}


.browser-design-line {

  width: 75px;
  height: 1px;

  margin-top: 40px;

  background:
    var(--accent);

}


.floating-code-card {

  position: absolute;

  left: 0;
  bottom: 85px;

  z-index: 4;

  width: 220px;

  padding:
    25px;

  color: white;

  background:
    var(--accent);

  box-shadow:
    0 25px 55px
    rgba(52,92,255,0.25);

  transform:
    rotate(-4deg);

}


.floating-code-card span {

  display: block;

  margin-bottom: 33px;

  font-family:
    var(--mono);

  font-size: 0.65rem;

}


.floating-code-card strong {

  font-family:
    var(--serif);

  font-size: 1.45rem;

  font-style: italic;

  font-weight: 500;

}


.floating-design-card {

  position: absolute;

  right: 2%;
  bottom: 30px;

  z-index: 5;

  width: 145px;
  height: 145px;

  padding: 18px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  border:
    1px solid var(--ink);

  background:
    var(--cream);

  transform:
    rotate(5deg);

}


.floating-design-card span {

  font-family:
    var(--mono);

  font-size: 0.6rem;

}


.floating-design-card strong {

  font-family:
    var(--serif);

  font-size: 1.1rem;

  font-style: italic;

}


.floating-design-card small {

  color: var(--gray);

  font-size: 0.65rem;

}


.hero-circle-copy {

  position: absolute;

  top: 22px;
  left: -10px;

  width: 115px;
  height: 115px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border:
    1px solid var(--ink);

  border-radius: 50%;

  background:
    var(--cream);

  font-family:
    var(--mono);

  font-size: 0.54rem;

  line-height: 1.6;

  transform:
    rotate(-9deg);

}


.hero-bottom-line {

  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding-top: 23px;

  border-top:
    1px solid var(--line);

  color: var(--gray);

  font-family:
    var(--mono);

  font-size: 0.57rem;

  letter-spacing: 0.12em;

}


/* ==========================================================
   MARQUEE
========================================================== */

.marquee-section {

  overflow: hidden;

  padding:
    23px 0;

  color: white;

  background:
    var(--ink);

}


.marquee-track {

  width: max-content;

  display: flex;

  align-items: center;

  gap: 31px;

  animation:
    marquee 35s linear infinite;

}


.marquee-track span {

  font-size:
    clamp(
      1rem,
      1.5vw,
      1.25rem
    );

  font-weight: 600;

  letter-spacing: 0.03em;

}


.marquee-track i {

  color: var(--accent);

  font-size: 0.8rem;

  font-style: normal;

}


@keyframes marquee {

  from {
    transform:
      translateX(0);
  }

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

}


/* ==========================================================
   STUDIO INTRO
========================================================== */

.studio-intro {

  padding:
    155px 0;

  background:
    var(--cream-light);

}


.studio-intro-grid {

  display: grid;

  grid-template-columns:
    0.35fr
    1.5fr
    0.7fr;

  gap:
    clamp(
      35px,
      7vw,
      110px
    );

  align-items: start;

}


.section-index {

  display: flex;

  gap: 18px;

  font-family:
    var(--mono);

  font-size: 0.65rem;

  letter-spacing: 0.1em;

}


.section-index span {

  color: var(--accent);

}


.studio-statement h2 {

  max-width: 850px;

  font-size:
    clamp(
      3rem,
      5.2vw,
      6.2rem
    );

  font-weight: 500;

  letter-spacing:
    -0.065em;

  line-height: 0.98;

}


.studio-statement h2 em {

  display: block;

  margin-top: 10px;

  font-family:
    var(--serif);

  font-weight: 500;

}


.studio-intro-copy {

  padding-top: 38px;

}


.studio-intro-copy p {

  margin-bottom: 25px;

  color:
    #595a54;

  font-size: 0.9rem;

  line-height: 1.8;

}


/* ==========================================================
   WORK
========================================================== */

.work-section {

  padding:
    145px 0 175px;

}


.work-heading {

  display: grid;

  grid-template-columns:
    1fr 0.45fr;

  gap: 80px;

  align-items: end;

  margin-bottom: 105px;

}


.work-heading h2 {

  margin-top: 18px;

  font-size:
    clamp(
      3.8rem,
      6vw,
      7.2rem
    );

  font-weight: 500;

  letter-spacing:
    -0.07em;

  line-height: 0.9;

}


.work-heading h2 em {

  font-family:
    var(--serif);

  font-weight: 500;

}


.work-heading-copy {

  max-width: 440px;

  padding-bottom: 10px;

  color: #64655f;

  font-size: 0.88rem;

  line-height: 1.8;

}


.project {

  width: 84%;

  margin-bottom: 160px;

}


.project:last-child {

  margin-bottom: 0;

}


.project-right {

  margin-left: auto;

}


.project-image-wrap {

  position: relative;

  display: block;

  padding:
    55px 55px 0;

  overflow: hidden;

  background:
    #dedbd4;

}


.project-right
.project-image-wrap {

  background:
    #d8dad2;

}


.project-cottenpuffs
.project-image-wrap {

  background:
    #dcd6cf;

}


.project-sugar
.project-image-wrap {

  background:
    #d8e3df;

}


.project-cultivate
.project-image-wrap {

  background:
    #dbe2d3;

}


.project-browser {

  width: 86%;

  margin: 0 auto;

  overflow: hidden;

  border:
    1px solid rgba(17,17,17,0.12);

  background:
    white;

  box-shadow:
    0 35px 70px
    rgba(0,0,0,0.10);

  transform:
    translateY(14px);

  transition:
    transform 0.5s ease;

}


.project-image-wrap:hover
.project-browser {

  transform:
    translateY(0)
    scale(1.01);

}


.project-browser-top {

  min-height: 39px;

  padding:
    0 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom:
    1px solid #e5e5e5;

}


.project-browser-top > div {

  display: flex;

  gap: 5px;

}


.project-browser-top span {

  width: 6px;
  height: 6px;

  border:
    1px solid #777;

  border-radius: 50%;

}


.project-browser-top small {

  color: #858585;

  font-family:
    var(--mono);

  font-size: 0.48rem;

}


.project-screen {

  position: relative;

  aspect-ratio:
    16 / 10;

  overflow: hidden;

  background:
    #eeeeea;

}


.project-screen img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: top center;

  transition:
    transform 0.7s ease;

}


.project-image-wrap:hover
.project-screen img {

  transform:
    scale(1.025);

}


.project-number {

  position: absolute;

  top: 22px;
  left: 24px;

  font-family:
    var(--mono);

  font-size: 0.65rem;

}


.project-side-note {

  position: absolute;

  right: 16px;
  top: 50%;

  writing-mode:
    vertical-rl;

  font-family:
    var(--mono);

  font-size: 0.52rem;

  letter-spacing: 0.15em;

}


.project-info {

  display: grid;

  grid-template-columns:
    1fr 0.55fr;

  gap: 70px;

  padding-top: 35px;

}


.project-category {

  margin-bottom: 14px;

  color: var(--gray);

  font-family:
    var(--mono);

  font-size: 0.6rem;

  letter-spacing: 0.12em;

}


.project-info h3 {

  font-size:
    clamp(
      2.8rem,
      4vw,
      5.2rem
    );

  font-weight: 500;

  letter-spacing:
    -0.06em;

  line-height: 1;

}


.project-description > p {

  color:
    #5c5d57;

  font-size: 0.84rem;

  line-height: 1.8;

}


.project-features {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 22px;

}


.project-features span {

  padding:
    7px 10px;

  border:
    1px solid var(--line);

  font-family:
    var(--mono);

  font-size: 0.52rem;

  letter-spacing: 0.05em;

  text-transform: uppercase;

}


/* ==========================================================
   FLUFFY TITANS PREVIEW
========================================================== */

.fluffy-preview {

  min-height: 610px;

  padding: 0;

  display: flex;

  flex-direction: column;

  color: #f4ead3;

  background:
    #0d2b22 !important;

}


.fluffy-preview-bg {

  position: absolute;

  inset: 0;

  opacity: 0.75;

  background:

    radial-gradient(
      circle at 70% 20%,
      rgba(222,187,88,0.25),
      transparent 25%
    ),

    radial-gradient(
      circle at 25% 75%,
      rgba(45,106,83,0.8),
      transparent 34%
    ),

    linear-gradient(
      145deg,
      #183f31,
      #071c16 75%
    );

}


.fluffy-preview::before,
.fluffy-preview::after {

  content: "";

  position: absolute;

  border:
    1px solid
    rgba(238,205,114,0.25);

  border-radius: 50%;

}


.fluffy-preview::before {

  width: 360px;
  height: 360px;

  right: -90px;
  top: 80px;

}


.fluffy-preview::after {

  width: 520px;
  height: 520px;

  left: -250px;
  bottom: -280px;

}


.fluffy-preview-top {

  position: relative;

  z-index: 3;

  padding:
    35px 45px;

  display: flex;

  justify-content: space-between;

  border-bottom:
    1px solid
    rgba(255,255,255,0.13);

}


.fluffy-preview-top span {

  font-family:
    var(--serif);

  font-size: 1.05rem;

}


.fluffy-preview-top small {

  font-family:
    var(--mono);

  font-size: 0.55rem;

  letter-spacing: 0.16em;

}


.fluffy-preview-center {

  position: relative;

  z-index: 3;

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

}


.fluffy-preview-center p {

  margin-bottom: 10px;

  color:
    rgba(244,234,211,0.62);

  font-family:
    var(--serif);

  font-size: 1.2rem;

  font-style: italic;

}


.fluffy-preview-center h4 {

  font-size:
    clamp(
      3.7rem,
      7vw,
      7rem
    );

  font-weight: 500;

  letter-spacing:
    -0.07em;

  line-height: 0.9;

}


.fluffy-preview-center h4 em {

  display: block;

  color: #e9ca73;

  font-family:
    var(--serif);

  font-weight: 500;

}


.fluffy-preview-center > span {

  margin-top: 28px;

  font-family:
    var(--mono);

  font-size: 0.52rem;

  letter-spacing: 0.2em;

}


.fluffy-preview-bottom {

  position: relative;

  z-index: 3;

  padding:
    28px 45px;

  display: flex;

  justify-content: space-between;

  border-top:
    1px solid
    rgba(255,255,255,0.13);

  font-family:
    var(--mono);

  font-size: 0.52rem;

  letter-spacing: 0.13em;

}


.fluffy-preview
.project-number {

  color:
    rgba(244,234,211,0.65);

}


.fluffy-preview
.project-side-note {

  color:
    rgba(244,234,211,0.55);

}


/* ==========================================================
   MANIFESTO
========================================================== */

.manifesto-section {

  padding:
    105px 0;

  color: white;

  background:
    var(--charcoal);

}


.manifesto-lines {

  width:
    min(
      calc(100% - 80px),
      1450px
    );

  margin: 0 auto;

}


.manifesto-line {

  display: grid;

  grid-template-columns:
    90px 1fr;

  align-items: center;

  border-top:
    1px solid var(--line-light);

}


.manifesto-line:last-child {

  border-bottom:
    1px solid var(--line-light);

}


.manifesto-line span {

  color:
    rgba(255,255,255,0.35);

  font-family:
    var(--mono);

  font-size: 0.65rem;

}


.manifesto-line strong {

  font-size:
    clamp(
      5rem,
      12.5vw,
      13rem
    );

  font-weight: 600;

  letter-spacing:
    -0.09em;

  line-height: 0.95;

}


.manifesto-middle strong {

  color: transparent;

  -webkit-text-stroke:
    1px rgba(255,255,255,0.75);

}


.manifesto-caption {

  width:
    min(
      calc(100% - 80px),
      1450px
    );

  margin:
    70px auto 0;

  display: grid;

  grid-template-columns:
    1fr 0.4fr;

  gap: 50px;

  align-items: end;

}


.manifesto-caption span {

  color: var(--accent-soft);

  font-family:
    var(--mono);

  font-size: 0.7rem;

}


.manifesto-caption p {

  color:
    rgba(255,255,255,0.55);

  font-size: 0.83rem;

  line-height: 1.8;

}


/* ==========================================================
   SERVICES
========================================================== */

.services-section {

  padding:
    155px 0;

  background:
    var(--cream-light);

}


.services-heading {

  display: grid;

  grid-template-columns:
    1fr 0.38fr;

  gap: 70px;

  align-items: end;

  margin-bottom: 90px;

}


.services-heading h2 {

  margin-top: 18px;

  font-size:
    clamp(
      3.8rem,
      6vw,
      7rem
    );

  font-weight: 500;

  letter-spacing:
    -0.07em;

  line-height: 0.92;

}


.services-heading h2 em {

  font-family:
    var(--serif);

  font-weight: 500;

}


.services-heading > p {

  color: var(--gray);

  font-size: 0.88rem;

  line-height: 1.8;

}


.services-list {

  border-top:
    1px solid var(--line);

}


.service-row {

  min-height: 170px;

  display: grid;

  grid-template-columns:
    90px
    1fr
    100px;

  gap: 30px;

  align-items: center;

  border-bottom:
    1px solid var(--line);

  transition:
    padding 0.35s ease,
    background 0.35s ease;

}


.service-row:hover {

  padding:
    0 28px;

  background:
    #efede6;

}


.service-number {

  font-family:
    var(--mono);

  font-size: 0.64rem;

}


.service-row > div {

  display: grid;

  grid-template-columns:
    0.65fr 1fr;

  gap: 50px;

  align-items: center;

}


.service-row h3 {

  font-size:
    clamp(
      1.7rem,
      2.5vw,
      2.9rem
    );

  font-weight: 500;

  letter-spacing:
    -0.05em;

}


.service-row p {

  max-width: 460px;

  color: var(--gray);

  font-size: 0.8rem;

  line-height: 1.75;

}


.service-symbol {

  justify-self: end;

  font-family:
    var(--mono);

  font-size: 1.1rem;

}


.services-note {

  margin-top: 22px;

  display: flex;

  justify-content: flex-end;

}


.services-note span {

  color: var(--accent);

  font-family:
    var(--mono);

  font-size: 0.65rem;

  transform:
    rotate(-2deg);

}


/* ==========================================================
   CUSTOM
========================================================== */

.custom-section {

  padding:
    150px 0;

}


.custom-grid {

  display: grid;

  grid-template-columns:
    0.85fr 1fr;

  gap:
    clamp(
      60px,
      10vw,
      150px
    );

}


.custom-heading {

  position: sticky;

  top: 130px;

  height: max-content;

}


.custom-heading h2 {

  margin-top: 18px;

  font-size:
    clamp(
      3.1rem,
      4.6vw,
      5.7rem
    );

  font-weight: 500;

  letter-spacing:
    -0.065em;

  line-height: 0.96;

}


.custom-heading
.custom-serif {

  margin-top: 8px;

  color: var(--accent);

  font-family:
    var(--serif);

  font-style: italic;

}


.custom-content {

  border-top:
    1px solid var(--line);

}


.custom-point {

  display: grid;

  grid-template-columns:
    70px 1fr;

  gap: 25px;

  padding:
    45px 0;

  border-bottom:
    1px solid var(--line);

}


.custom-point > span {

  color: var(--accent);

  font-family:
    var(--mono);

  font-size: 0.66rem;

}


.custom-point h3 {

  margin-bottom: 15px;

  font-size:
    clamp(
      1.5rem,
      2vw,
      2.15rem
    );

  font-weight: 500;

  letter-spacing:
    -0.045em;

}


.custom-point p {

  color: var(--gray);

  font-size: 0.84rem;

  line-height: 1.8;

}


/* ==========================================================
   PROCESS
========================================================== */

.process-section {

  padding:
    150px 0;

  color: white;

  background:
    var(--charcoal);

}


.process-heading {

  max-width: 880px;

  margin-bottom: 100px;

}


.process-heading h2 {

  margin-top: 20px;

  font-size:
    clamp(
      4rem,
      7vw,
      8rem
    );

  font-weight: 500;

  letter-spacing:
    -0.075em;

  line-height: 0.88;

}


.process-heading h2 em {

  font-family:
    var(--serif);

  font-weight: 500;

}


.process-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 20px;

}


.process-step {

  min-height: 390px;

  padding:
    20px;

  border-top:
    1px solid var(--line-light);

}


.process-offset {

  margin-top: 70px;

}


.process-number {

  color:
    rgba(255,255,255,0.35);

  font-family:
    var(--mono);

  font-size: 0.65rem;

}


.process-line {

  width: 1px;
  height: 60px;

  margin:
    28px 0;

  background:
    var(--accent);

}


.process-label {

  margin-bottom: 10px;

  color:
    rgba(255,255,255,0.45);

  font-family:
    var(--mono);

  font-size: 0.6rem;

  letter-spacing: 0.14em;

}


.process-step h3 {

  margin-bottom: 18px;

  font-family:
    var(--serif);

  font-size:
    clamp(
      1.6rem,
      2vw,
      2.2rem
    );

  font-style: italic;

  font-weight: 500;

}


.process-step > p:last-of-type {

  max-width: 235px;

  color:
    rgba(255,255,255,0.55);

  font-size: 0.76rem;

  line-height: 1.75;

}


.process-step small {

  display: inline-block;

  margin-top: 25px;

  color:
    var(--accent-soft);

  font-family:
    var(--mono);

  transform:
    rotate(-2deg);

}


.process-action {

  margin-top: 70px;

}


/* ==========================================================
   ABOUT
========================================================== */

.about-preview {

  padding:
    150px 0;

  background:
    var(--cream-light);

}


.about-preview-grid {

  display: grid;

  grid-template-columns:
    0.3fr
    0.85fr
    0.7fr
    0.45fr;

  gap: 55px;

  align-items: start;

}


.about-label {

  display: flex;

  gap: 15px;

  font-family:
    var(--mono);

  font-size: 0.6rem;

}


.about-label span {

  color: var(--accent);

}


.about-statement h2 {

  font-size:
    clamp(
      3.3rem,
      4.7vw,
      5.7rem
    );

  font-weight: 500;

  letter-spacing:
    -0.065em;

  line-height: 0.95;

}


.about-statement h2 em {

  font-family:
    var(--serif);

  font-weight: 500;

}


.about-copy {

  padding-top: 10px;

}


.about-copy > p {

  color: var(--gray);

  font-size: 0.84rem;

  line-height: 1.8;

}


.about-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 30px;

}


.about-tags span {

  padding:
    7px 9px;

  border:
    1px solid var(--line);

  font-family:
    var(--mono);

  font-size: 0.5rem;

  letter-spacing: 0.08em;

}


.about-art {

  min-height: 260px;

  padding: 25px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  color: white;

  background:
    var(--accent);

  transform:
    rotate(2deg);

}


.about-art-code {

  font-family:
    var(--mono);

  font-size: 0.6rem;

}


.about-art strong {

  font-family:
    var(--serif);

  font-size:
    3.5rem;

  font-style: italic;

  font-weight: 500;

}


.about-art-star {

  align-self: flex-end;

}


/* ==========================================================
   FINAL CTA
========================================================== */

.final-cta {

  padding:
    120px 0 90px;

  color: var(--ink);

  background:
    #cfd7ff;

}


.final-cta-inner {

  width:
    min(
      calc(100% - 80px),
      1450px
    );

  margin: 0 auto;

}


.final-cta-top {

  display: flex;

  justify-content: space-between;

  padding-bottom: 25px;

  border-bottom:
    1px solid rgba(17,17,17,0.25);

  font-family:
    var(--mono);

  font-size: 0.6rem;

  letter-spacing: 0.12em;

}


.final-cta-main {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 50px;

  padding:
    80px 0;

}


.final-cta-main h2 {

  font-size:
    clamp(
      5rem,
      10vw,
      11rem
    );

  font-weight: 600;

  letter-spacing:
    -0.09em;

  line-height: 0.83;

}


.final-cta-main h2 em {

  font-family:
    var(--serif);

  font-weight: 500;

}


.cta-circle {

  width:
    clamp(
      150px,
      15vw,
      230px
    );

  height:
    clamp(
      150px,
      15vw,
      230px
    );

  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border:
    1px solid var(--ink);

  border-radius: 50%;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;

}


.cta-circle span {

  font-family:
    var(--mono);

  font-size: 0.65rem;

}


.cta-circle strong {

  margin-top: 10px;

  font-size: 2rem;

}


.cta-circle:hover {

  color: white;

  background:
    var(--ink);

  transform:
    rotate(8deg);

}


.final-cta-bottom {

  padding-top: 30px;

  display: flex;

  justify-content: space-between;

  align-items: end;

  border-top:
    1px solid rgba(17,17,17,0.25);

}


.final-cta-bottom p {

  max-width: 300px;

  font-size: 0.8rem;

}


.large-arrow-link {

  display: inline-flex;

  align-items: center;

  gap: 20px;

  font-size:
    clamp(
      1.3rem,
      2vw,
      2rem
    );

  font-weight: 600;

  letter-spacing:
    -0.04em;

}


.large-arrow-link span {

  transition:
    transform 0.25s ease;

}


.large-arrow-link:hover span {

  transform:
    translate(5px, -5px);

}


/* ==========================================================
   FOOTER
========================================================== */

.site-footer {

  color: white;

  background:
    #0d0e0d;

}


.footer-main {

  width:
    min(
      calc(100% - 80px),
      1450px
    );

  margin: 0 auto;

  padding:
    85px 0;

  display: grid;

  grid-template-columns:
    1.25fr
    0.45fr
    0.55fr
    0.65fr;

  gap: 60px;

}


.footer-brand {

  display: inline-flex;

  flex-direction: column;

  font-size:
    clamp(
      2.3rem,
      4vw,
      4.3rem
    );

  font-weight: 600;

  letter-spacing:
    -0.07em;

  line-height: 0.84;

}


.footer-brand span {

  color:
    rgba(255,255,255,0.4);

  font-family:
    var(--serif);

  font-style: italic;

  font-weight: 500;

}


.footer-brand-area p {

  margin-top: 35px;

  color:
    rgba(255,255,255,0.4);

  font-family:
    var(--mono);

  font-size: 0.61rem;

}


.footer-column {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 13px;

}


.footer-column > span,
.footer-detail > span {

  margin-bottom: 10px;

  color:
    rgba(255,255,255,0.32);

  font-family:
    var(--mono);

  font-size: 0.55rem;

  letter-spacing: 0.13em;

}


.footer-column a {

  color:
    rgba(255,255,255,0.72);

  font-size: 0.77rem;

  transition:
    color 0.25s ease,
    transform 0.25s ease;

}


.footer-column a:hover {

  color: white;

  transform:
    translateX(4px);

}


.footer-detail p {

  color:
    rgba(255,255,255,0.54);

  font-size: 0.76rem;

  line-height: 1.8;

}


.footer-bottom {

  width:
    min(
      calc(100% - 80px),
      1450px
    );

  margin: 0 auto;

  padding:
    24px 0 30px;

  display: flex;

  justify-content: space-between;

  gap: 20px;

  border-top:
    1px solid var(--line-light);

  color:
    rgba(255,255,255,0.35);

  font-family:
    var(--mono);

  font-size: 0.52rem;

  letter-spacing: 0.08em;

}


.footer-bottom a {

  color:
    rgba(255,255,255,0.68);

}


/* ==========================================================
   CUSTOM CURSOR LABEL
========================================================== */

.cursor-label {

  position: fixed;

  left: 0;
  top: 0;

  z-index: 5000;

  width: 68px;
  height: 68px;

  display: grid;

  place-items: center;

  pointer-events: none;

  border-radius: 50%;

  opacity: 0;

  color: white;

  background:
    var(--accent);

  font-family:
    var(--mono);

  font-size: 0.58rem;

  letter-spacing: 0.08em;

  transform:
    translate(-50%, -50%)
    scale(0.6);

  transition:
    opacity 0.18s ease,
    transform 0.18s ease;

}


.cursor-label.active {

  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(1);

}


/* ==========================================================
   RESPONSIVE — 1150
========================================================== */

@media
(max-width: 1150px) {

  :root {

    --shell:
      min(
        calc(100% - 52px),
        1380px
      );

  }


  .desktop-nav {

    gap: 20px;

  }


  .hero-main {

    grid-template-columns:
      1fr 0.65fr;

  }


  .hero-title {

    font-size:
      clamp(
        4rem,
        7vw,
        6.5rem
      );

  }


  .hero-artboard {

    min-height: 510px;

  }


  .project {

    width: 92%;

  }


  .about-preview-grid {

    grid-template-columns:
      0.25fr
      1fr
      0.75fr;

  }


  .about-art {

    display: none;

  }

}


/* ==========================================================
   RESPONSIVE — 900
========================================================== */

@media
(max-width: 900px) {

  :root {

    --header-height:
      76px;

  }


  .header-inner {

    width:
      calc(100% - 36px);

  }


  .desktop-nav,
  .header-cta {

    display: none;

  }


  .mobile-menu-button {

    display: block;

  }


  .hero {

    min-height: auto;

    padding-top:
      calc(
        var(--header-height)
        + 35px
      );

  }


  .hero-shell {

    width:
      calc(100% - 38px);

  }


  .hero-top-meta span:nth-child(2) {

    display: none;

  }


  .hero-main {

    grid-template-columns:
      1fr;

    gap: 45px;

    padding:
      55px 0;

  }


  .hero-title {

    font-size:
      clamp(
        3.8rem,
        13vw,
        7rem
      );

  }


  .hero-lower {

    grid-template-columns:
      1fr;

    gap: 30px;

  }


  .hero-actions {

    flex-direction: row;

    flex-wrap: wrap;

  }


  .hero-artboard {

    width: 90%;

    min-height: 550px;

    margin-left: auto;

  }


  .hero-bottom-line {

    flex-wrap: wrap;

  }


  .studio-intro-grid {

    grid-template-columns:
      1fr;

    gap: 40px;

  }


  .studio-statement {

    max-width: 720px;

  }


  .studio-intro-copy {

    max-width: 500px;

    margin-left: auto;

  }


  .work-heading {

    grid-template-columns:
      1fr;

    gap: 30px;

  }


  .project,
  .project-right {

    width: 100%;

    margin-left: 0;

  }


  .project-info {

    grid-template-columns:
      1fr 0.7fr;

  }


  .manifesto-caption {

    grid-template-columns:
      1fr;

  }


  .services-heading {

    grid-template-columns:
      1fr;

    gap: 30px;

  }


  .service-row > div {

    grid-template-columns:
      1fr;

    gap: 12px;

  }


  .custom-grid {

    grid-template-columns:
      1fr;

  }


  .custom-heading {

    position: static;

  }


  .process-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }


  .process-offset {

    margin-top: 0;

  }


  .about-preview-grid {

    grid-template-columns:
      0.3fr 1fr;

  }


  .about-copy {

    grid-column:
      2 / 3;

  }


  .footer-main {

    width:
      calc(100% - 50px);

    grid-template-columns:
      1fr 1fr;

  }


  .footer-bottom {

    width:
      calc(100% - 50px);

    flex-wrap: wrap;

  }

}


/* ==========================================================
   RESPONSIVE — 650
========================================================== */

@media
(max-width: 650px) {

  :root {

    --shell:
      calc(100% - 34px);

  }


  .brand-symbol {

    width: 39px;
    height: 39px;

  }


  .brand-wording strong {

    font-size: 0.88rem;

  }


  .hero-shell {

    width:
      calc(100% - 30px);

  }


  .hero-top-meta {

    font-size: 0.5rem;

  }


  .hero-top-meta span:last-child {

    display: none;

  }


  .hero-title {

    font-size:
      clamp(
        3.5rem,
        16vw,
        5.3rem
      );

  }


  .hero-outline-line {

    -webkit-text-stroke:
      1px var(--ink);

  }


  .hero-actions {

    flex-direction: column;

  }


  .hero-artboard {

    width: 100%;

    min-height: 460px;

  }


  .hero-browser {

    width: 92%;

  }


  .browser-design {

    min-height: 300px;

    padding:
      45px 28px;

  }


  .floating-code-card {

    width: 165px;

    padding: 18px;

  }


  .floating-code-card span {

    margin-bottom: 20px;

    font-size: 0.52rem;

  }


  .floating-code-card strong {

    font-size: 1.1rem;

  }


  .floating-design-card {

    width: 110px;
    height: 110px;

  }


  .hero-circle-copy {

    width: 85px;
    height: 85px;

  }


  .hero-bottom-line {

    font-size: 0.48rem;

  }


  .studio-intro,
  .services-section,
  .custom-section,
  .process-section,
  .about-preview {

    padding:
      100px 0;

  }


  .studio-statement h2,
  .work-heading h2,
  .services-heading h2,
  .custom-heading h2,
  .about-statement h2 {

    font-size:
      clamp(
        3rem,
        14vw,
        4.7rem
      );

  }


  .work-section {

    padding:
      100px 0;

  }


  .work-heading {

    margin-bottom: 70px;

  }


  .project {

    margin-bottom: 100px;

  }


  .project-image-wrap {

    padding:
      45px 18px 0;

  }


  .project-browser {

    width: 95%;

  }


  .project-info {

    grid-template-columns:
      1fr;

    gap: 22px;

  }


  .project-info h3 {

    font-size:
      clamp(
        3rem,
        14vw,
        4.5rem
      );

  }


  .project-side-note {

    display: none;

  }


  .fluffy-preview {

    min-height: 470px;

  }


  .fluffy-preview-top,
  .fluffy-preview-bottom {

    padding:
      24px;

  }


  .fluffy-preview-center h4 {

    font-size:
      clamp(
        3.6rem,
        16vw,
        5.2rem
      );

  }


  .manifesto-section {

    padding:
      70px 0;

  }


  .manifesto-lines,
  .manifesto-caption {

    width:
      calc(100% - 34px);

  }


  .manifesto-line {

    grid-template-columns:
      45px 1fr;

  }


  .manifesto-line strong {

    font-size:
      clamp(
        4rem,
        18vw,
        7rem
      );

  }


  .service-row {

    grid-template-columns:
      38px
      1fr
      28px;

    gap: 12px;

    padding:
      28px 0;

  }


  .service-row:hover {

    padding:
      28px 10px;

  }


  .service-row h3 {

    font-size: 1.5rem;

  }


  .service-symbol {

    font-size: 0.8rem;

  }


  .custom-point {

    grid-template-columns:
      40px 1fr;

  }


  .process-grid {

    grid-template-columns:
      1fr;

  }


  .process-step {

    min-height: auto;

    padding:
      25px 0 50px;

  }


  .about-preview-grid {

    grid-template-columns:
      1fr;

  }


  .about-copy {

    grid-column: auto;

  }


  .final-cta {

    padding:
      85px 0 60px;

  }


  .final-cta-inner {

    width:
      calc(100% - 34px);

  }


  .final-cta-main {

    display: block;

    padding:
      60px 0;

  }


  .final-cta-main h2 {

    font-size:
      clamp(
        4.5rem,
        18vw,
        7rem
      );

  }


  .cta-circle {

    width: 135px;
    height: 135px;

    margin:
      45px 0 0 auto;

  }


  .final-cta-bottom {

    flex-direction: column;

    align-items: flex-start;

    gap: 30px;

  }


  .footer-main {

    width:
      calc(100% - 34px);

    grid-template-columns:
      1fr;

    gap: 45px;

  }


  .footer-bottom {

    width:
      calc(100% - 34px);

    flex-direction: column;

  }


  .cursor-label {

    display: none;

  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

  }


  .reveal {

    opacity: 1;

    transform: none;

  }

}


/* ==========================================================
   CLEARCODE V2 — MOODY COLOR REFINEMENT
   Smoky Grey + Slate Blue + Dusty Lavender
========================================================== */


:root {

  --cream:
    #c8c9cc;

  --cream-light:
    #d1d2d4;

  --paper:
    #c3c4c7;

  --ink:
    #15171c;

  --ink-soft:
    #1c1f26;

  --charcoal:
    #171a21;

  --charcoal-light:
    #222630;

  --gray:
    #646872;

  --gray-light:
    #9296a0;

  --line:
    rgba(
      21,
      23,
      28,
      0.18
    );

  --line-light:
    rgba(
      255,
      255,
      255,
      0.13
    );

  /*
     NEW PRIMARY BLUE
     Notice this is intentionally NOT electric.
  */

  --accent:
    #586783;

  /*
     Dusty periwinkle
  */

  --accent-soft:
    #a9b0c4;

  /*
     Secondary designer lavender
  */

  --lavender:
    #6f6a82;

  --lavender-soft:
    #aaa5b6;

  --blue-dark:
    #252e3d;

  --blue-mid:
    #46536b;

}



/* ==========================================================
   OVERALL BACKGROUND
========================================================== */

body {

  background:

    linear-gradient(
      135deg,
      #c5c6c9 0%,
      #ced0d2 50%,
      #c1c3c7 100%
    );

}


.hero {

  background:

    radial-gradient(
      circle at 80% 30%,
      rgba(
        111,
        106,
        130,
        0.12
      ),
      transparent 32%
    ),

    linear-gradient(
      135deg,
      #c9cacc,
      #bfc1c5
    );

}


.site-header.scrolled {

  background:
    rgba(
      190,
      192,
      197,
      0.88
    );

}


.studio-intro {

  background:
    #bfc1c5;

}


.work-section {

  background:
    #c6c7ca;

}


.services-section {

  background:
    #bfc1c4;

}


.about-preview {

  background:
    #c5c6ca;

}


.manifesto-section,
.process-section {

  background:
    #181b22;

}



/* ==========================================================
   HERO REFINEMENT
========================================================== */

.hero-grid-lines {

  opacity: 0.75;

}


.hero-browser {

  background:
    #babcc1;

  border-color:
    rgba(
      21,
      23,
      28,
      0.26
    );

}


.browser-design {

  background:

    radial-gradient(
      circle at 75% 25%,
      rgba(
        111,
        106,
        130,
        0.32
      ),
      transparent 38%
    ),

    linear-gradient(
      145deg,
      #202630,
      #12151b
    );

}


.browser-design-line {

  background:
    var(--lavender-soft);

}


.floating-code-card {

  background:
    #45516a;

  box-shadow:
    0 24px 55px
    rgba(
      34,
      41,
      55,
      0.22
    );

}


.floating-design-card {

  background:
    #b8bac0;

}


.hero-circle-copy {

  background:
    #c4c5c9;

}



/* ==========================================================
   MARQUEE
========================================================== */

.marquee-section {

  background:
    #151820;

}


.marquee-track i {

  color:
    #89849b;

}



/* ==========================================================
   ACCENT COLOR REFINEMENTS
========================================================== */

.section-index span,
.services-note span,
.custom-point > span,
.about-label span {

  color:
    #545f78;

}


.custom-heading
.custom-serif {

  color:
    #605c74;

}


.process-line {

  background:
    #7b7690;

}


.process-step small {

  color:
    #aaa6ba;

}


.about-art {

  background:

    linear-gradient(
      145deg,
      #59647d,
      #49465d
    );

}


.final-cta {

  background:

    linear-gradient(
      135deg,
      #8b91a1,
      #a3a0ad
    );

}



/* ==========================================================
   SELECTED WORK HEADING
========================================================== */

.work-heading-right {

  max-width: 420px;

  padding-bottom: 5px;

}


.work-heading-right p {

  margin-bottom: 12px;

  color:
    #50535c;

  font-size: 0.84rem;

  line-height: 1.75;

}


.work-heading-right
p:first-child {

  color:
    #282b32;

  font-family:
    var(--serif);

  font-size:
    1.2rem;

  font-style: italic;

}


.tiny-note {

  display:
    inline-block;

  margin-top: 18px;

  color:
    #5e5a70;

  font-family:
    var(--mono);

  font-size: 0.58rem;

  transform:
    rotate(-2deg);

}



/* ==========================================================
   PROJECT BASE
========================================================== */

.project {

  width: 88%;

  margin-bottom:
    175px;

}


.project-right {

  margin-left: auto;

}


.project-art {

  position: relative;

  min-height:
    clamp(
      530px,
      53vw,
      710px
    );

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.09
    );

  isolation: isolate;

  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;

}


.project-art:hover {

  transform:
    translateY(-5px);

  box-shadow:
    0 35px 80px
    rgba(
      17,
      20,
      28,
      0.15
    );

}


.art-header {

  position: relative;

  z-index: 10;

  min-height: 100px;

  padding:
    0 44px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );

}


.art-header > div {

  display: flex;

  align-items: center;

  gap: 20px;

}


.art-header small,
.art-header span {

  font-family:
    var(--mono);

  font-size: 0.55rem;

  letter-spacing:
    0.15em;

}


.art-header strong {

  font-family:
    var(--serif);

  font-size:
    1.1rem;

  font-weight: 500;

  letter-spacing:
    0.025em;

}


.art-footer {

  position: relative;

  z-index: 10;

  min-height: 78px;

  margin-top: auto;

  padding:
    0 44px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );

  font-family:
    var(--mono);

  font-size: 0.52rem;

  letter-spacing:
    0.15em;

}


.art-side-copy {

  position: absolute;

  z-index: 10;

  right: 17px;

  top: 50%;

  writing-mode:
    vertical-rl;

  font-family:
    var(--mono);

  font-size:
    0.49rem;

  letter-spacing:
    0.17em;

  opacity: 0.58;

}



/* ==========================================================
   PROJECT 01 — COTTENPUFFS
========================================================== */

.project-art-cotten {

  color:
    #dfdce4;

  background:

    radial-gradient(
      circle at 25% 35%,
      rgba(
        122,
        111,
        137,
        0.25
      ),
      transparent 35%
    ),

    radial-gradient(
      circle at 75% 80%,
      rgba(
        84,
        91,
        108,
        0.24
      ),
      transparent 33%
    ),

    linear-gradient(
      135deg,
      #37363c,
      #202329 60%,
      #292b33
    );

}


.project-art-grid {

  position: absolute;

  inset: 0;

  z-index: -1;

  opacity: 0.17;

  background-image:

    linear-gradient(
      rgba(
        255,
        255,
        255,
        0.12
      )
      1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(
        255,
        255,
        255,
        0.12
      )
      1px,
      transparent 1px
    );

  background-size:
    120px 120px;

}


.cotten-orbit {

  position: absolute;

  z-index: -1;

  border:
    1px solid
    rgba(
      187,
      179,
      198,
      0.23
    );

  border-radius: 50%;

}


.cotten-orbit-one {

  width: 430px;
  height: 430px;

  top: -230px;
  right: -100px;

}


.cotten-orbit-two {

  width: 590px;
  height: 590px;

  left: -310px;
  bottom: -390px;

}


.cotten-center {

  position: relative;

  z-index: 5;

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

}


.cotten-center > p {

  margin-bottom: 8px;

  color:
    #a49da9;

  font-family:
    var(--serif);

  font-size:
    clamp(
      1rem,
      1.6vw,
      1.4rem
    );

  font-style: italic;

}


.cotten-center h4 {

  font-size:
    clamp(
      4.5rem,
      8.5vw,
      9rem
    );

  font-weight: 500;

  letter-spacing:
    -0.075em;

  line-height: 0.86;

}


.cotten-center h4 em {

  display: block;

  color:
    #a29aad;

  font-family:
    var(--serif);

  font-size:
    1.1em;

  font-weight: 500;

}


.cotten-rule {

  width:
    min(
      500px,
      67%
    );

  margin-top: 36px;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  gap: 17px;

  align-items: center;

}


.cotten-rule > span {

  height: 1px;

  background:
    rgba(
      255,
      255,
      255,
      0.22
    );

}


.cotten-rule small {

  font-family:
    var(--mono);

  font-size:
    0.48rem;

  letter-spacing:
    0.16em;

}


.cotten-corner-note {

  position: absolute;

  left: 34px;
  bottom: 105px;

  display: flex;

  flex-direction: column;

  gap: 4px;

  font-family:
    var(--mono);

  font-size:
    0.46rem;

  letter-spacing:
    0.13em;

  opacity:
    0.47;

}



/* ==========================================================
   PROJECT 02 — FLUFFY TITANS
========================================================== */

.project-art-fluffy {

  color:
    #d9d7cc;

  background:

    radial-gradient(
      circle at 72% 18%,
      rgba(
        151,
        136,
        105,
        0.16
      ),
      transparent 28%
    ),

    radial-gradient(
      circle at 17% 76%,
      rgba(
        60,
        89,
        78,
        0.42
      ),
      transparent 37%
    ),

    linear-gradient(
      145deg,
      #1f3b34,
      #142923 45%,
      #101c1a
    );

}


.fluffy-glow {

  position: absolute;

  top: -130px;
  right: 18%;

  width: 430px;
  height: 430px;

  border-radius: 50%;

  opacity:
    0.16;

  filter:
    blur(50px);

  background:
    #999076;

}


.fluffy-orbit {

  position: absolute;

  border:
    1px solid
    rgba(
      188,
      172,
      130,
      0.18
    );

  border-radius: 50%;

}


.fluffy-orbit-one {

  width: 400px;
  height: 400px;

  right: -175px;
  top: 85px;

}


.fluffy-orbit-two {

  width: 520px;
  height: 520px;

  left: -305px;
  bottom: -355px;

}


.fluffy-center {

  position: relative;

  z-index: 5;

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

}


.fluffy-center > p {

  margin-bottom: 8px;

  color:
    #999588;

  font-family:
    var(--serif);

  font-size:
    clamp(
      1.1rem,
      1.6vw,
      1.5rem
    );

  font-style: italic;

}


.fluffy-center h4 {

  font-size:
    clamp(
      4.6rem,
      9vw,
      9.3rem
    );

  font-weight: 500;

  letter-spacing:
    -0.08em;

  line-height:
    0.85;

}


.fluffy-center h4 em {

  display: block;

  color:
    #b6a875;

  font-family:
    var(--serif);

  font-size:
    1.06em;

  font-weight: 500;

}


.fluffy-subtitle {

  margin-top: 35px;

  font-family:
    var(--mono);

  font-size:
    0.5rem;

  letter-spacing:
    0.23em;

  opacity:
    0.7;

}



/* ==========================================================
   PROJECT 03 — SUGAR BEHR'S
========================================================== */

.project-art-sugar {

  color:
    #e2ded4;

  background:

    radial-gradient(
      circle at 18% 22%,
      rgba(
        180,
        177,
        164,
        0.10
      ),
      transparent 28%
    ),

    linear-gradient(
      135deg,
      #52616b,
      #3c4b56 47%,
      #29343d
    );

}


.sugar-center {

  position: relative;

  z-index: 5;

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

}


.sugar-small-script {

  color:
    #cbc3b2;

  font-family:
    var(--serif);

  font-size:
    clamp(
      1.2rem,
      1.8vw,
      1.8rem
    );

  font-style: italic;

}


.sugar-center h4 {

  font-size:
    clamp(
      4.3rem,
      8vw,
      8.5rem
    );

  font-weight:
    500;

  letter-spacing:
    -0.08em;

  line-height:
    0.86;

}


.sugar-center h4 em {

  display: block;

  color:
    #bbb2c0;

  font-family:
    var(--serif);

  font-weight:
    500;

}


.sugar-divider {

  width: 180px;

  margin:
    30px 0 22px;

  display: flex;

  align-items: center;

  gap: 10px;

}


.sugar-divider::before,
.sugar-divider::after {

  content: "";

  height: 1px;

  flex: 1;

  background:
    rgba(
      255,
      255,
      255,
      0.28
    );

}


.sugar-divider span {

  color:
    #aaa3b1;

  font-size:
    0.6rem;

}


.sugar-bottom-copy {

  font-family:
    var(--mono);

  font-size:
    0.48rem;

  letter-spacing:
    0.14em;

  opacity:
    0.62;

}


.sugar-arch {

  position: absolute;

  z-index: 1;

  width: 310px;
  height: 410px;

  right: 55px;
  bottom: -220px;

  border:
    1px solid
    rgba(
      210,
      204,
      193,
      0.18
    );

  border-radius:
    160px 160px 0 0;

}


.sugar-stamp {

  position: absolute;

  z-index: 3;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.18
    );

  border-radius:
    50%;

  font-family:
    var(--mono);

  font-size:
    0.44rem;

  letter-spacing:
    0.15em;

  opacity:
    0.55;

}


.sugar-stamp-one {

  width: 105px;
  height: 105px;

  left: 45px;
  top: 150px;

  transform:
    rotate(-12deg);

}


.sugar-stamp-two {

  width: 85px;
  height: 85px;

  right: 75px;
  top: 140px;

  transform:
    rotate(9deg);

}



/* ==========================================================
   PROJECT 04 — CULTIVATE MAIZE
========================================================== */

.project-art-cultivate {

  color:
    #d6d9d4;

  background:

    radial-gradient(
      circle at 70% 30%,
      rgba(
        123,
        134,
        159,
        0.26
      ),
      transparent 30%
    ),

    linear-gradient(
      140deg,
      #374541,
      #283432 52%,
      #20282c
    );

}


.cultivate-grid-lines {

  position: absolute;

  inset: 0;

  opacity:
    0.13;

  background-image:

    linear-gradient(
      rgba(
        255,
        255,
        255,
        0.18
      )
      1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(
        255,
        255,
        255,
        0.18
      )
      1px,
      transparent 1px
    );

  background-size:
    85px 85px;

}


.cultivate-circle {

  position: absolute;

  border:
    1px solid
    rgba(
      173,
      179,
      193,
      0.22
    );

  border-radius:
    50%;

}


.cultivate-circle-one {

  width: 420px;
  height: 420px;

  right: -180px;
  bottom: -160px;

}


.cultivate-circle-two {

  width: 175px;
  height: 175px;

  left: 90px;
  top: 145px;

}


.cultivate-center {

  position: relative;

  z-index: 5;

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

}


.cultivate-index {

  margin-bottom:
    19px;

  color:
    #a5abb8;

  font-family:
    var(--mono);

  font-size:
    0.5rem;

  letter-spacing:
    0.19em;

}


.cultivate-center h4 {

  font-size:
    clamp(
      4.4rem,
      8vw,
      8.8rem
    );

  font-weight:
    500;

  letter-spacing:
    -0.075em;

  line-height:
    0.88;

}


.cultivate-center h4 em {

  display: block;

  color:
    #a6a6b7;

  font-family:
    var(--serif);

  font-weight:
    500;

}


.cultivate-center p {

  margin-top:
    34px;

  font-family:
    var(--mono);

  font-size:
    0.49rem;

  letter-spacing:
    0.17em;

  opacity:
    0.65;

}


.cultivate-data {

  position: absolute;

  left: 38px;
  bottom: 105px;

  z-index: 5;

  display: flex;

  gap: 22px;

}


.cultivate-data > div {

  display: flex;

  flex-direction: column;

}


.cultivate-data small {

  margin-bottom: 4px;

  color:
    #929aaa;

  font-family:
    var(--mono);

  font-size:
    0.45rem;

}


.cultivate-data span {

  font-family:
    var(--mono);

  font-size:
    0.43rem;

  letter-spacing:
    0.1em;

}



/* ==========================================================
   PROJECT INFORMATION
========================================================== */

.project-info {

  padding-top:
    36px;

}


.project-category {

  color:
    #555962;

}


.project-description > p {

  color:
    #4c5059;

}


.project-features span {

  border-color:
    rgba(
      21,
      23,
      28,
      0.22
    );

  background:
    rgba(
      255,
      255,
      255,
      0.12
    );

}



/* ==========================================================
   PROJECT HOVER MICRO-MOTION
========================================================== */

.project-art
.art-header,
.project-art
.art-footer,
.project-art
.art-side-copy {

  transition:
    opacity 0.45s ease;

}


.project-art:hover
.art-header,
.project-art:hover
.art-footer {

  opacity:
    0.82;

}


.project-art-cotten
.cotten-center,

.project-art-fluffy
.fluffy-center,

.project-art-sugar
.sugar-center,

.project-art-cultivate
.cultivate-center {

  transition:
    transform 0.6s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

}


.project-art:hover
.cotten-center,

.project-art:hover
.fluffy-center,

.project-art:hover
.sugar-center,

.project-art:hover
.cultivate-center {

  transform:
    translateY(-7px);

}



/* ==========================================================
   DARK SECTION COLOR DETAILS
========================================================== */

.manifesto-middle strong {

  -webkit-text-stroke:
    1px
    rgba(
      180,
      177,
      197,
      0.68
    );

}


.manifesto-caption span {

  color:
    #aaa7bb;

}


.process-heading em {

  color:
    #bbb7ca;

}



/* ==========================================================
   BUTTONS — LESS HARSH
========================================================== */

.button-dark {

  background:
    #1b1e25;

}


.button-dark:hover {

  background:
    #4e586d;

}


.header-cta {

  background:
    #191c22;

}


.header-cta:hover {

  background:
    #4e586d;

}



/* ==========================================================
   FINAL CTA — DUSTY BLUE/LAVENDER
========================================================== */

.final-cta {

  background:

    radial-gradient(
      circle at 85% 10%,
      rgba(
        188,
        181,
        202,
        0.42
      ),
      transparent 28%
    ),

    linear-gradient(
      130deg,
      #858d9f,
      #96939f
    );

}



/* ==========================================================
   MOBILE PROJECT ART
========================================================== */

@media
(max-width: 900px) {

  .project {

    width: 100%;

  }


  .project-right {

    margin-left: 0;

  }


  .project-art {

    min-height:
      580px;

  }


  .art-header {

    padding:
      0 28px;

  }


  .art-footer {

    padding:
      0 28px;

  }


  .cotten-center h4,
  .fluffy-center h4,
  .sugar-center h4,
  .cultivate-center h4 {

    font-size:
      clamp(
        4rem,
        13vw,
        7rem
      );

  }

}



@media
(max-width: 650px) {

  .project-art {

    min-height:
      490px;

  }


  .art-header {

    min-height:
      76px;

    padding:
      0 20px;

  }


  .art-header > div {

    gap:
      11px;

  }


  .art-header strong {

    font-size:
      0.84rem;

  }


  .art-header small,
  .art-header span {

    font-size:
      0.42rem;

  }


  .art-footer {

    min-height:
      65px;

    padding:
      0 20px;

    font-size:
      0.4rem;

  }


  .art-side-copy {

    display: none;

  }


  .cotten-center h4,
  .fluffy-center h4,
  .sugar-center h4,
  .cultivate-center h4 {

    font-size:
      clamp(
        3.6rem,
        17vw,
        5.5rem
      );

  }


  .cotten-rule {

    width:
      75%;

  }


  .cotten-rule small {

    font-size:
      0.39rem;

  }


  .cultivate-data {

    left: 20px;

    bottom:
      84px;

  }


  .cultivate-data > div:nth-child(3) {

    display:
      none;

  }


  .sugar-stamp-one {

    left:
      18px;

    top:
      105px;

  }


  .sugar-stamp-two {

    right:
      18px;

    top:
      115px;

  }

}