:root {
 --background: #f6f0eb;
 --cream: #fffaf6;
 --cream-deep: #efe2d9;

 --nude: #cda58e;
 --nude-light: #dec1b0;

 --champagne: #c39a7d;
 --champagne-dark: #9f7359;

 --brown: #624b40;
 --deep-brown: #392b26;

 --text: #6d5d55;
 --muted: #8c7c73;

 --white: #ffffff;

 --line: rgba(159, 115, 89, 0.20);

 --shadow:
   0 30px 80px rgba(86, 61, 49, 0.10);
}


/* =====================================================
  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%;
}


a {
 color: inherit;
}


button,
input,
select {
 font: inherit;
}


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

.header {
 position: fixed;

 top: 0;
 left: 0;

 width: 100%;

 min-height: 92px;

 z-index: 100;

 display: flex;

 align-items: center;

 justify-content: space-between;

 padding: 0 6%;

 background:
   rgba(255, 250, 246, 0.88);

 backdrop-filter: blur(18px);

 -webkit-backdrop-filter: blur(18px);

 border-bottom:
   1px solid rgba(159, 115, 89, 0.12);

 transition:
   min-height 0.35s ease,
   box-shadow 0.35s ease,
   background 0.35s ease;
}


.header.scrolled {
 min-height: 76px;

 background:
   rgba(255, 250, 246, 0.96);

 box-shadow:
   0 10px 40px rgba(75, 53, 42, 0.07);
}


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

 font-size: 35px;

 font-weight: 500;

 letter-spacing: 2px;

 color: var(--deep-brown);

 text-decoration: none;
}


.desktop-nav {
 display: flex;

 align-items: center;

 gap: 30px;
}


.desktop-nav a {
 position: relative;

 text-decoration: none;

 text-transform: uppercase;

 font-size: 10px;

 font-weight: 500;

 letter-spacing: 1.5px;

 color: var(--brown);
}


.desktop-nav a::after {
 content: "";

 position: absolute;

 left: 0;

 bottom: -9px;

 width: 0;

 height: 1px;

 background: var(--champagne);

 transition: width 0.3s ease;
}


.desktop-nav a:hover::after {
 width: 100%;
}


.header-btn {
 text-decoration: none;

 text-transform: uppercase;

 padding: 13px 21px;

 border:
   1px solid rgba(159, 115, 89, 0.48);

 color: var(--brown);

 font-size: 10px;

 letter-spacing: 1.4px;

 transition: 0.3s ease;
}


.header-btn:hover {
 background: var(--champagne-dark);

 border-color: var(--champagne-dark);

 color: white;
}


/* =====================================================
  MOBILE MENU BUTTON
===================================================== */

.menu-toggle {
 display: none;

 width: 42px;

 height: 42px;

 padding: 10px;

 border: 0;

 background: transparent;

 cursor: pointer;
}


.menu-toggle span {
 display: block;

 width: 100%;

 height: 1px;

 background: var(--deep-brown);

 margin: 7px 0;

 transition: 0.3s ease;
}


.menu-toggle.active span:first-child {
 transform:
   translateY(4px)
   rotate(45deg);
}


.menu-toggle.active span:last-child {
 transform:
   translateY(-4px)
   rotate(-45deg);
}


/* =====================================================
  MOBILE MENU
===================================================== */

.mobile-menu {
 position: fixed;

 top: 80px;
 left: 0;

 z-index: 90;

 width: 100%;

 display: flex;

 flex-direction: column;

 align-items: center;

 gap: 23px;

 padding: 35px 7% 42px;

 background:
   rgba(255, 250, 246, 0.98);

 backdrop-filter: blur(20px);

 transform: translateY(-130%);

 opacity: 0;

 visibility: hidden;

 transition: 0.4s ease;

 box-shadow:
   0 30px 60px rgba(75, 53, 42, 0.08);
}


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

 opacity: 1;

 visibility: visible;
}


