/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: #111; background: #fff; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { text-decoration: none; color: inherit; transition: color 0.3s; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ===== CSS VARIABLES ===== */
:root {
  --accent: #7B52AE;
  --accent-light: #9470C4;
  --accent-dark: #5E3D8F;
  --accent-on-dark: #E0D6ED;
  --purple-deep: #1a0a2e;
  --navy: #0d1b3e;
  --black: #111;
  --white: #fff;
  --offwhite: #fafaf8;
  --gray-100: #f5f5f5;
  --gray-200: #e8e8e8;
  --gray-300: #d4d4d4;
  --gray-500: #888;
  --gray-700: #444;
  --builder-gold: #b08d4f;
  --container: 1400px;
  --header-h: 70px;
  --transition: 0.3s ease;
  --font-display: 'Cormorant Infant', Georgia, serif;
  --font-body: 'Golos Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.2; }
.section-title { font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; font-family: var(--font-body); font-weight: 400; text-align: center; margin-bottom: 48px; color: var(--gray-700); }
.quote-text { font-family: var(--font-display); font-style: normal; }

/* ===== CONTAINER ===== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

/* ===== BUTTONS ===== */
.btn { display: inline-block; padding: 14px 36px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; transition: all var(--transition); border: 1px solid transparent; }
.btn-gold { background: var(--accent); color: var(--white); border-color: var(--accent); }
.btn-gold:hover { background: var(--accent-light); border-color: var(--accent-light); }
.btn-outline { background: transparent; color: var(--white); border-color: var(--accent-on-dark); }
.btn-outline:hover { background: var(--accent-on-dark); color: var(--black); }
.btn-outline-dark { background: transparent; color: var(--black); border-color: var(--black); }
.btn-outline-dark:hover { background: var(--black); color: var(--white); }

/* ===== HEADER ===== */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: all 0.4s ease; }
.header--transparent { background: transparent; }
.header--solid { background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-200); }
.header--transparent .nav-link, .header--transparent .header__logo-text { color: var(--white); }
.header--solid .nav-link, .header--solid .header__logo-text { color: var(--black); }

.header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 140px; }
.header__nav { display: flex; gap: 32px; align-items: center; flex: 1; }
.header__nav--right { justify-content: flex-end; }
.nav-link { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 400; transition: opacity var(--transition); position: relative; }
.nav-link:hover { opacity: 0.6; }
.nav-link--active::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1px; background: currentColor; }

.header__logo { flex: 0 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 12px; }
.header__logo img { height: 48px; width: auto; }
.header__logo-text { font-family: var(--font-display); font-size: 24px; letter-spacing: 0.12em; font-weight: 400; }

/* Mobile menu */
.hamburger { display: none; flex-direction: column; gap: 5px; width: 24px; cursor: pointer; z-index: 1001; }
.hamburger span { display: block; height: 1.5px; background: currentColor; transition: all 0.3s; width: 100%; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-menu { display: none; position: fixed; inset: 0; background: var(--white); z-index: 999; padding: 100px 40px 40px; flex-direction: column; gap: 20px; }
.mobile-menu.active { display: flex; }
.mobile-menu a { font-size: 22px; font-family: var(--font-display); color: var(--black); letter-spacing: 0.05em; }
.mobile-menu__close { position: absolute; top: 24px; right: 24px; background: none; border: none; font-size: 32px; cursor: pointer; color: var(--black); line-height: 1; }
.mobile-menu__divider { height: 1px; background: var(--gray-200); margin: 4px 0; }
.mobile-menu a.mobile-menu__small { font-size: 16px; font-family: var(--font-body); color: var(--gray-500); }

/* ===== HERO ===== */
.hero { position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 600px; overflow: hidden; background: #000; }
.hero__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%); z-index: 1; pointer-events: none; }
.hero__sound { position: absolute; bottom: 48px; right: 40px; z-index: 10; background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.25); color: #fff; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s; }
.hero__sound:hover { background: rgba(255,255,255,0.3); }
.hero__sound-off { display: inline; }
.hero__sound.unmuted .hero__sound-off { display: none; }
.hero__bottom { position: absolute; bottom: 48px; left: 0; right: 0; z-index: 10; text-align: center; color: #fff; }
.hero__tagline { font-family: var(--font-body); font-style: normal; font-weight: 300; font-size: 22px; letter-spacing: 0.14em; line-height: 1.5; margin-bottom: 20px; text-shadow: 0 1px 8px rgba(0,0,0,0.45); opacity: 0.92; }
.hero__scroll { background: none; border: none; color: #fff; cursor: pointer; opacity: 0.8; transition: opacity 0.3s; animation: heroScroll 2s ease-in-out infinite; display: inline-block; }
.hero__scroll:hover { opacity: 1; }
@keyframes heroScroll { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.hero__scroll svg { display: block; }

/* ===== SEARCH BAR ===== */
.search-bar { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 900; background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 16px 32px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.search-bar.active { opacity: 1; visibility: visible; transform: translateY(0); }
.search-bar__input { width: 100%; padding: 12px 16px; border: 1px solid var(--gray-200); font-size: 15px; font-family: inherit; }
.search-bar__input:focus { outline: none; border-color: var(--accent); }
.search-bar__results { margin-top: 8px; max-height: 360px; overflow-y: auto; }
.search-bar__item { display: flex; align-items: center; gap: 12px; padding: 10px 8px; text-decoration: none; color: var(--black); transition: background 0.2s; }
.search-bar__item:hover { background: var(--gray-100); }
.search-bar__item img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.search-bar__item-name { font-size: 14px; font-weight: 400; }
.search-bar__item-collection { font-size: 12px; color: var(--gray-500); }
.search-bar__empty { padding: 16px 8px; font-size: 14px; color: var(--gray-500); }
.search-bar--dark { background: rgba(0,0,0,0.85); backdrop-filter: blur(16px); border-bottom-color: rgba(255,255,255,0.1); }
.search-bar--dark .search-bar__input { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff; }
.search-bar--dark .search-bar__input::placeholder { color: rgba(255,255,255,0.5); }
.search-bar--dark .search-bar__item { color: #fff; }
.search-bar--dark .search-bar__item:hover { background: rgba(255,255,255,0.1); }
.search-bar--dark .search-bar__item-collection { color: rgba(255,255,255,0.5); }
.search-bar--dark .search-bar__empty { color: rgba(255,255,255,0.5); }

/* ===== AUTH MODAL ===== */
.auth-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center; }
.auth-modal.active { display: flex; }
.auth-modal__card { background: var(--white); padding: 48px; max-width: 420px; width: 90%; position: relative; }
.auth-modal__close { position: absolute; top: 16px; right: 16px; font-size: 24px; cursor: pointer; color: var(--gray-500); background: none; border: none; }
.auth-modal__title { font-family: var(--font-display); font-size: 24px; text-align: center; margin-bottom: 8px; }
.auth-modal__tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 1px solid var(--gray-200); }
.auth-modal__tab { flex: 1; padding: 12px; text-align: center; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; color: var(--gray-500); transition: all 0.2s; background: none; border-top: none; border-left: none; border-right: none; }
.auth-modal__tab.active { color: var(--black); border-bottom-color: var(--accent); }
.auth-modal__form { display: flex; flex-direction: column; gap: 16px; }
.auth-modal__form[hidden] { display: none; }
.auth-modal__input { padding: 12px 16px; border: 1px solid var(--gray-200); font-size: 14px; font-family: inherit; }
.auth-modal__input:focus { outline: none; border-color: var(--accent); }
.auth-modal__submit { padding: 14px; background: var(--accent); color: var(--white); border: none; font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; font-family: inherit; transition: background 0.2s; }
.auth-modal__submit:hover { background: var(--accent-light); }
.auth-modal__error { font-size: 13px; color: #c0392b; text-align: center; }
.auth-modal__check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--gray-700); cursor: pointer; user-select: none; }
.auth-modal__check input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.auth-modal__check a { color: var(--accent); text-decoration: underline; }
.auth-modal__check a:hover { opacity: 0.8; }

/* Product price */
.product-detail__price { font-size: 20px; font-weight: 500; color: var(--black); margin: 8px 0 16px; letter-spacing: 0.02em; }

/* Product detail CTA row */
.product-detail__cta-row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 0; }
.product-detail__heart-btn { display: flex; align-items: center; justify-content: center; padding: 12px 14px; border: 1px solid var(--gray-200); background: var(--white); cursor: pointer; font-family: inherit; color: var(--gray-700); transition: all 0.2s; flex-shrink: 0; }
.product-detail__heart-btn:hover { border-color: var(--accent); color: var(--accent); }
.product-detail__heart-btn.liked { color: #c0392b; border-color: #c0392b; }

/* Product lead form */
.product-lead-form {
  margin-top: 32px;
  padding: 28px 24px 24px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
}
.product-lead-form__header {
  margin-bottom: 20px;
}
.product-lead-form__title {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-700);
  font-weight: 500;
  margin-bottom: 6px;
}
.product-lead-form__subtitle {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 15px;
  color: var(--gray-500);
  letter-spacing: 0.02em;
}
.product-lead-form__fields {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.product-lead-form__input {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  font-size: 14px;
  font-family: inherit;
  color: var(--black);
  letter-spacing: 0.02em;
  transition: border-color var(--transition);
}
.product-lead-form__input::placeholder {
  color: var(--gray-500);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.product-lead-form__input:focus {
  outline: none;
  border-color: var(--accent);
}
.product-lead-form__btn {
  display: block;
  width: 100%;
  padding: 13px 24px;
  background: transparent;
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.product-lead-form__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.product-lead-form__msg {
  font-size: 13px;
  margin-top: 12px;
  text-align: center;
  min-height: 20px;
  letter-spacing: 0.02em;
}
.product-lead-form__msg--ok { color: #27ae60; }
.product-lead-form__msg--error { color: #c0392b; }


/* Structured materials */
.materials-group { margin-bottom: 6px; font-size: 14px; color: var(--gray-700); line-height: 1.6; }

/* ===== PRODUCT SPECS (jeweler-supplied technical block) ===== */
.product-specs { margin: 24px 0 28px; padding-top: 20px; border-top: 1px solid var(--gray-200); }
.product-specs__title { font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--black); letter-spacing: 0.04em; margin: 0 0 14px; }
.product-specs__list { margin: 0; }
.product-specs__row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--gray-100); font-size: 13px; line-height: 1.6; }
.product-specs__row:last-child { border-bottom: none; }
.product-specs__row dt { color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; font-weight: 500; padding-top: 3px; }
.product-specs__row dd { margin: 0; color: var(--gray-700); }
@media (max-width: 720px) {
  .product-specs__row { grid-template-columns: 1fr; gap: 4px; padding: 8px 0; }
  .product-specs__row dt { font-size: 10px; }
}

/* ===== FAVORITES HEART ===== */
.product-card { position: relative; }
.product-card__heart { position: absolute; top: 12px; right: 12px; z-index: 5; background: rgba(255,255,255,0.8); border: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; opacity: 0; }
.product-card:hover .product-card__heart { opacity: 1; }
.product-card__heart.liked { opacity: 1; color: #c0392b; }
.product-card__heart svg { width: 18px; height: 18px; }

/* ===== PRODUCT GRID ===== */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (min-width: 1281px) { #featured .product-grid { grid-template-columns: repeat(5, 1fr); } }
.product-card { text-align: center; cursor: pointer; text-decoration: none; display: block; }
.product-card__image { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--white); margin-bottom: 16px; display: flex; align-items: center; justify-content: center; }
.product-card__image img { width: 85%; height: 85%; object-fit: contain; transition: opacity 0.5s ease; }
.product-card__image img.hover-img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 85%; height: 85%; opacity: 0; }
.product-card:hover .product-card__image img.hover-img { opacity: 1; }
.product-card:hover .product-card__image img.main-img { opacity: 0; }
.product-card__collection { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 4px; }
.product-card__name { font-size: 14px; color: var(--black); margin-bottom: 6px; font-weight: 400; }
.product-card__link { font-size: 12px; color: var(--accent-dark); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0; transition: opacity var(--transition); }
.product-card:hover .product-card__link { opacity: 1; }

/* ===== GALLERY GRID (Parure-style) ===== */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; grid-auto-flow: dense; }
.gallery-item { position: relative; overflow: hidden; background: var(--white); cursor: pointer; text-decoration: none; display: block; color: inherit; }
.gallery-item__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--white); display: flex; align-items: center; justify-content: center; }
.gallery-item__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: opacity 0.4s ease; }
.gallery-item__media video { width: 100%; height: 100%; object-fit: contain; background: var(--white); }
.gallery-item__info { padding: 14px 16px 16px; position: relative; }
.gallery-item__collection { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 4px; }
.gallery-item__name { font-size: 13px; color: var(--black); font-weight: 500; margin-bottom: 4px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.03em; }
.gallery-item__materials { font-size: 11px; color: var(--gray-500); line-height: 1.4; }
.gallery-item__arrow { position: absolute; right: 16px; bottom: 16px; font-size: 18px; color: var(--gray-500); opacity: 0; transition: opacity 0.3s; }
.gallery-item:hover .gallery-item__arrow { opacity: 1; }
.gallery-item__heart { position: absolute; top: 8px; right: 8px; z-index: 5; background: rgba(255,255,255,0.85); border: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; opacity: 0; }
.gallery-item:hover .gallery-item__heart { opacity: 1; }
.gallery-item__heart.liked { opacity: 1; color: #c0392b; }
.gallery-item__heart svg { width: 16px; height: 16px; }

/* Photo selector dots */
.gallery-selector { display: flex; gap: 3px; position: absolute; bottom: 0; left: 16px; right: 16px; height: 3px; opacity: 0; transition: opacity 0.3s; }
.gallery-item:hover .gallery-selector { opacity: 1; }
.gallery-selector__dot { flex: 1; height: 100%; background: var(--gray-200); cursor: pointer; transition: background 0.2s; }
.gallery-selector__dot.active { background: var(--accent); }
.gallery-selector__dot:hover { background: var(--accent-light); }

/* Hero items (show/editorial images) */
.gallery-item--hero { grid-column: span 2; grid-row: span 2; }
.gallery-item--hero .gallery-item__media { aspect-ratio: auto; height: 100%; min-height: 400px; }
.gallery-item--hero .gallery-item__media img { object-fit: cover; padding: 0; }
.gallery-item--hero .gallery-item__info { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%); }
.gallery-item--hero .gallery-item__collection { color: rgba(255,255,255,0.7); }
.gallery-item--hero .gallery-item__name { font-size: 20px; font-family: var(--font-display); color: #fff; text-transform: none; letter-spacing: 0; }
.gallery-item--hero .gallery-item__materials { color: rgba(255,255,255,0.6); }
.gallery-item--hero .gallery-item__arrow { color: #fff; }
.gallery-item--hero-right { grid-column: 3 / span 2; }

/* Video items — span 2 rows */
.gallery-item--video { grid-row: span 2; }
.gallery-item--video .gallery-item__media { aspect-ratio: auto; height: 100%; }
.gallery-item--video .gallery-item__media video { height: 100%; object-fit: cover; padding: 0; }
.gallery-item--video .gallery-item__info { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%); }
.gallery-item--video .gallery-item__collection { color: rgba(255,255,255,0.7); }
.gallery-item--video .gallery-item__name { color: #fff; text-transform: none; }
.gallery-item--video .gallery-item__materials { color: rgba(255,255,255,0.6); }

/* Video positioning: left or right */
.gallery-item--pos-right.gallery-item--video-hero { grid-column: 3 / span 2; }
.gallery-item--pos-left.gallery-item--video-hero { grid-column: 1 / span 2; }
.gallery-item--pos-right.gallery-item--video { grid-column: 4 / 5; }
.gallery-item--pos-left.gallery-item--video { grid-column: 1 / 2; }

/* Video hero — 2x2 block */
.gallery-item--video-hero { grid-column: span 2; grid-row: span 2; }
.gallery-item--video-hero .gallery-item__media { aspect-ratio: auto; height: 100%; }
.gallery-item--video-hero .gallery-item__media video { height: 100%; object-fit: cover; padding: 0; }
.gallery-item--video-hero .gallery-item__info { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); }
.gallery-item--video-hero .gallery-item__collection { color: rgba(255,255,255,0.7); }
.gallery-item--video-hero .gallery-item__name { font-size: 20px; font-family: var(--font-display); color: #fff; text-transform: none; letter-spacing: 0; }

@media (max-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-item--pos-right.gallery-item--video-hero { grid-column: 2 / span 2; }
  .gallery-item--pos-left.gallery-item--video-hero { grid-column: 1 / span 2; }
  .gallery-item--pos-right.gallery-item--video { grid-column: 3 / 4; }
  .gallery-item--pos-left.gallery-item--video { grid-column: 1 / 2; }
}
@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  /* Vertical videos: fit in normal card size, crop */
  .gallery-item--video { grid-column: auto; grid-row: span 1; }
  .gallery-item--video .gallery-item__media { aspect-ratio: 4/3; }
  .gallery-item--video .gallery-item__media video { object-fit: cover; }
  .gallery-item--pos-right.gallery-item--video,
  .gallery-item--pos-left.gallery-item--video { grid-column: auto; }
  /* Iconic video hero: full width, cinematic crop */
  .gallery-item--video-hero { grid-column: 1 / -1; grid-row: span 1; }
  .gallery-item--video-hero .gallery-item__media { aspect-ratio: 16/9; max-height: none; }
  .gallery-item--pos-right.gallery-item--video-hero,
  .gallery-item--pos-left.gallery-item--video-hero { grid-column: 1 / -1; }
  /* Navigation: hidden until card is tapped active */
  .gallery-selector { opacity: 0; }
  .gallery-item__arrow { opacity: 0; }
  .gallery-item--active .gallery-selector { opacity: 1; }
  .gallery-item--active .gallery-item__arrow { opacity: 1; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== CATEGORIES ===== */
.categories-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.category-tile { text-align: center; cursor: pointer; text-decoration: none; display: block; }
.category-tile__image { aspect-ratio: 1; overflow: hidden; background: var(--white); margin-bottom: 16px; display: flex; align-items: center; justify-content: center; border-radius: 2px; }
.category-tile__image img { width: 80%; height: 80%; object-fit: contain; transition: transform 0.5s ease; }
.category-tile:hover .category-tile__image img { transform: scale(1.05); }
.category-tile__name { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; }
.category-tile__sub { font-size: 11px; color: var(--gray-500); margin-top: 4px; }

/* ===== COLLECTIONS SHOWCASE ===== */
.collections-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.collection-card { position: relative; aspect-ratio: 3/4; overflow: hidden; display: flex; align-items: flex-end; text-decoration: none; border-radius: 2px; }
.collection-card__image { position: absolute; inset: 0; }
.collection-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.collection-card:hover .collection-card__image img { transform: scale(1.05); }
.collection-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%); }
.collection-card__content { position: relative; z-index: 2; padding: 32px; color: var(--white); }
.collection-card__name { font-size: 28px; font-family: var(--font-display); margin-bottom: 8px; }
.collection-card__desc { font-size: 13px; opacity: 0.8; margin-bottom: 16px; line-height: 1.5; }
.collection-card__cta { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-on-dark); }

