/* =========================================================
   Elanco — Case Study
   Color   #1AAA9C
   Titles  DM Serif Display · Subtitles Inclusive Sans Bold · Text Fira Sans
   Designed on a 1440px canvas
   ========================================================= */

:root{
  --teal:    #1AAA9C;
  --statbox: #83D1CA;
  --pill:    #8FD5CE;

  --ink:     #111111;
  --page-bg: #FFF5F2;

  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sub:   "Inclusive Sans", "Helvetica Neue", Arial, sans-serif;
  --text:  "Fira Sans", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--text);
  color:var(--ink);
  background-color:var(--page-bg);
  background-image:url("assets/bg-pattern.png");
  background-position:top center;
  background-size:1440px auto;
  background-repeat:repeat;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; }

.el-h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:57px;
  line-height:1.06;
  color:var(--teal);
  margin:0 0 10px;
}
.el-h2--center{ text-align:center; }

.el-label{
  font-family:var(--sub);
  font-weight:700;
  font-size:22px;
  line-height:1.2;
  color:var(--teal);
  margin:0 0 16px;
}

.el-intro p,
.el-lead,
.el-goal p,
.el-solutions__text p,
.el-simplify p,
.el-impact p,
.el-cross__body p,
.el-results p{
  font-family:var(--text);
  font-size:18px;
  line-height:22px;
  color:var(--ink);
}


/* =========================================================
   HERO · INTRO · PHOTOS · ROLE
   ========================================================= */
.el-hero{ position:relative; line-height:0; }
.el-hero img{ width:100%; height:auto; }

.el-intro{
  width:1004px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:52px 0 0;
  text-align:center;
}

.el-photos{
  width:1299px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:60px 0 0;
  display:grid;
  grid-template-columns:404fr 405fr 397fr;
  gap:47px;
}
.el-photos img{ width:100%; height:auto; }

.el-role{
  width:1113px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:93px 0 0;
  text-align:center;
}
.el-lead{ max-width:1072px; margin:0 auto; }

.el-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:84px;
  margin-top:76px;
}
.el-stats li{
  background:var(--statbox);
  border-radius:14px;
  min-height:266px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px 12px;
}
.el-stat__num{
  font-family:var(--serif);
  font-weight:400;
  font-size:91px;
  line-height:1;
  color:var(--ink);
}
.el-stat__lab{
  font-family:var(--text);
  font-size:27px;
  line-height:34px;
  color:var(--ink);
  margin-top:16px;
  text-align:center;
}


/* =========================================================
   GOAL
   ========================================================= */
.el-goal{
  width:1190px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:77px 0 0;
  display:grid;
  grid-template-columns:409fr 557fr;
  justify-content:space-between;
  column-gap:60px;
  align-items:center;
}
.el-goal__icons{ width:100%; height:auto; }


/* =========================================================
   FULL-BLEED LAPTOP
   ========================================================= */
.el-laptop{ margin-top:88px; line-height:0; }
.el-laptop img{ width:100%; height:auto; }


/* =========================================================
   SOLUTIONS
   ========================================================= */
.el-solutions{
  width:1262px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:67px 0 0;
  display:grid;
  grid-template-columns:449fr 760fr;
  justify-content:space-between;
  column-gap:53px;
  align-items:center;
}
.el-solutions__boxes{ width:100%; height:auto; }

.el-dosage{
  width:1288px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:14px 0 0;
  display:grid;
  grid-template-columns:773fr 394fr;
  justify-content:space-between;
  column-gap:121px;
  align-items:center;
}
.el-dosage img{ width:100%; height:auto; }

.el-spread{
  width:1292px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:54px 0 0;
}
.el-spread img{ width:100%; height:auto; }

.el-tablets{
  width:1242px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:114px 0 0;
}
.el-tablets img{ width:100%; height:auto; }


/* =========================================================
   SIMPLIFYING THE COMPLEX
   ========================================================= */
.el-simplify{
  width:1310px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:66px 0 0;
}
.el-simplify p{ max-width:700px; }

.el-belamyl{
  width:1302px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:74px 0 0;
}
.el-belamyl img{ width:100%; height:auto; }

.el-steps{
  width:1307px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:51px 0 0;
  display:grid;
  grid-template-columns:627fr 618fr;
  justify-content:space-between;
  column-gap:62px;
  align-items:center;
}
.el-steps img{ width:100%; height:auto; }

.el-billboard{
  width:1304px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:49px 0 0;
}
.el-billboard img{ width:100%; height:auto; }


/* =========================================================
   CREATIVE & COMMERCIAL IMPACT
   ========================================================= */
.el-impact{
  width:1310px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:58px 0 0;
}
.el-impact p{ max-width:660px; }

.el-devices{
  width:1354px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:37px 0 0;
}
.el-devices img{ width:100%; height:auto; }

.el-strip{
  width:1294px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:67px 0 0;
}
.el-strip--tight{ padding-top:46px; }
.el-strip img{ width:100%; height:auto; }


/* =========================================================
   CROSS-FUNCTIONAL CREATIVE SUPPORT
   ========================================================= */
.el-cross{
  width:1302px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:154px 0 0;
}
.el-cross__body{
  margin-top:31px;
  display:grid;
  grid-template-columns:414fr 489fr;
  justify-content:space-between;
  column-gap:60px;
  align-items:start;
}

