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

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: Georgia, "Times New Roman", serif;
  background: #11100f;
  color: #f7f3ed;
}


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

.site-header {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 90px;

  padding: 0 5vw;

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

  z-index: 10;
}

.logo {
  color: white;
  text-decoration: none;

  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.desktop-nav {
  display: flex;
  gap: 32px;
}

.desktop-nav a {
  color: white;
  text-decoration: none;

  font-family: Arial, sans-serif;
  font-size: 0.78rem;

  transition: opacity 0.3s ease;
}

.desktop-nav a:hover {
  opacity: 0.6;
}

.nav-cta {
  color: white;
  text-decoration: none;

  border: 1px solid rgba(255,255,255,0.6);

  padding: 12px 18px;

  font-family: Arial, sans-serif;
  font-size: 0.75rem;

  transition: background 0.3s ease;
}

.nav-cta span {
  margin-left: 8px;
}

.nav-cta:hover {
  background: rgba(255,255,255,0.12);
}


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

.menu-btn {
  display: none;

  background: none;
  border: none;

  color: white;
  font-size: 1.7rem;

  cursor: pointer;
}


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

.mobile-menu {
  position: fixed;
  inset: 0;

  background: #11100f;

  display: none;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 30px;

  z-index: 100;
}

.mobile-menu.active {
  display: flex;
}

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

  font-size: 2rem;
}

.close-btn {
  position: absolute;
  top: 25px;
  right: 25px;

  background: none;
  border: none;

  color: white;
  font-size: 2.5rem;

  cursor: pointer;
}


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

.hero {
  position: relative;

  min-height: 100vh;

  display: flex;
  align-items: center;

  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
}

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

  object-fit: cover;

  animation: heroZoom 12s ease-out forwards;
}

@keyframes heroZoom {

  from {
    transform: scale(1.08);
  }

  to {
    transform: scale(1);
  }

}


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

.hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,0.78),
      rgba(0,0,0,0.32),
      rgba(0,0,0,0.12)
    );
}


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

.hero-content {
  position: relative;
  z-index: 2;

  width: min(700px, 90%);

  margin-left: 8vw;
}

.eyebrow {
  font-family: Arial, sans-serif;

  font-size: 0.72rem;

  letter-spacing: 0.22em;

  margin-bottom: 25px;

  opacity: 0.8;
}

.hero h1 {
  font-size: clamp(4rem, 9vw, 8.5rem);

  line-height: 0.85;

  font-weight: 400;

  letter-spacing: -0.05em;

  margin-bottom: 35px;
}

.hero h1 em {
  font-style: italic;
  font-weight: 400;
}

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

  font-family: Arial, sans-serif;

  font-size: 1rem;

  line-height: 1.6;

  color: rgba(255,255,255,0.82);

  margin-bottom: 35px;
}


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

.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.primary-btn,
.secondary-btn {
  text-decoration: none;

  font-family: Arial, sans-serif;

  font-size: 0.78rem;

  letter-spacing: 0.04em;
}

.primary-btn {
  background: #f7f3ed;
  color: #11100f;

  padding: 15px 22px;
}

.primary-btn span {
  margin-left: 10px;
}

.secondary-btn {
  color: white;

  border-bottom: 1px solid rgba(255,255,255,0.6);

  padding-bottom: 6px;
}


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

.hero-bottom {
  position: absolute;

  bottom: 25px;
  left: 5vw;
  right: 5vw;

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

  font-family: Arial, sans-serif;

  font-size: 0.65rem;

  letter-spacing: 0.15em;

  opacity: 0.7;

  z-index: 2;
}


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

@media (max-width: 800px) {

  .desktop-nav,
  .nav-cta {
    display: none;
  }

  .menu-btn {
    display: block;
  }

  .site-header {
    height: 75px;
    padding: 0 6vw;
  }

  .hero {
    min-height: 100svh;
  }

  .hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,0.45),
        rgba(0,0,0,0.78)
      );
  }

  .hero-content {
    margin-left: 6vw;
    margin-right: 6vw;

    padding-top: 70px;
  }

  .hero h1 {
    font-size: clamp(3.8rem, 18vw, 6rem);

    line-height: 0.86;
  }

  .hero-text {
    font-size: 0.9rem;
  }

  .hero-actions {
    flex-direction: column;

    align-items: flex-start;

    gap: 18px;
  }

  .primary-btn {
    padding: 14px 20px;
  }

  .hero-bottom {
    left: 6vw;
    right: 6vw;

    font-size: 0.58rem;
  }

}
/* =========================
   OCCASION DISCOVERY
========================= */

