/* ==================================================
   COTTENPUFFS PROJECT
   CLEARCODE CREATIVE
================================================== */

.cotten-case-page {
  overflow: hidden;
}

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

.cotten-case-hero {
  padding:
    94px 0
    72px;

  position: relative;
}

.cotten-case-hero::before {
  content: "";

  position: absolute;

  width: 620px;
  height: 620px;

  top: -220px;
  right: -170px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(214, 202, 185, 0.15),
      transparent 68%
    );

  pointer-events: none;
}

.cotten-back-link {
  display: inline-flex;

  margin-bottom: 40px;

  color: var(--muted);

  font-size: 0.9rem;
  font-weight: 800;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.cotten-back-link:hover {
  color:
    var(--sage-bright);

  transform:
    translateX(-3px);
}

.cotten-case-hero-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(440px, 1.08fr);

  gap: 70px;

  align-items: center;
}

.cotten-live-row {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 14px;

  margin-bottom: 16px;
}

.cotten-live-row .eyebrow {
  margin: 0;
}

.cotten-live-badge {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding:
    8px 12px;

  border:
    1px solid
    rgba(183, 209, 193, 0.28);

  border-radius: 999px;

  background:
    rgba(183, 209, 193, 0.09);

  color:
    var(--sage-bright);

  font-size: 0.7rem;
  font-weight: 900;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.cotten-live-badge::before {
  content: "";

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--sage-bright);

  box-shadow:
    0 0 0 5px
    rgba(183, 209, 193, 0.07);
}

.cotten-case-hero-copy h1 {
  margin-bottom: 24px;

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

  line-height: 0.87;

  letter-spacing: -0.085em;
}

.cotten-hero-lead {
  max-width: 660px;

  color: var(--muted);

  font-size:
    clamp(
      1.06rem,
      1.5vw,
      1.22rem
    );

  line-height: 1.75;
}

.cotten-case-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 30px;
}

.cotten-case-tags span {
  padding:
    9px 12px;

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

  border-radius: 999px;

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

  color:
    var(--sage-bright);

  font-size: 0.72rem;
  font-weight: 900;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}

.cotten-hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 34px;
}

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

.cotten-hero-browser {
  overflow: hidden;

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

  border-radius: 32px;

  background:
    #ece7df;

  box-shadow:
    0 34px 90px
    rgba(0, 0, 0, 0.45);

  transform:
    rotate(1.25deg);

  position: relative;
}

.cotten-browser-top {
  min-height: 52px;

  padding:
    0 20px;

  display: flex;

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

  border-bottom:
    1px solid
    rgba(16, 22, 23, 0.12);

  background:
    #f6f2eb;
}

.cotten-browser-dots {
  display: flex;

  gap: 7px;
}

.cotten-browser-dots span,
.cotten-shot-browser-bar span {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background:
    #8f8a82;
}

.cotten-browser-domain {
  color:
    rgba(16, 22, 23, 0.58);

  font-size: 0.72rem;
  font-weight: 800;
}

.cotten-hero-browser img {
  width: 100%;

  height: 540px;

  object-fit: cover;

  object-position: top;

  background:
    #ece7df;
}

/* ==================================================
   SNAPSHOT
================================================== */

.cotten-snapshot-section {
  padding:
    0 0 70px;
}

.cotten-snapshot-grid {
  display: grid;

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

  gap: 16px;
}

.cotten-snapshot-card {
  padding: 24px;

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

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.085),
      rgba(255, 255, 255, 0.035)
    );

  box-shadow:
    0 20px 55px
    rgba(0, 0, 0, 0.23);
}

