/* FitNutriGuide exact luxury reference clone */

:root{
  --charcoal:#0c0d0b;
  --charcoal-2:#10110f;
  --forest:#2f3d2f;
  --forest-soft:#434b32;
  --sand:#dcccb2;
  --gold:#c9a66b;
  --gold-muted:#9f8357;
  --plum:#5b4b5f;
  --text:#e8dfcf;
  --muted:#b8ad99;
  --line:#2e2a21;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  background:#080907;
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
}

/* HERO */

.exact-hero{
  width:100%;
  background:#090a08;
  border-bottom:1px solid var(--line);
}

.exact-hero img{
  width:100%;
  max-width:1536px;
  margin:0 auto;
  display:block;
  height:auto;
}

/* PAGE */

.page{
  width:100%;
  max-width:1536px;
  margin:0 auto;
  background:#0b0d0b;
  box-shadow:0 0 80px rgba(0,0,0,.45);
}

/* ABOUT */

.about-approach{
  display:grid;
  grid-template-columns:460px 1fr 1.05fr;
  min-height:430px;
  border-bottom:1px solid var(--line);
  background:#0e100e;
}

.about-photo{
  overflow:hidden;
  border-right:1px solid var(--line);
  min-width:460px;
  background:#0c0d0b;
  position:relative;
}

.about-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  filter:brightness(.82) sepia(.10) saturate(.92);
  transform:scale(1);
  display:block;
}

.about-text,
.approach-text{
  padding:42px 52px;
  border-right:1px solid var(--line);
}

.eyebrow{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:5px;
  font-size:13px;
  font-weight:600;
  margin-bottom:22px;
}

.about-text h2{
  font-family:"Cormorant Garamond",serif;
  color:#f3ead8;
  font-size:36px;
  line-height:1.08;
  font-weight:500;
  margin-bottom:28px;
}

.about-text p{
  color:#d1c6b4;
  font-size:15px;
  line-height:1.9;
  margin-bottom:24px;
  max-width:540px;
}

.approach-row{
  display:flex;
  gap:18px;
  align-items:flex-start;
  margin-bottom:18px;
}

.approach-row span{
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:50%;
  background:#707247;
  color:#f0ddb0;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(240,220,160,.25);
  margin-top:2px;
}

.approach-row h3{
  color:#e5dbc7;
  font-size:17px;
  font-weight:500;
  margin-bottom:5px;
}

.approach-row p{
  color:#bcb19e;
  font-size:13px;
  line-height:1.45;
}

/* SERVICES */

.services{
  padding:24px 30px 34px;
  border-bottom:1px solid var(--line);
  background:#0c0e0c;
  text-align:center;
}

.section-heading{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin:0 auto 24px;
}

.section-heading h2{
  font-family:"Cormorant Garamond",serif;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:7px;
  font-size:24px;
  font-weight:600;
}

.section-heading span{
  width:42px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}