.occasions {
  background: #f3efe8;
  color: #151412;

  padding: 140px 7vw;

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

  gap: 9vw;
}


/* INTRO */

.occasion-intro {
  position: sticky;
  top: 100px;

  align-self: start;
}

.section-label {
  font-family: Arial, sans-serif;

  font-size: 0.65rem;

  letter-spacing: 0.2em;

  margin-bottom: 30px;

  opacity: 0.55;
}

.occasion-intro h2 {
  font-size: clamp(3rem, 5vw, 5.5rem);

  line-height: 0.9;

  font-weight: 400;

  letter-spacing: -0.05em;

  margin-bottom: 30px;
}

.occasion-intro h2 em {
  font-style: italic;
}

.occasion-description {
  max-width: 300px;

  font-family: Arial, sans-serif;

  font-size: 0.9rem;

  line-height: 1.7;

  color: #5f5a54;
}


/* OCCASION LIST */

.occasion-list {
  display: flex;
  flex-direction: column;
}


/* ITEM */

.occasion-item {
  position: relative;

  display: grid;

  grid-template-columns: 40px 180px 1fr;

  align-items: center;

  gap: 25px;

  padding: 28px 0;

  border-top: 1px solid rgba(21,20,18,0.18);

  text-decoration: none;

  color: inherit;
}

.occasion-item:last-child {
  border-bottom: 1px solid rgba(21,20,18,0.18);
}


/* NUMBER */

.occasion-number {
  font-family: Arial, sans-serif;

  font-size: 0.65rem;

  opacity: 0.45;
}


/* IMAGE */

.occasion-image {
  width: 180px;
  height: 115px;

  overflow: hidden;
}

.occasion-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.6s ease,
    filter 0.6s ease;
}


/* INFO */

.occasion-info {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}

.occasion-info h3 {
  font-size: clamp(1.7rem, 3vw, 3rem);

  font-weight: 400;

  letter-spacing: -0.04em;
}

.occasion-info span {
  font-family: Arial, sans-serif;

  font-size: 0.68rem;

  color: #716b64;

  text-align: right;
}


/* HOVER */

.occasion-item:hover .occasion-image img {
  transform: scale(1.08);

  filter: saturate(1.1);
}

.occasion-item:hover .occasion-info h3 {
  font-style: italic;
}


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

@media (max-width: 800px) {

  .occasions {
    padding: 90px 6vw;

    display: block;
  }

  .occasion-intro {
    position: static;

    margin-bottom: 60px;
  }

  .occasion-intro h2 {
    font-size: clamp(3rem, 14vw, 5rem);
  }

  .occasion-description {
    max-width: 330px;
  }

  .occasion-item {
    grid-template-columns: 28px 1fr;

    gap: 15px;

    padding: 25px 0;
  }

  .occasion-number {
    align-self: start;

    padding-top: 8px;
  }

  .occasion-image {
    width: 100%;
    height: 220px;
  }

  .occasion-info {
    grid-column: 2;

    display: block;

    margin-top: 15px;
  }

  .occasion-info h3 {
    font-size: 2rem;

    margin-bottom: 8px;
  }

  .occasion-info span {
    font-size: 0.68rem;

    text-align: left;
  }

}
/* =========================
   PORTFOLIO
========================= */

.portfolio {
  background: #151412;
  color: #f5f0e8;

  padding: 150px 7vw;
}


/* HEADING */

.portfolio-heading {
  display: grid;

  grid-template-columns: 1.2fr 0.8fr;

  align-items: end;

  gap: 8vw;

  margin-bottom: 100px;
}

.portfolio-heading h2 {
  font-size: clamp(3.5rem, 7vw, 7rem);

  line-height: 0.88;

  font-weight: 400;

  letter-spacing: -0.055em;
}

.portfolio-heading h2 em {
  font-style: italic;
}

.portfolio-heading .section-label {
  color: #f5f0e8;
  opacity: 0.5;
}

.portfolio-intro {
  max-width: 300px;

  font-family: Arial, sans-serif;

  font-size: 0.85rem;

  line-height: 1.7;

  color: rgba(245,240,232,0.65);

  padding-bottom: 5px;
}