.cotten-snapshot-card span {
  display: block;

  margin-bottom: 9px;

  color: var(--faint);

  font-size: 0.7rem;
  font-weight: 900;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.cotten-snapshot-card strong {
  display: block;

  color: var(--text);

  font-size: 0.96rem;
}

.cotten-status-live {
  color:
    var(--sage-bright) !important;
}

/* ==================================================
   GLOBAL PROJECT SECTION
================================================== */

.cotten-section {
  padding:
    106px 0;
}

.cotten-two-column {
  display: grid;

  grid-template-columns:
    0.82fr
    1.18fr;

  gap: 70px;

  align-items: start;
}

.cotten-section-title {
  position: sticky;

  top: 128px;
}

.cotten-section-title h2 {
  max-width: 500px;

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

.cotten-story-copy {
  display: grid;

  gap: 25px;

  color: var(--muted);

  font-size: 1.12rem;

  line-height: 1.85;
}

/* ==================================================
   GALLERY
================================================== */

.cotten-gallery-section {
  width: 100%;

  background:
    radial-gradient(
      circle at 10% 5%,
      rgba(215, 204, 188, 0.08),
      transparent 32%
    ),
    radial-gradient(
      circle at 88% 18%,
      rgba(142, 170, 155, 0.08),
      transparent 35%
    ),
    rgba(255, 255, 255, 0.018);

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

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

.cotten-gallery-heading {
  display: grid;

  grid-template-columns:
    1fr
    0.72fr;

  gap: 50px;

  align-items: end;

  margin-bottom: 45px;
}

.cotten-gallery-heading h2 {
  max-width: 800px;

  font-size:
    clamp(
      2.5rem,
      5vw,
      4.8rem
    );
}

.cotten-gallery-heading > p {
  color: var(--muted);

  font-size: 1.03rem;

  line-height: 1.8;
}

.cotten-gallery-grid {
  display: grid;

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

  gap: 24px;
}

.cotten-shot {
  overflow: hidden;

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

  border-radius: 30px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.085),
      rgba(255, 255, 255, 0.035)
    );

  box-shadow:
    0 26px 70px
    rgba(0, 0, 0, 0.3);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.cotten-shot:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(183, 209, 193, 0.34);
}

.cotten-shot-large {
  grid-column:
    1 / -1;
}

.cotten-shot-wide {
  grid-column:
    1 / -1;
}

.cotten-shot-browser-bar {
  height: 44px;

  display: flex;

  align-items: center;

  gap: 7px;

  padding:
    0 18px;

  background:
    rgba(245, 241, 234, 0.94);

  border-bottom:
    1px solid
    rgba(16, 22, 23, 0.12);
}

.cotten-shot img {
  width: 100%;

  height: 420px;

  object-fit: cover;

  object-position: top;

  background:
    #ece7df;

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

.cotten-shot-large img,
.cotten-shot-wide img {
  height: 620px;
}

.cotten-shot-copy {
  padding:
    28px;
}

.cotten-shot-copy > span {
  display: inline-flex;

  margin-bottom: 12px;

  color:
    var(--sage-bright);

  font-size: 0.7rem;
  font-weight: 900;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.cotten-shot-copy h3 {
  margin-bottom: 12px;

  font-size:
    clamp(
      1.45rem,
      2.5vw,
      2.2rem
    );
}

.cotten-shot-copy p {
  max-width: 780px;

  color: var(--muted);

  line-height: 1.75;
}

.cotten-gallery-action {
  display: flex;

  justify-content: center;

  margin-top: 38px;
}

/* ==================================================
   FEATURES
================================================== */

.cotten-centered-heading {
  max-width: 840px;

  margin:
    0 auto 52px;

  text-align: center;
}

.cotten-centered-heading h2 {
  margin-bottom: 20px;

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

.cotten-centered-heading > p {
  max-width: 700px;

  margin: 0 auto;

  color: var(--muted);

  font-size: 1.05rem;
}

.cotten-feature-grid {
  display: grid;

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

  gap: 18px;
}

.cotten-feature-card {
  min-height: 285px;

  padding: 28px;

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

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.032)
    );

  box-shadow:
    0 20px 55px
    rgba(0, 0, 0, 0.2);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.cotten-feature-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(183, 209, 193, 0.36);
}

.cotten-feature-card > span {
  display: inline-flex;

  margin-bottom: 52px;

  color:
    var(--sage-bright);

  font-size: 0.76rem;
  font-weight: 900;

  letter-spacing: 0.14em;
}

.cotten-feature-card h3 {
  margin-bottom: 12px;

  font-size: 1.3rem;
}

.cotten-feature-card p {
  color: var(--muted);

  line-height: 1.72;
}

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

.cotten-process-section {
  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(125, 183, 255, 0.055),
      transparent 33%
    ),
    rgba(255, 255, 255, 0.018);

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

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

.cotten-process-grid {
  display: grid;

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

  gap: 18px;
}

.cotten-process-grid article {
  min-height: 290px;

  padding: 28px;

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

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.027)
    );
}

.cotten-process-grid article > span {
  display: inline-flex;

  margin-bottom: 62px;

  color:
    var(--sage-bright);

  font-size: 0.76rem;
  font-weight: 900;

  letter-spacing: 0.14em;
}

.cotten-process-grid h3 {
  margin-bottom: 12px;

  font-size: 1.4rem;
}

.cotten-process-grid p {
  color: var(--muted);

  line-height: 1.72;
}

/* ==================================================
   RESULT
================================================== */

