/* =====================================================
   PROJECT TRANSFORMATIONS
   MERGE CONSTRUCTION CORP
   MOBILE-FIRST CASE STUDY SYSTEM
===================================================== */


/* =====================================================
   SECTION
===================================================== */

.project-transformations{
  position:relative;

  padding:84px 18px;

  overflow:hidden;

  background:
    radial-gradient(
      circle at top right,
      rgba(118,192,67,.07),
      transparent 34%
    ),
    #fff;
}


.project-transformations-heading{
  max-width:720px;

  margin-bottom:34px;
}


.project-transformations-heading h2{
  margin-bottom:14px;
}


.project-transformations-heading > p:last-child{
  max-width:680px;

  margin:0;

  color:var(--text);

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


/* =====================================================
   PROJECT CASE
===================================================== */

.project-case{
  display:none;
}


.project-case.active{
  display:grid;

  grid-template-columns:
    minmax(0,580px)
    minmax(340px,470px);

  grid-template-areas:
    "browser browser"
    "visual identity"
    "visual proof";

  column-gap:70px;
  row-gap:18px;

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

  width:100%;
}


/* =====================================================
   PROJECT BROWSER
===================================================== */

.project-browser{
  grid-area:browser;

  display:grid;

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

  align-items:center;

  gap:18px;

  width:100%;

  margin-bottom:4px;
  padding-bottom:13px;

  border-bottom:
    1px solid rgba(31,111,58,.12);
}


/* TEXT LINKS */

.project-nav-link{
  display:inline-flex;
  align-items:center;

  min-height:38px;

  color:var(--brand);

  font-size:12px;
  font-weight:800;
  line-height:1.2;

  text-decoration:none;

  transition:
    color .2s ease,
    opacity .2s ease;
}


.project-nav-prev{
  justify-self:start;
}


.project-nav-next{
  justify-self:end;

  text-align:right;
}


.project-nav-link:hover{
  color:var(--brand-dark);

  text-decoration:underline;
  text-underline-offset:4px;
}


.project-nav-link:focus-visible{
  outline:
    2px solid rgba(118,192,67,.65);

  outline-offset:4px;

  border-radius:4px;
}


/* VERY IMPORTANT */

.project-nav-link[hidden]{
  display:none !important;
}


/* PROJECT COUNTER */

.project-case-counter{
  display:flex;

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

  gap:4px;

  color:var(--muted);

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

  letter-spacing:.06em;

  text-transform:uppercase;

  white-space:nowrap;
}


.project-case-counter span{
  color:var(--brand-dark);
}


/* SINGLE PROJECT */

.project-gallery.is-single-project
.project-browser{
  display:none;
}


/* =====================================================
   PROJECT IDENTITY
===================================================== */

.project-identity{
  grid-area:identity;

  display:flex;

  align-items:center;

  gap:13px;

  min-width:0;

  padding-top:4px;
}


.project-client-avatar{
  position:relative;

  display:grid;
  place-items:center;

  width:48px;
  height:48px;

  flex:0 0 48px;

  overflow:hidden;

  border:
    1px solid rgba(31,111,58,.18);

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #315f43,
      #4d6268
    );

  color:#fff;

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


.project-client-avatar img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}


.project-client-avatar-generic{
  background:
    linear-gradient(
      135deg,
      #eff5ef,
      #dcebdd
    );

  color:var(--brand-dark);
}


.project-identity-copy{
  display:flex;

  flex-direction:column;

  min-width:0;

  gap:3px;
}


.project-identity-copy strong{
  color:var(--dark);

  font-size:17px;
  line-height:1.25;
}


.project-identity-copy span{
  color:var(--brand);

  font-size:12px;
  font-weight:700;
  line-height:1.3;
}


/* =====================================================
   PROJECT VISUAL
===================================================== */

.project-visual{
  grid-area:visual;

  width:100%;
  max-width:580px;

  min-width:0;
}


/* =====================================================
   VIEW TABS
===================================================== */

.project-view-tabs{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:8px;

  width:100%;

  margin-bottom:12px;

  padding:5px;

  border:
    1px solid rgba(31,111,58,.16);

  border-radius:16px;

  background:#f4f7f4;
}


.project-view-tab{
  min-height:46px;

  padding:8px 16px;

  border:
    1px solid transparent;

  border-radius:12px;

  background:transparent;

  color:var(--brand);

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

  cursor:pointer;

  transition:
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}


.project-view-tab:hover{
  background:
    rgba(31,111,58,.07);
}


.project-view-tab.active{
  background:var(--brand);

  border-color:var(--brand);

  color:#fff;

  box-shadow:
    0 8px 20px
    rgba(31,111,58,.20);
}


.project-view-tab:focus-visible{
  outline:
    3px solid rgba(118,192,67,.35);

  outline-offset:2px;
}