.mobile-menu a {
 text-decoration: none;

 color: var(--deep-brown);

 text-transform: uppercase;

 font-size: 11px;

 letter-spacing: 1.6px;
}


.mobile-booking {
 margin-top: 10px;

 padding: 13px 22px;

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


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

.hero {
 min-height: 100vh;

 padding-top: 92px;

 display: grid;

 grid-template-columns:
   0.82fr 1.18fr;

 background:
   linear-gradient(
     135deg,
     #bc8e74,
     #d1a991
   );

 overflow: hidden;
}


.hero-content {
 position: relative;

 z-index: 3;

 padding:
   120px 6vw
   100px 8vw;

 display: flex;

 flex-direction: column;

 justify-content: center;

 color: white;
}


.eyebrow {
 margin-bottom: 28px;

 font-size: 10px;

 font-weight: 500;

 letter-spacing: 3px;

 color:
   rgba(255, 255, 255, 0.86);
}


.hero h1 {
 font-family:
   "Cormorant Garamond",
   serif;

 font-size:
   clamp(74px, 8vw, 125px);

 font-weight: 400;

 line-height: 0.78;

 letter-spacing: -2px;

 text-transform: uppercase;

 color: white;
}


.hero h1 span {
 display: block;

 margin-top: 15px;
}


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

 margin: 37px 0;

 font-size: 15px;

 font-weight: 300;

 line-height: 1.8;

 color:
   rgba(255, 255, 255, 0.88);
}


.hero-actions {
 display: flex;

 align-items: center;

 gap: 28px;

 flex-wrap: wrap;
}


.primary-btn {
 display: inline-flex;

 justify-content: center;

 align-items: center;

 min-height: 49px;

 padding: 0 25px;

 border: 1px solid white;

 background:
   rgba(255, 255, 255, 0.07);

 color: white;

 text-decoration: none;

 text-transform: uppercase;

 font-size: 10px;

 letter-spacing: 1.5px;

 cursor: pointer;

 transition: 0.3s ease;
}


.primary-btn:hover {
 background: white;

 color: var(--brown);
}


.text-btn {
 text-decoration: none;

 color: white;

 font-size: 11px;

 text-transform: uppercase;

 letter-spacing: 1.4px;
}


.text-btn span {
 display: inline-block;

 margin-left: 7px;

 transition: 0.3s ease;
}


.text-btn:hover span {
 transform:
   translateX(6px);
}


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

.hero-image-wrap {
 position: relative;

 min-height: 720px;

 overflow: hidden;
}


.hero-image-wrap::before {
 content: "";

 position: absolute;

 z-index: 2;

 inset: 0;

 background:
   linear-gradient(
     90deg,
     rgba(188, 142, 116, 0.45),
     transparent 28%
   );

 pointer-events: none;
}


.hero-image {
 width: 100%;

 height: 100%;

 object-fit: cover;

 object-position: center;

 transition:
   transform 1.2s ease;
}


.hero:hover .hero-image {
 transform: scale(1.025);
}


/* =====================================================
  COMMON SECTION STYLES
===================================================== */

.section-label {
 margin-bottom: 23px;

 color: var(--champagne-dark);

 font-size: 10px;

 font-weight: 500;

 letter-spacing: 2.8px;

 text-transform: uppercase;
}


.intro-section h2,
.section-heading h2,
.experience-content h2,
.results h2,
.booking-content h2,
.contact h2 {
 font-family:
   "Cormorant Garamond",
   serif;

 font-weight: 400;

 font-size:
   clamp(49px, 5.5vw, 78px);

 line-height: 0.98;

 color: var(--deep-brown);
}


/* =====================================================
  INTRO
===================================================== */

.intro-section {
 padding:
   145px 8%;

 display: grid;

 grid-template-columns:
   1fr 1fr;

 gap: 12vw;

 background: var(--cream);
}


