@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500&display=swap");

/* Shared header and hero geometry for internal pages only. */
/* Keep every internal page title consistent without making it visually heavy. */
html body .page-hero h1,
html body .hero h1 {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
}

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(248, 247, 244, .97) !important;
  border-bottom: 1px solid rgba(17, 17, 17, .12) !important;
  backdrop-filter: blur(12px) !important;
}

.site-header .container {
  width: min(1650px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.site-header .nav {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: 100px !important;
  padding: 0 !important;
}

.site-header .brand {
  display: block !important;
  grid-column: 1 !important;
  justify-self: start !important;
  line-height: 1 !important;
}

.site-header .brand .mo {
  display: none !important;
}

.site-header .brand::before {
  content: "MAKEUP BY ORNELLA" !important;
  display: block !important;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-size: 16.32px !important;
  line-height: 18.77px !important;
  font-weight: 500 !important;
  letter-spacing: 2.28px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.site-header .brand .name {
  display: none !important;
}

.site-header .nav-links {
  grid-column: 2 / 5 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important;
  min-width: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12.48px !important;
  letter-spacing: 1.75px !important;
  text-transform: uppercase !important;
}

.site-header .nav-links a {
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* The requested internal hero photographs use the same 3:4 frame. */
body.internal-photo-standard .page-hero .hero-visual {
  width: min(100%, 640px) !important;
  max-width: 640px !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  justify-self: end !important;
  align-self: start !important;
  overflow: hidden !important;
}

body.internal-photo-standard .page-hero .hero-visual img,
body.internal-photo-standard .page-hero .hero-visual .img-main {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  object-position: center top !important;
}

@media (max-width: 960px) {
  .site-header .container {
    width: 100% !important;
    padding: 0 18px !important;
  }

  .site-header .nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding: 13px 0 !important;
  }

  .site-header .brand {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .site-header .brand::before {
    content: none !important;
    display: none !important;
  }

  .site-header .brand .name {
    display: none !important;
  }

  .site-header .nav-links {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 0 !important;
  }

  .site-header .nav-links a {
    display: block !important;
    width: 100% !important;
    padding: 4px 2px !important;
    text-align: center !important;
    font-size: .61rem !important;
    line-height: 1.25 !important;
    letter-spacing: .09em !important;
  }

  body.internal-photo-standard .page-hero .hero-visual {
    width: 100% !important;
    max-width: 700px !important;
    justify-self: start !important;
  }

  body.natural-mobile-hero .page-hero {
    padding: 0 0 48px !important;
  }

  body.natural-mobile-hero .page-hero > .container.hero-grid {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  body.natural-mobile-hero .page-hero .hero-copy {
    width: 100% !important;
    max-width: none !important;
    padding: 36px 18px 34px !important;
  }

  body.natural-mobile-hero .page-hero .hero-visual {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    aspect-ratio: 3 / 4 !important;
    justify-self: stretch !important;
  }

  body.natural-mobile-hero .page-hero .hero-visual img,
  body.natural-mobile-hero .page-hero .hero-visual .img-main {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
  }

  body.internal-lang-de .site-header .container {
    padding: 0 14px !important;
  }

  body.internal-lang-de .site-header .nav {
    gap: 8px !important;
    padding: 14px 0 11px !important;
  }

  body.internal-lang-de .site-header .brand .name {
    font-size: .78rem !important;
    letter-spacing: .1em !important;
  }

  body.internal-lang-de .site-header .nav-links a {
    padding: 4px 0 !important;
    font-size: .56rem !important;
    letter-spacing: .045em !important;
  }

  body.internal-lang-de .page-hero h1 {
    font-size: clamp(2.45rem, 12vw, 3.75rem) !important;
    line-height: .96 !important;
    hyphens: auto !important;
  }
}

@media (max-width: 390px) {
  .site-header .container {
    padding: 0 12px !important;
  }

  .site-header .brand .name {
    font-size: .76rem !important;
    letter-spacing: .12em !important;
  }

  .site-header .nav-links a {
    font-size: .57rem !important;
    letter-spacing: .06em !important;
  }

  body.internal-lang-de .site-header .nav-links a {
    font-size: .52rem !important;
    letter-spacing: .025em !important;
  }
}