.service-grid article{
  min-height:190px;
  border:1px solid #363025;
  border-radius:4px;
  padding:28px 16px 20px;
  background:linear-gradient(180deg,#111310,#0c0d0b);
  box-shadow:inset 0 0 30px rgba(255,255,255,.015);
}

.icon{
  font-size:36px;
  color:var(--gold);
  height:48px;
  line-height:48px;
  margin-bottom:10px;
}

.service-grid h3{
  font-family:"Cormorant Garamond",serif;
  color:#d7bb83;
  font-size:20px;
  line-height:1.12;
  letter-spacing:1.6px;
  text-transform:uppercase;
  margin-bottom:12px;
}

.service-grid p{
  color:#ddd3c3;
  font-size:13px;
  line-height:1.6;
}

.center-btn{
  margin-top:18px;
  min-width:215px;
  height:38px;
  border:1px solid rgba(201,166,107,.3);
  background:linear-gradient(135deg,#394022,#5f6335);
  color:#f3ead8;
  font-size:11px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  cursor:pointer;
}

.center-btn span{
  margin-left:18px;
}

/* RESOURCES */

.resources{
  padding:24px 24px 30px;
  background:#0d0f0d;
  border-bottom:1px solid var(--line);
}

.resource-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}

.resource-grid article{
  min-height:182px;
  border:1px solid #343025;
  border-radius:4px;
  background:#10120f;
  overflow:hidden;
}

.thumb{
  height:82px;
  background-size:cover;
  background-position:center;
  filter:brightness(.65) sepia(.18);
}

.thumb1{
  background-image:url("https://images.unsplash.com/photo-1515377905703-c4788e51af15?q=80&w=800&auto=format&fit=crop");
}

.thumb2{
  background-image:url("https://images.unsplash.com/photo-1455390582262-044cdead277a?q=80&w=800&auto=format&fit=crop");
}

.thumb3{
  background-image:url("https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?q=80&w=800&auto=format&fit=crop");
}

.thumb4{
  background-image:url("https://images.unsplash.com/photo-1543352634-a1c51d9f1fa7?q=80&w=800&auto=format&fit=crop");
}

.thumb5{
  background-image:url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=800&auto=format&fit=crop");
}

.resource-grid h3{
  color:#e1d8c9;
  font-size:13.5px;
  line-height:1.42;
  font-weight:400;
  padding:12px 12px 8px;
}

.resource-grid a{
  display:block;
  color:#caa66c;
  font-size:11px;
  padding:0 12px 12px;
  text-decoration:none;
}

/* KNOWLEDGE */

.knowledge{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#171b10 !important;
  color:#ded4c3;
  padding:12px;
}

.knowledge .leaf{
  color:var(--gold);
  font-size:35px;
  margin-bottom:8px;
}

.knowledge p{
  font-family:"Cormorant Garamond",serif;
  font-size:18px;
  line-height:1.3;
  margin-bottom:12px;
}

.knowledge button{
  padding:8px 14px;
  background:transparent;
  color:#d7c8af;
  border:1px solid #5a4b35;
  text-transform:uppercase;
  font-size:10px;
}

/* TESTIMONIAL */

.testimonial-cta{
  position:relative;
  border-bottom:1px solid var(--line);
  background:#0b0d0b;
}

.testimonial-cta > img{
  width:100%;
  height:auto;
  display:block;
  filter:brightness(.88) sepia(.08);
}

.testimonial-text{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:150px;
  padding:24px 42px;
  color:#e4dac8;
}

.testimonial-text p{
  font-size:13.5px;
  line-height:1.55;
  max-width:300px;
}

.testimonial-text small{
  display:block;
  margin-top:12px;
  color:#d8c8af;
}

.quote{
  float:left;
  color:var(--gold);
  font-family:"Cormorant Garamond",serif;
  font-size:66px;
  line-height:.6;
  margin-right:10px;
}

/* FOOTER */

footer{
  display:grid;
  grid-template-columns:1.9fr .75fr 1fr 1fr;
  gap:28px;
  padding:16px 42px 18px;
  background:#10120f;
  border-bottom:1px solid #202019;
}

.footer-logo{
  font-family:"Cormorant Garamond",serif;
  color:#d9c8ab;
  font-size:30px;
  margin-bottom:2px;
}

footer p,
footer a,
footer small{
  color:#bbb09e;
  font-size:12px;
  line-height:1.45;
  text-decoration:none;
  display:block;
}

footer h4{
  color:#caa66c;
  font-family:"Cormorant Garamond",serif;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:6px;
}

.socials{
  display:flex;
  gap:12px;
  margin-top:12px;
}

.socials span{
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid #4f432f;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#caa66c;
  font-size:13px;
}

/* RESPONSIVE */

@media(max-width:900px){

  .about-approach{
    grid-template-columns:1fr;
  }

  .about-photo{
    height:320px;
    min-width:100%;
  }

  .service-grid,
  .resource-grid,
  footer{
    grid-template-columns:1fr 1fr;
  }

  .testimonial-text{
    position:static;
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    padding:24px;
  }
}

@media(max-width:560px){

  .service-grid,
  .resource-grid,
  footer{
    grid-template-columns:1fr;
  }

  .about-text,
  .approach-text{
    padding:24px;
  }

  .section-heading h2{
    font-size:18px;
    letter-spacing:4px;
  }
}