@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --gold: #e9c783;
  --gold-bright: #ffe3a8;
  --gold-deep: #9a6a2d;
  --ice: #eff6ff;
  --cyan: #00d9ff;
  --violet: #973cff;
  --navy: #07101f;
  --display: "Playfair Display", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--navy); scroll-behavior: smooth; }
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  color: #f7f4ef;
  background: var(--navy);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
.collections-stage {
  position: relative;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100svh;
  overflow: hidden;
  background: #080e19;
}
.collections-worlds { display:contents; }
.world-panel {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  min-height: 100svh;
  padding: clamp(250px, 29vh, 305px) clamp(22px, 4.4vw, 72px) clamp(74px, 9vh, 104px);
  overflow: hidden;
  text-align: center;
}
.world-panel::before,
.world-panel::after {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  pointer-events: none;
}
.world-panel::before {
  background-position: center;
  background-size: cover;
  filter: saturate(.9) brightness(.79);
  transform: scale(1.025);
  transition: transform 700ms cubic-bezier(.2,.7,.2,1), filter 700ms ease;
}
.world-panel::after {
  z-index: -1;
  content: "";
  background: linear-gradient(180deg, rgba(7,9,16,.18) 0%, rgba(6,9,17,.22) 26%, rgba(5,8,15,.56) 62%, rgba(4,7,13,.83) 100%);
}
.world-panel--parfums { border-right: 1px solid rgba(255,220,160,.6); background-color:#21130d; }
.world-panel--parfums::before {
  background-image: url("https://images.unsplash.com/photo-1672848700906-2b8ca62639e4?auto=format&fit=crop&fm=jpg&q=85&w=1800");
}
.world-panel--parfums::after {
  background:
    radial-gradient(ellipse at 50% 55%, rgba(124,67,23,.12), transparent 52%),
    linear-gradient(180deg, rgba(19,10,6,.13) 0%, rgba(25,13,6,.32) 31%, rgba(22,12,6,.7) 68%, rgba(16,8,4,.9) 100%),
    linear-gradient(90deg, rgba(32,15,4,.2), transparent 75%);
}
.world-panel--tech { background-color:#07152d; }
.world-panel--tech::before {
  background-image: url("https://images.unsplash.com/photo-1706264337407-45faed32590c?auto=format&fit=crop&fm=jpg&q=85&w=1800");
}
.world-panel--tech::after {
  background:
    radial-gradient(ellipse at 50% 52%, rgba(0,110,255,.09), transparent 55%),
    linear-gradient(180deg, rgba(3,9,22,.18) 0%, rgba(3,9,24,.27) 29%, rgba(3,8,21,.72) 68%, rgba(3,7,18,.92) 100%),
    linear-gradient(90deg, rgba(3,8,20,.3), rgba(4,8,23,.08) 65%);
}
.world-panel:hover::before,
.world-panel:focus-within::before {
  filter: saturate(1.02) brightness(.88);
  transform: scale(1.055);
}
.collections-masthead {
  position: absolute;
  z-index: 5;
  top: clamp(18px, 3.2vh, 36px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(780px, 94vw);
  padding: 13px 22px 17px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 26px;
  background: linear-gradient(105deg, rgba(41,21,10,.40), rgba(14,21,39,.55) 52%, rgba(7,14,32,.38));
  box-shadow: 0 15px 60px rgba(0,0,0,.08);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  transform: translateX(-50%);
  text-align: center;
  animation: masthead-in .85s ease both;
}
.collections-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  line-height: 1;
}
.collections-monogram {
  position: relative;
  display: inline-block;
  color: #f9e3b0;
  font-family: var(--display);
  font-size: clamp(49px, 5.5vw, 70px);
  font-weight: 500;
  letter-spacing: -.12em;
  line-height: .94;
  padding-right: .12em;
  text-shadow: 0 0 18px rgba(231,176,85,.18), 0 2px 4px rgba(0,0,0,.55);
}
.collections-monogram::before {
  position: absolute;
  content: "✦";
  top: -9px;
  left: 50%;
  color: #f4d08b;
  font-size: 14px;
  letter-spacing: 0;
  transform: translateX(-50%);
  text-shadow: 0 0 14px rgba(255,201,102,.35);
}
.collections-name {
  display: block;
  padding: 0 0 0 5px;
  color: #fff6e5;
  font-size: clamp(11px, 1.2vw, 15px);
  font-weight: 600;
  letter-spacing: .45em;
}
.collections-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: min(410px, 70vw);
  margin: 12px 0 8px;
  color: var(--gold);
}
.collections-divider::before,
.collections-divider::after {
  height: 1px;
  flex: 1;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(244,202,126,.86));
}
.collections-divider::after { background: linear-gradient(90deg, rgba(244,202,126,.86), transparent); }
.collections-divider span { font-size: 11px; text-shadow: 0 0 12px rgba(255,215,145,.5); }
.collections-tagline {
  margin: 0;
  color: #fff8ec;
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 31px);
  font-weight: 400;
  letter-spacing: .075em;
  line-height: 1.25;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