/* =========================
   GALLERY
========================= */

.portfolio-gallery {
  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  column-gap: 5vw;

  row-gap: 100px;

  align-items: start;
}


/* ITEMS */

.portfolio-item {
  display: block;

  color: inherit;

  text-decoration: none;
}


/* LARGE */

.portfolio-large {
  grid-column: 1;

  margin-top: 0;
}


/* SMALL */

.portfolio-small {
  grid-column: 2;

  margin-top: 170px;
}


/* WIDE */

.portfolio-wide {
  grid-column: 1 / -1;

  width: 72%;

  margin-left: auto;
}


/* FEATURE */

.portfolio-feature {
  grid-column: 1;

  width: 85%;

  margin-top: -20px;
}


/* =========================
   IMAGES
========================= */

.portfolio-image {
  overflow: hidden;

  background: #24211e;
}

.portfolio-large .portfolio-image {
  height: 620px;
}

.portfolio-small .portfolio-image {
  height: 420px;
}

.portfolio-wide .portfolio-image {
  height: 480px;
}

.portfolio-feature .portfolio-image {
  height: 500px;
}

.portfolio-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.8s ease;
}


/* IMAGE HOVER */

.portfolio-item:hover .portfolio-image img {
  transform: scale(1.045);
}


/* =========================
   IMAGE META
========================= */

.portfolio-meta {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding-top: 15px;

  font-family: Arial, sans-serif;

  font-size: 0.62rem;

  letter-spacing: 0.08em;

  color: rgba(245,240,232,0.58);
}

.portfolio-item:hover .portfolio-meta span:last-child {
  color: #f5f0e8;
}


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

.portfolio-footer {
  margin-top: 120px;

  padding-top: 30px;

  border-top: 1px solid rgba(245,240,232,0.2);

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 30px;
}

.portfolio-footer p {
  font-family: Arial, sans-serif;

  font-size: 0.75rem;

  line-height: 1.6;

  color: rgba(245,240,232,0.55);
}

.portfolio-link {
  color: #f5f0e8;

  text-decoration: none;

  font-family: Arial, sans-serif;

  font-size: 0.72rem;

  border-bottom: 1px solid rgba(245,240,232,0.5);

  padding-bottom: 7px;
}


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

@media (max-width: 800px) {

  .portfolio {
    padding: 100px 6vw;
  }

  .portfolio-heading {
    display: block;

    margin-bottom: 65px;
  }

  .portfolio-heading h2 {
    font-size: clamp(3.4rem, 15vw, 5rem);

    margin-bottom: 35px;
  }

  .portfolio-intro {
    max-width: 330px;
  }


  .portfolio-gallery {
    display: block;
  }


  .portfolio-item {
    width: 100%;

    margin: 0 0 65px;
  }


  .portfolio-large .portfolio-image {
    height: 430px;
  }

  .portfolio-small .portfolio-image {
    height: 360px;
  }

  .portfolio-wide .portfolio-image {
    height: 300px;
  }

  .portfolio-feature .portfolio-image {
    height: 390px;
  }


  .portfolio-meta {
    font-size: 0.58rem;

    padding-top: 12px;
  }


  .portfolio-footer {
    margin-top: 50px;

    display: block;
  }

  .portfolio-footer p {
    margin-bottom: 30px;
  }

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

.services {
  background: #f3efe8;
  color: #151412;

  padding: 150px 7vw;
}


/* TOP */

.services-top {
  display: grid;

  grid-template-columns: 1fr 1.4fr 0.7fr;

  gap: 5vw;

  align-items: start;

  margin-bottom: 120px;
}

.services-top h2 {
  font-size: clamp(3.5rem, 6vw, 6.5rem);

  line-height: 0.88;

  font-weight: 400;

  letter-spacing: -0.055em;
}

.services-top h2 em {
  font-style: italic;
}

.services-intro {
  max-width: 280px;

  font-family: Arial, sans-serif;

  font-size: 0.82rem;

  line-height: 1.7;

  color: #68615a;
}


/* MAIN LAYOUT */

.services-layout {
  display: grid;

  grid-template-columns: 1.25fr 0.75fr;

  gap: 8vw;

  align-items: start;
}


/* SERVICE INDEX */

.service-index {
  border-top: 1px solid rgba(21,20,18,0.25);
}

.service-row {
  position: relative;

  display: grid;

  grid-template-columns: 55px 1fr 35px;

  align-items: center;

  padding: 30px 0;

  border-bottom: 1px solid rgba(21,20,18,0.25);

  text-decoration: none;

  color: inherit;

  transition: padding 0.4s ease;
}

.service-number {
  font-family: Arial, sans-serif;

  font-size: 0.65rem;

  color: #817a72;
}

.service-name {
  font-size: clamp(2.2rem, 4vw, 4.5rem);

  font-weight: 400;

  letter-spacing: -0.045em;

  transition: transform 0.4s ease;
}

.service-arrow {
  font-family: Arial, sans-serif;

  font-size: 1rem;

  text-align: right;

  transition: transform 0.4s ease;
}

.service-details {
  position: absolute;

  left: 55px;

  bottom: 8px;

  font-family: Arial, sans-serif;

  font-size: 0.58rem;

  letter-spacing: 0.04em;

  color: #817a72;

  opacity: 0;

  transform: translateY(6px);

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}


/* HOVER */

.service-row:hover {
  padding-left: 12px;
}

.service-row:hover .service-name {
  font-style: italic;

  transform: translateX(5px);
}

.service-row:hover .service-arrow {
  transform: translate(5px, -5px);
}

.service-row:hover .service-details {
  opacity: 1;

  transform: translateY(0);
}


/* VISUAL */

.services-visual {
  position: sticky;

  top: 100px;
}

.services-image {
  width: 100%;

  height: 520px;

  overflow: hidden;
}

.services-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.8s ease;
}