/* ===== PHILOSOPHY SECTION ===== */
.philosophy { padding: 120px 0; background: var(--purple-deep); text-align: center; position: relative; overflow: hidden; }
.philosophy__bg { position: absolute; inset: 0; opacity: 0.15; background-size: cover; background-position: center; }
.philosophy__content { position: relative; z-index: 2; }
.philosophy__logo { width: 60px; margin: 0 auto 32px; }
.philosophy__quote { font-size: 28px; color: var(--white); max-width: 700px; margin: 0 auto 24px; line-height: 1.5; }
.philosophy__author { font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-on-dark); }

/* ===== CTA SECTION ===== */
.cta-section { padding: 80px 0; text-align: center; background: var(--offwhite); }
.cta-section__title { font-size: 32px; margin-bottom: 16px; }
.cta-section__text { font-size: 16px; color: var(--gray-500); margin-bottom: 32px; max-width: 500px; margin-left: auto; margin-right: auto; }

/* ===== SECTION SPACING ===== */
.section { padding: 96px 0; }
.section--gray { background: var(--offwhite); }

/* ===== PAGE BANNER ===== */
.page-banner { padding: 140px 0 60px; text-align: center; background: var(--offwhite); }
.page-banner__title { font-size: 42px; letter-spacing: 0.08em; }
.page-banner__subtitle { font-size: 14px; color: var(--gray-500); margin-top: 12px; letter-spacing: 0.1em; }

/* ===== LEGAL DOCUMENT (privacy / terms / consent) ===== */
.legal-doc { padding: 60px 0 100px; background: var(--white); }
.legal-doc .container { max-width: 820px; }
.legal-doc__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-700);
}
.legal-doc__body h1,
.legal-doc__body h2,
.legal-doc__body h3,
.legal-doc__body h4 {
  font-family: var(--font-display);
  color: var(--black);
  letter-spacing: 0.02em;
  font-weight: 500;
  margin: 40px 0 14px;
  line-height: 1.3;
}
.legal-doc__body h1 { font-size: 28px; margin-top: 0; }
.legal-doc__body h2 { font-size: 22px; }
.legal-doc__body h3 { font-size: 18px; }
.legal-doc__body h4 { font-size: 16px; }
.legal-doc__body p { margin: 0 0 14px; }
.legal-doc__body ul,
.legal-doc__body ol { margin: 0 0 16px; padding-left: 22px; }
.legal-doc__body ul ul,
.legal-doc__body ol ol,
.legal-doc__body ul ol,
.legal-doc__body ol ul { margin: 6px 0 6px; }
.legal-doc__body li { margin: 4px 0; }
.legal-doc__body li > p:last-child { margin-bottom: 0; }
.legal-doc__body strong,
.legal-doc__body b { color: var(--black); font-weight: 600; }
.legal-doc__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal-doc__body a:hover { color: var(--accent-dark); }
.legal-doc__body hr { border: none; border-top: 1px solid var(--gray-200); margin: 32px 0; }
.legal-doc__body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.legal-doc__body th,
.legal-doc__body td { padding: 10px 12px; border: 1px solid var(--gray-200); text-align: left; vertical-align: top; }
.legal-doc__body th { background: var(--offwhite); font-weight: 600; color: var(--black); }
@media (max-width: 720px) {
  .legal-doc { padding: 40px 0 60px; }
  .legal-doc__body { font-size: 14px; line-height: 1.7; }
  .legal-doc__body h1 { font-size: 24px; }
  .legal-doc__body h2 { font-size: 19px; }
  .legal-doc__body h3 { font-size: 17px; }
}

