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

body{
  background:#151518;
  color:#fff;
  font-family:'Inter', sans-serif;
}

/* ======================================================
   GLOBAL SECTION TITLE
====================================================== */

.section-title{
  font-family:'Playfair Display', serif;
  font-size:48px;
  font-style:italic;
  font-weight:500;
  color:#fff;
  position:relative;
  margin-bottom:60px;
}

/* SUBTLE LINE */
.section-title::after{
  content:"";

  display:block;

  width:140px;
  height:1px;

  margin-top:25px;

  background:linear-gradient(
    to right,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0.05)
  );
}

/* ======================================================
   SECTION BASE (FIX - REQUIRED)
====================================================== */

.service-section{
  padding:120px 8%;
  position:relative;
}

.service-container{
  max-width:1000px;
}

/* ================= DIVIDER ================= */

.how-divider-line{
  width:140px; 
  height:1px;
  margin-top:40px;
  background:linear-gradient(
    to right,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0.05)
  );
}

.scroll-label{
  font-size:28px;
  letter-spacing:6px;
  color:rgba(255,255,255,0.08);
}

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

.service-hero{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}

/* background image */

.hero-bg{
  position:absolute;
  inset:0;
  
  background:url("../images/IMG_0093.jpg") center/cover no-repeat;

  filter:brightness(0.35); /* VERY IMPORTANT */

  z-index:0;
}

/* overlay gradient (adds depth) */

.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;

  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.4),
    rgba(0,0,0,0.7)
  )
}

/* content */

.service-hero-inner{
  position:relative;
  z-index:2;
  max-width:700px;
  padding:0 20px;
}

/* text */

.service-hero h1{
  font-family:'Playfair Display', serif;
  font-size:64px;
  font-style:italic;
  margin-bottom:20px;
}

.service-hero p{
  font-size:18px;
  opacity:.85;
  line-height:1.8;
}

.service-eyebrow{
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  opacity:.5;
  margin-bottom:15px;
}

/* ======================================================
   IPHONE
====================================================== */

@media (max-width:600px){

    .service-hero{
        height:100svh;
    }
    .service-hero h1{
        font-size:64px;
    }
    .service-hero p{
        font-size:18px;
    }
}


/* ======================================================
   IPAD PRO PORTRAIT
====================================================== */

@media (min-width:601px) and (max-width:1024px){

    .service-hero{
        height:84svh;
    }
    .service-hero h1{
        font-size:82px;
    }
    .service-hero p{
        font-size:20px;
    }
}


/* ======================================================
   IPAD PRO LANDSCAPE
====================================================== */

@media (min-width:1025px) and (max-width:1400px){

    .service-hero{
        height:100svh;
    }
    .service-hero h1{
        font-size:80px;
    }
    .service-hero p{
        font-size:20px;
    }

}


/* ======================================================
   MACBOOK / LAPTOP
====================================================== */

@media (min-width:1401px) and (max-height:900px){

    .service-hero{
        height:100svh;
    }
    .service-hero h1{
        font-size:80px;
    }
    .service-hero p{
        font-size:18px;
    }

}


/* ======================================================
   DESKTOP
====================================================== */

@media (min-width:1401px) and (min-height:901px){

    .service-hero{
        height:100svh;
    }

}


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

.approach-section{
  position:relative;
  padding:200px 8%;
  background:#151518;
  overflow:hidden;
}

/* CONTENT WRAPPER */
.approach-container{
  position:relative;
  z-index:2;
  max-width:1600px;
  margin:0 auto;
}

/* BACKGROUND OUTLINE TEXT */
.approach-bg-text{
  position:absolute;
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-weight:700;
  font-size:360px;
  line-height:0.85;
  letter-spacing:-6px;
  color: rgba(255, 255, 255, 0.03);
  -webkit-text-stroke: none;
  pointer-events:none;
  user-select:none;
  will-change:transform;
}

.approach-section::after{
  content:"";
  position:absolute;
  right:0;
  top:20%;
  width:400px;
  height:400px;
  background:radial-gradient(
    circle,
    rgba(255,255,255,0.08),
    transparent 70%
  );
  filter:blur(60px);
  opacity:0.2;
}


.approach-bg-text.top{
  top:0;
  left:-120px;
}

.approach-bg-text.bottom{
  bottom:220px;
  left:-80px;
}

/* BLOCK BASE */
.approach-block{
  max-width:520px;
  margin-bottom:120px;
}

