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

:root{
  --amber:   #FFAF26;
  --sand:    #FBBA84;
  --statbox: #FDDABD;
  --videobox:#D9D9D9;

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

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

.pv-intro p,
.pv-lead,
.pv-goal p,
.pv-solutions__text p,
.pv-vam p,
.pv-story p,
.pv-results p{
  font-family:var(--text);
  font-size:18px;
  line-height:23px;
  color:var(--ink);
}


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


/* =========================================================
   INTRO · PHOTOS · ROLE
   ========================================================= */
.pv-intro{
  width:1090px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:45px 0 0;
  text-align:center;
}

.pv-photos{
  width:1285px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:81px 0 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:47px;
}
.pv-photos img{ width:100%; height:auto; }

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

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


/* =========================================================
   GOAL
   ========================================================= */
.pv-goal{
  width:1305px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:103px 0 0;
  display:grid;
  grid-template-columns:443fr 814fr;
  justify-content:space-between;
  column-gap:48px;
  align-items:center;
}
.pv-goal__icons{ width:100%; height:auto; }


/* =========================================================
   LAPTOP PHOTO  (full bleed)
   ========================================================= */
.pv-laptop{ margin-top:142px; line-height:0; }
.pv-laptop img{ width:100%; height:auto; }


/* =========================================================
   SOLUTIONS  (collage with the copy sitting in its top-left corner)
   ========================================================= */
.pv-solutions{
  position:relative;
  width:1301px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:68px 0 0;
}
.pv-solutions__collage{ width:100%; height:auto; }
.pv-solutions__text{
  position:absolute;
  top:68px; left:0;
  width:445px;
}


/* =========================================================
   VISUAL ASSET MANAGEMENT
   ========================================================= */
.pv-vam{
  width:1244px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:88px 0 0;
  display:grid;
  grid-template-columns:715fr 294fr;
  justify-content:space-between;
  column-gap:60px;
  align-items:center;
}
.pv-vam__text p{ max-width:640px; }
.pv-vam__sun{ width:100%; height:auto; }


/* =========================================================
   MODEL PHOTO  (full bleed)
   ========================================================= */
.pv-model{ margin-top:92px; line-height:0; }
.pv-model img{ width:100%; height:auto; }


/* =========================================================
   VISUAL STORYTELLING
   ========================================================= */
.pv-story{
  width:1261px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:60px 0 0;
  display:grid;
  grid-template-columns:518fr 506fr;
  justify-content:space-between;
  column-gap:60px;
  align-items:start;
}
.pv-story__text{ padding-top:24px; }
.pv-story__decor{ width:100%; height:auto; }

.pv-ig{
  width:1276px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:53px 0 0;
}
.pv-ig img{ width:100%; height:auto; }


/* =========================================================
   VIDEO
   ========================================================= */
.pv-video{
  width:1244px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:102px 0 0;
}
.pv-video__box{
  background:var(--videobox);
  aspect-ratio:16 / 9;
  overflow:hidden;
}
.pv-video__box video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}


/* =========================================================
   RESULTS
   ========================================================= */
.pv-results{
  width:1257px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:97px 0 0;
  display:grid;
  grid-template-columns:437fr 110fr 315fr 80fr 315fr;
  align-items:center;
}
.pv-results__text{ grid-column:1; }
.pv-stats--results{ display:contents; }
.pv-stats--results li:nth-of-type(1){ grid-column:3; }
.pv-stats--results li:nth-of-type(2){ grid-column:5; }


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

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


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


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .pv-h2{ font-size:46px; }
  .pv-stat__num{ font-size:70px; }
  .pv-stat__lab{ font-size:22px; line-height:28px; margin-top:14px; }
  .pv-stats li{ min-height:210px; }
  .pv-stats{ gap:40px; }
  .pv-goal,.pv-vam,.pv-story{ column-gap:40px; }
  .pv-solutions__text{ width:32%; }
}

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

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

  .pv-goal,.pv-vam,.pv-story{
    grid-template-columns:1fr;
    row-gap:26px;
    padding-top:56px;
  }
  .pv-story__text{ padding-top:0; }
  .pv-laptop,.pv-model{ margin-top:56px; }

  /* the copy moves below the collage instead of sitting on top of it */
  .pv-solutions{ position:static; padding-top:56px; display:flex; flex-direction:column-reverse; gap:24px; }
  .pv-solutions__text{ position:static; width:auto; }

  .pv-ig{ padding-top:36px; }
  .pv-video{ padding-top:56px; }

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

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

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