/* ===== FILTER BAR ===== */
.filter-bar { display: flex; justify-content: center; gap: 16px; padding: 24px 0; margin-bottom: 24px; flex-wrap: wrap; }
.filter-btn { padding: 8px 20px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--gray-300); background: var(--white); transition: all var(--transition); color: var(--gray-700); }
.filter-btn:hover, .filter-btn.active { background: var(--black); color: var(--white); border-color: var(--black); }

/* ===== PRODUCT DETAIL ===== */
.product-detail { padding: 120px 0 80px; }
.product-detail__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.product-detail__gallery { position: sticky; top: 100px; }
.product-detail__main-image { aspect-ratio: 1; background: var(--white); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-in; margin-bottom: 16px; }
.product-detail__main-image img { width: 90%; height: 90%; object-fit: contain; transition: opacity 0.3s; }
.product-detail__thumbnails { display: flex; gap: 8px; overflow-x: auto; }
.product-detail__thumb { width: 72px; height: 72px; flex-shrink: 0; background: var(--white); cursor: pointer; opacity: 0.5; transition: opacity var(--transition); border: 2px solid transparent; display: flex; align-items: center; justify-content: center; }
.product-detail__thumb.active, .product-detail__thumb:hover { opacity: 1; border-color: var(--accent); }
.product-detail__thumb img { width: 90%; height: 90%; object-fit: contain; }

.product-detail__info { padding-top: 20px; }
.product-detail__breadcrumb { font-size: 12px; color: var(--gray-500); margin-bottom: 24px; letter-spacing: 0.05em; }
.product-detail__breadcrumb a:hover { color: var(--accent-dark); }
.product-detail__breadcrumb span { margin: 0 8px; }
.product-detail__collection { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 12px; }
.product-detail__name { font-size: 36px; margin-bottom: 24px; }
.product-detail__materials { font-size: 14px; color: var(--gray-500); margin-bottom: 16px; letter-spacing: 0.03em; }
.product-detail__materials strong { color: var(--gray-700); font-weight: 500; }
.product-detail__description { font-size: 15px; line-height: 1.8; color: var(--gray-700); margin-bottom: 40px; }
.product-detail__cta { margin-top: 16px; }

/* Related products */
.related-section { padding: 80px 0; border-top: 1px solid var(--gray-200); margin-top: 64px; }
.related-section .section-title { text-align: left; }

/* ===== ICONIC PAGE ===== */
.iconic-hero { position: relative; height: 100vh; background: #000; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.iconic-hero__video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); object-fit: cover; }
.iconic-hero__content { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 2; }
.iconic-hero__scroll { color: rgba(255,255,255,0.6); transition: color 0.3s; animation: iconicBounce 2s infinite; }
.iconic-hero__scroll:hover { color: #fff; }
@keyframes iconicBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.iconic-hero__tagline { font-size: 22px; color: rgba(255,255,255,0.85); letter-spacing: 0.04em; font-weight: 300; margin-bottom: 24px; }

.iconic-intro { padding: 120px 24px; background: var(--white); }
.iconic-intro__content { max-width: 680px; margin: 0 auto; text-align: center; }
.iconic-intro__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 42px); color: var(--black); margin-bottom: 36px; letter-spacing: 0.06em; }
.iconic-intro__body { font-size: 16px; line-height: 1.85; color: var(--gray-700); }
.iconic-intro__body p { margin-bottom: 20px; }
.iconic-intro__body p:last-child { margin-bottom: 0; }

.iconic-piece { min-height: 100vh; display: flex; align-items: center; padding: 80px 0; background: var(--white); }
.iconic-piece:nth-child(even) { background: var(--offwhite); }
.iconic-piece__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: 1400px; margin: 0 auto; padding: 0 48px; width: 100%; }
.iconic-piece--reverse .iconic-piece__layout { direction: rtl; }
.iconic-piece--reverse .iconic-piece__layout > * { direction: ltr; }

.iconic-piece__slider { position: relative; }
.iconic-slides { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--gray-100); display: flex; align-items: center; justify-content: center; }
.iconic-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.6s ease; }
.iconic-slide.active { opacity: 1; }

.iconic-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.04); color: var(--gray-700); font-size: 28px; transition: all 0.3s; }
.iconic-arrow:hover { background: rgba(0,0,0,0.08); color: var(--black); }
.iconic-arrow--prev { left: 12px; }
.iconic-arrow--next { right: 12px; }

.iconic-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.iconic-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-300); cursor: pointer; transition: background 0.3s; }
.iconic-dot.active { background: var(--accent); }

.iconic-piece__info { }
.iconic-piece__collection { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.iconic-piece__name { font-family: var(--font-display); font-size: 36px; font-weight: 400; margin-bottom: 24px; letter-spacing: 0.02em; color: var(--black); }
.iconic-piece__desc { font-size: 15px; line-height: 1.9; color: var(--gray-700); margin-bottom: 32px; }
.iconic-piece__cta { display: inline-block; padding: 14px 36px; border: 1px solid var(--gray-300); color: var(--black); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; transition: all 0.3s; }
.iconic-piece__cta:hover { border-color: var(--accent); color: var(--accent); }

.iconic-fade { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
.iconic-fade.visible { opacity: 1; transform: translateY(0); }

.iconic-cta { background: var(--offwhite); padding: 120px 24px; text-align: center; border-top: 1px solid var(--gray-200); }
.iconic-cta__title { font-family: var(--font-display); font-size: 32px; font-weight: 400; color: var(--black); margin-bottom: 16px; }
.iconic-cta__text { font-size: 15px; color: var(--gray-500); max-width: 500px; margin: 0 auto 32px; line-height: 1.7; }
.iconic-cta__btn { display: inline-block; padding: 16px 40px; background: var(--accent); color: #fff; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; transition: background 0.3s; }
.iconic-cta__btn:hover { background: var(--accent-dark); }

@media (max-width: 768px) {
  .iconic-hero__title { font-size: 42px; }
  .iconic-hero__subtitle { font-size: 17px; }
  .iconic-hero__video { width: auto; height: 100%; }
  .iconic-piece__layout { grid-template-columns: 1fr; gap: 32px; padding: 0 20px; }
  .iconic-piece--reverse .iconic-piece__layout { direction: ltr; }
  .iconic-piece { min-height: auto; padding: 48px 0; }
  .iconic-piece__name { font-size: 28px; }
  .iconic-intro { padding: 80px 20px; }
  .iconic-cta { padding: 64px 20px; }
  .iconic-cta__title { font-size: 26px; }
}

/* ===== LIGHTBOX ===== */
.lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 2000; align-items: center; justify-content: center; }
.lightbox.active { display: flex; }
.lightbox__image { max-width: 85vw; max-height: 85vh; object-fit: contain; }
.lightbox__close { position: absolute; top: 24px; right: 24px; color: var(--white); font-size: 32px; cursor: pointer; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s; }
.lightbox__close:hover { opacity: 0.7; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); color: var(--white); font-size: 36px; cursor: pointer; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s; }
.lightbox__nav:hover { opacity: 0.7; }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }

/* ===== ACCOUNT — saved builder configurations ===== */
.builder-saves-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px; margin-top: 24px;
}
.builder-save-card {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--gray-100); border-radius: 4px;
  overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.builder-save-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.builder-save-card__media {
  aspect-ratio: 1 / 1; background: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.builder-save-card__media img { width: 88%; height: 88%; object-fit: contain; }
.builder-save-card__body { padding: 16px 18px; border-top: 1px solid var(--gray-100); }
.builder-save-card__title { font-family: var(--font-display); font-size: 17px; margin-bottom: 6px; line-height: 1.25; }
.builder-save-card__meta { font-size: 12px; color: var(--gray-700); margin-bottom: 4px; line-height: 1.55; }
.builder-save-card__date { font-size: 11px; color: var(--gray-500); letter-spacing: 0.04em; }
.builder-save-card__del {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.95); color: #c0392b;
  border: 1px solid var(--gray-200); font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity 0.2s ease;
  z-index: 2;
}
.builder-save-card:hover .builder-save-card__del { opacity: 1; }
@media (max-width: 768px) {
  .builder-saves-grid { grid-template-columns: 1fr; gap: 16px; }
  .builder-save-card__del { opacity: 1; }
}

/* ===== BUILDER — save / share actions + toast ===== */
.builder-action-row {
  display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap;
}
.builder-action-btn {
  flex: 1; min-width: 140px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px;
  background: var(--white); color: var(--black);
  border: 1.5px solid var(--gray-300);
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s ease;
}
.builder-action-btn:hover { border-color: var(--accent); color: var(--accent); }
.builder-action-btn--saved {
  background: var(--accent); color: var(--white); border-color: var(--accent);
}
.builder-action-btn--saved:hover { background: var(--accent-dark); color: var(--white); border-color: var(--accent-dark); }
.builder-action-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 768px) {
  .builder-action-btn { min-width: 0; padding: 10px 12px; font-size: 11px; letter-spacing: 0.12em; }
}