.services-visual:hover img {
  transform: scale(1.04);
}

.services-visual p {
  max-width: 320px;

  margin-top: 20px;

  font-family: Arial, sans-serif;

  font-size: 0.72rem;

  line-height: 1.6;

  color: #706960;
}


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

@media (max-width: 800px) {

  .services {
    padding: 100px 6vw;
  }

  .services-top {
    display: block;

    margin-bottom: 70px;
  }

  .services-top h2 {
    font-size: clamp(3.4rem, 15vw, 5rem);

    margin-bottom: 35px;
  }

  .services-intro {
    max-width: 330px;
  }

  .services-layout {
    display: block;
  }

  .service-row {
    grid-template-columns: 35px 1fr 25px;

    padding: 25px 0;
  }

  .service-name {
    font-size: 2.4rem;
  }

  .service-details {
    position: static;

    grid-column: 2 / 3;

    margin-top: 7px;

    opacity: 1;

    transform: none;
  }

  .services-visual {
    position: static;

    margin-top: 70px;
  }

  .services-image {
    height: 400px;
  }

}
/* =========================
   PLANNING JOURNEY
========================= */

.journey {
  background: #151412;
  color: #f5f0e8;

  padding: 150px 7vw;
}


/* HEADER */

.journey-header {
  display: inline-block;

  margin-bottom: 45px;
}

.journey-header .section-label {
  color: #f5f0e8;

  opacity: 0.45;

  margin-bottom: 28px;
}

.journey-header h2 {
  font-size: clamp(3.5rem, 7vw, 7rem);

  line-height: 0.88;

  font-weight: 400;

  letter-spacing: -0.055em;
}

.journey-header h2 em {
  font-style: italic;
}


/* INTRO */

.journey-intro {
  max-width: 330px;

  margin-left: 50%;

  margin-bottom: 110px;
}

.journey-intro p {
  font-family: Arial, sans-serif;

  font-size: 0.82rem;

  line-height: 1.7;

  color: rgba(245,240,232,0.6);
}


/* STEPS */

.journey-steps {
  border-top: 1px solid rgba(245,240,232,0.2);
}


.journey-step {
  position: relative;

  display: grid;

  grid-template-columns: 90px 1fr 50px;

  gap: 30px;

  align-items: start;

  padding: 48px 0;

  border-bottom: 1px solid rgba(245,240,232,0.2);

  transition:
    padding 0.4s ease,
    background 0.4s ease;
}


/* NUMBER */

.journey-step-number {
  font-family: Arial, sans-serif;

  font-size: 0.68rem;

  color: rgba(245,240,232,0.42);

  padding-top: 9px;
}


/* CONTENT */

.journey-step-content {
  max-width: 650px;
}

.journey-step-content span {
  display: block;

  font-family: Arial, sans-serif;

  font-size: 0.58rem;

  letter-spacing: 0.15em;

  color: rgba(245,240,232,0.4);

  margin-bottom: 14px;
}

