/* Ornamental controls: the frame is separate from the clickable label.
   No clipping or backdrop filters on anchors, so borders/focus/text stay intact. */
.button, .nav-download {
  position: relative;
  isolation: isolate;
  overflow: visible;
  clip-path: none;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: var(--serif);
  font-weight: 600;
  text-transform: uppercase;
  text-shadow: none;
  transform: none;
  filter: none;
  transition: color .2s;
  padding: 20px 32px;
  min-height: 64px;
  gap: 18px;
  font-size: 18px;
  line-height: 1.2;
}
.button::before, .nav-download::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  width: auto; height: auto; border: 0;
  background: url('./assets/button-filled.svg') center / 100% 100% no-repeat;
  opacity: 1; pointer-events: none;
  transition: filter .2s, opacity .2s;
}
.button:hover, .nav-download:hover {
  transform: none; filter: none; background: none; box-shadow: none;
}
.button:hover::before, .nav-download:hover::before { filter: brightness(1.1); }
.button::after, .nav-download::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: url('./assets/button-filled.svg') center / 100% 100% no-repeat;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.button:hover::after, .button:focus-visible::after,
.nav-download:hover::after, .nav-download:focus-visible::after { opacity: 1; }
.button:hover::before, .button:focus-visible::before,
.nav-download:hover::before, .nav-download:focus-visible::before { opacity: 0; }
.button-gold:hover::after, .nav-download:hover::after { filter: brightness(1.08); }
.button-gold { color: #191613; }
.button-glass, .hero-actions .button { color: #f5ead8; }
.button:hover, .button:focus-visible,
.hero-actions .button:hover, .hero-actions .button:focus-visible { color: #171513; }
.button-glass::before, .hero-actions .button::before { background-image: url('./assets/button-outline.svg'); }
.hero-actions { align-items: center; gap: 25px; }
.hero-actions .button { min-height: 78px; padding: 23px 42px; }
.hero-actions .button-gold { min-width: 355px; font-size: 24px; }
.hero-actions .button-glass { min-width: 250px; font-size: 20px; }
.hero-actions .button > span { font-size: 15px; }
.button:focus-visible, .nav-download:focus-visible {
  outline: 2px solid #f6e3b4; outline-offset: 5px;
  box-shadow: none; text-decoration: underline; text-underline-offset: 5px;
}
.hero-title {
  font-family: var(--serif); font-size: clamp(55px, 6vw, 88px);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: -1px; line-height: 1.05;
}
.hero-bottom { bottom: 77px; }
.hero-bottom > .hero-language { font-family: var(--serif); font-size: 20px; letter-spacing: 4px; font-weight: 500; }
.site-header { gap: 30px; }
.site-header::after { display: none; }
.site-header nav {
  margin-left: auto; gap: 27px;
  font-family: var(--serif); font-weight: 600; font-size: 17px;
}
.site-header nav > a:not(.nav-download) { position: relative; padding-block: 10px; white-space: nowrap; }
.site-header nav > a:not(.nav-download)::after {
  content: ''; position: absolute; top: calc(100% - 2px); left: 50%;
  width: 78px; height: 14px; transform: translateX(-50%);
  background: url('./assets/nav-ornament.svg') center / contain no-repeat;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.site-header nav > a:not(.nav-download):hover::after,
.site-header nav > a:not(.nav-download):focus-visible::after,
.site-header nav > a.active::after { opacity: 1; }
.site-header nav > a:not(.nav-download):hover { text-shadow: none; color: #fff2d7; }
.site-header nav > .nav-download {
  display: inline-flex; justify-content: center; align-items: center;
  min-width: 185px; padding: 16px 24px; min-height: 60px;
  color: #191613; font-size: 19px; font-weight: 500;
}
.nav-download > span { display: none; }
.menu-toggle {
  display: none; order: 3; width: 36px; height: 40px;
  padding: 5px; margin-left: 0;
  border: 0; background: none;
  flex: 0 0 auto; align-items: center; justify-content: center;
}
.menu-toggle .dot-grid {
  display: grid; grid-template-columns: repeat(3, 5px); gap: 5px;
  width: auto; height: auto; margin: 0; background: none;
  transform: none!important;
}
.dot-grid i {
  width: 5px; height: 5px; display: block;
  border-radius: 50%; background: #f2e8d6;
  transition: background .2s, transform .2s;
}
.menu-toggle:hover .dot-grid i { background: #d6b577; }
.menu-toggle[aria-expanded=true] .dot-grid i { background: #d6b577; }
.menu-toggle[aria-expanded=true] .dot-grid i:nth-child(2),
.menu-toggle[aria-expanded=true] .dot-grid i:nth-child(4),
.menu-toggle[aria-expanded=true] .dot-grid i:nth-child(6),
.menu-toggle[aria-expanded=true] .dot-grid i:nth-child(8) { transform: scale(.35); }
/* Desktop/tablet keep the full navbar; nine dots are phone-only. */
@media (min-width: 781px) {
  .site-header nav.open {
    position: static; display: flex; flex-direction: row;
  }
  html:not(.js-enabled) .menu-toggle { display: none; }
}
@media (max-width: 1180px) and (min-width: 781px) {
  .site-header { padding-inline: 25px; gap: 20px; }
  .site-header nav { gap: 17px; font-size: 15px; }
  .site-header nav > .nav-download { min-width: 150px; font-size: 16px; padding-inline: 20px; }
  .brand { font-size: 23px; gap: 8px; }
  .brand small { font-size: 6px; letter-spacing: 1.3px; }
}
@media (min-width: 781px) and (max-width: 980px) {
  .site-header { padding-inline: 18px; gap: 16px; }
  .site-header nav { gap: 14px; font-size: 13px; }
  .site-header nav > .nav-download { min-width: 135px; padding-inline: 16px; font-size: 15px; }
  .brand { font-size: 20px; }
  .brand img { width: 30px; height: 34px; }
  .brand small { display: none; }
}
@media (max-width: 780px) {
  .site-header nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 25px; background: #080e16fa; }
  .site-header nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 17px; width: auto; left: 0; right: 0; }
  .site-header nav > .nav-download { margin-top: 5px; }
  .site-header nav > a:not(.nav-download)::after { left: 40px; top: calc(100% - 4px); }
  .site-header { gap: 15px; }
}
@media (max-width: 780px) {
  .site-header nav { font-size: 18px; }
  .site-header nav > a:not(.nav-download) { padding: 8px 0; }
  .menu-toggle { display: flex; width: 36px; height: 40px; }
  .hero-title { font-size: clamp(32px, 10vw, 47px); line-height: 1.1; }
  .hero-bottom { bottom: 76px; }
  .hero-bottom > .hero-language { font-size: 15px; letter-spacing: 2.5px; }
  .hero-actions { gap: 13px; }
  .hero-actions .button, .hero-actions .button-gold, .hero-actions .button-glass {
    min-width: 0; width: 300px; max-width: 100%; min-height: 60px;
    padding: 18px 20px; font-size: 17px; gap: 12px; white-space: nowrap;
  }
  .download-copy .button { font-size: 17px; line-height: 1.2; padding-inline: 22px; gap: 12px; }
  .button::before, .nav-download::before { background-size: 100% 100%; }
  html:not(.js-enabled) .site-header nav { display: flex; position: static; }
  html:not(.js-enabled) .menu-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .button::before, .button::after, .nav-download::before, .nav-download::after, .dot-grid i,
  .site-header nav > a::after { transition: none; }
}
/* BUY NOW inverted style: a stable parchment base and one white overlay.
   Official corner/diamond masks define the silhouette. No brightness effect. */
.parchment-button,
.site-header nav > .parchment-button,
.download-copy > .parchment-button {
  display: inline-flex; align-items: center; justify-content: center;
  max-width: 100%; min-height: 60px; padding: 16px 24px;
  font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.2;
  color: #000; letter-spacing: 0;
}
.parchment-button:hover, .parchment-button:focus-visible { color: #000; }
.parchment-button::before,
.parchment-button::after {
  mask-image: url('./assets/diamond-hover-mask-decor-top.svg'), url('./assets/diamond-hover-mask-decor-bottom.svg'), url('./assets/diamond-hover-mask-corner-1.svg'), url('./assets/diamond-hover-mask-corner-2.svg'), url('./assets/diamond-hover-mask-corner-3.svg'), url('./assets/diamond-hover-mask-corner-4.svg');
  mask-position: center top, center bottom, left top, right top, left bottom, right bottom;
  mask-size: 800px 800px;
  mask-repeat: no-repeat;
  mask-composite: intersect;
}
.parchment-button::before,
.parchment-button:hover::before,
.parchment-button:focus-visible::before {
  background: radial-gradient(circle, #fff 0, #ddc9a7);
  opacity: 1; filter: none; transition: none;
}
.parchment-button::after {
  background: #fff; filter: none; transition: opacity .4s ease;
}
.parchment-button:hover::after,
.parchment-button:focus-visible::after { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .parchment-button::after { transition: none; }
}
@media (min-width: 781px) and (max-width: 1180px) {
  .site-header nav > .parchment-button,
  .download-copy > .parchment-button { font-size: 16px; }
}
@media (min-width: 781px) and (max-width: 980px) {
  .site-header nav > .parchment-button,
  .download-copy > .parchment-button { font-size: 15px; }
}