.builder-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(26,10,46,0.94); color: #fff;
  padding: 12px 22px; border-radius: 6px;
  font-family: var(--font-body); font-size: 13px; letter-spacing: 0.04em;
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
  z-index: 2200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.builder-toast.is-visible {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ===== CONTACTS PAGE — direct chat row ===== */
.contact-form__title { font-family: var(--font-display); font-weight: 400; font-size: 26px; margin-bottom: 8px; }
.contact-form__sub { font-size: 14px; color: var(--gray-700); margin-bottom: 22px; line-height: 1.6; }
.contact-form__msg { min-height: 18px; font-size: 13px; margin-top: 8px; }
.contact-form__msg--err { color: #c0392b; }
.contact-form__msg--ok { color: #2f8a3c; }

.contact-info__lead { font-size: 14px; color: var(--gray-700); margin-bottom: 18px; line-height: 1.6; }
.contact-phone {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #faf7f2, #f5efe6);
  border: 1px solid var(--accent-light);
  border-radius: 4px;
  text-decoration: none; color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 24px;
}
.contact-phone:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(123,82,174,0.12); }
.contact-phone__icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
}
.contact-phone__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-phone__label { font-size: 11px; color: var(--gray-500); letter-spacing: 0.12em; text-transform: uppercase; }
.contact-phone__num { font-family: var(--font-body); font-size: 22px; font-weight: 500; color: var(--black); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; line-height: 1.2; }
.contact-phone__hours { font-size: 12px; color: var(--gray-700); line-height: 1.5; margin-top: 4px; }
.contact-direct {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 4px; margin-bottom: 10px;
  text-decoration: none; color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer; font-family: inherit; width: 100%; text-align: left;
}
.contact-direct:hover {
  border-color: var(--accent);
  transform: translateX(2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.contact-direct--btn { background: linear-gradient(135deg, #faf7f2, #f5efe6); border-color: var(--accent-light); }
.contact-direct__icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.contact-direct__icon--tg { background: #229ED9; }
.contact-direct__icon--wa { background: #25D366; }
.contact-direct__icon--max { background: #0077FF; }
.contact-direct__icon--qr { background: var(--accent); }
.contact-direct__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-direct__body strong { font-size: 14px; font-weight: 500; color: var(--black); }
.contact-direct__body span { font-size: 12px; color: var(--gray-700); }
.contact-direct__arrow { color: var(--accent); font-size: 18px; flex-shrink: 0; }

/* ===== CONTACT WIDGET (phone modal + messenger picker + callback) ===== */
.contact-overlay {
  position: fixed; inset: 0;
  background: rgba(26,10,46,0.55);
  z-index: 2100;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.contact-overlay.is-open { display: flex; }
.contact-card {
  position: relative; background: var(--white);
  width: 100%; max-width: 520px;
  padding: 40px 32px 32px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.22);
  border-radius: 4px;
  max-height: 92vh; overflow-y: auto;
}
.contact-card__close, .contact-card__back {
  position: absolute; top: 12px;
  background: none; border: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--gray-700);
  padding: 8px 12px;
}
.contact-card__close { right: 8px; }
.contact-card__back {
  left: 12px; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 4px; display: none;
}
.contact-overlay#callback-modal .contact-card__back { display: inline-block; }
.contact-card__eyebrow {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent);
  text-align: center; margin-bottom: 18px;
}
.contact-card__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 28px; line-height: 1.2; color: var(--black);
  text-align: center; margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.contact-card__sub {
  text-align: center; font-size: 14px; line-height: 1.6;
  color: var(--gray-700); margin: 0 0 22px;
  max-width: 420px; margin-left: auto; margin-right: auto;
}
.contact-card__divider {
  display: flex; align-items: center; gap: 14px;
  margin: 24px 0;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gray-500);
}
.contact-card__divider::before, .contact-card__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--gray-100);
}

/* Phone modal */
.phone-card { max-width: 460px; text-align: center; }
.phone-card__number {
  display: block;
  font-family: var(--font-body); font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 4.5vw, 36px); line-height: 1.2;
  color: var(--black); margin: 0 0 12px;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.phone-card__number:hover { color: var(--accent); }
.phone-card__hours {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  font-size: 12px; letter-spacing: 0.08em; color: var(--gray-500);
  margin-bottom: 4px;
}

/* Contact picker — grid of 4 tiles */
.contact-picker__card { max-width: 720px; }
.contact-picker__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 8px;
}
.contact-tile {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 4px;
  padding: 18px 16px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
.contact-tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.contact-tile--callback {
  background: linear-gradient(135deg, #faf7f2, #f5efe6);
  border-color: var(--accent-light);
}
.contact-tile--callback:hover {
  background: linear-gradient(135deg, #f5efe6, #ece3d3);
}
.contact-tile__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--black);
  letter-spacing: 0.04em;
}
.contact-tile__head svg { flex-shrink: 0; }
.contact-tile__qr {
  width: 128px; height: 128px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
}
.contact-tile__qr canvas, .contact-tile__qr img {
  width: 100% !important; height: 100% !important; display: block;
}
.contact-tile__cta-big {
  font-family: var(--font-display); font-size: 18px;
  color: var(--black); margin: 8px 0;
}
.contact-tile__link {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  text-decoration: none;
}

/* Callback form */
.callback-form { display: flex; flex-direction: column; gap: 10px; max-width: 380px; margin: 0 auto; }
.callback-form input[type=text], .callback-form input[type=tel] {
  padding: 13px 16px; border: 1.5px solid var(--gray-300);
  font-size: 14px; font-family: inherit; background: var(--white);
  transition: border-color 0.2s ease;
}
.callback-form input:focus { outline: none; border-color: var(--accent); }
.callback-form__hp {
  position: absolute !important;
  left: -9999px !important; width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important;
}
.callback-form__btn {
  background: var(--black); color: var(--white);
  padding: 14px 24px; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: background 0.2s ease;
}
.callback-form__btn:hover { background: var(--accent); }
.callback-form__btn:disabled { background: var(--gray-500); cursor: not-allowed; }
.callback-form__msg { min-height: 18px; font-size: 13px; text-align: center; padding-top: 6px; }
.callback-form__msg--ok { color: #2f8a3c; }
.callback-form__msg--err { color: #c0392b; }

/* Phone icon in header */
.nav-link--icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  color: inherit;
}
.nav-link--icon svg { width: 18px; height: 18px; }
.nav-link--icon:hover { color: var(--accent); }

@media (max-width: 768px) {
  .contact-card { padding: 56px 20px 24px; }
  .contact-card__close {
    width: 40px; height: 40px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: var(--black);
    background: var(--gray-100); border-radius: 50%;
    top: 14px; right: 14px; z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .contact-card__title { font-size: 22px; }
  .contact-picker__grid { grid-template-columns: 1fr; gap: 12px; }

  /* Messenger tiles */
  .contact-tile { flex-direction: row; padding: 14px 16px; text-align: left; gap: 14px; align-items: center; }
  .contact-tile__head { flex: 0 0 auto; }
  .contact-tile__label { display: none; }
  .contact-tile__qr { width: 70px; height: 70px; flex-shrink: 0; margin-left: auto; }
  .contact-tile__link { font-size: 10px; letter-spacing: 0.14em; flex-shrink: 0; white-space: nowrap; }

  /* Callback tile — simpler row: phone icon + label + arrow */
  .contact-tile--callback { gap: 12px; }
  .contact-tile--callback .contact-tile__head { flex: 1; }
  .contact-tile--callback .contact-tile__label { display: inline; }
  .contact-tile--callback .contact-tile__cta-big { display: none; }
  .contact-tile--callback .contact-tile__qr { display: none; }
  .contact-tile--callback .contact-tile__link { display: none; }
  .contact-tile--callback::after {
    content: "→"; font-size: 18px; color: var(--accent); margin-left: auto;
  }

  .phone-card__number { font-size: 28px; }
  .nav-link--icon { width: 40px; height: 40px; }
}

/* ===== ABOUT PAGE — luxury redesign ===== */

/* Hero — minimal centered title on cream background */
.about-hero {
  position: relative;
  background: linear-gradient(180deg, #faf7f2 0%, #f5efe6 100%);
  padding: 130px 0 0;
  overflow: hidden;
}
.about-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.5), transparent 65%);
  pointer-events: none;
}
.about-hero__inner {
  position: relative; z-index: 2;
  max-width: 880px; margin: 0 auto; padding: 70px 24px 80px;
  text-align: center;
}
.about-hero__eyebrow {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.4em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 28px;
}
.about-hero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(56px, 9vw, 112px); line-height: 1; letter-spacing: -0.02em;
  color: var(--black); margin: 0 0 28px;
}
.about-hero__rule { width: 56px; height: 1px; background: var(--black); opacity: 0.55; margin: 0 auto 24px; }
.about-hero__sub {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--gray-700);
  max-width: 520px; margin: 0 auto;
}

/* Sticky anchor nav under hero */
.about-anchor-nav {
  position: sticky; top: 70px; z-index: 50;
  background: rgba(250,247,242,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding: 14px 24px; text-align: center;
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.about-anchor-nav a { color: var(--gray-700); margin: 0 6px; transition: color var(--transition); }
.about-anchor-nav a:hover { color: var(--accent); }
.about-anchor-nav span { color: var(--gray-300); margin: 0 2px; }

/* Universal two-column block (Manifest, Craft) */
.about-block { padding: 130px 0; background: var(--white); }
.about-block + .about-block { border-top: 1px solid var(--gray-100); }
.about-block__grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 90px; align-items: center;
}
.about-block--reversed .about-block__grid > .about-block__copy { order: 2; }
.about-block--reversed .about-block__grid > .about-block__photo { order: 1; }
.about-block__copy { max-width: 520px; }
.about-block__eyebrow {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.4em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 24px;
}
.about-block__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.01em;
  color: var(--black); margin: 0 0 32px;
}
.about-block__quote {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.4; color: var(--accent);
  margin: 0 0 36px; padding-left: 20px; border-left: 2px solid var(--accent);
}
.about-block__text { font-size: 16px; line-height: 1.85; color: var(--gray-700); }
.about-block__text p + p { margin-top: 18px; }
.about-block__photo { position: relative; }
.about-block__photo img {
  width: 100%; height: auto; display: block;
  mix-blend-mode: multiply;
  transition: transform 0.8s ease;
}
.about-block:hover .about-block__photo img { transform: scale(1.02); }

/* Process — 4 numbered steps */
.about-process { padding: 130px 0; background: #faf7f2; }
.about-process__head { text-align: center; max-width: 720px; margin: 0 auto 80px; }
.about-process__head .about-block__eyebrow { display: inline-block; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; }
.process-step { position: relative; padding-top: 28px; }
.process-step::before {
  content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 1px;
  background: var(--accent);
}
.process-step__num {
  font-family: var(--font-display); font-weight: 400;
  font-size: 56px; line-height: 1; color: var(--black); opacity: 0.18;
  margin-bottom: 24px;
}
.process-step__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 1.3; color: var(--black); margin-bottom: 14px;
}
.process-step__text { font-size: 14px; line-height: 1.7; color: var(--gray-700); }

/* Values */
.about-values { padding: 130px 0; background: var(--white); }
.about-values__head { text-align: center; max-width: 720px; margin: 0 auto 80px; }
.about-values__head .about-block__eyebrow { display: inline-block; }
.values-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; max-width: 1100px; margin: 0 auto; }
.value-item { display: flex; gap: 20px; padding: 32px 0; border-top: 1px solid var(--gray-100); align-items: flex-start; }
.value-item:nth-child(1), .value-item:nth-child(2) { border-top: none; }
.value-item__num {
  flex-shrink: 0; width: 56px;
  font-family: var(--font-display); font-weight: 400; font-size: 28px;
  color: var(--accent); line-height: 1;
}
.value-item__body { flex: 1; min-width: 0; }
.value-item__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 1.3; color: var(--black);
  margin: 0 0 10px;
}
.value-item__text { font-size: 14px; line-height: 1.7; color: var(--gray-700); margin: 0; }

/* Collections — premium 3-column tiles */
.about-collections-section { padding: 120px 0; background: #faf7f2; }
.about-collections-section__head { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.about-collections-section__head .about-block__eyebrow { display: inline-block; }
.about-collections-section__sub { font-size: 15px; line-height: 1.7; color: var(--gray-700); margin: 14px 0 0; }
.collections-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 32px;
  max-width: 1240px; margin: 0 auto; padding: 0 32px;
}
.about-collection-tile {
  display: flex; flex-direction: column;
  background: var(--white);
  text-decoration: none; color: inherit;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.04);
}
.about-collection-tile:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px rgba(0,0,0,0.1);
  transform: translateY(-4px);
}
.about-collection-tile__media {
  width: 100%; aspect-ratio: 1 / 1;
  background: var(--white);
  overflow: hidden;
}
.about-collection-tile__media img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}
.about-collection-tile:hover .about-collection-tile__media img { transform: scale(1.06); }
.about-collection-tile__caption {
  padding: 28px 28px 32px;
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--gray-100);
  text-align: center;
}
.about-collection-tile__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: 26px; line-height: 1.15; color: var(--black); margin: 0;
  letter-spacing: -0.005em;
}
.about-collection-tile__tag {
  font-size: 13px; line-height: 1.6; color: var(--gray-700); margin: 0;
  min-height: 2.4em;
}
.about-collection-tile__cta {
  font-family: var(--font-body); font-size: 10px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
  margin-top: 4px;
  transition: transform 0.25s ease;
}
.about-collection-tile:hover .about-collection-tile__cta { transform: translateX(3px); }
/* Center solitary card in incomplete last row */
.about-collection-tile:last-child:nth-child(3n+1) { grid-column: 2 / 3; }
.about-collection-tile:last-child:nth-child(3n+2) { grid-column: 2 / 4; }
.about-collection-tile:nth-last-child(2):nth-child(3n+1),
.about-collection-tile:nth-last-child(2):nth-child(3n+1) ~ .about-collection-tile { /* default 2-of-3 layout */ }