.cotten-result-card {
  display: grid;

  grid-template-columns:
    1fr
    0.86fr;

  gap: 60px;

  align-items: center;

  padding:
    clamp(
      34px,
      6vw,
      68px
    );

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

  border-radius: 38px;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(215, 204, 188, 0.1),
      transparent 36%
    ),
    radial-gradient(
      circle at 90% 20%,
      rgba(183, 209, 193, 0.12),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.038)
    );

  box-shadow:
    var(--shadow);
}

.cotten-result-card h2 {
  font-size:
    clamp(
      2.6rem,
      5vw,
      4.9rem
    );
}

.cotten-result-card > div:last-child {
  display: grid;

  gap: 18px;

  color: var(--muted);

  font-size: 1.06rem;

  line-height: 1.8;
}

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

.cotten-project-final {
  padding:
    30px 0
    108px;
}

.cotten-project-final-card {
  padding:
    clamp(
      40px,
      7vw,
      78px
    );

  text-align: center;

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

  border-radius: 42px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(183, 209, 193, 0.18),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.095),
      rgba(255, 255, 255, 0.038)
    );

  box-shadow:
    var(--shadow);
}

.cotten-project-final-card h2 {
  max-width: 900px;

  margin:
    0 auto 20px;

  font-size:
    clamp(
      2.6rem,
      5.4vw,
      5.2rem
    );
}

.cotten-project-final-card > p:not(.eyebrow) {
  max-width: 700px;

  margin: 0 auto;

  color: var(--muted);

  font-size: 1.06rem;

  line-height: 1.8;
}

.cotten-final-actions {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 14px;

  margin-top: 34px;
}

/* ==================================================
   LARGE TABLET
================================================== */

@media (max-width: 1050px) {

  .cotten-case-hero-grid {
    grid-template-columns: 1fr;

    gap: 46px;
  }

  .cotten-hero-browser {
    transform: none;
  }

  .cotten-snapshot-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .cotten-feature-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .cotten-process-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 850px) {

  .cotten-two-column,
  .cotten-gallery-heading,
  .cotten-result-card {
    grid-template-columns: 1fr;
  }

  .cotten-section-title {
    position: static;
  }

  .cotten-gallery-grid {
    grid-template-columns: 1fr;
  }

  .cotten-shot-large,
  .cotten-shot-wide {
    grid-column: auto;
  }

  .cotten-shot img,
  .cotten-shot-large img,
  .cotten-shot-wide img {
    height: 420px;
  }

}

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

@media (max-width: 650px) {

  .cotten-case-hero {
    padding:
      68px 0
      56px;
  }

  .cotten-back-link {
    margin-bottom: 28px;
  }

  .cotten-case-hero-copy h1 {
    font-size:
      clamp(
        3.5rem,
        18vw,
        5.2rem
      );
  }

  .cotten-live-row {
    align-items: flex-start;

    flex-direction: column;
  }

  .cotten-case-tags {
    gap: 7px;
  }

  .cotten-case-tags span {
    font-size: 0.64rem;
  }

  .cotten-hero-actions {
    flex-direction: column;
  }

  .cotten-hero-actions .btn {
    width: 100%;
  }

  .cotten-hero-browser {
    border-radius: 22px;
  }

  .cotten-hero-browser img {
    height: 310px;
  }

  .cotten-browser-domain {
    font-size: 0.63rem;
  }

  .cotten-snapshot-grid,
  .cotten-feature-grid,
  .cotten-process-grid {
    grid-template-columns: 1fr;
  }

  .cotten-section {
    padding:
      76px 0;
  }

  .cotten-shot img,
  .cotten-shot-large img,
  .cotten-shot-wide img {
    height: 280px;
  }

  .cotten-shot-copy {
    padding: 22px;
  }

  .cotten-feature-card {
    min-height: auto;
  }

  .cotten-feature-card > span,
  .cotten-process-grid article > span {
    margin-bottom: 34px;
  }

  .cotten-project-final {
    padding:
      10px 0
      76px;
  }

  .cotten-final-actions {
    flex-direction: column;
  }

  .cotten-final-actions .btn {
    width: 100%;
  }

}

/* ==================================================
   CLEAN HERO — NO SCREENSHOT
================================================== */

.cotten-case-hero-grid-clean {
  grid-template-columns: 1fr;
}

.cotten-case-hero-grid-clean .cotten-case-hero-copy {
  max-width: 920px;
}

.cotten-case-hero-grid-clean .cotten-case-hero-copy h1 {
  max-width: 900px;
}

.cotten-case-hero-grid-clean .cotten-hero-lead {
  max-width: 720px;
}

.cotten-case-hero-grid-clean .cotten-case-tags {
  max-width: 820px;
}