/* =========================================================
   Rancho MX — Case Study
   Colors  #904839  #FBBA84
   Titles  DM Serif Display · Subtitles Inclusive Sans Bold · Text Fira Sans
   Designed on a 1440px canvas
   ========================================================= */

:root{
  --brown:   #904839;
  --sand:    #FBBA84;
  --statbox: #FDDABD;

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

.rx-h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:58px;
  line-height:1.06;
  color:var(--brown);
  margin:0 0 14px;
}
.rx-h2--center{ text-align:center; }

.rx-intro p,
.rx-lead,
.rx-goal p,
.rx-solutions p,
.rx-social__text p,
.rx-print__text p,
.rx-brand p,
.rx-results p{
  font-family:var(--text);
  font-size:19px;
  line-height:25px;
  color:var(--ink);
}


/* =========================================================
   HERO
   ========================================================= */
.rx-hero{ position:relative; line-height:0; }
.rx-hero img{ width:100%; height:auto; }


/* =========================================================
   INTRO · POSTS · ROLE
   ========================================================= */
.rx-intro{
  width:1062px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:59px 0 0;
  text-align:center;
}

.rx-posts{
  width:1290px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:74px 0 0;
  display:grid;
  grid-template-columns:394fr 53fr 395fr 57fr 394fr;
  gap:0;
}
.rx-posts img{ width:100%; height:auto; }
.rx-posts img:nth-of-type(1){ grid-column:1; }
.rx-posts img:nth-of-type(2){ grid-column:3; }
.rx-posts img:nth-of-type(3){ grid-column:5; }

.rx-role{
  width:1128px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:70px 0 0;
  text-align:center;
}
.rx-lead{ max-width:1021px; margin:0 auto; }

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


/* =========================================================
   GOAL
   ========================================================= */
.rx-goal{
  width:1284px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:74px 0 0;
  display:grid;
  grid-template-columns:432fr 297fr;
  justify-content:space-between;
  column-gap:60px;
  align-items:center;
}
.rx-goal__img{ display:flex; justify-content:flex-end; }
.rx-goal img{ width:297px; max-width:100%; height:auto; }


/* =========================================================
   FOOD PHOTO  (full bleed)
   ========================================================= */
.rx-food{ margin-top:50px; line-height:0; }
.rx-food img{ width:100%; height:auto; }


/* =========================================================
   SOLUTIONS
   ========================================================= */
.rx-solutions{
  width:1278px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:45px 0 0;
  display:grid;
  grid-template-columns:468fr 705fr;
  justify-content:space-between;
  column-gap:105px;
  align-items:center;
}
.rx-solutions p + p{ margin-top:22px; }
.rx-solutions img{ width:100%; height:auto; }


/* =========================================================
   SOCIAL MEDIA  (mockups + overlapping copy, as designed)
   ========================================================= */
.rx-social{
  position:relative;
  width:1440px; max-width:100%;
  height:842px;
  margin:143px auto 0;
}
.rx-social__mockups{
  position:absolute;
  top:0; left:67px;
  width:1281px;
  height:auto;
}
.rx-social__text{
  position:absolute;
  top:565px; left:67px;
  width:545px;
}
.rx-social__text p + p{ margin-top:24px; }
.rx-social__text strong{ font-weight:700; }


/* =========================================================
   INSTAGRAM GRID
   ========================================================= */
.rx-ig{
  width:1328px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:85px 0 0;
  display:grid;
  grid-template-columns:327fr 323fr 323fr 324fr;
  gap:11px;
  align-items:end;
}
.rx-ig img{ width:100%; height:auto; }


/* =========================================================
   VOICES
   ========================================================= */
.rx-voices{
  width:1118px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:83px 0 0;
}
.rx-voices img{ width:100%; height:auto; }


/* =========================================================
   PRINT ASSETS
   ========================================================= */
.rx-print{
  position:relative;
  width:1440px; max-width:100%;
  height:616px;
  margin:88px auto 0;
}
.rx-print__text{ position:absolute; top:100px; left:77px; width:440px; }
.rx-print__cart{ position:absolute; top:0;     left:380px; width:984px; }
.rx-print__pal1{ position:absolute; top:328px; left:76px;  width:383px; }
.rx-print__pal2{ position:absolute; top:370px; left:478px; width:262px; }


/* =========================================================
   FLYER SLIDER
   ========================================================= */