/* About CTA */
.about-cta {
  background: var(--black); color: var(--white);
  padding: 120px 0; text-align: center;
}
.about-cta__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 4.5vw, 56px); line-height: 1.15; margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.about-cta__text { font-size: 17px; line-height: 1.6; max-width: 540px; margin: 0 auto 40px; opacity: 0.78; }
.about-cta__btn {
  display: inline-block; padding: 16px 44px;
  border: 1px solid rgba(255,255,255,0.5);
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--white);
  transition: all var(--transition);
}
.about-cta__btn:hover { background: var(--white); color: var(--black); border-color: var(--white); }

/* ===== CONTACTS PAGE ===== */
.contacts-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 80px 0; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-700); }
.form-group input, .form-group textarea, .form-group select { padding: 12px 16px; border: 1px solid var(--gray-300); font-size: 15px; transition: border-color var(--transition); background: var(--white); }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--accent); }
.form-group textarea { min-height: 120px; resize: vertical; }
.form-radio-group { display: flex; flex-direction: column; gap: 10px; }
.form-radio { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.form-radio input[type="radio"] { accent-color: var(--accent); }
.form-success { display: none; text-align: center; padding: 40px; }
.form-success h3 { font-size: 24px; margin-bottom: 12px; }
.form-success p { color: var(--gray-500); }

.contact-info { padding-top: 20px; }
.contact-info__title { font-size: 20px; font-family: var(--font-display); margin-bottom: 32px; }
.contact-info__item { display: flex; gap: 12px; margin-bottom: 20px; font-size: 15px; }
.contact-info__item strong { font-weight: 500; min-width: 100px; }
.contact-info__hours { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--gray-200); }
.contact-info__hours h4 { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; font-weight: 500; font-family: var(--font-body); }
.contact-info__hours p { font-size: 14px; color: var(--gray-700); line-height: 1.8; }

/* ===== FOOTER ===== */
.footer { background: #1a1a1a; color: #ccc; padding: 80px 0 40px; }
.footer__top { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; }
.footer__logo img { height: 36px; filter: brightness(0) invert(1); }
.footer__tagline { font-size: 13px; font-style: normal; font-family: var(--font-display); color: #999; }
.footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 48px; }
.footer__col-title { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white); margin-bottom: 20px; font-weight: 500; }
.footer__col a { display: block; font-size: 14px; color: #999; margin-bottom: 10px; transition: color var(--transition); }
.footer__col a:hover { color: var(--accent-light); }
.footer__newsletter { display: flex; gap: 0; }
.footer__newsletter input { flex: 1; padding: 10px 14px; background: #2a2a2a; border: 1px solid #444; color: var(--white); font-size: 14px; }
.footer__newsletter input::placeholder { color: #666; }
.footer__newsletter button { padding: 10px 20px; background: var(--accent); color: var(--white); font-size: 14px; font-weight: 500; border: none; }
.footer__bottom { border-top: 1px solid #333; padding-top: 24px; font-size: 13px; color: #666; }

/* ===== ICONIC PROMO ===== */
.iconic-promo { background: #000; padding: 120px 0; overflow: hidden; }
.iconic-promo__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.iconic-promo__label { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 20px; }
.iconic-promo__title { font-family: var(--font-display); font-size: 64px; font-weight: 400; letter-spacing: 0.06em; color: var(--white); margin-bottom: 28px; }
.iconic-promo__text { font-size: 16px; line-height: 1.8; color: rgba(255,255,255,0.6); margin-bottom: 40px; max-width: 440px; }
.iconic-promo__cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; border: 1px solid var(--accent-on-dark); color: var(--accent-on-dark); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; transition: all 0.3s; }
.iconic-promo__cta:hover { background: var(--accent-on-dark); color: var(--black); }
.iconic-promo__cta span { transition: transform 0.3s; }
.iconic-promo__cta:hover span { transform: translateX(4px); }
.iconic-promo__video-wrap { position: relative; }
.iconic-promo__video { width: 100%; display: block; }

/* ===== MAKING OF ===== */
.making-of { padding: 96px 0; background: var(--white); }
.making-of__layout { display: grid; grid-template-columns: 2fr 3fr; gap: 64px; align-items: center; }
.making-of__video-wrap { max-width: 360px; margin: 0 auto; }
.making-of__video { width: 100%; display: block; box-shadow: 0 24px 48px rgba(0,0,0,0.12); }
.making-of__title { font-family: var(--font-display); font-size: 32px; font-weight: 400; line-height: 1.3; margin-bottom: 24px; }
.making-of__text { font-size: 15px; line-height: 1.8; color: var(--gray-700); margin-bottom: 16px; }
.making-of__text:last-of-type { margin-bottom: 0; }
.making-of__product { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--gray-200); }
.making-of__product-link { display: flex; align-items: center; gap: 20px; text-decoration: none; color: inherit; transition: opacity var(--transition); }
.making-of__product-link:hover { opacity: 0.75; }
.making-of__product-link img { width: 80px; height: 80px; object-fit: contain; flex-shrink: 0; }
.making-of__product-name { display: block; font-size: 14px; font-weight: 400; margin-bottom: 4px; }
.making-of__product-cta { display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-dark); }

/* ===== ANIMATIONS ===== */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ===== BUILDER ===== */
.builder-steps { display: flex; align-items: center; justify-content: center; margin-bottom: 40px; }
.builder-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.builder-step__num { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--gray-300); display: flex; align-items: center; justify-content: center; font-size: 14px; font-family: var(--font-body); color: var(--gray-500); transition: all 0.3s; }
.builder-step.active .builder-step__num { border-color: var(--accent); color: var(--accent); background: rgba(123,82,174,0.06); }
.builder-step.done .builder-step__num { border-color: var(--accent); background: var(--accent); color: var(--white); }
.builder-step__label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); transition: color 0.3s; }
.builder-step.active .builder-step__label,
.builder-step.done .builder-step__label { color: var(--gray-700); }
.builder-step__line { flex: 1; height: 1px; background: var(--gray-300); margin: 0 16px; margin-bottom: 20px; transition: background 0.3s; max-width: 80px; }
.builder-step__line.done { background: var(--accent); }

.builder-section { animation: builderFadeIn 0.4s ease both; }
@keyframes builderFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

#cfg-final { grid-column: 2; }

.cfg-label { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray-700); font-weight: 500; margin-bottom: 14px; }
.cfg-metals { display: flex; gap: 10px; flex-wrap: wrap; }
.cfg-metal-btn { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border: 1.5px solid var(--gray-200); background: var(--white); cursor: pointer; font-family: inherit; font-size: 14px; color: var(--gray-700); transition: all 0.25s; }
.cfg-metal-btn:hover { border-color: var(--accent-light); box-shadow: 0 2px 8px rgba(123,82,174,0.1); }
.cfg-metal-btn.active { border-color: var(--accent); background: rgba(123,82,174,0.04); box-shadow: 0 2px 12px rgba(123,82,174,0.15); }
.cfg-metal-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--gray-300); flex-shrink: 0; display: inline-block; }
.cfg-select { width: 100%; padding: 12px 16px; border: 1.5px solid var(--gray-200); font-size: 14px; background: var(--white); font-family: inherit; }
.cfg-select:focus { outline: none; border-color: var(--accent); }
.cfg-input { width: 100%; padding: 12px 16px; border: 1.5px solid var(--gray-200); font-size: 15px; font-style: normal; font-family: var(--font-display); }
.cfg-input:focus { outline: none; border-color: var(--accent); }

/* ===== BUILDER v2 (Blue Nile style) ===== */
.builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 460px); gap: 56px; align-items: start; max-width: 1320px; margin: 0 auto; }
.builder-gallery { position: sticky; top: 90px; }
.builder-gallery__stage { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 3/2; position: relative; }
.builder-gallery__cell { background: var(--white); border: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: center; overflow: hidden; min-width: 0; }
.builder-gallery__cell img { width: 100%; height: 100%; object-fit: contain; padding: 4%; transition: opacity 0.25s; }
.builder-gallery__cell--hero { grid-column: 1; grid-row: 1 / 3; }
.builder-gallery__cell:not(.builder-gallery__cell--hero):nth-of-type(2) { grid-column: 2; grid-row: 1; }
.builder-gallery__cell:not(.builder-gallery__cell--hero):nth-of-type(3) { grid-column: 2; grid-row: 2; }
.builder-gallery__cell[hidden] { display: none; }
.builder-gallery__nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.92); border: 1px solid var(--gray-200); color: var(--black); font-size: 22px; line-height: 1; cursor: pointer; z-index: 3; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.builder-gallery__nav--prev { left: 10px; }
.builder-gallery__nav--next { right: 10px; }
.builder-gallery__nav:hover { background: var(--white); }
.builder-gallery__dots { display: none; position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); gap: 6px; z-index: 3; }
.builder-gallery__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(0,0,0,0.25); transition: background 0.2s; cursor: pointer; }
.builder-gallery__dot--active { background: var(--black); }
.builder-gallery__note { margin-top: 12px; font-family: var(--font-display); font-style: normal; font-size: 13px; color: var(--gray-500); line-height: 1.5; text-align: center; }

.builder-panel { display: flex; flex-direction: column; gap: 32px; }
.builder-panel__title { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.3; color: var(--black); margin-bottom: 6px; }

.bn-section { border-top: 1px solid var(--gray-200); padding-top: 24px; }
.bn-section:first-of-type { border-top: none; padding-top: 0; }
.bn-section__title { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--black); margin-bottom: 6px; letter-spacing: 0.01em; }
.bn-section__select { font-size: 13px; color: var(--gray-500); margin-bottom: 16px; letter-spacing: 0.01em; }
.bn-section__select strong { color: var(--black); font-weight: 500; }

.bn-tile-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bn-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 10px 4px 8px; background: var(--white); border: 1px solid var(--gray-200); cursor: pointer; font-family: inherit; color: var(--gray-700); transition: border-color 0.15s; min-height: 82px; }
.bn-tile:hover:not([disabled]) { border-color: var(--gray-500); }
.bn-tile--active { border: 2px solid var(--black) !important; padding: 9px 3px 7px; }
.bn-tile--disabled { opacity: 0.35; cursor: not-allowed; }
/* monoline SVG icons rendered as recolorable mask boxes (graphite → gold on active) */
.bn-tile__icon { width: 44px; height: 44px; display: block; background-color: var(--gray-700);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: background-color 0.15s; }
.bn-tile:hover:not([disabled]) .bn-tile__icon { background-color: var(--black); }
.bn-tile--active .bn-tile__icon { background-color: var(--builder-gold); }
.bn-tile--disabled .bn-tile__icon { background-color: var(--gray-500); }
.bn-tile__label { font-size: 10px; line-height: 1.2; text-align: center; letter-spacing: 0.01em; color: var(--gray-700); min-height: 24px; display: flex; align-items: center; justify-content: center; }