.journey-step-content h3 {
  font-size: clamp(2.3rem, 4vw, 4.5rem);

  line-height: 0.95;

  font-weight: 400;

  letter-spacing: -0.045em;

  margin-bottom: 18px;

  transition: font-style 0.3s ease;
}

.journey-step-content p {
  max-width: 440px;

  font-family: Arial, sans-serif;

  font-size: 0.76rem;

  line-height: 1.7;

  color: rgba(245,240,232,0.55);
}


/* ARROW */

.journey-mark {
  font-family: Arial, sans-serif;

  font-size: 0.9rem;

  color: rgba(245,240,232,0.45);

  padding-top: 8px;

  transition:
    transform 0.4s ease,
    color 0.4s ease;
}


/* HOVER */

.journey-step:hover {
  padding-left: 15px;
}

.journey-step:hover .journey-step-content h3 {
  font-style: italic;
}

.journey-step:hover .journey-mark {
  transform: translate(5px, -5px);

  color: #f5f0e8;
}


/* END */

.journey-end {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px;

  padding-top: 45px;
}

.journey-end span {
  font-family: Arial, sans-serif;

  font-size: 0.6rem;

  letter-spacing: 0.15em;

  color: rgba(245,240,232,0.4);
}

.journey-end a {
  color: #f5f0e8;

  text-decoration: none;

  font-family: Arial, sans-serif;

  font-size: 0.72rem;

  border-bottom: 1px solid rgba(245,240,232,0.5);

  padding-bottom: 7px;
}


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

@media (max-width: 800px) {

  .journey {
    padding: 100px 6vw;
  }

  .journey-header {
    margin-bottom: 35px;
  }

  .journey-header h2 {
    font-size: clamp(3.5rem, 15vw, 5rem);
  }

  .journey-intro {
    margin-left: 25%;

    margin-bottom: 70px;
  }

  .journey-step {
    grid-template-columns: 35px 1fr 20px;

    gap: 12px;

    padding: 35px 0;
  }

  .journey-step:hover {
    padding-left: 5px;
  }

  .journey-step-content h3 {
    font-size: 2.35rem;

    margin-bottom: 15px;
  }

  .journey-step-content p {
    font-size: 0.72rem;
  }

  .journey-end {
    display: block;

    padding-top: 35px;
  }

  .journey-end span {
    display: block;

    margin-bottom: 25px;
  }

}
/* =========================
   CREDIBILITY
========================= */

.credibility {
  background: #c8b8a3;
  color: #151412;

  padding: 150px 7vw;
}


/* HEADING */

.credibility-heading {
  margin-bottom: 110px;
}

.credibility-heading .section-label {
  margin-bottom: 30px;

  opacity: 0.5;
}

.credibility-heading h2 {
  font-size: clamp(3.5rem, 7vw, 7rem);

  line-height: 0.88;

  font-weight: 400;

  letter-spacing: -0.055em;
}

.credibility-heading h2 em {
  font-style: italic;
}


/* CONTENT */

.credibility-content {
  display: grid;

  grid-template-columns: 0.8fr 1.2fr;

  gap: 10vw;

  align-items: end;
}


.credibility-statement {
  max-width: 340px;

  font-family: Arial, sans-serif;

  font-size: 0.85rem;

  line-height: 1.75;

  color: #62594f;
}


/* FACTS */

.credibility-facts {
  display: grid;

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

  border-top: 1px solid rgba(21,20,18,0.3);
}


.credibility-fact {
  padding: 25px 20px 10px 0;

  border-right: 1px solid rgba(21,20,18,0.3);

  min-height: 150px;
}

.credibility-fact:last-child {
  border-right: none;

  padding-left: 20px;
}


.credibility-fact strong {
  display: block;

  font-size: clamp(3rem, 5vw, 5rem);

  line-height: 1;

  font-weight: 400;

  letter-spacing: -0.05em;

  margin-bottom: 15px;
}


.credibility-fact span {
  font-family: Arial, sans-serif;

  font-size: 0.6rem;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: #756b60;
}


/* BOTTOM */

.credibility-bottom {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px;

  margin-top: 110px;

  padding-top: 25px;

  border-top: 1px solid rgba(21,20,18,0.3);
}


