html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  --bg: #020503;
  --ink: #f2efe4;
  --soft: rgba(242,239,228,.72);
  --muted: rgba(242,239,228,.46);
  --accent: #b9df72;
  --line: rgba(242,239,228,.14);
  --sidebar-width: clamp(250px,22vw,350px);
  --ease: cubic-bezier(.22,1,.36,1);
}


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

*,
*::before,
*::after {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}


html {
  scroll-behavior: smooth;
}


body {
  overflow-x: hidden;
}


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


button {
  font: inherit;
}


[hidden] {
  display: none !important;
}


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

.gradient-world {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(116,188,77,.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 18% 77%,
      rgba(58,127,58,.13),
      transparent 34%
    ),
    radial-gradient(
      circle at 54% 50%,
      rgba(45,100,47,.08),
      transparent 43%
    ),
    linear-gradient(
      135deg,
      #010302 0%,
      #020603 27%,
      #051008 53%,
      #08160a 74%,
      #020503 100%
    );
}


.gradient-world::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 55% 45%,
      transparent 25%,
      rgba(0,0,0,.12) 64%,
      rgba(0,0,0,.55) 100%
    );
}


/* =========================================================
   NAVIGATION
========================================================= */

.topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;

  z-index: 100;

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

  padding:
    14px
    clamp(24px,4vw,70px);
}


.brand-logo-link {
  display: flex;
  align-items: center;
}


.brand-logo {
  display: block;
  width: auto;
  height: 120px;
  object-fit: contain;
}


.main-nav {
  display: flex;
  align-items: center;

  gap:
    clamp(18px,2.2vw,36px);
}


.main-nav > a {
  padding: 8px 0;

  color:
    rgba(242,239,228,.72);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .14em;

  text-transform: uppercase;

  transition:
    color .3s ease;
}


.main-nav > a:hover,
.main-nav > a.active {
  color: var(--accent);
}