.el-hr{ display:flex; flex-direction:column; gap:12px; }
.el-hr li{
  background:var(--pill);
  border-radius:999px;
  height:50px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 22px;
}
.el-hr__num{
  font-family:var(--serif);
  font-weight:400;
  font-size:31px;
  line-height:1;
  color:var(--ink);
  min-width:96px;
  text-align:center;
}
.el-hr__lab{
  font-family:var(--text);
  font-size:19px;
  line-height:1.2;
  color:var(--ink);
}


/* =========================================================
   HR / INTERNAL BLOCKS
   ========================================================= */
.el-block{
  width:1302px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:53px 0 0;
}
.el-block img{ width:100%; height:auto; }

.el-posters{
  display:grid;
  grid-template-columns:308fr 308fr 318fr 323fr;
  gap:16px;
  align-items:start;
}

.el-comms{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:53px;
}

.el-team{
  display:grid;
  grid-template-columns:691fr 550fr;
  justify-content:space-between;
  column-gap:52px;
  align-items:center;
}


/* =========================================================
   RESULTS
   ========================================================= */
.el-results{
  width:1290px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:116px 0 0;
  display:grid;
  grid-template-columns:438fr 138fr 315fr 84fr 315fr;
  align-items:center;
}
.el-results__text{ grid-column:1; }
.el-stats--results{ display:contents; }
.el-stats--results li:nth-of-type(1){ grid-column:3; }
.el-stats--results li:nth-of-type(2){ grid-column:5; }


/* =========================================================
   BACK LINKS
   ========================================================= */
.el-back{
  position:absolute;
  top:30px; left:40px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 20px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  color:#0E7C72;
  font-family:var(--text);
  font-size:15px;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  backdrop-filter:blur(4px);
  transition:background .2s ease, transform .2s ease;
}
.el-back:hover{ background:#fff; transform:translateX(-2px); }
.el-back:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.el-about{
  position:absolute;
  top:30px; right:40px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  padding:11px 22px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  color:#0E7C72;
  font-family:var(--text);
  font-size:15px;
  font-weight:500;
  line-height:1;
  letter-spacing:.02em;
  text-decoration:none;
  backdrop-filter:blur(4px);
  transition:background .2s ease, transform .2s ease;
}
.el-about:hover{ background:#fff; transform:translateY(-1px); }
.el-about:focus-visible{ outline:2px solid #fff; outline-offset:3px; }


.el-foot{ text-align:center; padding:74px 0 44px; }
.el-foot a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:14px 30px 15px;
  border-radius:999px;
  background:var(--teal);
  color:#fff;
  font-family:var(--text);
  font-size:16px;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  transition:filter .2s ease, transform .2s ease;
}
.el-foot a:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.el-foot a:focus-visible{ outline:2px solid #0E7C72; outline-offset:3px; }


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .el-h2{ font-size:46px; }
  .el-stat__num{ font-size:70px; }
  .el-stat__lab{ font-size:21px; line-height:27px; margin-top:14px; }
  .el-stats li{ min-height:210px; }
  .el-stats{ gap:40px; }
  .el-goal,.el-solutions,.el-dosage,.el-steps,.el-team{ column-gap:40px; }
  .el-hr__num{ font-size:26px; min-width:80px; }
  .el-hr__lab{ font-size:16px; }
  .el-comms{ gap:28px; }
}

@media (max-width:900px){
  .el-h2{ font-size:36px; }
  .el-label{ font-size:18px; }
  .el-intro p,.el-lead,.el-goal p,.el-solutions__text p,.el-simplify p,
  .el-impact p,.el-cross__body p,.el-results p{ font-size:16px; line-height:22px; }

  .el-intro{ padding-top:32px; }
  .el-photos{ padding-top:40px; gap:16px; }
  .el-role{ padding-top:48px; }
  .el-stats{ gap:16px; margin-top:44px; }
  .el-stats li{ min-height:150px; border-radius:10px; }
  .el-stat__num{ font-size:44px; }
  .el-stat__lab{ font-size:15px; line-height:19px; margin-top:10px; }

  .el-goal,.el-solutions,.el-dosage,.el-steps,.el-team,.el-cross__body{
    grid-template-columns:1fr;
    row-gap:26px;
  }
  .el-goal,.el-solutions{ padding-top:52px; }
  .el-dosage{ padding-top:32px; }
  .el-laptop{ margin-top:52px; }
  .el-spread,.el-tablets,.el-simplify,.el-belamyl,.el-billboard,
  .el-impact,.el-devices,.el-strip{ padding-top:48px; }
  .el-cross{ padding-top:64px; }
  .el-cross__body{ margin-top:22px; }
  .el-hr li{ height:auto; padding:12px 18px; }
  .el-hr__num{ font-size:24px; min-width:74px; }
  .el-hr__lab{ font-size:15px; }

  .el-block{ padding-top:40px; }
  .el-posters{ grid-template-columns:1fr 1fr; gap:14px; }
  .el-comms{ grid-template-columns:1fr; gap:18px; }

  .el-results{
    grid-template-columns:1fr 1fr;
    row-gap:26px; column-gap:16px;
    padding-top:56px;
  }
  .el-results__text{ grid-column:1 / -1; }
  .el-stats--results li:nth-of-type(1){ grid-column:1; }
  .el-stats--results li:nth-of-type(2){ grid-column:2; }

  .el-back{ top:16px; left:16px; font-size:13px; padding:9px 15px 10px; }
  .el-about{ top:16px; right:16px; font-size:13px; padding:9px 16px 10px; }
  .el-foot{ padding:48px 0 56px; }
}

@media (max-width:560px){
  .el-photos{ grid-template-columns:1fr; }
  .el-stats{ grid-template-columns:1fr; }
  .el-posters{ grid-template-columns:1fr; }
}