.credibility-bottom span {
  font-family: Arial, sans-serif;

  font-size: 0.58rem;

  letter-spacing: 0.15em;

  color: #756b60;
}


.credibility-bottom p {
  font-family: Arial, sans-serif;

  font-size: 0.68rem;

  color: #756b60;
}


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

@media (max-width: 800px) {

  .credibility {
    padding: 100px 6vw;
  }

  .credibility-heading {
    margin-bottom: 75px;
  }

  .credibility-heading h2 {
    font-size: clamp(3.4rem, 15vw, 5rem);
  }


  .credibility-content {
    display: block;
  }


  .credibility-statement {
    margin-bottom: 65px;
  }


  .credibility-facts {
    grid-template-columns: 1fr;

    border-top: 1px solid rgba(21,20,18,0.3);
  }


  .credibility-fact {
    min-height: auto;

    padding: 25px 0;

    border-right: none;

    border-bottom: 1px solid rgba(21,20,18,0.3);
  }


  .credibility-fact:last-child {
    padding-left: 0;

    border-bottom: none;
  }


  .credibility-fact strong {
    font-size: 3.5rem;
  }


  .credibility-bottom {
    display: block;

    margin-top: 65px;
  }


  .credibility-bottom span {
    display: block;

    margin-bottom: 18px;
  }

}
/* =========================
   ACADEMY
========================= */

.academy {
  background: #e7dfd3;
  color: #151412;

  padding: 150px 7vw;
}


/* TOP */

.academy-top {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  padding-bottom: 35px;

  border-bottom: 1px solid rgba(21,20,18,0.25);
}

.academy-top .section-label {
  margin: 0;

  opacity: 0.55;
}

.academy-mark {
  font-family: Arial, sans-serif;

  font-size: 0.58rem;

  letter-spacing: 0.15em;

  color: #777067;
}


/* MAIN */

.academy-main {
  display: grid;

  grid-template-columns: 1.2fr 0.8fr;

  gap: 10vw;

  padding: 100px 0 130px;
}


/* TITLE */

.academy-title h2 {
  font-size: clamp(4rem, 8vw, 8rem);

  line-height: 0.84;

  font-weight: 400;

  letter-spacing: -0.06em;
}

.academy-title h2 em {
  font-style: italic;
}


/* COPY */

.academy-copy {
  max-width: 370px;

  align-self: end;
}

.academy-lead {
  font-size: 1.15rem;

  line-height: 1.4;

  margin-bottom: 30px;
}

.academy-copy > p:not(.academy-lead) {
  font-family: Arial, sans-serif;

  font-size: 0.78rem;

  line-height: 1.75;

  color: #696158;

  margin-bottom: 35px;
}


/* LINK */

.academy-link {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  color: #151412;

  text-decoration: none;

  font-family: Arial, sans-serif;

  font-size: 0.7rem;

  border-bottom: 1px solid rgba(21,20,18,0.45);

  padding-bottom: 8px;
}

.academy-link span {
  transition: transform 0.3s ease;
}

.academy-link:hover span {
  transform: translate(4px, -4px);
}


/* BOTTOM */

.academy-bottom {
  display: grid;

  grid-template-columns: 1.5fr 0.5fr;

  gap: 6vw;

  align-items: end;
}

.academy-image {
  height: 500px;

  overflow: hidden;
}

.academy-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.8s ease;
}

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


/* NOTE */

.academy-note {
  padding-bottom: 5px;
}

.academy-note span {
  display: block;

  font-family: Arial, sans-serif;

  font-size: 0.57rem;

  letter-spacing: 0.14em;

  color: #777067;

  margin-bottom: 20px;
}

.academy-note p {
  font-family: Arial, sans-serif;

  font-size: 0.75rem;

  line-height: 1.65;

  color: #696158;
}


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

@media (max-width: 800px) {

  .academy {
    padding: 100px 6vw;
  }

  .academy-top {
    display: block;

    padding-bottom: 25px;
  }

  .academy-mark {
    display: block;

    margin-top: 15px;
  }


  .academy-main {
    display: block;

    padding: 75px 0 80px;
  }

  .academy-title h2 {
    font-size: clamp(3.7rem, 16vw, 5.5rem);

    margin-bottom: 55px;
  }


  .academy-copy {
    max-width: 330px;
  }

  .academy-lead {
    font-size: 1.05rem;
  }


  .academy-bottom {
    display: block;
  }

  .academy-image {
    height: 360px;

    margin-bottom: 30px;
  }

  .academy-note {
    max-width: 300px;
  }

}
/* =========================
   THE STORY
========================= */