/* =====================================================
   PANELS
===================================================== */

.project-view-panel{
  display:none;
}


.project-view-panel.active{
  display:block;
}


/* =====================================================
   BEFORE / AFTER
===================================================== */

.ba-compare{
  --ba-position:50%;

  position:relative;

  width:100%;

  aspect-ratio:4 / 5;

  overflow:hidden;

  border-radius:24px;

  background:#edf1ed;

  box-shadow:
    0 26px 60px rgba(16,24,32,.14);

  user-select:none;
  -webkit-user-select:none;

  touch-action:pan-y;
}


.ba-image{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  pointer-events:none;
}


.ba-after{
  z-index:1;
}


.ba-before{
  z-index:2;

  clip-path:
    inset(
      0
      calc(100% - var(--ba-position))
      0
      0
    );
}


/* =====================================================
   BEFORE / AFTER LABELS
===================================================== */

.ba-label{
  position:absolute;

  top:18px;

  z-index:8;

  display:inline-flex;

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

  min-height:34px;

  padding:6px 12px;

  border-radius:999px;

  background:
    rgba(10,16,22,.78);

  color:#fff;

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

  letter-spacing:.08em;

  text-transform:uppercase;

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

  pointer-events:none;
}


.ba-label-before{
  left:18px;
}


.ba-label-after{
  right:18px;
}


/* =====================================================
   BEFORE / AFTER HANDLE
===================================================== */

.ba-handle{
  position:absolute;

  z-index:10;

  top:0;
  bottom:0;

  left:var(--ba-position);

  width:46px;

  padding:0;

  border:0;

  background:transparent;

  cursor:ew-resize;

  transform:
    translateX(-50%);

  touch-action:none;
}


.ba-handle::before{
  content:"";

  position:absolute;

  top:0;
  bottom:0;

  left:50%;

  width:3px;

  background:#fff;

  transform:
    translateX(-50%);

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


.ba-handle span{
  position:absolute;

  top:50%;
  left:50%;

  display:grid;

  place-items:center;

  width:48px;
  height:48px;

  border-radius:50%;

  background:#fff;

  color:var(--brand);

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

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

  box-shadow:
    0 8px 25px
    rgba(0,0,0,.22);
}


/* =====================================================
   BEHIND THE WORK
===================================================== */

.project-process{
  position:relative;

  width:100%;

  aspect-ratio:4 / 5;

  overflow:hidden;

  border-radius:24px;

  background:#e9eee9;

  box-shadow:
    0 26px 60px rgba(16,24,32,.14);

  touch-action:pan-y;
}


.project-process-slide{
  position:absolute;

  inset:0;

  display:none;

  margin:0;
}


.project-process-slide.active{
  display:block;
}


.project-process-slide img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}


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

.process-caption{
  position:absolute;

  left:16px;
  right:16px;
  bottom:18px;

  z-index:8;

  display:flex;

  align-items:center;

  gap:12px;

  padding:13px 15px;

  border-radius:16px;

  background:
    rgba(10,16,22,.82);

  color:#fff;

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

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.18);
}