.collections-subtitle {
  margin: 8px 0 0;
  color: rgba(255,245,226,.9);
  font-size: clamp(8px, .78vw, 10px);
  font-weight: 700;
  letter-spacing: .26em;
  line-height: 1.7;
  text-transform: uppercase;
}
.world-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 490px);
  min-width: 0;
  margin: auto 0 0;
  animation: rise-in .85s .12s ease both;
}
.world-tech-logo {
  display:block;
  width:clamp(124px, 13vw, 168px);
  max-width:100%;
  max-height:180px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.45)) drop-shadow(0 0 13px rgba(0,140,255,.12));
}
.world-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 160px;
  justify-content: center;
}
.world-emblem {
  display: block;
  width: clamp(72px, 7.7vw, 104px);
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 3px 16px rgba(0,0,0,.24));
}
.world-title {
  margin: 0;
  color: #fff2d7;
  font-family: var(--display);
  font-size: clamp(29px, 3.3vw, 46px);
  font-weight: 500;
  letter-spacing: .085em;
  line-height: 1.12;
  text-shadow: 0 3px 19px rgba(0,0,0,.6);
  text-wrap: balance;
}
.world-title-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(270px, 72%);
  margin: 6px 0 0;
  color: #e9c783;
}
.world-title-rule::before,
.world-title-rule::after {
  height: 1px;
  flex: 1;
  content: "";
  background: linear-gradient(90deg, transparent, currentColor);
  opacity: .8;
}
.world-title-rule::after { transform: scaleX(-1); }
.world-title-rule span { font-size: 10px; }
.world-eyebrow {
  margin: 12px 0 0;
  color: #f5d79e;
  font-size: clamp(9px, .84vw, 11px);
  font-weight: 700;
  letter-spacing: .24em;
  line-height: 1.7;
  text-transform: uppercase;
}
.world-copy {
  max-width: 390px;
  margin: 17px auto 0;
  color: rgba(255,249,239,.94);
  font-size: clamp(13px, 1.04vw, 15px);
  font-weight: 400;
  line-height: 1.75;
  text-shadow: 0 2px 11px rgba(0,0,0,.8);
  text-wrap: balance;
}
.world-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: min(100%, 330px);
  min-height: 55px;
  margin-top: 22px;
  padding: 13px 23px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  color: #fff8e9;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .19em;
  line-height: 1.45;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.world-cta .arrow { font-size: 19px; font-weight: 400; line-height: 1; transition: transform .22s ease; }
.world-cta:hover { transform: translateY(-3px); }
.world-cta:hover .arrow { transform: translateX(4px); }
.world-cta:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.world-cta--parfums {
  border-color: rgba(255,220,158,.96);
  background: linear-gradient(105deg, rgba(104,56,17,.54), rgba(228,166,73,.25), rgba(82,42,12,.5));
  box-shadow: 0 0 0 1px rgba(224,173,97,.12), 0 0 27px rgba(231,169,83,.17), inset 0 0 20px rgba(255,218,157,.09);
}
.world-cta--parfums:hover {
  border-color: #ffe4ae;
  background: linear-gradient(105deg, rgba(125,69,21,.72), rgba(238,188,105,.34), rgba(89,43,12,.66));
  box-shadow: 0 0 35px rgba(231,169,83,.3), inset 0 0 22px rgba(255,218,157,.15);
}
.world-cta--tech {
  border-color: #5cecff;
  background: linear-gradient(105deg, rgba(0,74,185,.42), rgba(41,46,159,.28), rgba(109,28,202,.43));
  box-shadow: 0 0 0 1px rgba(0,204,255,.12), 0 0 25px rgba(0,160,255,.2), inset 0 0 19px rgba(55,82,255,.12);
}
.world-cta--tech:hover {
  border-color: #a2f5ff;
  box-shadow: 0 0 35px rgba(0,177,255,.37), 0 0 22px rgba(147,46,255,.18), inset 0 0 23px rgba(55,82,255,.2);
}
.collections-footer {
  position: absolute;
  z-index: 4;
  right: 16px;
  bottom: 13px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255,247,229,.73);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .27em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}
