/* ============================================================
   PORTFOLIO CASE STUDY
   ============================================================ */

:root{
  --case-navy:#081827;
  --case-gold:#d6b56e;
  --case-black:#161616;
  --case-grey:#62666d;
  --case-light:#f6f6f4;
  --case-line:#e5e5e5;

  --sidebar-width:310px;
  --sidebar-mini:76px;
}


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

.case-page{
  margin:0;
  background:#fff;
  color:var(--case-black);
  font-family:var(--sans);
}

.case-page *{
  box-sizing:border-box;
}

.case-page img{
  display:block;
  width:100%;
}


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

.case-header{
  background:var(--case-navy);
  z-index:1000;
}


/* ============================================================
   APP
   ============================================================ */

.case-app{
  position:relative;
  display:flex;
  padding-top:82px;
}


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

.case-sidebar{
  position:fixed;
  top:82px;
  bottom:0;
  left:0;

  width:var(--sidebar-width);

  background:var(--case-navy);
  color:#fff;

  display:flex;
  flex-direction:column;

  z-index:800;

  transition:
    width .45s cubic-bezier(.2,.8,.2,1);
}


/* ============================================================
   SIDEBAR TOP
   ============================================================ */

.case-sidebar__top{
  min-height:150px;

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

  padding:32px 25px 25px 30px;

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


.case-sidebar__brand{
  transition:
    opacity .25s ease,
    transform .35s ease;
}


.case-sidebar__eyebrow{
  display:block;
  margin-bottom:12px;

  color:var(--case-gold);

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

  letter-spacing:.28em;
}


.case-sidebar__brand strong{
  display:block;

  font-family:var(--serif);

  font-size:31px;
  line-height:.92;

  font-weight:400;
}


/* ============================================================
   TOGGLE
   ============================================================ */

.case-sidebar__toggle{
  width:42px;
  height:42px;

  flex:0 0 auto;

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

  padding:0;

  border:
    1px solid rgba(255,255,255,.2);

  border-radius:50%;

  background:transparent;

  color:#fff;

  font-size:19px;

  cursor:pointer;

  transition:
    background .25s ease,
    color .25s ease,
    transform .35s ease;
}


.case-sidebar__toggle:hover{
  background:var(--case-gold);
  color:var(--case-navy);
}


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

.case-company-nav{
  flex:1;
  padding:15px 0;

  overflow-y:auto;
}


.case-company{
  position:relative;

  width:100%;
  min-height:87px;

  display:flex;
  align-items:center;

  gap:16px;

  padding:18px 25px;

  border:0;
  border-bottom:
    1px solid rgba(255,255,255,.08);

  background:transparent;

  color:#fff;

  text-align:left;

  cursor:pointer;

  transition:
    background .3s ease,
    color .3s ease;
}


.case-company::before{
  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:4px;

  transform:scaleY(0);

  background:var(--case-gold);

  transition:transform .3s ease;
}


.case-company:hover{
  background:
    rgba(255,255,255,.05);
}


.case-company.is-active{
  background:
    rgba(214,181,110,.12);
}


.case-company.is-active::before{
  transform:scaleY(1);
}


.case-company__number{
  min-width:25px;

  color:
    rgba(255,255,255,.42);

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


.case-company__content{
  display:block;

  overflow:hidden;

  transition:
    opacity .2s ease,
    width .35s ease;
}


.case-company__content strong{
  display:block;

  font-family:var(--serif);

  font-size:22px;
  font-weight:400;

  white-space:nowrap;
}


.case-company__content small{
  display:block;

  margin-top:6px;

  color:
    rgba(255,255,255,.45);

  font-size:9px;

  text-transform:uppercase;
  letter-spacing:.12em;

  white-space:nowrap;
}


/* ============================================================
   SIDEBAR BOTTOM
   ============================================================ */

.case-sidebar__bottom{
  padding:25px 30px 32px;

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

  transition:opacity .25s ease;
}


.case-sidebar__bottom span{
  display:block;

  margin-bottom:12px;

  color:
    rgba(255,255,255,.45);

  font-size:9px;

  letter-spacing:.16em;
}


.case-sidebar__bottom a{
  color:var(--case-gold);

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

  text-decoration:none;
}


/* ============================================================
   COLLAPSED SIDEBAR
   ============================================================ */

.case-app.sidebar-collapsed .case-sidebar{
  width:var(--sidebar-mini);
}


.case-app.sidebar-collapsed
.case-sidebar__brand,

.case-app.sidebar-collapsed
.case-sidebar__bottom{
  opacity:0;
  pointer-events:none;
}


.case-app.sidebar-collapsed
.case-sidebar__top{
  padding:
    32px
    16px;

  justify-content:center;
}


.case-app.sidebar-collapsed
.case-sidebar__toggle{
  transform:rotate(180deg);
}


.case-app.sidebar-collapsed
.case-company{
  padding:
    20px
    0;

  justify-content:center;
}


.case-app.sidebar-collapsed
.case-company__number{
  min-width:0;
  text-align:center;
}


.case-app.sidebar-collapsed
.case-company__content{
  display:none;
}


/* ============================================================
   RIGHT CONTENT
   ============================================================ */

.case-content{
  width:
    calc(100% - var(--sidebar-width));

  margin-left:var(--sidebar-width);

  background:#fff;

  transition:
    margin-left .45s cubic-bezier(.2,.8,.2,1),
    width .45s cubic-bezier(.2,.8,.2,1);
}


.case-app.sidebar-collapsed
.case-content{
  margin-left:var(--sidebar-mini);

  width:
    calc(100% - var(--sidebar-mini));
}


/* ============================================================
   CASE STUDY
   ============================================================ */

.case-study{
  width:100%;

  max-width:1600px;

  margin:0 auto;

  background:#fff;

  opacity:1;

  transition:
    opacity .18s ease,
    transform .25s ease;
}


.case-study.is-changing{
  opacity:0;
  transform:translateY(12px);
}


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

.case-hero{
  position:relative;

  min-height:850px;

  padding:
    100px
    7%
    80px;

  display:grid;

  grid-template-columns:
    .82fr
    1.18fr;

  align-items:center;

  gap:65px;

  overflow:hidden;
}


.case-kicker{
  margin-bottom:40px;

  display:flex;

  flex-direction:column;

  gap:6px;

  font-size:16px;
}


.case-kicker span:first-child{
  color:var(--case-gold);

  font-size:32px;
  font-weight:700;
}


.case-kicker span:last-child{
  color:var(--case-black);

  font-size:18px;
}


.case-hero h1{
  max-width:520px;

  margin:0;

  font-family:var(--sans);

  font-size:
    clamp(52px,5.3vw,96px);

  line-height:.92;

  letter-spacing:-.055em;

  font-weight:800;
}


.case-hero__intro{
  max-width:520px;

  margin:28px 0 0;

  font-size:29px;
  line-height:1.16;

  font-weight:400;
}


.case-hero__description{
  max-width:470px;

  margin-top:42px;
}


.case-hero__description p{
  margin:0;

  color:#56595d;

  font-size:14px;
  line-height:1.75;
}


/* HERO VISUAL */

.case-hero__visual{
  position:relative;

  min-height:690px;
}


.hero-card{
  position:absolute;

  overflow:hidden;

  background:#eee;

  box-shadow:
    0 18px 50px
    rgba(0,0,0,.08);
}


.hero-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}


.hero-card--back{
  top:-35px;
  right:-8%;

  width:58%;
  height:640px;

  transform:rotate(10deg);
}


.hero-card--front{
  left:4%;
  top:120px;

  width:54%;
  height:530px;

  transform:rotate(-8deg);
}


.case-doodle{
  position:absolute;

  color:#7d8085;

  font-size:38px;
}


.case-doodle--star{
  left:3%;
  bottom:20px;
}


.case-doodle--circle{
  right:0;
  bottom:75px;
}


.case-hero__decor{
  position:absolute;

  left:6%;
  top:57px;

  color:#5c6065;

  letter-spacing:10px;
}


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

.case-overview{
  position:relative;

  min-height:760px;

  padding:
    80px
    8%
    100px;

  display:grid;

  grid-template-columns:
    1fr
    1.1fr;

  align-items:center;

  gap:100px;
}


.overview-device{
  position:relative;

  height:620px;
}


.overview-device__back,
.overview-device__front{
  position:absolute;

  width:235px;
  height:470px;

  overflow:hidden;

  border-radius:26px;

  background:#fff;

  box-shadow:
    0 20px 45px
    rgba(0,0,0,.13);

  z-index:3;
}


.overview-device__back{
  left:8%;
  bottom:0;

  transform:rotate(-10deg);
}


.overview-device__front{
  left:36%;
  top:20px;

  transform:rotate(-1deg);
}


.overview-device img{
  width:100%;
  height:100%;
  object-fit:cover;
}


.overview-circle{
  position:absolute;

  width:380px;
  height:380px;

  border-radius:50%;

  left:18%;
  top:100px;

  background:
    rgba(214,181,110,.18);

  box-shadow:
    0 0 0 65px
    rgba(214,181,110,.08);
}


.mini-label{
  color:var(--case-gold);

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

  letter-spacing:.18em;
}


.overview-copy h2{
  margin:
    12px
    0
    28px;

  font-size:
    clamp(38px,4vw,62px);

  line-height:1;

  letter-spacing:-.04em;
}


.overview-copy > p{
  max-width:660px;

  color:#555a60;

  font-size:16px;
  line-height:1.8;
}


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

.case-stats{
  display:grid;

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

  gap:22px;

  margin-top:55px;
}


.case-stat{
  padding-top:18px;

  border-top:
    2px solid
    var(--case-gold);
}


.case-stat strong{
  display:block;

  color:var(--case-navy);

  font-size:28px;
}


.case-stat span{
  display:block;

  margin-top:5px;

  color:#72767b;

  font-size:10px;
}


/* ============================================================
   PROBLEM / SOLUTION
   ============================================================ */

.case-problem,
.case-solution{
  min-height:650px;

  padding:
    90px
    10%;

  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:90px;

  align-items:center;
}


.statement-heading{
  display:flex;

  align-items:baseline;

  gap:7px;

  margin-bottom:35px;
}


.statement-heading span{
  color:var(--case-gold);

  font-size:29px;
  font-weight:700;
}


.statement-heading strong{
  font-size:29px;
  font-weight:600;
}


.statement-copy ul{
  margin:0;
  padding:0;

  list-style:none;
}


.statement-copy li{
  position:relative;

  margin:17px 0;

  padding-left:21px;

  color:#41454a;

  font-size:14px;
  line-height:1.6;
}


.statement-copy li::before{
  content:"";

  position:absolute;

  left:0;
  top:8px;

  width:7px;
  height:7px;

  border-radius:50%;

  background:#dc3838;
}


.statement-copy--solution li::before{
  background:#30c85a;
}


/* PROBLEM VISUAL */

.problem-visual{
  position:relative;

  height:460px;

  display:flex;

  align-items:flex-end;

  justify-content:center;
}


.problem-visual img{
  position:relative;

  z-index:2;

  width:75%;
  height:100%;

  object-fit:contain;

  filter:grayscale(1);
}


.problem-question{
  position:absolute;

  z-index:1;

  top:-20px;

  font-family:var(--serif);

  color:
    rgba(214,181,110,.18);

  font-size:360px;

  line-height:1;
}


/* SOLUTION VISUAL */

.solution-visual{
  position:relative;

  min-height:520px;
}


.solution-rings{
  position:absolute;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;
}


.solution-rings span{
  position:absolute;

  border-radius:50%;

  background:
    rgba(214,181,110,.1);
}


.solution-rings span:nth-child(1){
  width:420px;
  height:420px;
}


.solution-rings span:nth-child(2){
  width:310px;
  height:310px;

  background:
    rgba(214,181,110,.16);
}


.solution-rings span:nth-child(3){
  width:210px;
  height:210px;

  background:
    rgba(214,181,110,.26);
}


.solution-phone{
  position:absolute;

  z-index:4;

  left:50%;
  top:50%;

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

  width:240px;
  height:480px;

  overflow:hidden;

  border-radius:28px;

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.15);
}


