/* Review-only header and hero. Original jewellery files remain unmodified. */
body .page{max-width:1760px}body .header{position:relative;background:#1d1c1b;border:0;backdrop-filter:none}
body .header-inner{height:auto;max-width:1100px;padding:16px 22px 20px;gap:20px;justify-content:center}
body .logo-wrap{width:min(76%,440px);gap:7px;align-items:center;min-width:0}
body .logo{display:block;border:0;padding:0;line-height:0;width:100%;font-size:0}
.logo object,.logo img{display:block;width:100%;height:auto;aspect-ratio:3/1;pointer-events:none}
.logo .static-logo{display:none}
body .sub-logo{margin:0;color:#eee5d8;font-size:clamp(7px,1.75vw,10px);letter-spacing:.22em;white-space:nowrap;text-align:center}
body .menu{margin-left:4px;width:30px;height:36px;gap:7px}body .menu span{height:2px;width:28px;background:#d7b16d}
body .menu-list{background:#25221f}
.review-hero{background:#211e1c;overflow:hidden;text-align:center}
.hero-copy{position:relative;z-index:1;margin:auto;padding:33px 18px 0;max-width:1120px}
.hero-copy .eyebrow{font:600 clamp(10px,2.65vw,14px)/1.6 Arial,sans-serif;letter-spacing:.24em;color:#d9b274;margin:0 0 21px}
.hero-copy h1{font-family:Didot,'Bodoni MT','Times New Roman',serif;font-size:clamp(29px,7.55vw,58px);font-weight:400;line-height:1.1;letter-spacing:-.025em;margin:0;color:#f4eee2}
.hero-copy .hero-description{font-family:Didot,'Bodoni MT','Times New Roman',serif;font-size:clamp(18px,4.3vw,27px);line-height:1.25;margin:22px auto 0;color:#f0e7da;max-width:720px}
.hero-original{position:relative;margin:0 auto;max-width:1100px;line-height:0}
.hero-original img{display:block;width:100%;height:auto;filter:none!important;mask:none!important;-webkit-mask:none!important;transform:none!important}
.hero-original:before{content:'';position:absolute;z-index:1;inset:0 0 auto;height:19%;background:linear-gradient(to bottom,#211e1c,rgba(33,30,28,.65) 30%,transparent);pointer-events:none}
.hero-original:after{content:'';position:absolute;z-index:1;inset:auto 0 0;height:14%;background:linear-gradient(to bottom,transparent,rgba(86,81,77,.24) 42%,#56514d);pointer-events:none}
@media(min-width:750px){body .header-inner{padding:14px 40px 18px;justify-content:space-between}body .logo-wrap{width:330px}body .sub-logo{font-size:8px}.hero-copy{padding:48px 32px 0}.hero-copy h1{font-size:clamp(44px,4.3vw,62px)}.hero-copy .hero-description{font-size:25px;margin-top:24px}.hero-original{max-width:900px}.hero-original:after{height:14%}.review-hero{background:linear-gradient(#211e1c 75%,#56514d)}}
@media(prefers-reduced-motion:reduce){.logo .animated-logo{display:none}.logo .static-logo{display:block}}

/* John review: static approved mark, no sparkle; slightly deeper lower-edge photo fade */
.logo object.animated-logo { display: none !important; }
.logo img.static-logo { display: block !important; width: 100%; height: auto; aspect-ratio: 3 / 1; }
.hero-original::after { height: 17%; }
@media (min-width: 750px) { .hero-original::after { height: 17%; } }

/* Ensure the review uses the static logo and a slightly longer bottom fade. */
.review-hero .hero-original::after { height: 17% !important; }
@media (min-width: 750px) { .review-hero .hero-original::after { height: 17% !important; } }


/* Approved hero layout: real bench photo beneath the centered hero copy. */
body .header-inner { position: relative !important; justify-content: center !important; gap: 0 !important; padding: 16px 52px 18px !important; }
body .logo-wrap { width: min(64vw, 440px) !important; margin: 0 auto !important; align-items: center !important; gap: 7px !important; }
body .logo { position: relative !important; display: block !important; width: 100% !important; border: 0 !important; padding: 0 !important; line-height: 0 !important; }
body .header .logo object.animated-logo { display: block !important; position: relative !important; z-index: 2 !important; width: 100% !important; height: auto !important; aspect-ratio: 3 / 1 !important; pointer-events: none !important; }
body .header .logo img.static-logo { display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; width: 100% !important; height: auto !important; aspect-ratio: 3 / 1 !important; pointer-events: none !important; }
body .menu { position: absolute !important; top: 50% !important; right: clamp(18px, 5vw, 42px) !important; transform: translateY(-50%) !important; margin: 0 !important; }
.review-hero { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; position: relative !important; overflow: hidden !important; isolation: isolate !important; background: #211e1c !important; }
.review-hero .hero-copy, .review-hero .hero-original { grid-column: 1 !important; grid-row: 1 !important; }
.review-hero .hero-copy { align-self: start !important; position: relative !important; z-index: 2 !important; margin: 0 auto !important; padding: 34px 18px 0 !important; }
.review-hero .hero-original { align-self: stretch !important; position: relative !important; z-index: 0 !important; width: 100% !important; max-width: 1100px !important; margin: 0 auto !important; line-height: 0 !important; }
.review-hero .hero-original img { display: block !important; width: 100% !important; height: auto !important; filter: none !important; mask: none !important; -webkit-mask: none !important; transform: none !important; }
.review-hero .hero-original::before { inset: 0 0 auto !important; height: 56% !important; background: linear-gradient(to bottom, #211e1c 0%, rgba(33,30,28,.94) 16%, rgba(33,30,28,.68) 34%, rgba(33,30,28,.25) 52%, transparent 100%) !important; }
.review-hero .hero-original::after { inset: auto 0 0 !important; height: 17% !important; background: linear-gradient(to bottom, transparent 0%, rgba(86,81,77,.22) 45%, #56514d 100%) !important; }
@media (min-width: 750px) {
  body .header-inner { padding: 16px 64px 18px !important; }
  body .logo-wrap { width: 440px !important; }
  .review-hero .hero-copy { padding: 48px 32px 0 !important; }
  .review-hero .hero-original { max-width: 1100px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body .header .logo object.animated-logo { display: none !important; }
}
/* Review correction: overlap the upper bench only, with the ring below the copy. */
body .review-hero { display: block !important; }
body .review-hero .hero-copy { margin: 0 auto !important; }
body .review-hero .hero-original { margin: max(-11vw, -92px) auto 0 !important; }
body .review-hero .hero-original::before {
  height: 30% !important;
  background: linear-gradient(to bottom, #211e1c, rgba(33,30,28,.78) 40%, transparent) !important;
}
body .review-hero .hero-original::after {
  height: 18% !important;
  background: linear-gradient(to bottom, transparent, #56514d) !important;
}

/* Restore the animated mark over the static fallback. */
body .header .logo { position: relative !important; }
body .header .logo object.animated-logo { display: block !important; position: relative !important; z-index: 2 !important; width: 100% !important; height: auto !important; }
body .header .logo img.static-logo { display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; width: 100% !important; height: auto !important; }


/* Final staging fix: show the animated SVG over the static fallback. */
body .header .logo { position: relative !important; }
body .header .logo object.animated-logo {
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 1 !important;
  pointer-events: none !important;
}
body .header .logo img.static-logo {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 1 !important;
  pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body .header .logo object.animated-logo { display: none !important; }
  body .header .logo img.static-logo { display: block !important; position: relative !important; }
}

/* Reliable CSS sparkle overlay for staging preview. */
body .header .logo { position: relative !important; }
body .header .logo::after {
  content: '';
  position: absolute;
  z-index: 4;
  pointer-events: none;
  left: 15.9%;
  top: 43.5%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: radial-gradient(circle, #fff 0 13%, #ffe7a6 25%, rgba(255,214,117,.65) 36%, transparent 70%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  opacity: 0;
  animation: gemsetter-diamond-flash 6s ease-in-out infinite;
}
@keyframes gemsetter-diamond-flash {
  0%, 72%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(.55); }
  78% { opacity: .95; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
  84% { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(1.15); }
}

/* Final mobile proportion refinement for approved mock-up. */
body .header-inner { padding: 24px 22px 28px !important; }
body .logo-wrap { width: min(86vw, 560px) !important; }
body .logo { width: 100% !important; }
.hero-original::after {
  height: 20% !important;
  background: linear-gradient(to bottom, transparent 0%, rgba(86,81,77,.08) 55%, rgba(86,81,77,.28) 82%, rgba(86,81,77,.62) 96%, #56514d 100%) !important;
}
@media (min-width: 750px) {
  body .header-inner { padding: 20px 40px 26px !important; }
  body .logo-wrap { width: 390px !important; }
  .hero-original::after { height: 18% !important; }
}

/* Review refinement: reserve room for the menu and blend into the next section. */
@media (max-width: 749px) {
 body .header-inner { padding: 14px 18px 18px !important; gap: 12px !important; }
 body .logo-wrap { width: min(65vw, 330px) !important; max-width: calc(100% - 52px) !important; flex: 0 1 auto !important; }
 body .menu { flex: 0 0 30px !important; }
}
body .review-hero .hero-original::after {
 height: 22% !important;
 background: linear-gradient(to bottom, rgba(57,52,50,0) 0%, rgba(57,52,50,.06) 20%, rgba(57,52,50,.24) 48%, rgba(57,52,50,.6) 78%, #393432 100%) !important;
}

body .review-hero .hero-original::after { background: linear-gradient(to bottom, rgba(64,58,55,0) 0%, rgba(64,58,55,.06) 20%, rgba(64,58,55,.24) 48%, rgba(64,58,55,.6) 78%, #403a37 100%) !important; }

/* Supplied slim mobile logo, review only. */
@media (max-width: 749px) {
 body .header .logo-wrap { width: min(62.8vw, 245px) !important; max-width: calc(100% - 52px) !important; }
 body .header .logo { width: 100% !important; height: auto !important; aspect-ratio: 2172 / 395 !important; background: url('Gemsetter_Logo_Animated_Mobile.svg') center / contain no-repeat, url('Gemsetter_Logo_Static_Mobile.png') center / contain no-repeat !important; }
 body .header .logo object.animated-logo, body .header .logo img.static-logo { display: none !important; }
 body .header .logo::after { content: none !important; animation: none !important; }
}
@media (max-width: 749px) and (prefers-reduced-motion: reduce) {
 body .header .logo { background: url('Gemsetter_Logo_Static_Mobile.png') center / contain no-repeat !important; }
}

/* Mobile review: finer frame and gentler lower fade. */
@media (max-width: 749px) {
 body .header .logo { background: url('Gemsetter_Logo_Animated_Fine.svg') center / contain no-repeat !important; }
 body .review-hero .hero-original::after { height: 15% !important; background: linear-gradient(to bottom, rgba(64,58,55,0) 0%, rgba(64,58,55,.03) 25%, rgba(64,58,55,.18) 55%, rgba(64,58,55,.55) 82%, #403a37 100%) !important; }
}
@media (max-width: 749px) and (prefers-reduced-motion: reduce) {
 body .header .logo { background: url('Gemsetter_Logo_Static_Fine.svg') center / contain no-repeat !important; }
}


/* Mobile review: reduce space beneath the header only. */
@media (max-width: 749px) {
  body .header-inner { padding-bottom: 0 !important; }
  body .review-hero .hero-copy { padding-top: 12px !important; }
}


/* Approved 11 November assets: mobile staging logo only. */
@media (max-width: 749px) {
  body .header .logo-wrap { width: min(62.8vw, 270px) !important; }
 body .header .logo { height: auto !important; aspect-ratio: 1000 / 182 !important; background: url("Gemsetter_Approval_Animated_Black.svg") center / contain no-repeat, url("Gemsetter_Approval_Static_Black.png") center / contain no-repeat !important; }
}
@media (max-width: 749px) and (prefers-reduced-motion: reduce) {
 body .header .logo { background: url("Gemsetter_Approval_Static_Black.png") center / contain no-repeat !important; }
}