.main-nav .nav-cta {
  padding: 12px 16px;

  border:
    1px solid
    rgba(242,239,228,.20);

  color: var(--ink);

  background:
    rgba(3,9,5,.25);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


.main-nav .nav-cta:hover {
  color: #071009;
  background: var(--accent);
}


/* =========================================================
   PAGE LAYOUT
========================================================= */

.work-shell {
  position: relative;
  z-index: 10;

  display: grid;

  grid-template-columns:
    var(--sidebar-width)
    minmax(0,1fr);

  width: 100%;

  padding-top: 100px;
}


/* =========================================================
   LEFT SIDEBAR
========================================================= */

.client-sidebar {
  position: sticky;
  top: 100px;

  height:
    calc(100vh - 100px);

  padding:
    36px
    32px
    32px
    clamp(28px,4vw,70px);

  display: flex;
  flex-direction: column;
}


.sidebar-heading {
  margin-bottom: 28px;
}


.sidebar-heading span {
  display: block;

  margin-bottom: 12px;

  color: var(--muted);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .18em;

  text-transform: uppercase;
}


.sidebar-heading h1 {
  margin: 0;

  font-size:
    clamp(40px,3.5vw,58px);

  font-weight: 900;

  line-height: .85;

  letter-spacing: -.065em;

  text-transform: uppercase;
}


/* =========================================================
   SIDEBAR GROUPS
========================================================= */

.client-list {
  display: grid;
  width: 100%;
  margin-top: 10px;
}


.work-group {
  border-bottom:
    1px solid
    rgba(242,239,228,.13);
}


.work-group-toggle {
  width: 100%;
  min-height: 64px;

  padding: 0;

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

  gap: 15px;

  border: 0;

  background: transparent;

  color:
    rgba(242,239,228,.62);

  text-align: left;

  cursor: pointer;

  transition:
    color .3s ease,
    padding-left .35s var(--ease);
}


.work-group-toggle:hover {
  color: var(--ink);
  padding-left: 5px;
}


.work-group.open
.work-group-toggle {
  color: var(--accent);
}


.work-group-toggle > span {
  font-size: 15px;
  font-weight: 900;

  letter-spacing: .075em;

  text-transform: uppercase;
}


.work-group-meta {
  display: flex;
  align-items: center;

  gap: 13px;
}


.work-group-meta small {
  color:
    rgba(242,239,228,.30);

  font-size: 9px;
  font-weight: 800;
}


.work-group-meta i {
  width: 20px;

  display: grid;
  place-items: center;

  color:
    rgba(242,239,228,.50);

  font-size: 20px;
  font-style: normal;

  transition:
    transform .45s var(--ease),
    color .3s ease;
}


.work-group.open
.work-group-meta i {
  color: var(--accent);
  transform: rotate(45deg);
}


/* =========================================================
   SIDEBAR DROPDOWN
========================================================= */

.work-group-items {
  max-height: 0;
  opacity: 0;
  overflow: hidden;

  transition:
    max-height .5s var(--ease),
    opacity .3s ease,
    padding .4s ease;
}


.work-group.open
.work-group-items {
  max-height: 500px;
  opacity: 1;
  padding-bottom: 11px;
}


/* =========================================================
   CLIENT BUTTON
========================================================= */

.client-button {
  width: 100%;
  min-height: 46px;

  padding:
    10px
    8px
    10px
    16px;

  display: flex;
  align-items: center;

  gap: 11px;

  border: 0;

  background: transparent;

  color:
    rgba(242,239,228,.46);

  text-align: left;

  cursor: pointer;

  transition:
    color .3s ease,
    transform .35s var(--ease);
}


.client-button:hover {
  color: var(--ink);
  transform: translateX(5px);
}


.client-button.active {
  color: var(--accent);
}


.client-dot {
  width: 6px;
  height: 6px;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    rgba(242,239,228,.24);
}


.client-button.active
.client-dot {
  background: var(--accent);

  box-shadow:
    0 0 12px
    rgba(185,223,114,.45);
}


.client-name {
  font-size: 13px;
  font-weight: 700;
}


.work-group-empty {
  padding:
    10px
    16px
    18px;

  color:
    rgba(242,239,228,.25);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .12em;

  text-transform: uppercase;
}


.sidebar-bottom {
  margin-top: auto;

  display: grid;

  gap: 4px;

  color:
    rgba(242,239,228,.24);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .18em;
}


/* =========================================================
   RIGHT WRAPPER
========================================================= */

.case-wrapper {
  width: 100%;

  opacity: 1;

  transform:
    translateY(0);

  transition:
    opacity .2s ease,
    transform .35s var(--ease);
}


.case-wrapper.is-changing {
  opacity: 0;

  transform:
    translateY(10px);
}


.case-study,
.social-case-study,
.reel-case-study {
  width: 100%;
}


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

.case-category,
.section-kicker {
  margin: 0;

  color: var(--soft);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .17em;

  text-transform: uppercase;
}


.case-number,
.social-number {
  display: block;

  margin-bottom: 14px;

  color: var(--accent);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .15em;
}


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

.case-hero {
  min-height:
    calc(100vh - 100px);

  padding:
    90px
    clamp(42px,6vw,95px)
    70px;

  display: grid;

  grid-template-columns:
    minmax(0,.9fr)
    minmax(380px,1.1fr);

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

  align-items: center;
}


.case-hero-copy {
  max-width: 580px;
}


.case-hero h2 {
  margin:
    26px
    0
    25px;

  font-size:
    clamp(62px,7vw,118px);

  font-weight: 900;

  line-height: .82;

  letter-spacing: -.07em;

  text-transform: uppercase;
}


.case-intro {
  max-width: 500px;

  color: var(--soft);

  font-size:
    clamp(15px,1.3vw,19px);

  font-weight: 600;

  line-height: 1.5;
}


.lime-button {
  display: inline-flex;

  margin-top: 30px;

  padding:
    14px
    20px;

  background: var(--accent);

  color: #071009;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .10em;

  transition:
    transform .3s var(--ease);
}


.lime-button:hover {
  transform:
    translateY(-3px);
}


.case-hero-media {
  position: relative;
}


.case-hero-media img {
  display: block;

  width: 100%;

  aspect-ratio: 1.15;

  object-fit: cover;

  border:
    1px solid
    rgba(242,239,228,.14);

  background:
    rgba(0,0,0,.20);
}


.media-mark {
  position: absolute;

  right: -18px;
  bottom: -18px;

  width: 74px;
  height: 74px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #071009;

  background: var(--accent);

  font-weight: 900;
}


/* =========================================================
   WEBSITE STATS
========================================================= */

.case-stats {
  padding:
    65px
    clamp(42px,6vw,95px);

  display: grid;

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

  gap: 40px;

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

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

  background:
    rgba(2,8,4,.22);
}


.case-stats article {
  display: flex;
  align-items: flex-end;

  gap: 14px;
}


.case-stats strong {
  font-size:
    clamp(44px,4.5vw,72px);

  font-weight: 900;

  line-height: .8;

  letter-spacing: -.06em;
}


.case-stats span {
  max-width: 150px;

  color: var(--soft);

  font-size: 10px;
  font-weight: 700;

  line-height: 1.35;
}


/* =========================================================
   WEBSITE OVERVIEW
========================================================= */

.case-overview {
  padding:
    105px
    clamp(42px,6vw,95px);

  display: grid;

  grid-template-columns:
    1fr
    1fr;

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

  align-items: center;
}


.overview-gallery {
  display: grid;

  grid-template-columns:
    .8fr
    1fr;

  gap: 16px;

  align-items: end;
}


.overview-gallery img {
  display: block;

  width: 100%;

  object-fit: cover;

  border:
    1px solid
    rgba(242,239,228,.13);
}


.overview-gallery img:first-child {
  height: 390px;
}


.overview-gallery img:last-child {
  height: 310px;
}


.overview-copy h3,
.deliverables h3,
.results-heading h3,
.feature-heading h3 {
  margin:
    20px
    0
    24px;

  font-size:
    clamp(38px,4.3vw,68px);

  font-weight: 900;

  line-height: .92;

  letter-spacing: -.055em;

  text-transform: uppercase;
}


.overview-copy p {
  color: var(--soft);

  font-size: 14px;
  font-weight: 600;

  line-height: 1.7;
}


/* =========================================================
   WEBSITE STRATEGY
========================================================= */

.strategy-grid {
  padding:
    25px
    clamp(42px,6vw,95px)
    100px;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 18px;
}


.strategy-card {
  min-height: 310px;

  padding: 40px;

  display: flex;
  flex-direction: column;

  border:
    1px solid
    rgba(242,239,228,.14);
}


.strategy-card.dark {
  background:
    rgba(4,10,6,.52);
}


.strategy-card.lime {
  background:
    rgba(185,223,114,.92);

  color: #071009;
}


.strategy-card span {
  font-size: 9px;
  font-weight: 900;

  letter-spacing: .15em;
}


.strategy-card h3 {
  margin:
    45px
    0
    20px;

  font-size:
    clamp(28px,3vw,46px);

  font-weight: 900;

  line-height: .95;

  letter-spacing: -.05em;

  text-transform: uppercase;
}


.strategy-card p {
  margin-top: auto;

  max-width: 430px;

  font-size: 12px;
  font-weight: 600;

  line-height: 1.6;

  opacity: .75;
}


/* =========================================================
   WEBSITE DELIVERABLES
========================================================= */

.deliverables {
  padding:
    100px
    clamp(42px,6vw,95px);
}


.deliverable-list {
  margin-top: 60px;

  border-top:
    1px solid
    rgba(242,239,228,.17);
}


.deliverable-row {
  min-height: 90px;

  display: grid;

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

  align-items: center;

  border-bottom:
    1px solid
    rgba(242,239,228,.17);
}


.deliverable-row span {
  color: var(--muted);

  font-size: 10px;
}


.deliverable-row strong {
  font-size:
    clamp(18px,2vw,29px);

  font-weight: 800;
}


.deliverable-row i {
  color: var(--accent);

  font-size: 19px;
  font-style: normal;
}


/* =========================================================
   WEBSITE RESULTS
========================================================= */

.results-section {
  padding:
    100px
    clamp(42px,6vw,95px);

  background:
    rgba(3,9,5,.28);

  border-top:
    1px solid
    rgba(242,239,228,.11);

  border-bottom:
    1px solid
    rgba(242,239,228,.11);
}


.results-list {
  margin-top: 65px;
}


.results-list article {
  padding:
    38px
    0;

  display: grid;

  grid-template-columns:
    .55fr
    1fr;

  align-items: center;

  border-top:
    1px solid
    rgba(242,239,228,.17);
}


.results-list article:last-child {
  border-bottom:
    1px solid
    rgba(242,239,228,.17);
}


.results-list strong {
  font-size:
    clamp(60px,8vw,125px);

  font-weight: 900;

  line-height: .8;

  letter-spacing: -.07em;
}


.results-list p {
  max-width: 430px;

  color: var(--soft);

  font-size: 18px;
  font-weight: 700;

  line-height: 1.4;
}


/* =========================================================
   WEBSITE FEATURE
========================================================= */

.case-feature {
  padding:
    110px
    clamp(42px,6vw,95px);
}


.feature-heading {
  max-width: 780px;

  margin:
    0
    auto
    55px;

  text-align: center;
}


.case-feature > img {
  display: block;

  width: 100%;
  height: 560px;

  object-fit: cover;

  border:
    1px solid
    rgba(242,239,228,.13);
}


/* =========================================================
   WEBSITE EXTRA GALLERY
========================================================= */

.website-gallery-section {
  padding:
    110px
    clamp(42px,6vw,95px);
}


.website-gallery-heading {
  margin-bottom: 60px;

  display: grid;

  grid-template-columns:
    1fr
    .45fr;

  gap: 60px;

  align-items: end;
}


.website-gallery-heading h3 {
  margin:
    20px
    0
    0;

  font-size:
    clamp(48px,5.5vw,86px);

  font-weight: 900;

  line-height: .88;

  letter-spacing: -.06em;

  text-transform: uppercase;
}


.website-gallery-heading p {
  margin: 0;

  color: var(--soft);

  font-size: 14px;

  line-height: 1.7;
}


.website-project-gallery {
  display: grid;

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

  gap: 16px;
}


.website-gallery-item {
  margin: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(242,239,228,.12);

  background:
    rgba(3,9,5,.30);
}


.website-gallery-item img {
  display: block;

  width: 100%;
  height: auto;

  transition:
    transform .5s var(--ease);
}


.website-gallery-item:hover img {
  transform:
    scale(1.015);
}


.website-gallery-item:nth-child(3),
.website-gallery-item:nth-child(6) {
  grid-column:
    1 / -1;
}


/* =========================================================
   SOCIAL / REELS HERO
========================================================= */

.social-hero {
  min-height:
    calc(100vh - 100px);

  padding:
    110px
    clamp(42px,6vw,95px)
    80px;

  display: grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(300px,.7fr);

  gap:
    clamp(65px,9vw,150px);

  align-items: center;
}


.social-hero-main {
  max-width: 780px;
}


.social-hero-main h2 {
  margin:
    26px
    0
    30px;

  font-size:
    clamp(70px,8vw,135px);

  font-weight: 900;

  line-height: .80;

  letter-spacing: -.075em;

  text-transform: uppercase;
}


.social-intro {
  max-width: 680px;

  color: var(--soft);

  font-size:
    clamp(16px,1.45vw,21px);

  font-weight: 600;

  line-height: 1.55;
}


/* =========================================================
   SOCIAL / REEL STATS
========================================================= */

.social-hero-stats {
  border-top:
    1px solid
    rgba(242,239,228,.14);
}


.social-hero-stats article {
  min-height: 110px;

  padding:
    22px
    0;

  display: grid;

  grid-template-columns:
    105px
    1fr;

  gap: 20px;

  align-items: center;

  border-bottom:
    1px solid
    rgba(242,239,228,.14);
}


.social-hero-stats strong {
  color: var(--accent);

  font-size:
    clamp(35px,3.4vw,55px);

  font-weight: 900;

  line-height: 1;
}


.social-hero-stats span {
  max-width: 180px;

  color: var(--soft);

  font-size: 10px;
  font-weight: 800;

  line-height: 1.4;

  text-transform: uppercase;
}


/* =========================================================
   SOCIAL / REEL OVERVIEW
========================================================= */

.social-overview {
  padding:
    110px
    clamp(42px,6vw,95px);

  display: grid;

  grid-template-columns:
    .95fr
    1.05fr;

  gap:
    clamp(70px,10vw,160px);

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


.social-overview-heading h3 {
  margin:
    20px
    0
    0;

  font-size:
    clamp(45px,5vw,78px);

  font-weight: 900;

  line-height: .90;

  letter-spacing: -.06em;

  text-transform: uppercase;
}


.social-overview-copy {
  padding-top: 30px;
}


.social-overview-copy p {
  margin:
    0
    0
    24px;

  color: var(--soft);

  font-size: 15px;
  font-weight: 600;

  line-height: 1.75;
}


/* =========================================================
   SOCIAL / REEL STRATEGY
========================================================= */

.social-strategy-grid {
  padding:
    25px
    clamp(42px,6vw,95px)
    110px;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 18px;
}


.social-strategy-card {
  min-height: 340px;

  padding: 42px;

  display: flex;
  flex-direction: column;

  border:
    1px solid
    rgba(242,239,228,.14);

  background:
    rgba(4,10,6,.50);
}


.social-strategy-card--accent {
  color: #071009;

  background:
    var(--accent);
}


.social-strategy-card--accent
.section-kicker {
  color:
    rgba(7,16,9,.55);
}


.social-strategy-card h3 {
  margin:
    50px
    0
    25px;

  font-size:
    clamp(29px,3vw,48px);

  font-weight: 900;

  line-height: .94;

  letter-spacing: -.05em;

  text-transform: uppercase;
}


.social-strategy-card p {
  margin-top: auto;

  color: var(--soft);

  font-size: 13px;
  font-weight: 600;

  line-height: 1.65;
}


.social-strategy-card--accent p {
  color:
    rgba(7,16,9,.70);
}


/* =========================================================
   SOCIAL / REEL DELIVERABLES
========================================================= */

.social-deliverables {
  padding:
    105px
    clamp(42px,6vw,95px);
}


.social-deliverables > h3 {
  margin:
    20px
    0
    60px;

  font-size:
    clamp(42px,5vw,76px);

  font-weight: 900;

  line-height: .90;

  letter-spacing: -.06em;

  text-transform: uppercase;
}


.social-deliverable-list {
  border-top:
    1px solid
    rgba(242,239,228,.16);
}


.social-deliverable-row {
  min-height: 82px;

  display: grid;

  grid-template-columns:
    75px
    1fr;

  align-items: center;

  border-bottom:
    1px solid
    rgba(242,239,228,.16);
}


.social-deliverable-row span {
  color: var(--accent);

  font-size: 10px;
  font-weight: 900;
}


.social-deliverable-row strong {
  font-size:
    clamp(17px,1.8vw,27px);

  font-weight: 800;
}


/* =========================================================
   SOCIAL / REEL RESULTS
========================================================= */

.social-results {
  padding:
    105px
    clamp(42px,6vw,95px);

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

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

  background:
    rgba(3,9,5,.28);
}


.social-results > h3 {
  margin:
    20px
    0
    60px;

  font-size:
    clamp(42px,5vw,75px);

  font-weight: 900;

  line-height: .9;

  letter-spacing: -.055em;

  text-transform: uppercase;
}


.social-results-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 80px;
}


.social-results-grid article {
  padding-top: 34px;

  border-top:
    1px solid
    rgba(242,239,228,.15);
}


.social-results-grid strong {
  display: block;

  margin-bottom: 30px;

  font-size:
    clamp(70px,8vw,125px);

  font-weight: 900;

  line-height: .8;

  letter-spacing: -.07em;
}


.social-results-grid p {
  max-width: 450px;

  color: var(--soft);

  font-size: 16px;
  font-weight: 600;

  line-height: 1.55;
}


/* =========================================================
   SOCIAL IMAGE GALLERY
========================================================= */

.social-gallery-section,
.reels-gallery-section {
  padding:
    120px
    clamp(42px,6vw,95px);
}


.social-gallery-heading {
  margin-bottom: 65px;

  display: grid;

  grid-template-columns:
    1fr
    .5fr;

  gap: 70px;

  align-items: end;
}


.social-gallery-heading h3 {
  margin:
    20px
    0
    0;

  font-size:
    clamp(48px,5.5vw,86px);

  font-weight: 900;

  line-height: .88;

  letter-spacing: -.06em;

  text-transform: uppercase;
}


.social-gallery-heading > p {
  margin: 0;

  color: var(--soft);

  font-size: 14px;

  line-height: 1.7;
}


.social-gallery {
  display: grid;

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

  gap: 16px;
}


.social-gallery-item {
  margin: 0;

  overflow: hidden;

  min-width: 0;

  border:
    1px solid
    rgba(242,239,228,.12);

  background:
    rgba(3,9,5,.40);
}


.social-gallery-item img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;

  transition:
    transform .5s var(--ease);
}