.bn-carat-row { display: flex; gap: 6px; flex-wrap: wrap; }
.bn-carat { min-width: 52px; height: 42px; padding: 0 12px; background: var(--white); border: 1px solid var(--gray-200); cursor: pointer; font-family: inherit; font-size: 13px; color: var(--black); transition: border-color 0.15s; }
.bn-carat:hover { border-color: var(--gray-500); }
.bn-carat--active { border: 2px solid var(--black); }

.bn-swatch-row { display: flex; gap: 10px; align-items: center; }
.bn-swatch { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gray-200); padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; background: transparent; transition: all 0.15s; position: relative; }
.bn-swatch__fill { width: 28px; height: 28px; border-radius: 50%; display: block; }
.bn-swatch--active { border: 1.5px solid var(--black); }
.bn-swatch:hover:not([disabled]) { border-color: var(--gray-500); }
.bn-swatch--disabled { opacity: 0.35; cursor: not-allowed; }
.bn-swatch--disabled:hover { border-color: var(--gray-200); }

.builder-summary { margin-top: 24px; padding: 20px 22px; background: var(--offwhite); border: 1px solid var(--gray-200); }
.builder-summary__title { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--black); margin-bottom: 14px; letter-spacing: 0.02em; }
.builder-summary__list { margin: 0; }
.builder-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 0; border-bottom: 1px dashed var(--gray-200); font-size: 13px; }
.builder-summary__row:last-child { border-bottom: none; }
.builder-summary__row dt { color: var(--gray-500); letter-spacing: 0.02em; flex-shrink: 0; }
.builder-summary__row dd { color: var(--black); font-weight: 500; text-align: right; margin: 0; word-break: break-word; }

.builder-submit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.builder-submit-btn { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 14px 20px; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; font-family: inherit; cursor: pointer; }
.builder-btn-secondary { background: transparent; border: 1.5px solid var(--black); color: var(--black); transition: all 0.15s; }
.builder-btn-secondary:hover { background: var(--black); color: var(--white); }

.builder-combo-missing { padding: 10px 14px; background: #fbf2ec; border-left: 2px solid #c7704c; color: #6b3c24; font-size: 13px; line-height: 1.5; }

.builder-variant-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--gray-300); background: var(--offwhite); }
.builder-variant-strip__label { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-500); margin-right: 4px; }
.builder-variant-chip { padding: 7px 14px; border: 1px solid var(--gray-200); background: var(--white); color: var(--black); font-family: inherit; font-size: 12px; cursor: pointer; transition: border-color 0.15s; }
.builder-variant-chip:hover { border-color: var(--gray-500); }
.builder-variant-chip--active { border: 2px solid var(--black); padding: 6px 13px; }

/* ===== BUILDER 3D viewer ===== */
.builder-3d-toggle { position: absolute; top: 12px; right: 12px; z-index: 5; background: rgba(255,255,255,0.92); border: 1px solid var(--gray-300); color: var(--black); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.15em; padding: 8px 12px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: all 0.15s; }
.builder-3d-toggle:hover { background: var(--white); border-color: var(--black); }
.builder-3d-overlay { position: absolute; inset: 0; background: #f8f8f8; z-index: 10; display: flex; align-items: center; justify-content: center; }
.builder-3d-overlay[hidden] { display: none; }
.builder-3d-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.builder-3d-canvas:active { cursor: grabbing; }
.builder-3d-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.92); border: 1px solid var(--gray-300); font-size: 18px; line-height: 1; cursor: pointer; color: var(--black); z-index: 12; }
.builder-3d-close:hover { background: var(--white); border-color: var(--black); }
.builder-3d-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(250,250,250,0.9); font-family: var(--font-body); font-size: 13px; color: var(--gray-700); letter-spacing: 0.05em; z-index: 11; }
.builder-3d-loader[hidden] { display: none; }
.builder-3d-error { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 16px 22px; background: #fbf2ec; border-left: 2px solid #c7704c; color: #6b3c24; font-size: 13px; line-height: 1.5; max-width: 80%; text-align: center; z-index: 11; }
.builder-3d-error[hidden] { display: none; }
.builder-3d-hint { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 5px 12px; background: rgba(255,255,255,0.85); border-radius: 999px; font-family: var(--font-body); font-size: 11px; color: var(--gray-500); letter-spacing: 0.03em; z-index: 12; pointer-events: none; }


/* ===== ATELIER + ATELIER PINK ===== */
/* atelier.html (light editorial) */
.atelier-hero { position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center; background: var(--offwhite); text-align: center; padding: 140px 24px 80px; }
.atelier-hero__content { max-width: 640px; }
.atelier-hero__title { font-family: var(--font-display); font-size: clamp(56px, 10vw, 120px); font-weight: 400; letter-spacing: 0.02em; color: var(--black); line-height: 1; margin-bottom: 28px; }
.atelier-hero__tagline { font-family: var(--font-display); font-style: normal; font-size: clamp(20px, 2.4vw, 28px); color: var(--gray-700); margin-bottom: 40px; line-height: 1.4; }
.atelier-hero__scroll { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--gray-300); border-radius: 50%; color: var(--gray-700); background: none; cursor: pointer; transition: all 0.25s; }
.atelier-hero__scroll:hover { border-color: var(--black); color: var(--black); }

.atelier-intro { padding: 120px 24px; background: var(--white); }
.atelier-intro__content { max-width: 680px; margin: 0 auto; text-align: center; }
.atelier-intro__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 42px); color: var(--black); margin-bottom: 36px; letter-spacing: 0.01em; }
.atelier-intro__body { font-size: 16px; line-height: 1.85; color: var(--gray-700); }
.atelier-intro__body p { margin-bottom: 20px; }
.atelier-intro__body p:last-child { margin-bottom: 0; }

.atelier-editions { padding: 100px 24px 120px; background: var(--offwhite); }
.atelier-editions__inner { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 80px; }
.atelier-editions__heading { font-family: var(--font-display); font-weight: 400; font-size: 14px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gray-700); margin-bottom: 48px; text-align: center; }
.edition-card { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; background: var(--white); text-decoration: none; color: inherit; transition: transform 0.35s ease, box-shadow 0.35s ease; }
.edition-card:nth-child(even) .edition-card__media { order: 2; }
.edition-card:nth-child(even) .edition-card__body { padding: 40px 0 40px 48px; }
.edition-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px rgba(0,0,0,0.06); }
.edition-card__media { aspect-ratio: 4/3; overflow: hidden; background: linear-gradient(135deg, #2a2620 0%, #1a1612 100%); }
.edition-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.edition-card__media img:not([src]), .edition-card__media img[src=""] { opacity: 0; }
.edition-card:hover .edition-card__media img { transform: scale(1.03); }
.edition-card__body { padding: 40px 48px 40px 0; }
.edition-card__label { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 16px; }
.edition-card__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.5vw, 40px); color: var(--black); margin-bottom: 14px; letter-spacing: 0.02em; }
.edition-card__tagline { font-family: var(--font-display); font-style: normal; font-size: 18px; color: var(--gray-500); line-height: 1.4; margin-bottom: 28px; }
.edition-card__cta { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--black); display: inline-flex; align-items: center; gap: 10px; }
.edition-card__cta span { transition: transform 0.25s; }
.edition-card:hover .edition-card__cta span { transform: translateX(4px); }