.story {
  background: #f3efe8;
  color: #151412;

  padding: 150px 7vw;
}


/* TOP */

.story-top {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  padding-bottom: 30px;

  border-bottom: 1px solid rgba(21,20,18,0.25);
}

.story-top .section-label {
  margin: 0;

  opacity: 0.5;
}

.story-top > span {
  font-family: Arial, sans-serif;

  font-size: 0.58rem;

  letter-spacing: 0.14em;

  color: #777067;
}


/* MAIN */

.story-main {
  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  gap: 10vw;

  padding: 110px 0 140px;
}


/* TITLE */

.story-title h2 {
  font-size: clamp(4rem, 8vw, 8rem);

  line-height: 0.84;

  font-weight: 400;

  letter-spacing: -0.06em;
}

.story-title h2 em {
  font-style: italic;
}


/* COPY */

.story-copy {
  max-width: 390px;

  align-self: end;
}

.story-lead {
  font-size: 1.2rem;

  line-height: 1.4;

  margin-bottom: 30px;
}

.story-copy p:not(.story-lead) {
  font-family: Arial, sans-serif;

  font-size: 0.78rem;

  line-height: 1.75;

  color: #696158;

  margin-bottom: 20px;
}


/* LINK */

.story-link {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  margin-top: 15px;

  color: #151412;

  text-decoration: none;

  font-family: Arial, sans-serif;

  font-size: 0.7rem;

  border-bottom: 1px solid rgba(21,20,18,0.45);

  padding-bottom: 8px;
}

.story-link span {
  transition: transform 0.3s ease;
}

.story-link:hover span {
  transform: translate(4px, -4px);
}


/* SIGNATURE */

.story-signature {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8vw;

  align-items: end;
}

.story-line {
  height: 1px;

  background: rgba(21,20,18,0.25);
}

.story-founder {
  border-top: 1px solid rgba(21,20,18,0.25);

  padding-top: 25px;
}

.story-founder span {
  display: block;

  font-family: Arial, sans-serif;

  font-size: 0.56rem;

  letter-spacing: 0.13em;

  color: #777067;

  margin-bottom: 20px;
}

.story-founder strong {
  display: block;

  font-size: clamp(1.7rem, 3vw, 3rem);

  font-weight: 400;

  letter-spacing: -0.04em;

  margin-bottom: 10px;
}

.story-founder p {
  font-family: Arial, sans-serif;

  font-size: 0.65rem;

  color: #777067;
}


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