.rx-slider{
  position:relative;
  width:100%;
  padding:166px 0 0;
}
.rx-slider__viewport{ overflow:hidden; width:100%; }
.rx-slider__track{
  display:flex;
  width:100%;
  transition:transform .7s cubic-bezier(.6,.02,.2,1);
}
.rx-slide{
  flex:0 0 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:63px;
  padding:0 24px;
}
.rx-slide img{
  height:555px;
  width:auto;
  max-width:none;
  object-fit:contain;
}
.rx-slider__arrow{
  position:absolute;
  top:calc(166px + 555px / 2);
  transform:translateY(-50%);
  z-index:2;
  width:56px; height:56px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(144,72,57,.18);
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--brown);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rx-slider__arrow:hover{ background:#fff; box-shadow:0 4px 14px rgba(144,72,57,.16); }
.rx-slider__arrow:focus-visible{ outline:2px solid var(--brown); outline-offset:3px; }
.rx-slider__arrow svg{ width:22px; height:22px; display:block; }
.rx-slider__arrow--prev{ left:34px; }
.rx-slider__arrow--next{ right:34px; }
.rx-slider__arrow--prev:hover{ transform:translateY(-50%) translateX(-2px); }
.rx-slider__arrow--next:hover{ transform:translateY(-50%) translateX(2px); }

.rx-slider__dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:26px;
}
.rx-slider__dots button{
  width:10px; height:10px;
  padding:0; border:0;
  border-radius:50%;
  background:#DFCFC9;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.rx-slider__dots button:hover{ transform:scale(1.15); }
.rx-slider__dots button.is-active{ background:var(--brown); }
@media (prefers-reduced-motion: reduce){
  .rx-slider__track{ transition:none; }
}


/* =========================================================
   BRAND CONSISTENCY
   ========================================================= */
.rx-brand{
  position:relative;
  width:1440px; max-width:100%;
  height:1145px;
  margin:72px auto 0;
}
.rx-brand__text{ position:absolute; top:0; left:77px; width:623px; }
.rx-brand__img{ position:absolute; top:120px; left:49px; width:1391px; }


/* =========================================================
   QUOTE CARDS
   ========================================================= */
.rx-quotes{
  width:1294px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:78px 0 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:42px;
}
.rx-quotes img{ width:100%; height:auto; }


/* =========================================================
   RESULTS
   ========================================================= */
.rx-results{
  width:1293px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:123px 0 0;
  display:grid;
  grid-template-columns:451fr 141fr 315fr 71fr 315fr;
  align-items:center;
}
.rx-results__text{ grid-column:1; }
.rx-stats--results{ display:contents; }
.rx-stats--results li:nth-of-type(1){ grid-column:3; }
.rx-stats--results li:nth-of-type(2){ grid-column:5; }


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

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


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


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1439px){
  /* the three absolutely-positioned blocks scale with the viewport */
  .rx-social,.rx-print,.rx-brand{
    width:100%;
    height:auto;
    padding:0 24px;
  }
  .rx-social__mockups,.rx-social__text,
  .rx-print__text,.rx-print__cart,.rx-print__pal1,.rx-print__pal2,
  .rx-brand__text,.rx-brand__img{
    position:static;
    width:auto;
    max-width:100%;
    left:auto; top:auto;
  }
  .rx-social{ display:flex; flex-direction:column; gap:34px; margin-top:96px; }
  .rx-social__mockups{ width:100%; }
  .rx-social__text{ max-width:640px; }

  .rx-print{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:center;
    margin-top:80px;
  }
  .rx-print__text{ grid-column:1 / -1; max-width:640px; }
  .rx-print__cart{ grid-column:1 / -1; width:100%; }

  .rx-brand{ display:flex; flex-direction:column; gap:30px; margin-top:72px; }
  .rx-brand__img{ width:100%; }
}

@media (max-width:1180px){
  .rx-h2{ font-size:46px; }
  .rx-stat__num{ font-size:70px; }
  .rx-stat__lab{ font-size:22px; line-height:28px; margin-top:14px; }
  .rx-stats li{ min-height:210px; }
  .rx-stats{ gap:40px; }
  .rx-slide img{ height:430px; }
  .rx-goal,.rx-solutions{ column-gap:40px; }
}

@media (max-width:900px){
  .rx-h2{ font-size:38px; }
  .rx-intro{ padding-top:36px; }
  .rx-intro p,.rx-lead,.rx-goal p,.rx-solutions p,
  .rx-social__text p,.rx-print__text p,.rx-brand p,.rx-results p{
    font-size:16px; line-height:22px;
  }

  .rx-posts{ padding-top:44px; grid-template-columns:1fr 16px 1fr 16px 1fr; }
  .rx-role{ padding-top:40px; }
  .rx-stats{ gap:16px; margin-top:44px; }
  .rx-stats li{ min-height:150px; border-radius:10px; }
  .rx-stat__num{ font-size:46px; }
  .rx-stat__lab{ font-size:15px; line-height:19px; margin-top:10px; }

  .rx-goal,.rx-solutions{ grid-template-columns:1fr; row-gap:26px; padding-top:56px; }
  .rx-goal__img{ justify-content:flex-start; }
  .rx-food{ margin-top:44px; }

  .rx-ig{ grid-template-columns:1fr 1fr; gap:10px; padding-top:48px; align-items:start; }
  .rx-voices{ padding-top:52px; }

  .rx-slider{ padding-top:56px; }
  .rx-slide{ gap:16px; padding:0 16px; }
  .rx-slide img{ height:auto; width:calc(50% - 8px); }
  .rx-slider__arrow{
    top:auto; bottom:-4px; transform:none;
    width:42px; height:42px;
  }
  .rx-slider__arrow svg{ width:17px; height:17px; }
  .rx-slider__arrow--prev{ left:12px; }
  .rx-slider__arrow--next{ right:12px; }
  .rx-slider__arrow--prev:hover,.rx-slider__arrow--next:hover{ transform:none; }

  .rx-print{ grid-template-columns:1fr; }
  .rx-print__pal2{ max-width:62%; }
  .rx-quotes{ grid-template-columns:1fr 1fr; gap:20px; padding-top:52px; }

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

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

@media (max-width:560px){
  .rx-posts{ grid-template-columns:1fr; }
  .rx-posts img:nth-of-type(n){ grid-column:1; }
  .rx-posts{ row-gap:14px; }
  .rx-stats{ grid-template-columns:1fr; }
  .rx-ig{ grid-template-columns:1fr; }
  .rx-quotes{ grid-template-columns:1fr; }
}