.social-gallery-item:hover img {
  transform:
    scale(1.02);
}


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

.reels-gallery {
  display: grid;

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

  gap: 24px;
}


.reel-gallery-item {
  position: relative;

  margin: 0;

  overflow: hidden;

  aspect-ratio: 9 / 16;

  border:
    1px solid
    rgba(242,239,228,.14);

  background: #030503;

  transition:
    transform .4s var(--ease),
    border-color .3s ease;
}


.reel-gallery-item:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(185,223,114,.40);
}


.reel-gallery-item video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  background: #000;
}


.reel-gallery-number {
  position: absolute;

  top: 14px;
  left: 14px;

  z-index: 3;

  padding:
    7px
    9px;

  color: var(--accent);

  background:
    rgba(0,0,0,.62);

  backdrop-filter:
    blur(10px);

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

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .11em;

  pointer-events: none;
}


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

.case-final {
  padding:
    130px
    35px;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 100%,
      rgba(185,223,114,.10),
      transparent 40%
    ),
    rgba(2,8,4,.25);
}


.case-final p {
  color: var(--soft);

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .20em;
}


.case-final h3 {
  margin:
    22px
    0
    35px;

  font-size:
    clamp(48px,6vw,90px);

  font-weight: 900;

  line-height: .87;

  letter-spacing: -.065em;

  text-transform: uppercase;
}