.intro-title h2 em {
 color: var(--champagne-dark);

 font-weight: 400;
}


.intro-content {
 max-width: 530px;

 padding-top: 30px;
}


.intro-lead {
 margin-bottom: 28px;

 font-family:
   "Cormorant Garamond",
   serif;

 font-size: 27px;

 line-height: 1.35;

 color: var(--brown);
}


.intro-content > p:not(.intro-lead) {
 font-size: 14px;

 line-height: 1.9;

 color: var(--muted);
}


.simple-link {
 display: inline-block;

 margin-top: 30px;

 padding-bottom: 5px;

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

 color: var(--brown);

 text-decoration: none;

 font-size: 11px;

 letter-spacing: 0.5px;

 transition: 0.3s ease;
}


.simple-link:hover {
 color: var(--champagne-dark);
}


/* =====================================================
  SERVICES
===================================================== */

.services {
 padding:
   125px 7% 150px;

 background: var(--background);
}


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

 margin-bottom: 70px;
}


.services-grid {
 display: grid;

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

 gap: 25px;
}


.service-card {
 min-width: 0;
}


.service-image {
 position: relative;

 height: 480px;

 overflow: hidden;

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


.service-image img {
 width: 100%;

 height: 100%;

 object-fit: cover;

 transition:
   transform 0.65s ease;
}


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


.service-number {
 position: absolute;

 left: 18px;

 bottom: 18px;

 width: 45px;

 height: 45px;

 display: grid;

 place-items: center;

 border-radius: 50%;

 background:
   rgba(255, 250, 246, 0.90);

 backdrop-filter: blur(10px);

 font-family:
   "Cormorant Garamond",
   serif;

 font-size: 19px;

 color: var(--brown);
}


.service-content {
 padding:
   28px 4px 0;
}


.service-content h3 {
 font-family:
   "Cormorant Garamond",
   serif;

 font-size: 31px;

 font-weight: 500;

 color: var(--deep-brown);

 margin-bottom: 14px;
}


.service-content p {
 max-width: 400px;

 min-height: 67px;

 font-size: 13px;

 line-height: 1.75;

 color: var(--muted);
}


.service-content a {
 display: inline-block;

 margin-top: 20px;

 text-decoration: none;

 color: var(--champagne-dark);

 font-size: 11px;
}


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

.experience {
 display: grid;

 grid-template-columns:
   1.05fr 0.95fr;

 min-height: 780px;

 background: var(--cream);
}


.experience-image {
 min-height: 780px;

 overflow: hidden;
}


.experience-image img {
 width: 100%;

 height: 100%;

 object-fit: cover;
}


.experience-content {
 display: flex;

 flex-direction: column;

 justify-content: center;

 padding:
   100px 9%;
}


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

 margin-top: 30px;

 font-size: 14px;

 line-height: 1.9;

 color: var(--muted);
}


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

 display: grid;

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

 gap: 0;
}