@media (max-width: 800px) {

  .story {
    padding: 100px 6vw;
  }

  .story-top {
    display: block;
  }

  .story-top > span {
    display: block;

    margin-top: 15px;
  }


  .story-main {
    display: block;

    padding: 75px 0 90px;
  }

  .story-title h2 {
    font-size: clamp(3.8rem, 16vw, 5.5rem);

    margin-bottom: 60px;
  }

  .story-copy {
    max-width: 330px;
  }

  .story-lead {
    font-size: 1.05rem;
  }


  .story-signature {
    display: block;
  }

  .story-line {
    display: none;
  }

  .story-founder {
    padding-top: 25px;
  }

  .story-founder strong {
    font-size: 2rem;
  }

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

.contact {
  background: #151412;
  color: #f5f0e8;

  padding: 150px 7vw;
}


/* TOP */

.contact-top {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  padding-bottom: 30px;

  border-bottom: 1px solid rgba(245,240,232,0.2);
}

.contact-top .section-label {
  margin: 0;

  color: #f5f0e8;

  opacity: 0.5;
}

.contact-top > span {
  font-family: Arial, sans-serif;

  font-size: 0.58rem;

  color: rgba(245,240,232,0.4);
}


/* MAIN */

.contact-main {
  display: grid;

  grid-template-columns: 1.2fr 0.8fr;

  gap: 10vw;

  padding: 110px 0 130px;
}


/* TITLE */

.contact-title h2 {
  font-size: clamp(4rem, 8vw, 8rem);

  line-height: 0.84;

  font-weight: 400;

  letter-spacing: -0.06em;
}

.contact-title h2 em {
  font-style: italic;
}


/* COPY */

.contact-copy {
  max-width: 360px;

  align-self: end;
}

.contact-copy > p {
  font-family: Arial, sans-serif;

  font-size: 0.85rem;

  line-height: 1.75;

  color: rgba(245,240,232,0.6);

  margin-bottom: 35px;
}


/* WHATSAPP BUTTON */

.contact-button {
  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 100%;

  padding: 20px 0;

  border-top: 1px solid rgba(245,240,232,0.35);

  border-bottom: 1px solid rgba(245,240,232,0.35);

  color: #f5f0e8;

  text-decoration: none;

  font-family: Arial, sans-serif;

  font-size: 0.72rem;

  transition: padding 0.35s ease;
}

.contact-button span {
  transition: transform 0.35s ease;
}

.contact-button:hover {
  padding-left: 10px;
}

.contact-button:hover span {
  transform: translate(5px, -5px);
}


/* EMAIL */

.contact-email {
  display: inline-block;

  margin-top: 25px;

  color: rgba(245,240,232,0.55);

  text-decoration: none;

  font-family: Arial, sans-serif;

  font-size: 0.68rem;

  border-bottom: 1px solid rgba(245,240,232,0.3);

  padding-bottom: 6px;
}


/* BOTTOM */

.contact-bottom {
  display: grid;

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

  border-top: 1px solid rgba(245,240,232,0.2);

  padding-top: 25px;
}

.contact-bottom > div {
  padding-right: 25px;

  border-right: 1px solid rgba(245,240,232,0.2);
}

.contact-bottom > div:not(:first-child) {
  padding-left: 25px;
}

.contact-bottom > div:last-child {
  border-right: none;
}

.contact-bottom span {
  display: block;

  font-family: Arial, sans-serif;

  font-size: 0.55rem;

  letter-spacing: 0.14em;

  color: rgba(245,240,232,0.4);

  margin-bottom: 12px;
}

.contact-bottom p {
  font-family: Arial, sans-serif;

  font-size: 0.68rem;

  color: rgba(245,240,232,0.65);
}


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

@media (max-width: 800px) {

  .contact {
    padding: 100px 6vw;
  }

  .contact-main {
    display: block;

    padding: 75px 0 80px;
  }

  .contact-title h2 {
    font-size: clamp(3.8rem, 16vw, 5.5rem);

    margin-bottom: 60px;
  }

  .contact-copy {
    max-width: 330px;
  }

  .contact-bottom {
    display: block;
  }

  .contact-bottom > div,
  .contact-bottom > div:not(:first-child) {
    padding: 22px 0;

    border-right: none;

    border-bottom: 1px solid rgba(245,240,232,0.2);
  }

  .contact-bottom > div:last-child {
    border-bottom: none;
  }

}
/* =========================
   FINAL DESKTOP READABILITY
========================= */

@media (min-width: 801px) {

  body {
    font-size: 16px;
  }

  p {
    line-height: 1.6;
  }

  .contact-copy > p,
  .contact-bottom p {
    font-size: 0.78rem;
  }

  .contact-bottom span {
    font-size: 0.62rem;
  }

}
/* =========================
   OCCASION TEXT — READABILITY
========================= */

@media (min-width: 801px) {

  .occasion-item p,
  .occasion-item small,
  .occasion-item span {
    font-size: 0.68rem;
    line-height: 1.5;
  }

}
/* =========================
   POLISH #3 — SECTION RHYTHM
========================= */

@media (min-width: 801px) {

  /* Give major sections a consistent breathing room */
  section {
    position: relative;
  }

  /* Keep headings from sitting too close to surrounding content */
  section h2 {
    margin-bottom: 1.2rem;
  }

  /* Improve the space around descriptive text */
  section p {
    margin-top: 0.5rem;
  }

  /* Prevent images from feeling cramped */
  section img {
    display: block;
  }

}
/* =========================
   POLISH #4 — INTERACTIONS
========================= */

a {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

/* Main CTA buttons */

.contact-button,
.hero-button {
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    padding 0.25s ease;
}

.contact-button:hover,
.hero-button:hover {
  opacity: 0.75;
}

.contact-button:active,
.hero-button:active {
  transform: scale(0.98);
}

/* Navigation links */

nav a {
  transition: opacity 0.25s ease;
}

nav a:hover {
  opacity: 0.55;
}
/* =========================
   FINAL RESPONSIVE SAFETY
========================= */

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}