.collections-footer::before,
.collections-footer::after {
  width: clamp(24px, 7vw, 105px);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(239,203,140,.65));
}
.collections-footer::after { transform: scaleX(-1); }
.collections-footer-mark { color: #eac581; font-size: 11px; }

@keyframes masthead-in {
  from { opacity: 0; transform: translate(-50%, -9px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1500px) {
  .world-panel { padding-right: max(72px, calc((100vw - 1500px) / 6)); padding-left: max(72px, calc((100vw - 1500px) / 6)); }
}
@media (max-height: 800px) and (min-width: 761px) {
  .collections-masthead { top: 12px; padding: 9px 20px 11px; }
  .collections-monogram { font-size: 47px; }
  .collections-divider { margin: 8px 0 5px; }
  .collections-tagline { font-size: clamp(18px, 2.2vw, 25px); }
  .collections-subtitle { margin-top: 5px; font-size: 8px; }
  .world-panel { padding-top: 205px; padding-bottom: 58px; }
  .world-brand { min-height: 132px; gap: 5px; }
  .world-emblem { width: 68px; }
  .world-title { font-size: clamp(27px, 3vw, 39px); }
  .world-copy { margin-top: 10px; line-height: 1.55; }
  .world-cta { margin-top: 14px; min-height: 48px; }
  .collections-footer { bottom: 8px; }
}
@media (max-width: 760px) {
  .collections-stage { display: flex; flex-direction: column; min-height: 100svh; overflow: clip; }
  .collections-masthead {
    position: relative;
    top: auto;
    left: auto;
    order: 0;
    width: 100%;
    padding: 22px 16px 19px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    border-radius: 0;
    background: linear-gradient(110deg, rgba(48,26,15,.97), rgba(15,21,39,.98) 54%, rgba(5,12,28,.97));
    box-shadow: 0 9px 28px rgba(0,0,0,.24);
    transform: none;
    animation: none;
  }
  .collections-lockup { gap: 10px; }
  .collections-monogram { font-size: 48px; }
  .collections-name { font-size: 11px; letter-spacing: .37em; }
  .collections-divider { margin: 8px 0 7px; }
  .collections-tagline { font-size: clamp(19px, 5.2vw, 27px); letter-spacing: .02em; }
  .collections-subtitle { max-width: 330px; margin-top: 7px; font-size: 8px; letter-spacing: .15em; }
  .world-panel {
    flex: 1 0 auto;
    min-height: 430px;
    min-height: max(430px, 55svh);
    padding: 30px 22px 48px;
    justify-content: center;
  }
  .world-panel--parfums { border-right: 0; border-bottom: 1px solid rgba(255,220,160,.55); }
  .world-panel--parfums::before { background-position: center 45%; }
  .world-panel--tech::before { background-position: center 52%; }
  .world-content { width: min(100%, 430px); margin: auto; }
  .world-brand { min-height: 0; gap: 9px; }
  .world-emblem { width: 66px; }
  .world-tech-logo { width:clamp(120px, 27vw, 148px); max-height:150px; }
  .world-title { font-size: clamp(31px, 8vw, 42px); }
  .world-eyebrow { margin-top: 9px; font-size: 9px; letter-spacing: .19em; }
  .world-copy { margin-top: 11px; font-size: 13px; line-height: 1.65; }
  .world-cta { width: min(100%, 360px); min-height: 52px; margin-top: 18px; font-size: 10px; }
  .collections-footer { position: relative; right: auto; bottom: auto; left: auto; min-height: 42px; padding: 11px 14px; background: #070d19; }
}
@media (max-width: 390px) {
  .collections-masthead { padding: 18px 13px 16px; }
  .collections-monogram { font-size: 43px; }
  .collections-name { font-size: 10px; letter-spacing: .28em; }
  .collections-tagline { font-size: 18px; }
  .collections-subtitle { font-size: 7px; letter-spacing: .12em; }
  .world-panel { min-height: 420px; padding: 27px 16px 39px; }
  .world-copy { font-size: 12.5px; }
  .world-cta { gap: 8px; padding-inline: 14px; letter-spacing: .12em; }
  .collections-footer { gap: 7px; font-size: 8px; letter-spacing: .15em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* Force the mobile composition on touch devices in portrait, even when
   Android Chrome requests the desktop site and reports a wide layout viewport. */
@media (pointer: coarse) and (orientation: portrait) {
  .collections-stage {
    display:flex;
    flex-direction:column;
    min-height:100svh;
    overflow:clip;
  }
  .collections-worlds { display:contents; }
  .collections-masthead {
    position:relative;
    top:auto;
    left:auto;
    order:0;
    width:100%;
    padding:22px 16px 19px;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.12);
    border-radius:0;
    background:linear-gradient(110deg,rgba(48,26,15,.97),rgba(15,21,39,.98) 54%,rgba(5,12,28,.97));
    box-shadow:0 9px 28px rgba(0,0,0,.24);
    transform:none;
    animation:none;
  }
  .collections-lockup { gap:10px; }
  .collections-monogram { font-size:48px; }
  .collections-name { font-size:11px; letter-spacing:.37em; }
  .collections-divider { margin:8px 0 7px; }
  .collections-tagline { font-size:clamp(19px,5.2vw,27px); letter-spacing:.02em; }
  .collections-subtitle { max-width:330px; margin-top:7px; font-size:8px; letter-spacing:.15em; }
  .world-panel {
    display:flex;
    flex:0 0 auto;
    width:100%;
    min-width:0;
    min-height:clamp(510px,60svh,650px);
    padding:30px 22px 48px;
    justify-content:center;
  }
  .world-panel--parfums { border-right:0; border-bottom:1px solid rgba(255,220,160,.55); }
  .world-panel--parfums::before { background-position:center 45%; }
  .world-panel--tech::before { background-position:center 52%; }
  .world-content { width:min(100%,430px); margin:auto; }
  .world-brand { min-height:0; gap:9px; }
  .world-emblem { width:66px; }
  .world-tech-logo { width:clamp(120px,27vw,148px); max-height:150px; }
  .world-title { font-size:clamp(31px,8vw,42px); }
  .world-eyebrow { margin-top:9px; font-size:9px; letter-spacing:.19em; }
  .world-copy { margin-top:11px; font-size:13px; line-height:1.65; }
  .world-cta { width:min(100%,360px); min-height:52px; margin-top:18px; font-size:10px; }
  .collections-footer {
    position:relative; right:auto; bottom:auto; left:auto;
    min-height:42px; padding:11px 14px; background:#070d19;
  }
}
@media (pointer: coarse) and (orientation: portrait) and (max-width: 390px) {
  .collections-masthead { padding:18px 13px 16px; }
  .collections-monogram { font-size:43px; }
  .collections-name { font-size:10px; letter-spacing:.28em; }
  .collections-tagline { font-size:18px; }
  .collections-subtitle { font-size:7px; letter-spacing:.12em; }
  .world-panel { min-height:510px; padding:27px 16px 39px; }
  .world-copy { font-size:12.5px; }
  .world-cta { gap:8px; padding-inline:14px; letter-spacing:.12em; }
  .collections-footer { gap:7px; font-size:8px; letter-spacing:.15em; }
}


/* Desktop-mode phones: keep the stacked page content-driven instead of forcing
   viewport height or allowing the panels to grow and create artificial gaps. */
@media (pointer: coarse) and (orientation: portrait) {
  html,
  body {
    min-height: 0;
    height: auto;
  }
  .collections-stage {
    min-height: 0;
    height: auto;
    overflow: clip;
  }
  .world-panel {
    flex: 0 0 auto !important;
  }
  .collections-footer {
    flex: 0 0 auto;
    margin: 0;
  }
}


/* JB COLLECTIONS · mobile portrait: show both destinations with compact stacked panels. */
@media (max-width: 760px), (pointer: coarse) and (orientation: portrait) {
  .collections-stage {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    overflow: clip;
  }
  .collections-masthead {
    flex: 0 0 auto;
    padding: 12px 14px 10px;
  }
  .collections-lockup { gap: 9px; }
  .collections-monogram { font-size: clamp(37px, 10vw, 43px); }
  .collections-name { font-size: 10px; letter-spacing: .28em; }
  .collections-divider { width: min(320px, 72vw); margin: 5px 0 4px; }
  .collections-tagline {
    font-size: clamp(17px, 4.8vw, 22px);
    line-height: 1.18;
    letter-spacing: .015em;
  }
  .collections-subtitle {
    max-width: 330px;
    margin-top: 4px;
    font-size: 7px;
    line-height: 1.4;
    letter-spacing: .1em;
  }
  .world-panel {
    flex: 0 0 auto !important;
    width: 100%;
    min-height: clamp(225px, 30svh, 285px) !important;
    height: auto;
    padding: 13px 16px 17px;
    justify-content: center;
  }
  .world-panel--parfums { border-right: 0; border-bottom: 1px solid rgba(255,220,160,.55); }
  .world-content { width: min(100%, 430px); margin: auto; }
  .world-brand { min-height: 0; gap: 5px; }
  .world-emblem { width: clamp(46px, 12vw, 56px); }
  .world-tech-logo { width: clamp(76px, 20vw, 100px); max-height: 100px; }
  .world-title { font-size: clamp(27px, 7vw, 34px); line-height: 1.06; }
  .world-title-rule { width: min(220px, 65%); margin-top: 3px; }
  .world-eyebrow { margin-top: 6px; font-size: 8px; line-height: 1.35; letter-spacing: .16em; }
  .world-copy {
    max-width: 45ch;
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.42;
  }
  .world-cta {
    width: min(100%, 340px);
    min-height: 43px;
    margin-top: 11px;
    padding: 10px 14px;
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: .12em;
  }
  .world-cta .arrow { font-size: 16px; }
  .collections-footer {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    flex: 0 0 auto;
    min-height: 30px;
    padding: 7px 12px;
    gap: 7px;
    font-size: 7px;
    letter-spacing: .17em;
  }
}