/* LEFT */
.approach-block.left{
  margin-right:auto;
  text-align:left;
}

.approach-block.left p{
  margin-left:80px;
}

/* RIGHT */
.approach-block.right{
  margin-left:auto;
  text-align:right;
}

.approach-block.right p{
  margin-right:80px;
}

/* TEXT */
.approach-block h2{
  font-family:'Playfair Display', serif;
  font-size:56px;
  font-style:italic;
  font-weight:500;
  color:#fff;
  margin-bottom:24px;
  line-height:1;
}

.approach-block p{
  font-size:17px;
  line-height:1.9;
  opacity:.75;
}

/* REMOVE DIVIDER */
.approach-block + .approach-block{
  border-top:none;
  padding-top:0;
}


@media(max-width:900px){

  .approach-container{
    max-width:100%;
  }

  .approach-bg-text{
      font-size:90px;
      left:-20px;
      -webkit-text-stroke:none;
  }

  .approach-block,
  .approach-block.right{
    margin-left:0;
    text-align:left;
  }

  .approach-block.left p,
  .approach-block.right p{
    margin:0;
  }

  .approach-block{
    margin-bottom:80px;
  }

  .approach-block h2{
    font-size:36px;
  }

}

/* ======================================================
   IPAD / MOBILE — PROBLEM / APPROACH
====================================================== */

@media(max-width:900px){

  .approach-container{
    max-width:100%;
  }

  .approach-block,
  .approach-block.right{
    margin-left:0;
    text-align:left;
  }

  .approach-block.left p,
  .approach-block.right p{
    margin:0;
  }

  .approach-block{
    margin-bottom:80px;
  }

  .approach-block h2{
    font-size:36px;
  }

}

/* ======================================================
   MACBOOK — PROBLEM / APPROACH BACKGROUND
====================================================== */

@media (min-width:1401px) and (max-height:900px){

  .approach-bg-text{
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-weight:500;

    font-size:300px;
    line-height:.85;
    letter-spacing:-6px;

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

    -webkit-text-stroke:0;
    text-shadow:none;
    filter:none;
  }

  .approach-bg-text.top{
    top:80px;
    left:-120px;
  }

  .approach-bg-text.bottom{
    bottom:450px;
    left:-80px;
  }

}

/* ======================================================
   IPHONE — BACKGROUND TYPOGRAPHY
====================================================== */

@media(max-width:600px){

  .approach-bg-text{
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-weight:500;

    font-size:220px;
    line-height:.85;
    letter-spacing:0;

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

    -webkit-text-stroke:0;
    text-shadow:none;
    filter:none;

    pointer-events:none;
    user-select:none;
  }

  .approach-bg-text.top{
      top:20px;
      left:-100px;
  }

  .approach-bg-text.bottom{
      top:200px;
      bottom:auto;
      left:-80px;
  }

}

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

.included-section{
  padding:220px 8%;
  background:#151518;
  position:relative;
  overflow:hidden;
}

/* TOP LINE */

.included-section::before{
  content:"";
  position:absolute;
  top:0;
  left:8%;
  width:60px;
  height:1px;
  background:rgba(255,255,255,0.1);
}


/* ======================================================
   INCLUDED CONTAINER
====================================================== */

.included-container{
  max-width:1400px;
  margin:0 auto;
}


/* ======================================================
   WHAT'S INCLUDED — HEADER
====================================================== */

.included-section .service-eyebrow{
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  opacity:.4;
  margin-bottom:14px;
  margin-left:0;
}

.included-section .section-title{
  margin-left:0;
}

.included-section .section-title::after{
  display:none;
}


/* ======================================================
   IPHONE
====================================================== */

@media (max-width:600px){

  .included-section .service-eyebrow{
    margin-left:0;
  }

  .included-section .section-title{
    margin-left:0;
    font-size:40px;
  }

}


/* ======================================================
   IPAD PRO PORTRAIT
====================================================== */

@media (min-width:601px) and (max-width:1024px){

  .included-section .service-eyebrow{
    margin-left:64px;
  }

  .included-section .section-title{
    margin-left:64px;
    font-size:46px;
  }

}


/* ======================================================
   IPAD PRO LANDSCAPE
====================================================== */

@media (min-width:1025px) and (max-width:1400px){

  .included-section .service-eyebrow{
    margin-left:88px;
  }

  .included-section .section-title{
    margin-left:88px;
    font-size:48px;
  }

}