/* atelier-pink.html (dark editorial longread) */
.pink-page { background: #0a0604; color: #f5f0ea; }
.pink-page .header--dark { background: rgba(10,6,4,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.06); }
.pink-page .header--dark .nav-link, .pink-page .header--dark .header__logo-text { color: #f5f0ea; }
.pink-page .hamburger { color: #f5f0ea; }

.pink-hero { position: relative; height: 100vh; min-height: 600px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
.pink-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: 0; }
@media (max-width: 768px) { .pink-hero__bg { object-position: 30% 50%; } }
.pink-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,6,4,0.3) 0%, rgba(10,6,4,0.55) 60%, rgba(10,6,4,0.9) 100%); z-index: 1; }
.pink-hero__content { position: relative; z-index: 2; max-width: 720px; padding: 0 24px; }
.pink-hero__meta { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #d18a8a; margin-bottom: 28px; }
.pink-hero__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 10vw, 112px); letter-spacing: 0.02em; color: #f5efea; line-height: 1; margin-bottom: 28px; }
.pink-hero__tagline { font-family: var(--font-display); font-style: normal; font-size: clamp(20px, 2.4vw, 28px); color: #e8d4cf; line-height: 1.4; }
.pink-hero__scroll { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 2; color: #e8d4cf; opacity: 0.8; transition: opacity 0.25s; }
.pink-hero__scroll:hover { opacity: 1; }

.pink-section { padding: 120px 24px; }
.pink-section--intro { padding-top: 140px; }
.pink-section--closing { padding-bottom: 80px; }
.pink-text { max-width: 680px; margin: 0 auto; text-align: left; }
.pink-eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #d18a8a; margin-bottom: 24px; }
.pink-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.5vw, 52px); color: #f5efea; margin-bottom: 36px; line-height: 1.15; letter-spacing: 0.01em; }
.pink-body { font-size: 17px; line-height: 1.85; color: #ece4dc; font-weight: 400; }
.pink-body p { margin-bottom: 22px; }
.pink-body p:last-child { margin-bottom: 0; }
.pink-quote { font-family: var(--font-display); font-style: normal; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.5; color: #e8d4cf; margin: 48px 0 0; padding: 32px 0 0; border-top: 1px solid rgba(209,138,138,0.3); quotes: none; }

.pink-fullbleed { width: 100%; overflow: hidden; margin: 0; }
.pink-fullbleed img { width: 100%; height: auto; display: block; }
.pink-fullbleed--narrow { max-width: 960px; margin: 0 auto; }
.pink-fullbleed--tall img { max-height: 95vh; object-fit: cover; }

.pink-cta { padding: 120px 24px; background: #050302; text-align: center; border-top: 1px solid rgba(255,255,255,0.06); }
.pink-cta__content { max-width: 560px; margin: 0 auto; }
.pink-cta__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 44px); color: #f5efea; margin-bottom: 20px; letter-spacing: 0.01em; }
.pink-cta__body { font-size: 15px; line-height: 1.75; color: #d8d0c7; margin-bottom: 36px; font-weight: 400; }
.pink-cta__btn { display: inline-block; padding: 16px 40px; background: transparent; border: 1px solid #d18a8a; color: #f5efea; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; transition: all 0.3s; }
.pink-cta__btn:hover { background: #d18a8a; color: #0a0604; }

.pink-footer { background: #050302; color: #a69e95; border-top: 1px solid rgba(255,255,255,0.06); }
.pink-footer .footer__logo img { filter: invert(1) brightness(1.4); opacity: 0.8; }
.pink-footer .footer__tagline { color: #a69e95; }
.pink-footer .footer__col-title { color: #e8d4cf; }
.pink-footer .footer__col a { color: #a69e95; }
.pink-footer .footer__col a:hover { color: #f5efea; }
.pink-footer .footer__newsletter input { background: transparent; border-color: rgba(255,255,255,0.15); color: #f5efea; }
.pink-footer .footer__newsletter button { color: #d18a8a; }
.pink-footer .footer__bottom { color: #7a726a; border-top-color: rgba(255,255,255,0.06); }
.pink-footer .footer__requisites { color: #645d56; }

/* fade-in trigger — set via IntersectionObserver in each page */
.pink-fade { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s ease; }
.pink-fade.visible { opacity: 1; transform: translateY(0); }

/* =========================================================================
   ATELIER EDITION — generic longread template (.atl-*)
   Used by atelier-eight.html, atelier-ring.html, atelier-necklace.html.
   Each body adds .<slug>-page (e.g. .eight-page) which overrides --atl-*
   variables to retheme the page.
   atelier-pink.html is intentionally NOT migrated to keep zero-risk.
   ========================================================================= */
.atl-page {
  --atl-bg: #0a0604;
  --atl-bg-deep: #050302;
  --atl-text: #f5f0ea;
  --atl-text-soft: #ece4dc;
  --atl-text-muted: #d8d0c7;
  --atl-text-faint: #968d83;
  --atl-accent: #d18a8a;
  --atl-accent-soft: #e8d4cf;
  --atl-border: rgba(255,255,255,0.06);
  --atl-border-accent: rgba(209,138,138,0.3);
  --atl-newsletter-border: rgba(255,255,255,0.15);

  background: var(--atl-bg);
  color: var(--atl-text);
}
.atl-page .header--dark { background: color-mix(in srgb, var(--atl-bg) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--atl-border); }
.atl-page .header--dark .nav-link, .atl-page .header--dark .header__logo-text { color: var(--atl-text); }
.atl-page .hamburger { color: var(--atl-text); }

.atl-hero { position: relative; height: 100vh; min-height: 600px; overflow: hidden; text-align: center; background: var(--atl-bg); }
.atl-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: 0; }
@media (max-width: 768px) { .atl-hero__bg { object-position: 25% 50%; } }
.atl-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--atl-bg) 30%, transparent) 0%, color-mix(in srgb, var(--atl-bg) 55%, transparent) 60%, var(--atl-bg) 100%); z-index: 1; }
.atl-hero__content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 720px; padding: 0 24px; box-sizing: border-box; text-align: center; z-index: 2; }
.atl-hero__meta { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--atl-accent); margin-bottom: 28px; }
.atl-hero__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 10vw, 112px); letter-spacing: 0.02em; color: var(--atl-text); line-height: 1; margin-bottom: 28px; }
.atl-hero__tagline { font-family: var(--font-display); font-style: normal; font-size: clamp(20px, 2.4vw, 28px); color: var(--atl-accent-soft); line-height: 1.4; }
.atl-hero__scroll { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 2; color: var(--atl-accent-soft); opacity: 0.8; transition: opacity 0.25s; }
.atl-hero__scroll:hover { opacity: 1; }

.atl-section { padding: 120px 24px; }
.atl-section--intro { padding-top: 140px; }
.atl-section--closing { padding-bottom: 80px; }
.atl-text { max-width: 680px; margin: 0 auto; text-align: left; }
.atl-eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--atl-accent); margin-bottom: 24px; }
.atl-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.5vw, 52px); color: var(--atl-text); margin-bottom: 36px; line-height: 1.15; letter-spacing: 0.01em; }
.atl-body { font-size: 17px; line-height: 1.85; color: var(--atl-text-soft); font-weight: 400; }
.atl-body p { margin-bottom: 22px; }
.atl-body p:last-child { margin-bottom: 0; }
.atl-quote { font-family: var(--font-display); font-style: normal; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.5; color: var(--atl-accent-soft); margin: 48px 0 0; padding: 32px 0 0; border-top: 1px solid var(--atl-border-accent); quotes: none; }

.atl-fullbleed { width: 100%; overflow: hidden; margin: 0; }
.atl-fullbleed img { width: 100%; height: auto; display: block; }
.atl-fullbleed--narrow { max-width: 960px; margin: 0 auto; }
.atl-fullbleed--tall img { max-height: 95vh; object-fit: cover; }

/* When hero or fullbleed has no image yet — show a coloured placeholder so the layout doesn't collapse. */
.atl-hero__bg:not([src]), .atl-hero__bg[src=""] { background: linear-gradient(135deg, var(--atl-bg) 0%, var(--atl-bg-deep) 100%); }
.atl-fullbleed img:not([src]), .atl-fullbleed img[src=""] { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--atl-bg-deep) 0%, var(--atl-bg) 100%); }
.atl-fullbleed--narrow img:not([src]), .atl-fullbleed--narrow img[src=""] { aspect-ratio: 4/3; }
.atl-fullbleed--tall img:not([src]), .atl-fullbleed--tall img[src=""] { aspect-ratio: 3/4; max-height: 95vh; }

.atl-cta { padding: 120px 24px; background: var(--atl-bg-deep); text-align: center; border-top: 1px solid var(--atl-border); }
.atl-cta__content { max-width: 560px; margin: 0 auto; }
.atl-cta__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 44px); color: var(--atl-text); margin-bottom: 20px; letter-spacing: 0.01em; }
.atl-cta__body { font-size: 15px; line-height: 1.75; color: var(--atl-text-muted); margin-bottom: 36px; font-weight: 400; }
.atl-cta__btn { display: inline-block; padding: 16px 40px; background: transparent; border: 1px solid var(--atl-accent); color: var(--atl-text); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; transition: all 0.3s; }
.atl-cta__btn:hover { background: var(--atl-accent); color: var(--atl-bg); }

.atl-footer { background: var(--atl-bg-deep); color: var(--atl-text-muted); border-top: 1px solid var(--atl-border); }
.atl-footer .footer__logo img { filter: invert(1) brightness(1.4); opacity: 0.8; }
.atl-footer .footer__tagline { color: var(--atl-text-muted); }
.atl-footer .footer__col-title { color: var(--atl-accent-soft); }
.atl-footer .footer__col a { color: var(--atl-text-muted); }
.atl-footer .footer__col a:hover { color: var(--atl-text); }
.atl-footer .footer__newsletter input { background: transparent; border-color: var(--atl-newsletter-border); color: var(--atl-text); }
.atl-footer .footer__newsletter button { color: var(--atl-accent); }
.atl-footer .footer__bottom { color: var(--atl-text-faint); border-top-color: var(--atl-border); }
.atl-footer .footer__requisites { color: var(--atl-text-faint); }

.atl-fade { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s ease; }
.atl-fade.visible { opacity: 1; transform: translateY(0); }

/* SPLIT (chess) — alternating image/text two-column layout */
.atl-split { padding: 100px 24px; }
.atl-split__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.atl-split--reverse .atl-split__media { order: 2; }
.atl-split--reverse .atl-split__text  { order: 1; }
.atl-split__media { margin: 0; position: relative; }
.atl-split__media img { width: 100%; height: auto; display: block; }
.atl-split__media--tall img { aspect-ratio: 4/5; object-fit: cover; }
.atl-split__media--square img { aspect-ratio: 1/1; object-fit: cover; }
.atl-split__media--video video { width: 100%; aspect-ratio: 720/1024; object-fit: cover; display: block; box-shadow: 0 24px 60px rgba(0,0,0,0.55); border: 1px solid var(--atl-border); background: var(--atl-bg-deep); }
.atl-split__text .atl-eyebrow { margin-bottom: 18px; }
.atl-split__text .atl-title { margin-bottom: 28px; }
.atl-split__text .atl-quote { margin-top: 36px; }
.atl-split__media img:not([src]), .atl-split__media img[src=""] { aspect-ratio: 4/5; background: linear-gradient(135deg, var(--atl-bg-deep) 0%, var(--atl-bg) 100%); }

/* VIDEO — vertical jewelry-in-motion clip, autoplay muted loop */
.atl-video { padding: 100px 24px; background: var(--atl-bg); text-align: center; }
.atl-video__inner { max-width: 460px; margin: 0 auto; }
.atl-video__eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--atl-accent); margin-bottom: 18px; }
.atl-video__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.5vw, 42px); color: var(--atl-text); margin-bottom: 36px; line-height: 1.15; letter-spacing: 0.01em; }
.atl-video__player { width: 100%; aspect-ratio: 9/16; background: var(--atl-bg-deep); display: block; box-shadow: 0 24px 80px rgba(0,0,0,0.6); border: 1px solid var(--atl-border); object-fit: cover; }
.atl-video__caption { font-family: var(--font-display); font-style: normal; color: var(--atl-text-muted); font-size: 15px; margin-top: 18px; line-height: 1.5; }

@media (max-width: 600px) {
  .atl-video { padding: 64px 16px; }
  .atl-video__inner { max-width: 92vw; }
}

/* SKETCH variant — sketch presented on cream paper inside the longread */
.atl-split--sketch { background: var(--atl-bg-deep); padding: 120px 24px; border-top: 1px solid var(--atl-border); border-bottom: 1px solid var(--atl-border); }
.atl-split__media--sketch { background: #f4ede0; padding: 36px; box-shadow: 0 30px 70px rgba(0,0,0,0.55); border: 1px solid rgba(0,0,0,0.06); }
.atl-split__media--sketch img { aspect-ratio: 4/5; object-fit: contain; background: transparent; mix-blend-mode: multiply; }
.atl-split__caption { font-family: var(--font-display); font-style: normal; color: var(--atl-text-faint); text-align: center; margin-top: 18px; font-size: 14px; letter-spacing: 0.04em; }

@media (max-width: 900px) {
  .atl-split { padding: 60px 24px; }
  .atl-split__inner { grid-template-columns: 1fr; gap: 36px; }
  .atl-split--reverse .atl-split__media { order: 0; }
  .atl-split--reverse .atl-split__text  { order: 0; }
  .atl-split--sketch { padding: 70px 20px; }
  .atl-split__media--sketch { padding: 22px; }
}

/* NAV ARROWS — large prev/next floating buttons on viewport edges, vertically centered */
.atelier-nav-arrow {
  position: fixed; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1.5px solid rgba(255,255,255,0.55);
  color: #ffffff;
  z-index: 1100; /* above the fixed header (z-index: 1000) */
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.atelier-nav-arrow--prev { left: 32px; }
.atelier-nav-arrow--next { right: 32px; }
.atelier-nav-arrow svg { width: 30px; height: 30px; display: block; stroke-width: 1.75; }
.atelier-nav-arrow:hover {
  background: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,1);
  color: #111;
  box-shadow: 0 12px 36px rgba(255,255,255,0.18), 0 0 0 6px rgba(255,255,255,0.06);
}
.atelier-nav-arrow--prev:hover { transform: translateY(-50%) translateX(-5px); }
.atelier-nav-arrow--next:hover { transform: translateY(-50%) translateX(5px); }
.atelier-nav-arrow__label { display: none; }

@media (max-width: 900px) {
  .atelier-nav-arrow { width: 52px; height: 52px; }
  .atelier-nav-arrow svg { width: 24px; height: 24px; }
  .atelier-nav-arrow--prev { left: 14px; }
  .atelier-nav-arrow--next { right: 14px; }
}
@media (max-width: 480px) {
  .atelier-nav-arrow { width: 44px; height: 44px; }
  .atelier-nav-arrow svg { width: 20px; height: 20px; }
  .atelier-nav-arrow--prev { left: 8px; }
  .atelier-nav-arrow--next { right: 8px; }
}

/* per-edition palettes */
/* eight: blackened silver bangle with gold suit symbols — anthracite + warm gold */
.eight-page {
  --atl-bg: #0a0a0c;
  --atl-bg-deep: #040405;
  --atl-text: #ebe6dc;
  --atl-text-soft: #b8b1a3;
  --atl-text-muted: #948b7c;
  --atl-text-faint: #5b554d;
  --atl-accent: #c89a5c;
  --atl-accent-soft: #e0bd80;
  --atl-border: rgba(200,154,92,0.10);
  --atl-border-accent: rgba(200,154,92,0.32);
}
/* ring: cushion rubellite/garnet with full pavé in dark metal — wine + oxblood */
.ring-page {
  --atl-bg: #0a0305;
  --atl-bg-deep: #050103;
  --atl-text: #f6e8ea;
  --atl-text-soft: #e0ccd0;
  --atl-text-muted: #c8b0b5;
  --atl-text-faint: #8a7378;
  --atl-accent: #d04a72;
  --atl-accent-soft: #ea8aa3;
  --atl-border: rgba(208,74,114,0.14);
  --atl-border-accent: rgba(208,74,114,0.34);
}
.ring-page .atl-hero__overlay {
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--atl-bg) 25%, transparent) 55%, color-mix(in srgb, var(--atl-bg) 75%, transparent) 100%);
}
/* necklace: sapphire heart on slim chain over stone — midnight + cool steel */
.necklace-page {
  --atl-bg: #060a0f;
  --atl-bg-deep: #03060a;
  --atl-text: #e0e7ee;
  --atl-text-soft: #aab8c5;
  --atl-text-muted: #8595a3;
  --atl-text-faint: #4f5a66;
  --atl-accent: #5683a8;
  --atl-accent-soft: #8eb1cc;
  --atl-border: rgba(86,131,168,0.12);
  --atl-border-accent: rgba(86,131,168,0.32);
}

