/* =========================================================
   Echeverría — Case Study
   Colors  #A09D9E  #C6CFCE  #C7C669
   Titles  DM Serif Display · Subtitles Inclusive Sans Bold · Text Fira Sans
   Designed on a 1440px canvas
   ========================================================= */

:root{
  --grey:    #A09D9E;
  --mist:    #C6CFCE;
  --olive:   #C7C669;
  --statbox: #E0E5E5;

  --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; }

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

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


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

.ec-intro{
  width:1023px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:55px 0 0;
  text-align:center;
}

.ec-photos{
  width:1272px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:41px 0 0;
  display:grid;
  grid-template-columns:372fr 397fr 381fr;
  gap:61px;
}
.ec-photos img{ width:100%; height:auto; }

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

.ec-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:84px;
  margin-top:79px;
}
.ec-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;
}
.ec-stat__num{
  font-family:var(--serif);
  font-weight:400;
  font-size:91px;
  line-height:1;
  color:var(--ink);
}
.ec-stat__lab{
  font-family:var(--text);
  font-size:27px;
  line-height:34px;
  color:var(--ink);
  margin-top:16px;
  text-align:center;
}


/* =========================================================
   GOAL
   ========================================================= */
.ec-goal{
  width:1299px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:124px 0 0;
  display:grid;
  grid-template-columns:411fr 718fr;
  column-gap:170px;
  align-items:center;
}
.ec-goal__circles{ width:100%; height:auto; }


/* =========================================================
   BILLBOARD  (full bleed)
   ========================================================= */
.ec-billboard{ margin-top:118px; line-height:0; }
.ec-billboard img{ width:100%; height:auto; }


/* =========================================================
   SOLUTIONS + LOGO SYSTEM
   ========================================================= */
.ec-solutions{
  width:1280px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:64px 0 0;
  display:grid;
  grid-template-columns:488fr 700fr;
  column-gap:92px;
  align-items:center;
}
.ec-solutions__circles{ width:100%; height:auto; }

.ec-logo{
  width:1274px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:48px 0 0;
}
.ec-logo img{ width:100%; height:auto; }

.ec-variants{
  width:1275px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:32px 0 0;
  display:grid;
  grid-template-columns:495fr 37fr 230fr 30fr 483fr;
  gap:0;
}
.ec-variants img{ width:100%; height:auto; }
.ec-variants img:nth-of-type(1){ grid-column:1; }
.ec-variants img:nth-of-type(2){ grid-column:3; }
.ec-variants img:nth-of-type(3){ grid-column:5; }


/* =========================================================
   BRINGING THE BRAND TO LIFE
   (collage with the copy tucked into its lower-left, as designed)
   ========================================================= */
.ec-life{
  position:relative;
  width:1440px; max-width:100%;
  height:1119px;
  margin:56px auto 0;
}
.ec-life__collage{
  position:absolute;
  top:0; left:85px;
  width:1275px;
}
.ec-life__text{
  position:absolute;
  top:812px; left:86px;
  width:740px;
}
.ec-life__text p{ max-width:350px; }

.ec-grid{
  width:1279px; max-width:calc(100% - 48px);
  margin:-201px auto 0;
  display:grid;
  grid-template-columns:637fr 574fr;
  justify-content:space-between;
  column-gap:68px;
  align-items:start;
}
.ec-grid__col{ display:flex; flex-direction:column; gap:56px; }
.ec-grid__col--left{ padding-top:201px; }
.ec-grid img{ width:100%; height:auto; }

.ec-sign{
  width:1272px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:48px 0 0;
}
.ec-sign img{ width:100%; height:auto; }


/* =========================================================
   RESULTS
   ========================================================= */
.ec-results{
  width:1273px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:58px 0 0;
  display:grid;
  grid-template-columns:467fr 131fr 315fr 45fr 315fr;
  align-items:center;
}
.ec-results__text{ grid-column:1; }
.ec-stats--results{ display:contents; }
.ec-stats--results li:nth-of-type(1){ grid-column:3; }
.ec-stats--results li:nth-of-type(2){ grid-column:5; }


/* =========================================================
   BACK LINKS
   ========================================================= */
.ec-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:#6E6B6C;
  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;
}
.ec-back:hover{ background:#fff; transform:translateX(-2px); }
.ec-back:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.ec-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:#6E6B6C;
  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;
}
.ec-about:hover{ background:#fff; transform:translateY(-1px); }
.ec-about:focus-visible{ outline:2px solid #fff; outline-offset:3px; }


.ec-foot{ text-align:center; padding:74px 0 87px; }
.ec-foot a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:14px 30px 15px;
  border-radius:999px;
  background:var(--grey);
  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;
}
.ec-foot a:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.ec-foot a:focus-visible{ outline:2px solid #6E6B6C; outline-offset:3px; }


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1439px){
  /* the overlapping block falls back to a normal stack */
  .ec-life{
    width:100%;
    height:auto;
    padding:0 24px;
    display:flex;
    flex-direction:column;
    gap:34px;
    margin-top:56px;
  }
  .ec-life__collage,.ec-life__text{
    position:static;
    width:100%;
    left:auto; top:auto;
  }
  .ec-life__text{ max-width:760px; }
  .ec-grid{ margin-top:48px; }
  .ec-grid__col--left{ padding-top:0; }
}

@media (max-width:1180px){
  .ec-h2{ font-size:46px; }
  .ec-stat__num{ font-size:70px; }
  .ec-stat__lab{ font-size:21px; line-height:27px; margin-top:14px; }
  .ec-stats li{ min-height:210px; }
  .ec-stats{ gap:40px; }
  .ec-goal,.ec-solutions,.ec-grid{ column-gap:40px; }
}

@media (max-width:900px){
  .ec-h2{ font-size:36px; }
  .ec-intro p,.ec-lead,.ec-goal p,.ec-solutions__text p,
  .ec-life__text p,.ec-results p{ font-size:16px; line-height:22px; }

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

  .ec-goal,.ec-solutions{ grid-template-columns:1fr; row-gap:26px; padding-top:56px; }
  .ec-billboard{ margin-top:56px; }
  .ec-logo{ padding-top:36px; }
  .ec-variants{ grid-template-columns:1fr; row-gap:16px; padding-top:24px; }
  .ec-variants img:nth-of-type(n){ grid-column:1; }
  .ec-variants img:nth-of-type(2){ max-width:230px; }

  .ec-life{ margin-top:52px; gap:24px; }
  .ec-grid{ grid-template-columns:1fr; row-gap:20px; margin-top:32px; }
  .ec-grid__col{ gap:20px; }
  .ec-sign{ padding-top:32px; }

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

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

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