/* ======================================================
   MACBOOK / LAPTOP
====================================================== */

@media (min-width:1401px) and (max-height:900px){

  .included-section .service-eyebrow{
    margin-left:94px;
  }

  .included-section .section-title{
    margin-left:94px;
    font-size:48px;
  }

}


/* ======================================================
   LARGE DESKTOP
====================================================== */

@media (min-width:1401px) and (min-height:901px){

  .included-section .service-eyebrow{
    margin-left:40px;
  }

  .included-section .section-title{
    margin-left:35px;
    font-size:48px;
  }

}

/* ======================================================
   NODE MAP
====================================================== */

.node-map{
  position:relative;
  width:100%;
  height:1220px;
  margin-top:120px;
}


/* ======================================================
   NODE
====================================================== */

.node{
  position:absolute;

  width:140px;
  height:140px;

  border-radius:50%;

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

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

  opacity:0.18;

  transition:
    opacity 0.8s ease,
    transform 0.8s ease,
    border-color 0.8s ease,
    background 0.8s ease,
    box-shadow 0.8s ease;
}


/* ======================================================
   NUMBER
====================================================== */

.node span{
  font-size:20px;
  letter-spacing:3px;
  opacity:0.75;

  transition:0.8s ease;
}


/* ======================================================
   TEXT
====================================================== */