.solution-phone img{
  width:100%;
  height:100%;
  object-fit:cover;
}


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

.case-process{
  padding:
    120px
    8%;

  background:#f7f7f5;
}


.case-section-heading span{
  display:block;

  color:var(--case-gold);

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

  letter-spacing:.2em;
}


.case-section-heading h2{
  margin:
    8px
    0
    55px;

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

  line-height:1;
}


.process-grid{
  display:grid;

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

  gap:22px;
}


.process-grid article{
  min-height:260px;

  padding:
    25px
    23px;

  background:#fff;

  border:
    1px solid #e5e5e5;
}


.process-grid article > span{
  color:var(--case-gold);

  font-size:11px;
}


.process-grid h3{
  margin:
    50px
    0
    16px;

  font-family:var(--serif);

  font-size:28px;
  font-weight:400;
}


.process-grid p{
  margin:0;

  color:#666a70;

  font-size:12px;
  line-height:1.7;
}


/* ============================================================
   FEATURE IMAGE
   ============================================================ */

.case-feature{
  padding:
    110px
    8%;
}


.case-feature__header span{
  color:var(--case-gold);

  font-size:11px;
  font-weight:700;
}


.case-feature__header h2{
  margin:
    5px
    0
    45px;

  font-size:58px;
}


.case-feature__image{
  width:100%;
  height:700px;

  overflow:hidden;

  background:#eee;
}


