/* =====================================================
  AESTHÉ — AESTHETIC CLINIC
===================================================== */

:root {
 --background: #f7f2ed;
 --cream: #fffaf6;
 --cream-dark: #eee2d7;

 --champagne: #b99063;
 --champagne-dark: #957044;

 --brown: #705b4c;
 --deep: #312823;

 --text: #665c55;
 --muted: #8b7e74;

 --white: #ffffff;

 --line: rgba(133, 104, 75, 0.16);

 --shadow:
   0 30px 80px rgba(78, 57, 43, 0.11);
}


/* =====================================================
  RESET
===================================================== */

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

html {
 scroll-behavior: smooth;
}

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

img {
 display: block;
 width: 100%;
 object-fit: cover;
}

a {
 text-decoration: none;
 color: inherit;
}

h1,
h2,
h3 {
 font-family: "Cormorant Garamond", serif;
 font-weight: 500;
 color: var(--deep);
}


/* =====================================================
  HEADER
===================================================== */

.header {
 height: 92px;

 position: sticky;
 top: 0;
 z-index: 1000;

 padding: 0 6%;

 display: flex;
 align-items: center;
 justify-content: space-between;

 background: rgba(255, 250, 246, 0.94);
 backdrop-filter: blur(18px);

 border-bottom: 1px solid var(--line);
}