.case-final em {
  color: var(--accent);

  font-style: normal;
}


.final-button {
  display: inline-flex;

  padding:
    15px
    24px;

  border-radius: 100px;

  background: var(--accent);

  color: #071009;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .10em;
}


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

@media (max-width: 1050px) {

  :root {
    --sidebar-width: 230px;
  }


  .case-hero,
  .social-hero,
  .case-overview,
  .social-overview {
    grid-template-columns: 1fr;
  }


  .main-nav > a:not(.nav-cta) {
    display: none;
  }


  .social-gallery,
  .reels-gallery {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


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

@media (max-width: 760px) {

  .topbar {
    padding:
      12px
      20px;
  }


  .brand-logo {
    height: 48px;
  }


  .work-shell {
    display: block;

    padding-top: 78px;
  }


  .client-sidebar {
    position: relative;
    top: 0;

    width: 100%;
    height: auto;

    padding:
      28px
      22px
      35px;
  }


  .sidebar-heading h1 {
    font-size: 44px;
  }


  .sidebar-bottom {
    display: none;
  }


  .case-hero,
  .social-hero {
    min-height: auto;

    padding:
      70px
      22px;

    grid-template-columns: 1fr;
  }


  .case-hero h2,
  .social-hero-main h2 {
    font-size:
      clamp(52px,14vw,78px);
  }


  .case-stats {
    padding:
      50px
      22px;

    grid-template-columns: 1fr;
  }


  .case-overview,
  .deliverables,
  .results-section,
  .case-feature,
  .website-gallery-section,
  .social-overview,
  .social-deliverables,
  .social-results,
  .social-gallery-section,
  .reels-gallery-section {
    padding:
      70px
      22px;
  }


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


  .overview-gallery img:first-child,
  .overview-gallery img:last-child {
    height: 250px;
  }


  .strategy-grid,
  .social-strategy-grid {
    padding:
      20px
      22px
      70px;

    grid-template-columns: 1fr;
  }


  .social-hero-stats article {
    grid-template-columns:
      85px
      1fr;
  }


  .social-results-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }


  .social-gallery-heading,
  .website-gallery-heading {
    grid-template-columns: 1fr;

    gap: 25px;
  }


  .social-gallery,
  .reels-gallery {
    grid-template-columns:
      1fr
      1fr;

    gap: 10px;
  }


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


  .website-gallery-item:nth-child(3),
  .website-gallery-item:nth-child(6) {
    grid-column: auto;
  }


  .results-list article {
    grid-template-columns: 1fr;

    gap: 20px;
  }


  .case-feature > img {
    height: 320px;
  }


  .case-final {
    padding:
      90px
      22px;
  }

}


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

@media (max-width: 480px) {

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


  .reels-gallery {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


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


  .overview-gallery img:first-child,
  .overview-gallery img:last-child {
    height: auto;
  }

}

/* =========================================================
   FIX REEL STATS OVERLAPPING
========================================================= */

.reel-case-study .social-hero-stats article {
  display: grid;

  grid-template-columns:
    minmax(145px, max-content)
    1fr;

  column-gap: 28px;

  align-items: center;
}


.reel-case-study .social-hero-stats strong {
  width: auto;

  min-width: 0;

  white-space: nowrap;

  font-size:
    clamp(34px, 3vw, 50px);

  line-height: 1;
}


.reel-case-study .social-hero-stats span {
  width: auto;

  max-width: none;

  margin: 0;

  white-space: normal;

  line-height: 1.35;
}


/* TABLET */

@media (max-width: 1100px) {

  .reel-case-study .social-hero-stats article {
    grid-template-columns:
      minmax(125px, max-content)
      1fr;

    column-gap: 20px;
  }


  .reel-case-study .social-hero-stats strong {
    font-size:
      clamp(30px, 3vw, 44px);
  }

}


/* MOBILE */

@media (max-width: 760px) {

  .reel-case-study .social-hero-stats article {
    grid-template-columns:
      minmax(105px, max-content)
      1fr;

    column-gap: 18px;
  }


  .reel-case-study .social-hero-stats strong {
    font-size: 32px;
  }

}

/* =========================================================
   CONSISTENT BODY TEXT
========================================================= */

main p:not(.case-category),
section p:not(.case-category) {
  font-size: 16px !important;
  line-height: 1.65 !important;
}

@media (max-width: 760px) {

  main p:not(.case-category),
  section p:not(.case-category) {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

}