.case-feature__image img{
  width:100%;
  height:100%;

  object-fit:cover;
}


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

.case-gallery{
  padding:
    0
    8%
    120px;

  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:30px;
}


.case-gallery > div{
  overflow:hidden;
}


.case-gallery img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .7s ease;
}


.case-gallery > div:hover img{
  transform:scale(1.04);
}


.case-gallery__one{
  height:630px;
}


.case-gallery__two{
  height:400px;
}


.case-gallery__three{
  height:500px;

  margin-top:-200px;
}


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

.case-results{
  padding:
    120px
    8%;

  background:var(--case-navy);

  color:#fff;
}


.results-layout{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:100px;

  align-items:end;
}


.results-big strong{
  display:block;

  font-family:var(--serif);

  color:var(--case-gold);

  font-size:
    clamp(100px,12vw,210px);

  line-height:.8;

  font-weight:400;
}


.results-big span{
  display:block;

  margin-top:35px;

  font-size:12px;

  letter-spacing:.18em;
}


.results-list > div{
  display:grid;

  grid-template-columns:
    45px
    1fr;

  gap:20px;

  padding:25px 0;

  border-top:
    1px solid
    rgba(255,255,255,.16);
}


.results-list span{
  color:var(--case-gold);

  font-size:10px;
}