.experience-points > div {
 min-height: 105px;

 padding: 23px 15px 23px 0;

 display: flex;

 flex-direction: column;

 justify-content: center;

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


.experience-points strong {
 margin-bottom: 10px;

 font-family:
   "Cormorant Garamond",
   serif;

 font-size: 20px;

 font-weight: 500;

 color: var(--champagne-dark);
}


.experience-points span {
 font-size: 11px;

 text-transform: uppercase;

 letter-spacing: 0.9px;

 color: var(--brown);
}


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

.results {
 padding:
   140px 7% 150px;

 background: var(--background);
}


.center {
 text-align: center;

 max-width: 900px;

 margin-left: auto;

 margin-right: auto;
}


.results-grid {
 margin-top: 75px;

 display: grid;

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

 gap: 22px;

 align-items: start;
}


.results-grid figure {
 overflow: hidden;
}


.results-grid figure:nth-child(2) {
 margin-top: 65px;
}


.results-grid img {
 height: 570px;

 object-fit: cover;

 transition:
   transform 0.6s ease;
}


.results-grid figure:hover img {
 transform: scale(1.035);
}


/* =====================================================
  QUOTE
===================================================== */

.quote-section {
 padding:
   125px 7%;

 text-align: center;

 background:
   linear-gradient(
     135deg,
     #c39478,
     #d7b49f
   );

 color: white;
}


.quote-section p {
 max-width: 880px;

 margin: 0 auto;

 font-family:
   "Cormorant Garamond",
   serif;

 font-size:
   clamp(42px, 5.5vw, 76px);

 font-weight: 400;

 line-height: 1.05;
}


.quote-section span {
 display: block;

 margin-top: 35px;

 font-size: 10px;

 letter-spacing: 4px;

 text-transform: uppercase;

 color:
   rgba(255, 255, 255, 0.78);
}


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

.booking {
 padding:
   145px 8%;

 display: grid;

 grid-template-columns:
   0.9fr 1.1fr;

 gap: 11vw;

 background: var(--cream);
}


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

 margin-top: 30px;

 line-height: 1.8;

 font-size: 14px;

 color: var(--muted);
}


.booking-form {
 align-self: center;
}


.form-group {
 margin-bottom: 28px;
}


.form-group label {
 display: block;

 margin-bottom: 9px;

 color: var(--brown);

 font-size: 10px;

 font-weight: 500;

 letter-spacing: 1px;

 text-transform: uppercase;
}


.form-group input,
.form-group select {
 width: 100%;

 min-height: 52px;

 padding: 0 4px;

 border: 0;

 border-bottom:
   1px solid rgba(159, 115, 89, 0.32);

 border-radius: 0;

 outline: none;

 background: transparent;

 color: var(--deep-brown);

 font-size: 14px;

 transition:
   border-color 0.3s ease;
}


.form-group input::placeholder {
 color: #aa9b93;
}


.form-group input:focus,
.form-group select:focus {
 border-color: var(--champagne-dark);
}


.booking-submit {
 margin-top: 18px;

 border-color: var(--champagne-dark);

 background: var(--champagne-dark);

 color: white;
}


.booking-submit:hover {
 background: var(--deep-brown);

 border-color: var(--deep-brown);

 color: white;
}


/* =====================================================
  CONTACT
===================================================== */

.contact {
 padding:
   130px 8%;

 display: grid;

 grid-template-columns:
   0.9fr 1.1fr;

 gap: 11vw;

 background: var(--background);
}


.contact-details {
 display: grid;

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

 align-content: center;
}


.contact-details > div {
 padding:
   28px 20px 28px 0;

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


.contact-details span {
 display: block;

 margin-bottom: 10px;

 color: var(--champagne-dark);

 text-transform: uppercase;

 font-size: 9px;

 letter-spacing: 1.8px;
}


.contact-details a,
.contact-details p {
 color: var(--brown);

 text-decoration: none;

 font-size: 14px;
}


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

.footer {
 padding:
   85px 7% 35px;

 text-align: center;

 background: var(--deep-brown);

 color: #efe3da;
}


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

 font-size: 43px;

 letter-spacing: 3px;

 color: white;

 text-decoration: none;
}


.footer > p {
 margin:
   10px 0 45px;

 color: var(--nude-light);

 font-family:
   "Cormorant Garamond",
   serif;

 font-size: 17px;

 letter-spacing: 1.2px;
}


.footer-nav {
 display: flex;

 justify-content: center;

 flex-wrap: wrap;

 gap: 30px;

 margin-bottom: 70px;
}


.footer-nav a {
 text-decoration: none;

 text-transform: uppercase;

 color: #d7c6bd;

 font-size: 9px;

 letter-spacing: 1.5px;
}


.footer-bottom {
 display: flex;

 justify-content: space-between;

 padding-top: 25px;

 border-top:
   1px solid rgba(255, 255, 255, 0.10);

 color: #99877e;

 font-size: 9px;

 letter-spacing: 1px;
}