.node p{
  position:absolute;

  width:280px;
  margin:0;

  font-size:24px;
  line-height:1.5;

  opacity:0;

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


/* ======================================================
   ACTIVE NODE
====================================================== */

.node.active{
  opacity:1;

  transform:scale(1.05);

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

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

  box-shadow:
    0 0 45px rgba(255,255,255,0.05),
    0 20px 50px rgba(0,0,0,0.45);
}

.node.active span{
  opacity:1;
}

.node.active p{
  opacity:1;
}


/* ======================================================
   DESKTOP NODE POSITIONS
====================================================== */

.node-1{
  top:0;
  left:180px;
}

.node-2{
  top:210px;
  right:180px;
}

.node-3{
  top:420px;
  left:180px;
}

.node-4{
  top:630px;
  right:180px;
}

.node-5{
  top:840px;
  left:180px;
}

.node-6{
  top:1050px;
  right:180px;
}


/* ======================================================
   DESKTOP TEXT POSITIONS
====================================================== */

/* LEFT */

.node-1 p,
.node-3 p,
.node-5 p{
  left:200px;
  top:50%;
  transform:translateY(-50%);
}


/* RIGHT */

.node-2 p,
.node-4 p,
.node-6 p{
  right:200px;
  top:50%;

  text-align:right;

  transform:translateY(-50%);
}


/* ======================================================
   IPHONE
====================================================== */

@media (max-width:600px){

  .node-map{
    height:1200px;
    margin-top:100px;
  }

  .node{
    width:90px;
    height:90px;
  }

  .node span{
    font-size:14px;
  }

  .node p{
    width:180px;
    font-size:18px;
    line-height:1.35;
  }


  /* LEFT NODES */

  .node-1,
  .node-3,
  .node-5{
    left:10px;
  }


  /* RIGHT NODES */

  .node-2,
  .node-4,
  .node-6{
    right:25px;
  }


  /* LEFT TEXT */

  .node-1 p,
  .node-3 p,
  .node-5 p{
    left:120px;
  }


  /* RIGHT TEXT */

  .node-2 p,
  .node-4 p,
  .node-6 p{
    right:120px;
  }

}


/* ======================================================
   IPAD PRO PORTRAIT
====================================================== */

@media (min-width:601px) and (max-width:1024px){

  .node-map{
    height:1200px;
    margin-top:110px;
  }

  .node{
    width:90px;
    height:90px;
  }

  .node span{
    font-size:14px;
  }

  .node p{
    width:180px;
    font-size:18px;
    line-height:1.35;
  }


  /* LEFT NODES */

  .node-1,
  .node-3,
  .node-5{
    left:10px;
  }


  /* RIGHT NODES */

  .node-2,
  .node-4,
  .node-6{
    right:10px;
  }


  /* LEFT TEXT */

  .node-1 p,
  .node-3 p,
  .node-5 p{
    left:120px;
  }


  /* RIGHT TEXT */

  .node-2 p,
  .node-4 p,
  .node-6 p{
    right:120px;
  }

}


/* ======================================================
   IPAD PRO LANDSCAPE / ROTATED
====================================================== */

@media (min-width:1025px) and (max-width:1400px){

  .node-map{
    height:1220px;
    margin-top:120px;
  }

  .node{
    width:120px;
    height:120px;
  }

  .node span{
    font-size:17px;
  }

  .node p{
    width:230px;
    font-size:21px;
  }


  /* LEFT NODES */

  .node-1,
  .node-3,
  .node-5{
    left:100px;
  }


  /* RIGHT NODES */

  .node-2,
  .node-4,
  .node-6{
    right:100px;
  }


  /* LEFT TEXT */

  .node-1 p,
  .node-3 p,
  .node-5 p{
    left:170px;
  }


  /* RIGHT TEXT */

  .node-2 p,
  .node-4 p,
  .node-6 p{
    right:170px;
  }

}


/* ======================================================
   LAPTOP / MACBOOK NODES
====================================================== */

@media (min-width:1401px) and (max-height:900px){

  .node-map{
    width:100%;
    height:1100px;
    margin-top:100px;
  }

  .node{
    width:140px;
    height:140px;
  }

  .node-1,
  .node-3,
  .node-5{
    left:180px;
  }

  .node-2,
  .node-4,
  .node-6{
    right:180px;
  }

  .node-1 p,
  .node-3 p,
  .node-5 p{
    left:200px;
  }

  .node-2 p,
  .node-4 p,
  .node-6 p{
    right:200px;
  }

}


/* ======================================================
   LARGE DESKTOP
====================================================== */

@media (min-width:1401px) and (min-height:901px){

  .node-map{
    height:1220px;
    margin-top:120px;
  }

  .node{
    width:140px;
    height:140px;
  }

  .node span{
    font-size:20px;
  }

  .node p{
    width:280px;
    font-size:24px;
  }


  /* LEFT NODES */

  .node-1,
  .node-3,
  .node-5{
    left:180px;
  }


  /* RIGHT NODES */

  .node-2,
  .node-4,
  .node-6{
    right:180px;
  }


  /* LEFT TEXT */

  .node-1 p,
  .node-3 p,
  .node-5 p{
    left:200px;
  }


  /* RIGHT TEXT */

  .node-2 p,
  .node-4 p,
  .node-6 p{
    right:200px;
  }

}



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

.outcomes-section{
  padding:180px 8%;
  background:#151518;
  position:relative;
  overflow:hidden;
}

/* CLEAN BACKGROUND GLOW */
.outcomes-section::after{
  content:"";
  position:absolute;
  right:0;
  top:20%;
  width:400px;
  height:400px;
  background:radial-gradient(
    circle,
    rgba(255,255,255,0.08),
    transparent 70%
  );
  filter:blur(60px);
  opacity:0.2;
}

.outcomes-title{
  margin-left:-15%;
}

.outcomes-container{
  max-width:800px;
  margin:0 auto;
  margin-left:8%;
}


/* EYEBROW */
.outcomes-section .service-eyebrow{
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  opacity:.4;
  margin-bottom:14px;
}

.outcomes-section .section-title::after{
  display:none;
}

/* INTRO */
.outcomes-intro{
  max-width:520px;
  line-height:1.8;
  opacity:0.6;
  margin-bottom:80px;
}

/* LIST */
.outcomes-list{
  display:flex;
  flex-direction:column;
  gap:120px;
  max-width:700px;
  margin:0 auto;
}

/* ITEM */
.outcome-item{
  position:relative;
  padding-left:80px;
  opacity:0.45;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease,
    box-shadow 0.8s ease,
    background 0.8s ease;
}

/* ACTIVE STATE */
.outcome-item.active{
  opacity:1;
}

/* NUMBER */
.outcome-number{
  position:absolute;
  left:0;
  top:-45px;
  font-family:'Inter', sans-serif;
  font-size:120px;
  font-weight:700;
  line-height:1;
  color:rgba(255,255,255,0.04);
  pointer-events:none;
  user-select:none;
  transition:
    color 0.8s ease,
    transform 0.8s ease;
}

/* ACTIVE NUMBER */
.outcome-item.active .outcome-number{
  color:rgba(255,255,255,0.22);
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.014);
  transform:translateX(-15px);
}