.results-list p{
  margin:0;

  font-family:var(--serif);

  font-size:26px;
}


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

.case-end{
  padding:
    130px
    8%
    150px;

  text-align:center;
}


.case-end > span{
  color:var(--case-gold);

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

  letter-spacing:.22em;
}


.case-end h2{
  max-width:850px;

  margin:
    25px auto
    45px;

  font-family:var(--serif);

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

  line-height:1;
  font-weight:400;
}


.case-end a{
  display:inline-flex;

  align-items:center;

  gap:25px;

  padding:
    18px
    25px;

  background:var(--case-navy);

  color:#fff;

  text-decoration:none;

  font-size:11px;

  letter-spacing:.12em;
}


.case-end a span{
  color:var(--case-gold);
}


/* ============================================================
   MOBILE SIDEBAR BUTTON
   ============================================================ */

.case-sidebar-open{
  display:none;
}


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

@media(max-width:1150px){

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

  .case-hero{
    grid-template-columns:
      .9fr
      1.1fr;

    padding-inline:6%;
  }

  .case-hero__visual{
    min-height:560px;
  }

  .hero-card--back{
    height:520px;
  }

  .hero-card--front{
    height:440px;
  }

  .case-overview{
    gap:40px;
  }

  .case-stats{
    grid-template-columns:
      1fr
      1fr;
  }

  .process-grid{
    grid-template-columns:
      1fr
      1fr;
  }

}


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