.process-step-number{
  display:grid;

  place-items:center;

  width:38px;
  height:38px;

  flex:0 0 38px;

  border-radius:50%;

  background:var(--brand);

  color:#fff;

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


.process-caption div{
  min-width:0;
}


.process-caption strong{
  display:block;

  margin-bottom:2px;

  color:#fff;

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


.process-caption
span:not(.process-step-number){
  display:block;

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

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


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

.process-arrow{
  position:absolute;

  top:50%;

  z-index:12;

  display:grid;

  place-items:center;

  width:48px;
  height:48px;

  padding:0;

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

  border-radius:50%;

  background:
    rgba(255,255,255,.94);

  color:var(--brand-dark);

  font-size:32px;
  line-height:1;

  cursor:pointer;

  transform:
    translateY(-50%);

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.18);

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

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}


.process-arrow:hover{
  background:var(--brand);

  color:#fff;

  transform:
    translateY(-50%)
    scale(1.06);
}


.process-prev{
  left:14px;
}


.process-next{
  right:14px;
}


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

.process-counter{
  position:absolute;

  top:18px;
  left:50%;

  z-index:12;

  display:flex;

  align-items:center;

  padding:7px 12px;

  border-radius:999px;

  background:
    rgba(10,16,22,.78);

  color:#fff;

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

  transform:
    translateX(-50%);

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


/* =====================================================
   PROJECT PROOF
===================================================== */

.project-proof{
  grid-area:proof;

  width:100%;
  max-width:470px;
}


.project-summary{
  margin:0 0 24px;

  max-width:450px;

  color:var(--text);

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


/* =====================================================
   GOOGLE REVIEW
===================================================== */

.project-review{
  padding:24px;

  border:
    1px solid rgba(118,192,67,.55);

  border-radius:20px;

  background:#fff;

  box-shadow:
    0 14px 36px
    rgba(16,24,32,.07);
}


.project-stars{
  margin-bottom:14px;

  color:#fbbc04;

  font-size:20px;

  letter-spacing:2px;
  line-height:1;
}


.project-review blockquote{
  margin:0 0 20px;

  color:var(--dark);

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


.project-review-footer{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:18px;
}


.project-review-author{
  display:flex;

  flex-direction:column;

  gap:2px;
}


.project-review-author strong{
  color:var(--dark);

  font-size:15px;
}


.project-review-author span{
  color:var(--muted);

  font-size:13px;
}


.project-review-link{
  display:inline-flex;

  align-items:center;

  gap:5px;

  color:var(--brand);

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

  white-space:nowrap;

  transition:
    color .2s ease;
}


.project-review-link:hover{
  color:var(--brand-dark);
}


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

@media(max-width:1024px){

  .project-case.active{
    column-gap:38px;

    grid-template-columns:
      minmax(0,1.05fr)
      minmax(300px,.95fr);
  }

}


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

@media(max-width:768px){

  .project-transformations{
    padding:64px 14px;
  }


  .project-transformations-heading{
    margin-bottom:26px;
  }


  .project-transformations-heading > p:last-child{
    font-size:15px;
    line-height:1.6;
  }


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

     Browser
     Client Identity
     Tabs + Canvas
     Context + Review
  ================================================ */

  .project-case.active{
    display:grid;

    grid-template-columns:1fr;

    grid-template-areas:
      "browser"
      "identity"
      "visual"
      "proof";

    row-gap:16px;
  }


  /* BROWSER */

  .project-browser{
    gap:8px;

    margin:0;
    padding-bottom:10px;
  }


  .project-nav-link{
    min-height:34px;

    font-size:11px;
  }


  .project-case-counter{
    font-size:9px;

    letter-spacing:.03em;
  }


  /* IDENTITY */

  .project-identity{
    padding:0;
  }


  .project-client-avatar{
    width:44px;
    height:44px;

    flex-basis:44px;

    font-size:16px;
  }


  .project-identity-copy strong{
    font-size:15px;
  }


  .project-identity-copy span{
    font-size:11px;
  }


  /* VISUAL */

  .project-visual{
    width:100%;

    max-width:none;

    margin:0;
  }


  /* TABS */

  .project-view-tabs{
    gap:6px;

    margin-bottom:9px;

    padding:4px;

    border-radius:14px;
  }


  .project-view-tab{
    min-height:46px;

    padding:7px 8px;

    border-radius:11px;

    font-size:11px;

    white-space:nowrap;
  }


  /* CANVAS */

  .ba-compare,
  .project-process{
    width:100%;

    height:clamp(
      340px,
      57svh,
      520px
    );

    aspect-ratio:auto;

    border-radius:20px;
  }


  /* BEFORE AFTER */

  .ba-label{
    top:14px;

    font-size:10px;
  }


  .ba-label-before{
    left:14px;
  }


  .ba-label-after{
    right:14px;
  }


  /* BEHIND WORK */

  .process-arrow{
    width:46px;
    height:46px;

    font-size:30px;
  }


  .process-prev{
    left:12px;
  }


  .process-next{
    right:12px;
  }


  .process-counter{
    top:14px;
  }


  .process-caption{
    left:12px;
    right:12px;
    bottom:12px;

    gap:10px;

    padding:11px 12px;

    border-radius:14px;
  }


  .process-step-number{
    width:34px;
    height:34px;

    flex-basis:34px;

    font-size:11px;
  }


  .process-caption strong{
    font-size:13px;
  }


  .process-caption
  span:not(.process-step-number){
    font-size:11px;
  }


  /* CONTEXT */

  .project-proof{
    max-width:none;
  }


  .project-summary{
    margin-bottom:18px;

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


  /* REVIEW */

  .project-review{
    padding:18px;

    border-radius:18px;
  }


  .project-review blockquote{
    font-size:15px;

    line-height:1.55;
  }


  .project-review-footer{
    flex-direction:column;

    align-items:flex-start;

    gap:12px;
  }

}


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

@media(max-width:420px){

  .project-transformations{
    padding-left:12px;
    padding-right:12px;
  }


  .project-browser{
    gap:4px;
  }


  .project-nav-link{
    font-size:10px;
  }


  .project-case-counter{
    font-size:8.5px;
  }


  .project-view-tab{
    min-height:44px;

    font-size:10px;
  }


  .ba-compare,
  .project-process{
    height:clamp(
      330px,
      55svh,
      465px
    );

    border-radius:18px;
  }

}


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

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

  .project-view-tab,
  .process-arrow,
  .project-nav-link,
  .project-review-link{
    transition:none;
  }

}