.logo,
.footer-logo {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.logo strong,
.footer-logo strong {
 font-family: "Cormorant Garamond", serif;

 font-size: 29px;
 font-weight: 500;
 line-height: 1;

 letter-spacing: 0.12em;

 color: var(--deep);
}

.logo span,
.footer-logo span {
 margin-top: 5px;

 font-size: 7px;
 letter-spacing: 0.28em;
}


.desktop-nav {
 display: flex;
 gap: 34px;
 align-items: center;
}

.desktop-nav a {
 font-size: 11px;
 font-weight: 500;
}

.desktop-nav a:hover {
 color: var(--champagne);
}


.header-btn,
.primary-btn {
 min-height: 48px;

 padding: 0 28px;

 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 16px;

 background: var(--champagne);
 color: white;

 border: 1px solid var(--champagne);

 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.13em;

 transition: 0.3s ease;
}

.header-btn:hover,
.primary-btn:hover {
 background: var(--champagne-dark);
 border-color: var(--champagne-dark);

 transform: translateY(-2px);
}


.menu-toggle {
 display: none;

 width: 42px;
 height: 42px;

 border: 0;
 background: transparent;
}

.menu-toggle span {
 width: 24px;
 height: 1px;

 display: block;

 margin: 6px auto;

 background: var(--deep);
}


.mobile-menu {
 display: none;
}


/* =====================================================
  GENERAL
===================================================== */

.eyebrow,
.section-label {
 margin-bottom: 20px;

 color: var(--champagne-dark);

 font-size: 9px;
 font-weight: 600;

 letter-spacing: 0.38em;
}


.text-btn {
 display: inline-flex;
 align-items: center;
 gap: 12px;

 padding-bottom: 5px;

 border-bottom: 1px solid var(--champagne);

 font-size: 9px;
 font-weight: 600;
 letter-spacing: 0.13em;
}


h2 em,
h1 em {
 font-weight: 400;
 color: var(--champagne-dark);
}


/* =====================================================
  HERO
===================================================== */

.hero {
 min-height: 730px;

 display: grid;
 grid-template-columns: 48% 52%;

 background: var(--cream);
}


.hero-content {
 padding: 100px 8% 55px 13%;

 display: flex;
 flex-direction: column;
 justify-content: center;
}


.hero h1 {
 max-width: 670px;

 font-size: clamp(58px, 5.4vw, 89px);

 line-height: 0.92;

 letter-spacing: -0.035em;
}


.hero-text {
 max-width: 510px;

 margin-top: 30px;

 font-size: 14px;
 line-height: 1.8;
}


.hero-actions {
 margin-top: 36px;

 display: flex;
 align-items: center;
 gap: 32px;
}


.hero-benefits {
 margin-top: 62px;

 display: grid;
 grid-template-columns: repeat(3, 1fr);

 border-top: 1px solid var(--line);
}


.hero-benefits > div {
 min-height: 100px;

 padding: 24px 12px 5px;

 display: flex;
 align-items: center;
 gap: 12px;

 border-right: 1px solid var(--line);
}


.hero-benefits > div:last-child {
 border-right: 0;
}


.hero-benefits svg {
 width: 30px;
 height: 30px;

 fill: none;

 stroke: var(--champagne);
 stroke-width: 1.2;
}


.hero-benefits span {
 font-size: 8px;
 font-weight: 500;

 line-height: 1.5;

 letter-spacing: 0.11em;

 text-transform: uppercase;
}


.hero-image {
 position: relative;

 min-height: 730px;

 overflow: hidden;
}


.hero-image img {
 height: 100%;
}


.hero-image::after {
 content: "";

 position: absolute;
 inset: 0;

 background:
   linear-gradient(
     90deg,
     rgba(247,242,237,0.12),
     transparent 25%
   );
}


.hero-note {
 position: absolute;

 right: 8%;
 bottom: 12%;

 z-index: 2;

 font-family: "Cormorant Garamond", serif;

 color: white;

 font-size: 30px;
 font-style: italic;

 line-height: 1.15;
}


/* =====================================================
  TREATMENTS
===================================================== */

.treatments {
 padding: 130px 6%;

 background: #fffdf9;
}


.section-heading {
 max-width: 1500px;

 margin: 0 auto 60px;

 display: flex;
 align-items: flex-end;
 justify-content: space-between;

 gap: 50px;
}


.section-heading h2 {
 font-size: clamp(48px, 5vw, 72px);

 line-height: 0.95;
}


.section-intro {
 max-width: 400px;

 line-height: 1.7;

 font-size: 13px;
}


.treatment-grid {
 max-width: 1500px;

 margin: auto;

 display: grid;
 grid-template-columns: repeat(6, 1fr);

 gap: 18px;
}


.image-wrap {
 height: 220px;

 overflow: hidden;

 margin-bottom: 20px;
}


.image-wrap img {
 height: 100%;

 transition: transform 0.5s ease;
}


.treatment-card:hover .image-wrap img {
 transform: scale(1.04);
}


.treatment-card > span {
 color: var(--champagne);

 font-size: 9px;

 letter-spacing: 0.16em;
}


.treatment-card h3 {
 margin: 8px 0 8px;

 font-size: 23px;
}


.treatment-card p {
 min-height: 64px;

 font-size: 11px;

 line-height: 1.6;
}


.treatment-card a {
 display: inline-block;

 margin-top: 16px;

 color: var(--champagne-dark);

 font-size: 8px;
 font-weight: 600;

 letter-spacing: 0.12em;
}


/* =====================================================
  ABOUT
===================================================== */

.about {
 max-width: 1500px;

 margin: auto;

 padding: 130px 6%;

 display: grid;

 grid-template-columns:
   0.75fr
   1.1fr
   0.8fr;

 align-items: center;

 gap: 55px;
}


.about-statement > p {
 font-family: "Cormorant Garamond", serif;

 font-size: 42px;

 line-height: 1.02;

 color: var(--deep);
}


.about-statement em {
 color: var(--champagne-dark);
}


.statement-line {
 width: 55px;
 height: 1px;

 margin: 30px 0;

 background: var(--champagne);
}


.about-statement span {
 display: block;

 max-width: 330px;

 font-size: 12px;

 line-height: 1.75;
}


.about-image {
 height: 610px;

 overflow: hidden;
}


.about-image img {
 height: 100%;
}


.about-content h2 {
 font-size: 54px;

 line-height: 0.96;
}


.about-content > p:not(.section-label) {
 margin: 28px 0;

 font-size: 13px;

 line-height: 1.8;
}


/* =====================================================
  RESULTS
===================================================== */

.results {
 min-height: 650px;

 display: grid;
 grid-template-columns: 1fr 1fr;

 background: var(--cream-dark);
}


.result-visual {
 padding: 80px;

 display: flex;
 align-items: center;
 justify-content: center;
}


.result-visual img {
 max-width: 670px;
 height: 470px;

 box-shadow: var(--shadow);
}


.result-content {
 padding: 80px;

 display: flex;
 flex-direction: column;
 justify-content: center;
}


.result-content h2 {
 max-width: 620px;

 font-size: 68px;

 line-height: 0.94;
}


.result-content > p:not(.section-label) {
 max-width: 510px;

 margin: 28px 0 35px;

 line-height: 1.8;
}


.result-content .primary-btn {
 align-self: flex-start;
}


/* =====================================================
  EXPERIENCE
===================================================== */

.experience {
 min-height: 700px;

 display: grid;
 grid-template-columns: 1fr 1fr;

 background: var(--cream);
}


.experience-image img {
 height: 700px;
}


.experience-copy {
 padding: 90px;

 display: flex;
 flex-direction: column;
 justify-content: center;
}


.experience-copy h2 {
 max-width: 650px;

 font-size: 68px;

 line-height: 0.95;
}


.experience-copy > p:not(.section-label) {
 max-width: 560px;

 margin-top: 30px;

 line-height: 1.8;
}


.experience-values {
 margin-top: 50px;

 display: grid;
 grid-template-columns: 1fr 1fr;
}


.experience-values div {
 padding: 25px 20px 25px 0;

 border-top: 1px solid var(--line);
}


.experience-values strong {
 display: block;

 margin-bottom: 7px;

 color: var(--champagne);

 font-family: "Cormorant Garamond", serif;

 font-size: 27px;

 font-weight: 400;
}


.experience-values span {
 font-size: 10px;

 letter-spacing: 0.07em;

 text-transform: uppercase;
}


/* =====================================================
  DETAIL SECTION
===================================================== */

.detail-section {
 min-height: 580px;

 display: grid;

 grid-template-columns: 45% 55%;

 background:
   url("images/aesthe-background-texture.jpg")
   center / cover;
}


.detail-copy {
 padding: 90px;

 display: flex;
 flex-direction: column;
 justify-content: center;

 background: rgba(255,250,246,0.9);
}


.detail-copy h2 {
 max-width: 580px;

 font-size: 65px;

 line-height: 0.95;
}


.detail-copy > p:not(.section-label) {
 max-width: 500px;

 margin-top: 28px;

 line-height: 1.8;
}


.detail-image img {
 height: 580px;
}


/* =====================================================
  TESTIMONIALS
===================================================== */

.testimonials {
 padding: 130px 7%;

 background: #fffdf9;
}


.testimonial-grid {
 max-width: 1500px;

 margin: auto;

 display: grid;

 grid-template-columns: repeat(3, 1fr);

 gap: 24px;
}


.testimonial-grid article {
 padding: 42px;

 background: white;

 border: 1px solid var(--line);
}


.stars {
 margin-bottom: 20px;

 color: var(--champagne);

 letter-spacing: 0.14em;
}


.testimonial-grid article p {
 min-height: 100px;

 font-family: "Cormorant Garamond", serif;

 font-size: 23px;

 line-height: 1.35;
}


.testimonial-grid article span {
 display: block;

 margin-top: 25px;

 color: var(--muted);

 font-size: 11px;
}


/* =====================================================
  BOOKING
===================================================== */

.booking {
 min-height: 480px;

 display: grid;

 grid-template-columns:
   0.9fr
   1.2fr
   0.8fr;

 background: var(--cream-dark);
}


.booking-image img {
 height: 480px;
}


.booking-content,
.booking-contact {
 padding: 65px;

 display: flex;
 flex-direction: column;
 justify-content: center;
}


.booking-content h2 {
 font-size: 64px;

 line-height: 0.94;
}


.booking-content > p:not(.section-label) {
 max-width: 500px;

 margin: 25px 0 30px;

 line-height: 1.7;
}


.booking-content .primary-btn {
 align-self: flex-start;
}


.booking-contact {
 background: rgba(255,255,255,0.35);
}


.booking-contact p {
 margin: 12px 0;

 font-size: 13px;

 line-height: 1.7;
}


.booking-contact strong {
 font-size: 9px;

 letter-spacing: 0.15em;

 text-transform: uppercase;

 color: var(--deep);
}


/* =====================================================
  CLINIC BANNER
===================================================== */

.clinic-banner {
 height: 500px;

 position: relative;

 overflow: hidden;
}


.clinic-banner img {
 height: 100%;
}


.clinic-banner::after {
 content: "";

 position: absolute;
 inset: 0;

 background:
   linear-gradient(
     90deg,
     rgba(45,35,29,0.45),
     transparent 60%
   );
}


.clinic-banner > div {
 position: absolute;

 left: 8%;
 top: 50%;

 z-index: 2;

 transform: translateY(-50%);

 color: white;
}


.clinic-banner span {
 font-size: 10px;

 letter-spacing: 0.4em;
}


.clinic-banner p {
 margin-top: 14px;

 font-family: "Cormorant Garamond", serif;

 font-size: 48px;

 line-height: 1;
}


/* =====================================================
  FOOTER
===================================================== */

.footer {
 padding: 55px 7% 25px;

 background: #f8f3ed;
}


.footer-top {
 padding-bottom: 35px;

 display: flex;
 align-items: center;
 justify-content: space-between;

 border-bottom: 1px solid var(--line);
}


.footer-top nav,
.socials {
 display: flex;

 gap: 25px;
}


.footer-top nav a,
.socials a {
 font-size: 10px;
}


.socials a {
 font-weight: 600;
}


.footer-bottom {
 padding-top: 25px;

 display: flex;
 justify-content: space-between;

 color: var(--muted);

 font-size: 9px;
}


.footer-bottom div {
 display: flex;

 gap: 24px;
}


/* =====================================================
  RESPONSIVE
===================================================== */

@media (max-width: 1150px) {

 .desktop-nav,
 .header-btn {
   display: none;
 }


 .menu-toggle {
   display: block;
 }


 .mobile-menu {
   position: fixed;

   top: 92px;
   left: 0;
   right: 0;

   z-index: 999;

   padding: 30px 6%;

   display: flex;
   flex-direction: column;

   gap: 18px;

   background: var(--cream);

   transform: translateY(-140%);

   opacity: 0;

   transition: 0.35s ease;
 }


 .mobile-menu.open {
   transform: translateY(0);

   opacity: 1;
 }


 .mobile-menu a {
   padding-bottom: 14px;

   border-bottom: 1px solid var(--line);

   font-family: "Cormorant Garamond", serif;

   font-size: 25px;
 }


 .hero {
   grid-template-columns: 1fr;
 }


 .hero-image {
   min-height: 650px;
 }


 .treatment-grid {
   grid-template-columns: repeat(3, 1fr);
 }


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


 .about-statement {
   grid-column: 1 / -1;
 }


 .results,
 .experience,
 .detail-section {
   grid-template-columns: 1fr;
 }


 .booking {
   grid-template-columns: 1fr 1fr;
 }


 .booking-contact {
   grid-column: 1 / -1;
 }

}


@media (max-width: 720px) {

 .header {
   height: 76px;

   padding: 0 22px;
 }


 .mobile-menu {
   top: 76px;
 }


 .logo strong {
   font-size: 25px;
 }


 .hero-content {
   padding: 70px 25px 45px;
 }


 .hero h1 {
   font-size: 56px;
 }


 .hero-actions {
   flex-direction: column;

   align-items: flex-start;
 }


 .hero-benefits {
   grid-template-columns: 1fr;
 }


 .hero-benefits > div {
   border-right: 0;

   border-bottom: 1px solid var(--line);
 }


 .hero-image {
   min-height: 520px;
 }


 .treatments,
 .about,
 .testimonials {
   padding: 85px 25px;
 }


 .section-heading {
   align-items: flex-start;

   flex-direction: column;
 }


 .treatment-grid {
   grid-template-columns: 1fr;
 }


 .image-wrap {
   height: 410px;
 }


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


 .about-image {
   height: 500px;
 }


 .result-visual,
 .result-content,
 .experience-copy,
 .detail-copy {
   padding: 65px 25px;
 }


 .result-visual img {
   height: 390px;
 }


 .result-content h2,
 .experience-copy h2,
 .detail-copy h2 {
   font-size: 51px;
 }


 .experience-image img {
   height: 500px;
 }


 .experience-values {
   grid-template-columns: 1fr;
 }


 .detail-image img {
   height: 480px;
 }


 .testimonial-grid {
   grid-template-columns: 1fr;
 }


 .booking {
   grid-template-columns: 1fr;
 }


 .booking-image img {
   height: 400px;
 }


 .booking-content,
 .booking-contact {
   padding: 60px 25px;
 }


 .booking-content h2 {
   font-size: 51px;
 }


 .clinic-banner {
   height: 420px;
 }


 .clinic-banner p {
   font-size: 39px;
 }


 .footer-top,
 .footer-bottom {
   align-items: flex-start;

   flex-direction: column;

   gap: 30px;
 }


 .footer-top nav,
 .footer-bottom div {
   flex-wrap: wrap;
 }

}