@media(max-width:800px){

  .case-app{
    padding-top:72px;
  }

  .case-sidebar{
    top:72px;

    width:min(82vw,330px);

    transform:translateX(-100%);

    transition:transform .4s ease;
  }

  .case-app.mobile-sidebar-open
  .case-sidebar{
    transform:translateX(0);
  }

  .case-sidebar__toggle{
    display:none;
  }

  .case-sidebar-open{
    position:fixed;

    z-index:750;

    left:0;
    top:115px;

    display:flex;

    align-items:center;

    gap:13px;

    padding:
      12px
      15px;

    border:0;

    background:var(--case-gold);

    color:var(--case-navy);

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

    letter-spacing:.1em;

    cursor:pointer;
  }

  .case-content,
  .case-app.sidebar-collapsed
  .case-content{
    width:100%;
    margin-left:0;
  }

  .case-hero{
    min-height:auto;

    padding:
      100px
      24px
      80px;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:55px;
  }

  .case-hero__visual{
    min-height:520px;
  }

  .hero-card--front{
    left:0;
  }

  .case-overview{
    display:flex;

    flex-direction:column;

    padding:
      70px
      24px;
  }

  .overview-device{
    width:100%;
  }

  .case-problem,
  .case-solution{
    padding:
      70px
      24px;

    grid-template-columns:1fr;
  }

  .case-solution
  .solution-visual{
    order:2;
  }

  .case-stats{
    grid-template-columns:
      1fr
      1fr;
  }

  .case-process{
    padding:
      80px
      24px;
  }

  .process-grid{
    grid-template-columns:1fr;
  }

  .case-feature{
    padding:
      80px
      24px;
  }

  .case-feature__image{
    height:450px;
  }

  .case-gallery{
    padding:
      0
      24px
      80px;

    display:flex;

    flex-direction:column;
  }

  .case-gallery > div{
    height:400px;
    margin:0;
  }

  .case-results{
    padding:
      80px
      24px;
  }

  .results-layout{
    grid-template-columns:1fr;
  }

  .case-end{
    padding:
      90px
      24px;
  }

}


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

@media(max-width:480px){

  .case-hero h1{
    font-size:52px;
  }

  .case-kicker span:first-child{
    font-size:23px;
  }

  .case-hero__intro{
    font-size:22px;
  }

  .case-hero__visual{
    min-height:430px;
  }

  .hero-card--back{
    width:62%;
    height:400px;
  }

  .hero-card--front{
    top:90px;

    width:60%;
    height:340px;
  }

  .overview-device{
    height:480px;
  }

  .overview-device__back,
  .overview-device__front{
    width:170px;
    height:350px;
  }

  .overview-circle{
    width:270px;
    height:270px;
  }

  .case-stats{
    grid-template-columns:1fr 1fr;
  }

}

/* ============================================================
   FIX PORTFOLIO TOP NAVBAR
   ============================================================ */

.case-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;

  width:100% !important;

  background:#081827 !important;

  z-index:9999 !important;

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

  border-bottom:1px solid rgba(255,255,255,.08) !important;
}


/* LOGO */

.case-header .brand{
  color:#f1f1f1 !important;
  opacity:1 !important;
  text-decoration:none !important;
}


/* NAVIGATION */

.case-header .nav a{
  color:#f1f1f1 !important;
  opacity:.82 !important;
  text-decoration:none !important;
}

.case-header .nav a:hover{
  color:#ffffff !important;
  opacity:1 !important;
}

.case-header .nav a[aria-current="page"],
.case-header .nav a[aria-current="true"]{
  color:#d6b56e !important;
  opacity:1 !important;
}


/* CONTACT BUTTON */

.case-header > .hdr__in > .btn,
.case-header .btn--solid{
  display:inline-flex !important;

  background:#f1f1f1 !important;
  color:#081827 !important;

  border:1px solid #f1f1f1 !important;

  opacity:1 !important;
  visibility:visible !important;
}

.case-header .btn--solid:hover{
  background:#d6b56e !important;
  border-color:#d6b56e !important;
  color:#081827 !important;
}


/* KEEP HEADER ABOVE SIDEBAR */

.case-sidebar{
  z-index:800 !important;
}


/* MAKE SURE CONTENT STARTS BELOW HEADER */

.case-app{
  padding-top:82px !important;
}
/* SMALLER SIDEBAR ARROW BUTTON */

.case-sidebar__toggle{
  width:42px !important;
  height:42px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:50% !important;

  background:rgba(214,181,110,.16) !important;
  border:1px solid rgba(214,181,110,.55) !important;

  color:#d6b56e !important;

  opacity:1 !important;
  visibility:visible !important;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease !important;
}

.case-sidebar__toggle .toggle-arrow{
  display:block !important;

  color:#d6b56e !important;

  font-size:20px !important;
  font-weight:400 !important;
  line-height:1 !important;

  opacity:1 !important;
  visibility:visible !important;
}


/* HOVER */

.case-sidebar__toggle:hover{
  background:#d6b56e !important;
  border-color:#d6b56e !important;
}

.case-sidebar__toggle:hover .toggle-arrow{
  color:#ffffff !important;
}