/* TEXT */
.outcome-item p{
  position:relative;
  z-index:2;
  margin:0;
  font-size:22px;
  line-height:1.6;
  opacity:0.75;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

/* ACTIVE TEXT */
.outcome-item.active p{
  opacity:1;
}

/* HOVER */
.outcome-item:hover .outcome-number{
  color:rgba(255,255,255,0.12);
}

.outcome-item:hover p{
  opacity:1;
}

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

@media(max-width:900px){

  .outcomes-container{
    margin-left:0;
  }

  .outcomes-title{
    margin-left:0;
    font-size:34px;
  }

  .outcomes-list{
    gap:80px;
  }

  .outcome-item{
    padding-left:40px;
  }

  .outcome-number{
    font-size:80px;
    top:-25px;
  }

  .outcome-item p{
    font-size:18px;
  }

}


/* ======================================================
   CASE STUDIES (BIG CARDS)
====================================================== */

.case-section{
  padding:200px 8%;
  background:#151518;
}

.case-container{
  max-width:1200px;
  margin:0 auto;
}

/* HEADER */
.case-header{
  margin-bottom:80px;
  margin-left:0;
}

.case-header .section-title::after{
  display:none;
}

.case-header .service-eyebrow{
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  opacity:.4;
  margin:0 0 14px 0;
}

.case-header .section-title{
  margin-left:0;
}

/* GRID */
.case-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

/* CARD */
.case-card{
  border-radius:24px;
  overflow:hidden;
  position:relative;

  background:linear-gradient(
    145deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.01)
  );

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

  transition:all .4s cubic-bezier(.22,.61,.36,1);
}

.case-card:hover{
  transform:translateY(-10px);
  border-color:rgba(255,255,255,.2);
  box-shadow:0 40px 80px rgba(0,0,0,.6);
}


/* IMAGE */
.case-card img{
  width:100%;
  height:300px;
  object-fit:cover;
  opacity:.85;
  filter:grayscale(20%);
  transition:.4s ease;
}

.case-card:hover img{
  opacity:1;
  filter:grayscale(0%);
}


/* CONTENT */
.case-content{
  padding:30px;
}

.case-number{
  font-size:12px;
  letter-spacing:2px;
  opacity:.4;
}

.case-content h3{
  font-size:24px;
  margin:10px 0;
}

.case-content p{
  font-size:14px;
  opacity:.65;
  margin-bottom:20px;
}

/* ======================================================
   COMING SOON CARD
====================================================== */

.case-card-coming{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,.045),
      rgba(255,255,255,.01) 60%
    );
}

.coming-soon-content{
  max-width:380px;
  padding:40px 30px;
}

.coming-soon-content .case-number{
  display:block;
  margin-bottom:25px;
}

.coming-soon-label{
  display:inline-block;
  margin-bottom:20px;
  padding:8px 16px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

.coming-soon-content h3{
  font-family:'Playfair Display', serif;
  font-size:28px;
  font-style:italic;
  font-weight:500;
  margin-bottom:15px;
}

.coming-soon-content p{
  font-size:14px;
  line-height:1.8;
  opacity:.5;
}


/* BUTTON */
.case-btn{
  display:inline-block;
  padding:10px 22px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.25);
  text-decoration:none;
  color:#fff;
  font-size:12px;
  transition:.3s;
}

.case-btn:hover{
  background:#fff;
  color:#000;
}

/* ======================================================
   SEE MORE CASE STUDIES
====================================================== */

.case-more{
  display:flex;
  justify-content:center;
  margin-top:70px;
}

.case-more-btn{
  width:460px;
  height:62px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;

  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;

  color:#fff;
  text-decoration:none;

  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;

  transition:all .35s ease;
}

.case-more-btn span{
  font-size:18px;
  transition:transform .35s ease;
}

.case-more-btn:hover{
  background:#fff;
  color:#000;
  border-color:#fff;
  transform:translateY(-3px);
}

.case-more-btn:hover span{
  transform:translateX(6px);
}


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

@media(max-width:600px){

  .case-more{
    margin-top:55px;
  }

  .case-more-btn{
    width:100%;
    max-width:420px;
    height:58px;
  }

}

/* RESPONSIVE */
@media(max-width:900px){
  .case-grid{
    grid-template-columns:1fr;
  }
}

/* ======================================================
   CASE STUDIES — RESPONSIVE HEADER
====================================================== */
/* =========================
   IPHONE
========================= */

@media (max-width:600px){

  .case-header .service-eyebrow{
    margin-left:0;
  }

  .case-header .section-title{
    margin-left:0;
    font-size:40px;
  }

}