/* =====================================================
  ANIMATIONS
===================================================== */

.hero-content {
 animation:
   fadeUp 1s ease both;
}


@keyframes fadeUp {

 from {
   opacity: 0;

   transform:
     translateY(30px);
 }

 to {
   opacity: 1;

   transform:
     translateY(0);
 }

}


/* =====================================================
  TABLET
===================================================== */

@media (max-width: 1050px) {

 .desktop-nav {
   gap: 17px;
 }


 .services-grid {
   gap: 17px;
 }


 .service-image {
   height: 410px;
 }


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

}


/* =====================================================
  MOBILE
===================================================== */

@media (max-width: 850px) {

 .header {
   min-height: 80px;

   padding: 0 5%;
 }


 .header.scrolled {
   min-height: 70px;
 }


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


 .menu-toggle {
   display: block;
 }


 .logo {
   font-size: 31px;
 }


 /* HERO */

 .hero {
   min-height: auto;

   padding-top: 80px;

   grid-template-columns: 1fr;
 }


 .hero-content {
   min-height: 560px;

   padding:
     90px 7% 80px;

   position: absolute;

   z-index: 4;

   inset:
     80px 0 auto 0;

   justify-content: center;

   background:
     linear-gradient(
       90deg,
       rgba(150, 99, 73, 0.74),
       rgba(184, 132, 105, 0.29)
     );
 }


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


 .hero-image-wrap::before {
   background:
     rgba(81, 49, 34, 0.12);
 }


 .hero h1 {
   font-size:
     clamp(67px, 19vw, 95px);
 }


 .hero-text {
   max-width: 350px;
 }


 /* INTRO */

 .intro-section {
   grid-template-columns: 1fr;

   gap: 55px;

   padding:
     100px 7%;
 }


 .intro-content {
   padding-top: 0;
 }


 /* SERVICES */

 .services {
   padding:
     100px 7%;
 }


 .services-grid {
   grid-template-columns: 1fr;

   gap: 60px;
 }


 .service-image {
   height: 520px;
 }


 .service-content p {
   min-height: auto;
 }


 /* EXPERIENCE */

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


 .experience-image {
   min-height: 570px;
 }


 .experience-content {
   padding:
     90px 7%;
 }


 /* RESULTS */

 .results {
   padding:
     100px 7%;
 }


 .results-grid {
   grid-template-columns: 1fr;

   gap: 20px;
 }


 .results-grid figure:nth-child(2) {
   margin-top: 0;
 }


 .results-grid img {
   height: 500px;
 }


 /* BOOKING */

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

   gap: 65px;

   padding:
     100px 7%;
 }


 /* CONTACT */

 .contact {
   grid-template-columns: 1fr;

   gap: 60px;

   padding:
     100px 7%;
 }

}


/* =====================================================
  SMALL MOBILE
===================================================== */

@media (max-width: 550px) {

 .hero-content {
   min-height: 530px;

   padding-left: 6%;

   padding-right: 6%;
 }


 .hero-image-wrap {
   min-height: 620px;
 }


 .hero h1 {
   font-size:
     clamp(60px, 18vw, 78px);
 }


 .hero-actions {
   flex-direction: column;

   align-items: flex-start;
 }


 .intro-section h2,
 .section-heading h2,
 .experience-content h2,
 .results h2,
 .booking-content h2,
 .contact h2 {
   font-size:
     clamp(45px, 14vw, 60px);
 }


 .service-image {
   height: 430px;
 }


 .experience-image {
   min-height: 450px;
 }


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


 .results-grid img {
   height: 430px;
 }


 .quote-section {
   padding:
     95px 7%;
 }


 .contact-details {
   grid-template-columns: 1fr;
 }


 .footer-bottom {
   flex-direction: column;

   gap: 10px;
 }

}