/* COOKIE BANNER — floating glass-morphism card at the bottom */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  z-index: 2000;
  background: rgba(18,18,20,0.92);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 18px 24px;
  color: rgba(255,255,255,0.85);
  box-shadow: 0 14px 50px rgba(0,0,0,0.45);
  font-family: var(--font-body); font-size: 13px; line-height: 1.55; font-weight: 300;
  transform: translateY(140%); opacity: 0;
  transition: transform 0.55s cubic-bezier(.22,.7,.18,1), opacity 0.35s ease;
}
.cookie-banner.visible { transform: translateY(0); opacity: 1; }
.cookie-banner__inner { display: flex; align-items: center; gap: 28px; max-width: 1100px; margin: 0 auto; }
.cookie-banner__text { flex: 1; margin: 0; }
.cookie-banner__link { color: rgba(255,255,255,0.95); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color 0.2s; }
.cookie-banner__link:hover { color: #c8a96a; }
.cookie-banner__sep { color: rgba(255,255,255,0.35); margin: 0 6px; }
.cookie-banner__btn {
  flex: 0 0 auto;
  padding: 12px 32px;
  background: rgba(255,255,255,0.96);
  color: #111;
  border: none; border-radius: 6px;
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.cookie-banner__btn:hover { background: #fff; transform: translateY(-1px); }

@media (max-width: 720px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px 18px; border-radius: 12px; }
  .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookie-banner__btn { width: 100%; padding: 14px; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .categories-grid { grid-template-columns: repeat(3, 1fr); }
  .collections-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__title { font-size: 42px; }
  .hero__image { width: 38%; right: 4%; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .product-detail__layout { gap: 32px; }

  /* About — tablet */
  .about-block__grid { gap: 48px; }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .collections-mosaic { grid-template-columns: repeat(3, 1fr); gap: 24px 20px; }
}

@media (max-width: 768px) {
  .header__nav { display: none; }
  .hamburger { display: flex; color: var(--white); }
  .header--solid .hamburger { color: var(--black); }
  .header__inner { padding: 0 20px; }
  .header__logo { padding: 0; }
  .container { padding: 0 20px; }

  .hero__video { min-width: 0; min-height: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero__sound { bottom: auto; top: 80px; right: 16px; width: 36px; height: 36px; }
  .hero__bottom { bottom: 32px; color: #fff; }
  .hero__tagline { font-size: 18px; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
  .iconic-hero__tagline { font-size: 18px; }
  .hero__scroll { color: #fff; }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .categories-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 12px;
    row-gap: 32px;
  }
  .categories-grid > .category-tile {
    flex: 0 0 calc(33.333% - 8px);
    max-width: calc(33.333% - 8px);
  }
  .collections-grid { grid-template-columns: 1fr; }

  .product-detail { padding: 90px 0 40px; }
  .product-detail__layout { display: flex; flex-direction: column; gap: 24px; max-width: 100%; overflow: hidden; }
  #cfg-options { order: -1; }
  #cfg-final { order: 1; }
  .product-detail__info { max-width: 100%; overflow-wrap: break-word; }
  .product-detail__gallery { position: static; max-width: 100%; }
  .product-detail__main-image { aspect-ratio: auto; max-width: 100%; }
  .product-detail__main-image img { width: 100%; height: auto; max-width: 100%; }
  .product-detail__name { font-size: 24px; }
  .product-detail__thumbnails { max-width: 100%; }
  .filter-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; justify-content: flex-start; }

  /* About — mobile */
  .about-hero { padding: 90px 0 0; }
  .about-hero__inner { padding: 40px 20px 56px; }
  .about-anchor-nav { top: 60px; padding: 10px 14px; font-size: 10px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .about-anchor-nav a { margin: 0 4px; }

  .about-block { padding: 64px 0; }
  .about-block__grid { grid-template-columns: 1fr; gap: 40px; }
  .about-block--reversed .about-block__grid > .about-block__copy { order: 1; }
  .about-block--reversed .about-block__grid > .about-block__photo { order: 2; }
  .about-block__quote { font-size: 22px; padding-left: 14px; }

  .about-process { padding: 64px 0; }
  .about-process__head, .about-values__head, .about-collections-section__head { margin-bottom: 40px; }
  .process-grid { grid-template-columns: 1fr; gap: 32px; }

  .about-values { padding: 64px 0; }
  .values-list { grid-template-columns: 1fr; gap: 0; }
  .value-item { gap: 14px; padding: 24px 0; }
  .value-item:nth-child(2) { border-top: 1px solid var(--gray-100); }
  .value-item__num { width: 44px; font-size: 22px; }
  .value-item__name { font-size: 18px; }

  .about-collections-section { padding: 64px 0; }
  .collections-mosaic { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; padding: 0 14px; }
  .about-collection-tile__name { font-size: 16px; }
  .about-collection-tile__caption { padding: 12px 12px 14px; }

  .about-cta { padding: 70px 20px; }

  .contacts-layout { grid-template-columns: 1fr; gap: 40px; }
  .footer__grid { grid-template-columns: 1fr; gap: 24px; }

  .iconic-promo { padding: 72px 0; }
  .iconic-promo__layout { grid-template-columns: 1fr; gap: 40px; padding: 0 24px; }
  .iconic-promo__info { order: 2; text-align: center; }
  .iconic-promo__video-wrap { order: 1; max-width: 400px; margin: 0 auto; }
  .iconic-promo__title { font-size: 42px; }
  .iconic-promo__text { margin: 0 auto 32px; }

  .making-of { padding: 64px 0; }
  .making-of__layout { grid-template-columns: 1fr; gap: 32px; }
  .making-of__video-wrap { max-width: 280px; }
  .making-of__title { font-size: 26px; }

  .section { padding: 64px 0; }
  .page-banner { padding: 110px 0 40px; }
  .page-banner__title { font-size: 32px; }
  .philosophy__quote { font-size: 22px; }

  .product-lead-form { padding: 24px 20px 20px; }
  .product-lead-form__fields { flex-direction: column; gap: 10px; }

  .builder-layout { grid-template-columns: 1fr; gap: 16px; }
  .builder-gallery { order: -1; position: sticky; top: 60px; z-index: 30; background: var(--white); margin: 0 -20px; padding: 10px 20px 8px; border-bottom: 1px solid var(--gray-200); }
  .builder-gallery__stage { display: block !important; position: relative; aspect-ratio: 1; max-width: 360px; margin: 0 auto; overflow: hidden; gap: 0; grid-template-columns: none !important; grid-template-rows: none !important; }
  .builder-gallery__cell { position: absolute !important; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; grid-column: auto !important; grid-row: auto !important; }
  .builder-gallery__cell--active { opacity: 1; pointer-events: auto; z-index: 2; }
  .builder-gallery__nav { display: flex !important; align-items: center; justify-content: center; z-index: 4; }
  .builder-gallery__dots { display: flex !important; z-index: 4; }
  .builder-gallery__note { margin-top: 6px; font-size: 11px; }
  .bn-tile-grid { grid-template-columns: repeat(4, 1fr); }
  .builder-submit-row { grid-template-columns: 1fr; }

  .edition-card { grid-template-columns: 1fr; gap: 0; }
  .edition-card__body { padding: 32px 24px 40px; }

  .pink-section { padding: 80px 24px; }
  .pink-cta { padding: 80px 24px; }
}

@media (max-width: 540px) {
  .bn-tile-grid { grid-template-columns: repeat(3, 1fr); }
  .bn-tile__icon { width: 36px; height: 36px; }
  .bn-tile { min-height: 76px; padding: 8px 3px 6px; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
  .categories-grid { column-gap: 8px; row-gap: 28px; }
  .categories-grid > .category-tile {
    flex-basis: calc(33.333% - 6px);
    max-width: calc(33.333% - 6px);
  }
  .category-tile__name { font-size: 10px; letter-spacing: 0.1em; }
  .category-tile__sub { font-size: 9px; }
  .filter-bar { gap: 8px; }
  .filter-btn { padding: 6px 14px; font-size: 11px; }
}

/* ===== FEATURED CAROUSEL (mobile only ≤640px) ===== */
.featured-carousel { position: relative; }
.featured-carousel__arrow,
.featured-carousel__dots { display: none; }

@media (max-width: 640px) {
  #featured-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    margin: 0 -16px;
    padding: 0 16px;
  }
  #featured-grid::-webkit-scrollbar { display: none; }
  #featured-grid > .product-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
    width: 100%;
    margin: 0;
  }
  .featured-carousel__arrow {
    display: flex;
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    line-height: 1;
    color: #1a1a1f;
    cursor: pointer;
    z-index: 5;
    user-select: none;
    padding: 0;
  }
  .featured-carousel__arrow--prev { left: 6px; }
  .featured-carousel__arrow--next { right: 6px; }
  .featured-carousel__arrow:active { background: #fff; }
  .featured-carousel__arrow[disabled] { opacity: 0.35; pointer-events: none; }
  .featured-carousel__dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
  }
  .featured-carousel__dot {
    width: 8px;
    height: 8px;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(0,0,0,0.22);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, width 0.2s;
  }
  .featured-carousel__dot--active {
    background: var(--accent, #7B52AE);
    width: 24px;
    border-radius: 4px;
  }
}