/* =========================
   IPAD PRO PORTRAIT
========================= */

@media (min-width:601px) and (max-width:1024px){

  .case-header .service-eyebrow{
    margin-left:64px;
  }

  .case-header .section-title{
    margin-left:64px;
    font-size:46px;
  }

}


/* =========================
   IPAD PRO LANDSCAPE
========================= */

@media (min-width:1025px) and (max-width:1400px){

  .case-header .service-eyebrow{
    margin-left:88px;
  }

  .case-header .section-title{
    margin-left:88px;
    font-size:48px;
  }

}


/* =========================
   MACBOOK / LAPTOP
========================= */

@media (min-width:1401px) and (max-height:900px){

  .case-header .service-eyebrow{
    margin-left:94px;
  }

  .case-header .section-title{
    margin-left:94px;
    font-size:48px;
  }

}


/* =========================
   LARGE DESKTOP
========================= */

@media (min-width:1401px) and (min-height:901px){

  .case-header .service-eyebrow{
    margin-left:-70px;
  }

  .case-header .section-title{
    margin-left:-70px;
    font-size:48px;
  }

}

/* ======================================================
   CASE STUDIES — EQUAL CARD HEIGHTS
====================================================== */

.case-card{
  height:540px;
}

/* ======================================================
   IPHONE
====================================================== */

@media (max-width:600px){

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

  .case-card{
    height:500px;
  }

  .case-card img{
    height:250px;
  }

  .case-more{
    margin-top:55px;
  }

}

/* ======================================================
   IPAD PRO PORTRAIT
====================================================== */

@media (min-width:601px) and (max-width:1024px){

  .case-card{
    height:560px;
  }

}

/* ======================================================
   IPAD PRO LANDSCAPE
====================================================== */

@media (min-width:1025px) and (max-width:1400px){

  .case-card{
    height:540px;
  }

}

/* ======================================================
   MACBOOK / LAPTOP
====================================================== */

@media (min-width:1401px) and (max-height:900px){

  .case-card{
    height:540px;
  }

}

/* ======================================================
   LARGE DESKTOP
====================================================== */

@media (min-width:1401px) and (min-height:901px){

  .case-card{
    height:560px;
    width: 520px;
  }

}

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

.final-cta{
    position:relative;
    overflow:hidden;

    padding:220px 8%;

    text-align:center;
}

.cta-glow{
    position:absolute;

    top:50%;
    left:50%;

    width:750px;
    height:750px;

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

    background:radial-gradient(
        circle,
        rgba(255,255,255,.06),
        transparent 72%
    );

    pointer-events:none;
}

.final-cta-content{
    position:relative;
    z-index:2;

    max-width:900px;
    margin:auto;
}

.cta-label{

    display:inline-block;

    margin-bottom:24px;

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

    letter-spacing:3px;

    text-transform:uppercase;

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

.final-cta h2{

    font-family:'Playfair Display', serif;

    font-size:92px;

    font-weight:500;

    line-height:.95;

    letter-spacing:-3px;

    margin-bottom:30px;

    color:#fff;
}

.cta-text{

    max-width:670px;

    margin:0 auto 55px;

    font-size:18px;

    line-height:1.9;

    color:rgba(255,255,255,.68);
}

.cta-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;
}

.final-cta-btn{

    display:inline-flex;

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

    min-width:200px;

    height:62px;

    padding:0 34px;

    border-radius:999px;

    text-decoration:none;

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

    color:#fff;

    background:transparent;

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

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

.final-cta-btn:hover{

    background:#fff;

    color:#000;

    border-color:#fff;

    transform:translateY(-4px);

    box-shadow:0 18px 45px rgba(255,255,255,.12);
}

.final-cta-btn.secondary{

    background:#fff;

    color:#000;

    border:1px solid #fff;
}

.final-cta-btn.secondary:hover{

    background:transparent;

    color:#fff;

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

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

@media (max-width:991px){

    .final-cta{

        padding:180px 8%;
    }

    .final-cta h2{

        font-size:72px;
    }

}


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

.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:.9s cubic-bezier(.22,.61,.36,1);
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}


/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:900px){

  .service-hero h1{
    font-size:46px;
  }

  .service-split{
    grid-template-columns:1fr;
    gap:40px;
  }

  .cta-inner h2{
    font-size:32px;
  }

}