/* Unity Export — the white frame.
   Built from the Unity Export design system: white ground, Mysore Indigo for
   headings, links and buttons, Kumkum Red as a spark (dots, eyebrows, one call
   to action per page), Marcellus for display, Mukta for everything else.
   No shadows, no gradients, no tinted sections: space first, then a hairline. */

/* ---------- fonts (SIL Open Font Licence) ----------
   Served from assets/fonts first. If a browser refuses local font files
   (Chrome and Edge do when index.html is opened straight from disk), the
   same fonts load from Google Fonts instead. */
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Marcellus-Regular.woff2") format("woff2"), url("https://fonts.gstatic.com/s/marcellus/v14/wEO_EBrOk8hQLDvIAF81VvoK.woff2") format("woff2"); }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Mukta-400.woff2") format("woff2"), url("https://fonts.gstatic.com/s/mukta/v17/iJWKBXyXfDDVXbnBrXw.woff2") format("woff2"); }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Mukta-500.woff2") format("woff2"), url("https://fonts.gstatic.com/s/mukta/v17/iJWHBXyXfDDVXbEyjmmd8WA.woff2") format("woff2"); }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Mukta-600.woff2") format("woff2"), url("https://fonts.gstatic.com/s/mukta/v17/iJWHBXyXfDDVXbEeiWmd8WA.woff2") format("woff2"); }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Mukta-700.woff2") format("woff2"), url("https://fonts.gstatic.com/s/mukta/v17/iJWHBXyXfDDVXbF6iGmd8WA.woff2") format("woff2"); }

/* ---------- tokens ---------- */
:root {
  --white: #ffffff;
  --indigo: #1c2d7f;        /* Mysore Indigo: headings, links, buttons, logo line */
  --indigo-deep: #0f1a45;   /* Ink: body copy */
  --kumkum: #c2182b;        /* Kumkum Red: dots, eyebrows, one call to action */
  --kumkum-deep: #9a1020;   /* hover and pressed kumkum */
  --sandal: #a8782a;        /* Sandalwood Gold: print only; never text on screen */
  --muted: #4a5375;         /* captions, notes, secondary copy */
  --border: #7f89b0;        /* input and secondary control outlines */
  --hairline: #d9deee;      /* decorative dividers and table rules */
  --indigo-tint: #eef1fa;   /* one quiet relief panel per page */
  --kumkum-tint: #fbeef0;   /* one highlight panel per page */
  --on-indigo: #ffffff;
  --focus: #1c2d7f;

  --display: "Marcellus", Georgia, "Times New Roman", serif;
  --sans: "Mukta", "Segoe UI", system-ui, sans-serif;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 999px;

  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
  --space-5: 40px; --space-6: 64px; --space-7: 96px;

  --wrap: 1240px;
  --gutter: 32px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--indigo-deep); font: 400 17px/28px var(--sans); -webkit-font-smoothing: antialiased; caret-color: var(--indigo); font-feature-settings: "kern", "liga"; }
::selection { background: var(--indigo-tint); color: var(--indigo-deep); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
a { color: var(--indigo); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--indigo-deep); }
img { display: block; max-width: 100%; }
svg { display: block; }
p { margin: 0 0 var(--space-3); max-width: 68ch; text-wrap: pretty; }
li { text-wrap: pretty; }
b, strong { font-weight: 600; }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--display); font-weight: 400; color: var(--indigo); letter-spacing: .01em; }
h1 { font-size: 56px; line-height: 62px; }                /* display */
h2 { font-size: 40px; line-height: 48px; margin-bottom: var(--space-3); } /* heading-1: the page's big section titles */
h3 { font: 600 20px/28px var(--sans); color: var(--indigo-deep); }     /* heading-3 */
.lede { font-size: 20px; line-height: 32px; color: var(--indigo-deep); max-width: 60ch; } /* lead */
.small, .fine, .note-text { font-size: 14px; line-height: 22px; color: var(--muted); }
.label, .eyebrow, .mini, .lbl, .lbl-like, .field label, .field legend, .studio-form label, .studio-form .lbl, .planner-controls .lbl, .compare thead th, .markets thead th, footer h4, .concept-tag, .frame figcaption span, .steps .when, .hero-caption {
  font: 600 13px/18px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.eyebrow { color: var(--kumkum); display: block; margin-bottom: 20px; }
.mini { display: block; margin-bottom: var(--space-2); }
@media (max-width: 760px) {
  h1 { font-size: 40px; line-height: 48px; }
  h2 { font-size: 32px; line-height: 40px; }
  .lede { font-size: 18px; line-height: 30px; }
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: var(--space-7) 0; }
section + section, .board + section { border-top: 1px solid var(--hairline); }
.head { max-width: 720px; margin-bottom: var(--space-5); }
.head.center { margin-left: auto; margin-right: auto; text-align: center; }
.head.center p { margin-left: auto; margin-right: auto; }
.head p:last-child { margin-bottom: 0; }
.tint, .paper, .cine, .sand { background: var(--white); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ink { color: var(--indigo-deep); }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 14px 28px; border-radius: var(--radius-sm); border: 1.5px solid var(--indigo); background: var(--indigo); color: var(--on-indigo); font: 600 13px/18px var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; white-space: nowrap; }
.btn:hover { background: var(--indigo-deep); border-color: var(--indigo-deep); color: var(--on-indigo); }
.btn-primary { background: var(--indigo); border-color: var(--indigo); }
.btn-ghost { background: var(--white); color: var(--indigo); }
.btn-ghost:hover { background: var(--indigo-tint); border-color: var(--indigo); color: var(--indigo); }
.btn-cta { background: var(--kumkum); border-color: var(--kumkum); }
.btn-cta:hover { background: var(--kumkum-deep); border-color: var(--kumkum-deep); }
.link { font-weight: 600; color: var(--indigo); text-decoration: underline; text-underline-offset: 4px; }
.link:hover { color: var(--indigo-deep); }

/* ---------- header ---------- */
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--indigo); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); text-decoration: none; }
.skip:focus { top: 12px; }
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--indigo); transform: scaleX(0); transform-origin: 0 50%; z-index: 100; pointer-events: none; }
header.site { position: sticky; top: 0; z-index: 40; background: var(--white); border-bottom: 1px solid var(--hairline); }
header.site .bar { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.logo { display: flex; align-items: center; gap: 14px; flex: none; text-decoration: none; padding: 16px 0; }
.logo .logo-mark { width: 60px; height: 60px; flex: none; display: block; }
.logo .logo-mark svg { width: 100%; height: 100%; display: block; }
.logo img { height: 56px; width: auto; display: block; }
nav.main ul { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; align-items: center; }
nav.main a { text-decoration: none; font: 500 16px/24px var(--sans); color: var(--indigo-deep); padding: 6px 0; }
nav.main a:hover { color: var(--indigo); text-decoration: underline; text-underline-offset: 6px; }
header.site .btn { padding: 13px 22px; }
.nav-cta { display: none; }
.menu-btn { display: none; width: 48px; height: 48px; border-radius: var(--radius-sm); border: 1.5px solid var(--indigo); background: var(--white); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; margin-left: auto; }
.menu-btn span { width: 18px; height: 1.5px; background: var(--indigo); display: block; transition: transform .25s; }
.menu-btn[aria-expanded=true] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded=true] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
@media (max-width: 1100px) {
  nav.main { display: none; }
  .menu-btn { display: flex; }
  header.site .bar { gap: 12px; }
  nav.main.open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--hairline); }
  nav.main.open ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 18px; max-width: var(--wrap); margin: 0 auto; }
  nav.main.open a { display: block; padding: 14px 0; border-bottom: 1px solid var(--hairline); font: 400 24px/32px var(--display); color: var(--indigo); }
  nav.main.open li:last-child a { border-bottom: 0; }
  nav.main.open .nav-cta { display: block; }
  nav.main.open .nav-cta a { font: 600 13px/18px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--kumkum); }
}
@media (max-width: 760px) { header.site .bar { min-height: 76px; } .logo { padding: 10px 0; gap: 10px; } .logo .logo-mark { width: 48px; height: 48px; } .logo img { height: 44px; } header.site .bar > .btn { display: none; } }
@media (max-width: 760px) { header.site .bar > .btn-back { display: inline-flex; padding: 10px 14px; } }
/* phones: the logo sits in the centre of the bar, the menu button stays at the right edge */
/* phones: knot mark at the left edge, the name centred in the bar, the menu button at the right edge */
@media (max-width: 760px) {
  header.site .bar { position: relative; justify-content: center; }
  header.site .logo { position: relative; width: 100%; justify-content: center; gap: 0; }
  header.site .logo .logo-mark { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
  header.site .logo img { margin: 0 auto; }
  header.site .menu-btn { position: absolute; right: var(--gutter, 20px); top: 50%; transform: translateY(-50%); }
}
@media (max-width: 420px) { .logo .logo-mark { width: 42px; height: 42px; } .logo img { height: 38px; } }

/* ---------- hero: eyebrow, display line, lead, one knot border, then the film in its frame ---------- */
.hero { padding: var(--space-7) 0 var(--space-6); }
.hero-copy { max-width: 860px; }
.hero-copy .lede { margin: var(--space-4) 0 var(--space-5); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.knot-border { margin: var(--space-6) 0 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.knot-track { display: flex; width: max-content; animation: knots 48s linear infinite; }
.knot-track img { width: 640px; height: 24px; flex: none; display: block; }
.knot-border:hover .knot-track { animation-play-state: paused; }
@keyframes knots { to { transform: translateX(-640px); } }
/* the same border as a quiet divider between sections */
.knot-divider { margin: 0; opacity: .9; }
.knot-divider .knot-track { animation-duration: 64s; }
.hero-film { margin-top: var(--space-6); border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 21 / 9; background: var(--indigo-tint); position: relative; }
.hero-caption { position: absolute; left: 18px; top: 16px; z-index: 2; color: var(--white); background: var(--indigo); padding: 6px 10px; border-radius: var(--radius-sm); }
@media (max-width: 760px) { .hero { padding: var(--space-6) 0 var(--space-5); } .hero-film { aspect-ratio: 4 / 3; margin-top: var(--space-5); } .knot-border { margin-top: var(--space-5); } }

/* hero with the animated mark */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; }
/* the film is landscape (16:9), so it gets the full width on top and is never cropped; the pack and the photo share the row below */
.hero-visual { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.hero-visual .ph { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--indigo-tint); }
.hero-visual .ph img, .hero-visual .ph video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-visual .tall { grid-column: 1 / 3; grid-row: 1; aspect-ratio: 16 / 9; min-height: 0; }
.hero-visual .small { aspect-ratio: 4 / 3; min-height: 0; }
.hero-visual .pack { background: var(--indigo-tint); display: flex; align-items: center; justify-content: center; padding: 14px; aspect-ratio: 4 / 3; min-height: 0; contain: size; }
.hero-visual .pack .slot { max-height: 100%; }
/* a branded pack set in front of real photography */
.ph-pack { position: absolute; left: 0; right: 0; bottom: 6%; display: flex; justify-content: center; pointer-events: none; z-index: 2; }
.ph-pack .slot { animation: breathe 7s ease-in-out infinite; filter: drop-shadow(0 18px 14px rgba(15, 26, 69, .35)); }
.frame-pack .ph-pack { bottom: 10%; }
.drift img { animation: drift 24s ease-in-out infinite alternate; }
.ph:hover img, .frame-img:hover img, .ex-img:hover img { animation-play-state: paused; }
.frame:hover .frame-img, .export-grid li:hover .ex-img, .hero-visual .ph:hover { outline: 1.5px solid var(--indigo); outline-offset: 3px; transition: outline-color .2s; }
.frame-img, .ex-img, .hero-visual .ph { outline: 1.5px solid transparent; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-5); } }
/* export */
.export-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.export-grid figure { margin: 0; }
.ex-img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--indigo-tint); }
.ex-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.export-grid figcaption { margin-top: 14px; }
.export-grid figcaption span { display: block; font: 600 13px/18px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--kumkum); margin-bottom: 6px; }
.export-facts { list-style: none; margin: var(--space-5) 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.export-facts li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 16px; line-height: 24px; color: var(--muted); }
.export-facts b { color: var(--indigo-deep); }
@media (max-width: 860px) { .export-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .export-facts li { grid-template-columns: 1fr; gap: 2px; } }
.hero-copy h1 { margin-bottom: var(--space-4); }
.hero-copy .lede { margin: 0 0 var(--space-5); }

/* ---------- ports strip ---------- */
.ports { overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--white); padding: 16px 0; }
.ports-track { display: flex; align-items: center; gap: 28px; width: max-content; animation: ports 70s linear infinite; }
.ports:hover .ports-track { animation-play-state: paused; }
.ports span { font: 400 18px/1 var(--display); color: var(--indigo); white-space: nowrap; }
.ports i { width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--kumkum); display: block; flex: none; }
@keyframes ports { to { transform: translateX(-50%); } }

/* ---------- promises ---------- */
.promises { padding: 0; border-bottom: 1px solid var(--hairline); border-top: 0; }
.promises ul { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: var(--wrap); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.promises li:nth-child(4) b { color: var(--kumkum); }
.promises li { display: flex; gap: 14px; align-items: center; padding: 28px 24px 28px 0; font-size: 16px; line-height: 24px; color: var(--muted); }
.promises li + li { padding-left: 24px; border-left: 1px solid var(--hairline); }
.pr-ico { width: 30px; height: 30px; flex: none; color: var(--indigo); stroke-width: 1.5; }
.promises b { display: block; color: var(--indigo-deep); font-weight: 600; }
@media (max-width: 960px) { .promises ul { grid-template-columns: 1fr 1fr; } .promises li:nth-child(3), .promises li:nth-child(5) { border-left: 0; padding-left: 0; } .promises li:nth-child(n+3) { border-top: 1px solid var(--hairline); } }
@media (max-width: 560px) { .promises ul { grid-template-columns: 1fr; padding: 0 var(--gutter); } .promises li, .promises li + li { border-left: 0; padding: 16px 0; border-top: 1px solid var(--hairline); } .promises li:first-child { border-top: 0; } }

/* ---------- storyboard ---------- */
.board { padding: var(--space-7) 0; }
.frames { list-style: none; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; max-width: 1480px; }
/* the labelled ingredients still: twice as wide, landscape, no drift so the labels stay put */
.frame figure { display: flex; flex-direction: column; height: 100%; }
.frame-wide { grid-column: span 2; }
.frame-wide .frame-img { aspect-ratio: auto; flex: 1 1 0; min-height: 0; }
.frame-img.frame-still { background: var(--white); border: 1px solid var(--hairline); }
.frame-still.frame-cover img { object-fit: cover; }
.frame-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.frame figure { margin: 0; }
.frame-img { aspect-ratio: 3 / 4; border-radius: var(--radius-md); overflow: hidden; background: var(--indigo-tint); position: relative; }
.frame-img.drift img, .frame-img video { width: 100%; height: 100%; object-fit: cover; }
.frame-img.drift img { animation: drift 24s ease-in-out infinite alternate; }
.frame:nth-child(2) .frame-img img { animation-delay: -6s; } .frame:nth-child(3) .frame-img img { animation-delay: -12s; } .frame:nth-child(5) .frame-img img { animation-delay: -18s; }
.frame-pack { background: var(--white); }
.frame-still.frame-pack .ph-pack { top: 0; bottom: 0; align-items: center; }
.frame-still.frame-pack .ph-pack .slot { filter: drop-shadow(0 16px 14px rgba(15, 26, 69, .22)); }
.frame figcaption { margin-top: 14px; font: 600 20px/28px var(--sans); color: var(--indigo-deep); }
.frame figcaption span { display: block; color: var(--kumkum); margin-bottom: 6px; }
.frame figcaption small { display: none; margin-top: 2px; font: 400 16px/24px var(--sans); color: var(--muted); }
.board-note { margin-top: var(--space-4); font-size: 14px; line-height: 22px; color: var(--muted); }
@media (max-width: 1000px) {
  .frames { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
  .frame { scroll-snap-align: start; }
  .frame-wide { grid-row: 1; grid-column: span 2; }
}
@media (max-width: 560px) {
  .board { padding: var(--space-6) 0; }
  .frames { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; gap: 14px 12px; padding-bottom: 0; }
  .frame-img { aspect-ratio: 1; }
  .frame-wide { grid-row: auto; grid-column: 1 / -1; }
  .frame-wide .frame-img { aspect-ratio: 3 / 2; flex: none; }
  .frame figcaption { margin-top: 8px; font-size: 16px; line-height: 22px; }
  .frame figcaption span { font-size: 12px; margin-bottom: 2px; }
}
@keyframes drift { from { transform: scale(1.04); } to { transform: scale(1.12); } }

/* ---------- range ---------- */
.collection { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1040px) { .collection { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.item .stage { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-md); aspect-ratio: 4 / 5; display: flex; align-items: flex-end; justify-content: center; padding: 22px 12px 38px; overflow: hidden; }
.item h3 { margin: 18px 0 2px; }
.item p { font-size: 16px; line-height: 24px; color: var(--muted); margin: 0 0 6px; }
.item .meta { font-size: 14px; line-height: 22px; color: var(--muted); }
.item.wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 18px; }
.item.wide .stage { aspect-ratio: auto; height: 300px; align-items: center; padding: 20px; }
@media (max-width: 760px) { .item.wide { grid-template-columns: 1fr; gap: 0; } .item.wide .stage { height: 220px; } }
.collection-note { margin-top: var(--space-5); font-size: 14px; line-height: 22px; color: var(--muted); }

/* ---------- 3D packs (product mock-ups; the floor shadow is part of the render, not the page) ---------- */
.slot { position: relative; display: inline-block; perspective: 1500px; }
.box3d { position: relative; transform-style: preserve-3d; transform: rotateX(calc(-4deg + var(--tx, 0deg))) rotateY(calc(-20deg + var(--ty, 0deg))); transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.slot:hover .box3d { transform: rotateX(-3deg) rotateY(-8deg); }
.face { position: absolute; top: 0; left: 0; backface-visibility: hidden; overflow: hidden; }
.face svg { width: 100%; height: 100%; }
.face.side::after { content: ""; position: absolute; inset: 0; background: rgba(15, 26, 69, .18); }
.face.top::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .25); }
.box-shadow { position: absolute; left: 8%; right: -4%; bottom: -8px; height: 10px; background: rgba(15, 26, 69, .12); filter: blur(4px); border-radius: var(--radius-full); }
.lineup .slot, .stage .slot, .sheet-pack .slot { animation: breathe 7s ease-in-out infinite; }
.lineup .slot:nth-child(2), .collection .item:nth-child(2) .slot { animation-delay: -2.3s; }
.lineup .slot:nth-child(3), .collection .item:nth-child(3) .slot { animation-delay: -4.6s; }
.collection .item:nth-child(4) .slot { animation-delay: -1.2s; }
@keyframes breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ---------- your brand ---------- */
.studio-grid { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 72px; align-items: center; }
@media (max-width: 1000px) { .studio-grid { grid-template-columns: 1fr; gap: 48px; } }
.studio-form { margin-top: var(--space-5); }
.studio-form label, .studio-form .lbl { display: block; margin-bottom: 10px; }
.studio-form input[type=text] { width: 100%; font: 400 28px/36px var(--display); letter-spacing: .06em; text-transform: uppercase; padding: 10px 0; border: 0; border-bottom: 1.5px solid var(--border); background: transparent; color: var(--indigo); outline: none; border-radius: 0; }
.studio-form input[type=text]::placeholder { color: var(--border); }
.studio-form input[type=text]:focus { border-bottom-color: var(--indigo); }
.studio-form .row { margin-top: var(--space-4); }
.say { min-height: 22px; margin: 10px 0 0; font-size: 14px; line-height: 22px; color: var(--muted); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--white); font: 500 15px/20px var(--sans); color: var(--indigo-deep); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.choice i { width: 14px; height: 14px; border-radius: var(--radius-full); display: block; box-shadow: inset 0 0 0 1px rgba(15, 26, 69, .25); }
.choice:hover { border-color: var(--indigo); color: var(--indigo); }
.choice[aria-pressed=true], .choice[aria-selected=true] { border-color: var(--indigo); background: var(--indigo); color: var(--on-indigo); }
.choice[aria-pressed=true] i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.custom-list { list-style: none; margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.custom-list li { font-size: 16px; line-height: 24px; padding-left: 18px; position: relative; }
.custom-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--kumkum); }
.lineup { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 22px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 64px 30px 50px; min-height: 520px; }
.concept-tag { position: absolute; top: 16px; left: 18px; background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 6px 10px; }


/* your brand: compact */
section.compact { padding: var(--space-6) 0; }
.compact .studio-grid { gap: 48px; align-items: start; }
.compact .studio-form { margin-top: var(--space-4); }
.compact .studio-form .row { margin-top: 14px; }
.compact .studio-form label, .compact .studio-form .lbl { margin-bottom: 6px; }
.compact .studio-form input[type=text] { font-size: 22px; line-height: 28px; padding: 6px 0; }
.compact .say { min-height: 0; margin-top: 6px; }
.compact .say:empty { display: none; }
.compact .choice { min-height: 36px; padding: 6px 12px; font-size: 14px; line-height: 20px; gap: 6px; }
.compact .choice i { width: 11px; height: 11px; }
.compact .choices { gap: 6px; }
.compact .lineup { min-height: 0; padding: 48px 16px 24px; gap: 14px; }
.compact .concept-tag { top: 10px; left: 12px; padding: 4px 8px; }
.compact h2 { font-size: 32px; line-height: 40px; }
@media (max-width: 1000px) { .compact .studio-grid { gap: 28px; } }

/* ---------- story / photo + text ---------- */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; align-items: center; }
.story.flip .story-photo { order: 2; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; gap: 40px; } .story.flip .story-photo { order: 0; } }
.story-photo { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 5; background: var(--indigo-tint); }
.story-photo.land { aspect-ratio: 5 / 4; }
.facts { list-style: none; margin: var(--space-4) 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.facts li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 16px; line-height: 24px; }
.facts li b { font-weight: 600; color: var(--indigo-deep); }
.facts li span { color: var(--muted); }
@media (max-width: 480px) { .facts li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- fragrances ---------- */
.frag-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: var(--space-4); }
.frag-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 56px; }
@media (max-width: 960px) { .frag-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .frag-list { grid-template-columns: 1fr; } }
.frag-list li { padding: 0; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; }
.frag-list li[hidden] { display: none; }
.frag-open { all: unset; box-sizing: border-box; display: block; cursor: pointer; padding: 20px 0 8px; border-radius: var(--radius-sm); }
.frag-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.frag-row { display: flex; align-items: center; gap: 14px; }
.f-ico { --c: #b39a6c; width: 46px; height: 46px; border-radius: var(--radius-full); flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, #fff); color: var(--indigo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, #fff); transition: transform .4s cubic-bezier(.16, 1, .3, 1), background-color .3s; }
.f-ico svg { width: 30px; height: 30px; stroke-width: 1.6; }
.f-ico.big { width: 72px; height: 72px; }
.f-ico.big svg { width: 46px; height: 46px; }
.frag-open:hover .f-ico { transform: rotate(-8deg) scale(1.06); background: color-mix(in srgb, var(--c) 30%, #fff); }
.frag-name { font: 400 24px/32px var(--display); color: var(--indigo); }
.frag-more { margin-left: auto; font: 600 13px/18px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--indigo); opacity: 0; transform: translateX(-4px); transition: opacity .3s, transform .3s; }
.frag-open:hover .frag-more, .frag-open:focus-visible .frag-more { opacity: 1; transform: none; }
.frag-open:hover .frag-name { color: var(--indigo-deep); text-decoration: underline; text-underline-offset: 5px; }
.frag-open .fam { display: flex; align-items: center; gap: 6px; margin: 6px 0 4px 60px; font-size: 14px; line-height: 22px; color: var(--muted); }
.frag-note { display: block; margin-left: 60px; font-size: 14px; line-height: 22px; color: var(--muted); }
.dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.dots i { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--hairline); display: block; }
.dots i.on { background: var(--kumkum); }
.kit-toggle:not(.btn) { align-self: flex-start; margin: 4px 0 20px 60px; min-height: 36px; font: 600 13px/18px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--indigo); background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 7px 12px; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.kit-toggle:not(.btn):hover { border-color: var(--indigo); }
.kit-toggle:not(.btn)[aria-pressed=true] { background: var(--indigo); border-color: var(--indigo); color: var(--on-indigo); }
.kit-toggle[aria-pressed=true]::before { content: ""; display: inline-block; width: 8px; height: 4px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg) translateY(-2px); margin-right: 8px; }


/* fragrances: compact grid, icon button to add */
#fragrances { padding: var(--space-6) 0; }
#fragrances .head { margin-bottom: var(--space-4); }
#fragrances .frag-toolbar .choice { min-height: 36px; padding: 6px 12px; font-size: 14px; line-height: 20px; }
.frag-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.frag-list li { flex-direction: row; align-items: center; gap: 8px; padding: 4px 0; }
.frag-open { flex: 1; min-width: 0; padding: 8px 0; }
.frag-row { gap: 12px; }
.frag-text { display: flex; flex-direction: column; min-width: 0; }
.f-ico { width: 40px; height: 40px; }
.f-ico svg { width: 26px; height: 26px; }
.frag-name { font-size: 20px; line-height: 26px; }
.frag-open .fam { margin: 0; font-size: 13px; line-height: 18px; }
.kit-toggle:not(.btn) { margin: 0; width: 36px; height: 36px; min-height: 0; padding: 0; display: grid; place-items: center; flex: none; align-self: center; }
.kit-toggle:not(.btn)[aria-pressed=true]::before { content: none; }
.kit-toggle:not(.btn)[aria-pressed=true] .plus, .kit-toggle:not(.btn):not([aria-pressed=true]) .check { display: none; }
@media (max-width: 1100px) { .frag-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .frag-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
  /* phones: two columns of compact rows, so twelve fragrances fit in one screen */
  .frag-list { grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .frag-list li { gap: 4px; padding: 2px 0; }
  .frag-open { padding: 6px 0; }
  .frag-row { gap: 8px; }
  .f-ico { width: 30px; height: 30px; }
  .f-ico svg { width: 20px; height: 20px; }
  .frag-name { font-size: 16px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .frag-open .fam { font-size: 11.5px; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .frag-more { display: none; }
  .kit-toggle:not(.btn) { width: 28px; height: 28px; }
}

/* ---------- compare table (masala vs charcoal) ---------- */
.compare { width: 100%; border-collapse: collapse; margin-top: var(--space-4); font-size: 16px; line-height: 24px; }
.compare th, .compare td { text-align: left; padding: 14px 14px 14px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.compare thead th { background: var(--indigo-tint); padding: 10px 12px; border-bottom: 0; }
.compare thead th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.compare thead th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.compare tbody th { font-weight: 500; color: var(--muted); width: 30%; }
.compare td:nth-child(2) { color: var(--indigo-deep); font-weight: 600; }
.compare td:nth-child(3) { color: var(--muted); }

/* ---------- markets ---------- */
.split-head { max-width: none; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.split-head h2, .split-head .lede { margin: 0; }
@media (max-width: 860px) { .split-head { grid-template-columns: 1fr; gap: 16px; } }


/* markets: compact selectable cards with flags and transit */
#markets { padding: var(--space-6) 0; }
#markets .head { margin-bottom: var(--space-4); }
.mkt-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mkt { display: block; width: 100%; text-align: left; position: relative; border: 1.5px solid var(--hairline); border-radius: var(--radius-md); background: var(--white); padding: 12px 14px 10px; overflow: hidden; cursor: pointer; font: inherit; color: inherit; transition: border-color .25s, box-shadow .25s; }
.mkt::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--indigo); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.mkt:hover { border-color: var(--indigo); }
.mkt:hover::before, .mkt[aria-pressed=true]::before { transform: scaleX(1); }
.mkt[aria-pressed=true] { border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); }
.mkt:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.mkt b { display: block; font: 600 15px/20px var(--sans); color: var(--indigo); margin-bottom: 2px; padding-right: 20px; }
.mkt b::after { content: ""; position: absolute; right: 12px; top: 12px; width: 14px; height: 14px; border-radius: var(--radius-full); border: 1.5px solid var(--border); transition: background-color .2s, border-color .2s; }
.mkt[aria-pressed=true] b::after { background: var(--indigo); border-color: var(--indigo); box-shadow: inset 0 0 0 3px var(--white); }
.flags { display: flex; gap: 4px; margin-bottom: 8px; }
.flags img { width: 21px; height: 15px; object-fit: cover; border-radius: 2px; outline: 1px solid var(--hairline); outline-offset: -1px; display: block; }
.mkt-transit { display: block; font-size: 13px; line-height: 18px; color: var(--muted); }
.pl-docs { font-size: 15px; line-height: 24px; color: var(--muted); margin: 4px 0 var(--space-3, 18px); }
@media (max-width: 1100px) { .mkt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mkt-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .mkt { padding: 10px 12px 8px; } .mkt b { font-size: 14px; } }

/* ---------- order planner ---------- */
.planner { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 960px) { .planner { grid-template-columns: 1fr; gap: 32px; } }
.planner > *, .faq-split > *, .split-head > * { min-width: 0; }
.planner-controls .lbl { display: block; margin: 0 0 10px; }
.planner-controls .choices + .lbl { margin-top: var(--space-4); }
.planner-fine { font-size: 14px; line-height: 22px; color: var(--muted); margin-top: var(--space-4); }
.planner-out { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 36px; }
@media (max-width: 560px) { .planner-out { padding: 24px; } }
.pl-arrive b { display: block; font: 400 32px/40px var(--display); color: var(--indigo); font-variant-numeric: lining-nums; }
.pl-sub { display: block; font-size: 14px; line-height: 22px; color: var(--muted); margin-top: 6px; }
.pl-bar { display: flex; gap: 3px; margin: var(--space-4) 0 8px; height: 48px; overflow: hidden; }
.pl-bar span { background: var(--indigo-tint); border-radius: var(--radius-sm); display: flex; flex-direction: column; justify-content: center; padding: 0 10px; min-width: 0; overflow: hidden; transform-origin: 0 50%; }
.pl-bar span.sea { background: var(--kumkum-tint); }
.pl-bar em { font-style: normal; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--indigo-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-bar small { font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; }
.pl-anim .pl-bar span { animation: grow .8s cubic-bezier(.16, 1, .3, 1) both; }
.pl-anim .pl-bar span:nth-child(2) { animation-delay: .08s; } .pl-anim .pl-bar span:nth-child(3) { animation-delay: .16s; } .pl-anim .pl-bar span:nth-child(4) { animation-delay: .24s; } .pl-anim .pl-bar span:nth-child(5) { animation-delay: .32s; }
@keyframes grow { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
.pl-seasons { margin-top: var(--space-4); }
.pl-seasons ul { list-style: none; margin: 0; padding: 0; }
.pl-seasons li { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--hairline); font-size: 16px; line-height: 24px; }
.pl-seasons li b { font-weight: 600; color: var(--indigo); }
.pl-seasons li.tight b { color: var(--kumkum); }
.pl-seasons li.late { color: var(--muted); } .pl-seasons li.late b { color: var(--muted); font-weight: 400; }
.pl-anim .pl-arrive, .pl-anim .pl-seasons li { animation: rise .7s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.planner-out .btn { margin-top: var(--space-4); }
@media (max-width: 560px) { .pl-bar em { display: none; } }


/* planner: compact, controls on one row, two-column result card */
.planner { grid-template-columns: 1fr; gap: 18px; }
.planner-controls { display: flex; flex-direction: column; gap: 22px; }
.pl-group-markets { width: 100%; }
.pl-group .lbl { margin: 0 0 8px; }
.planner-controls .choices + .lbl { margin-top: 0; }
.planner-controls .choice { min-height: 36px; padding: 6px 12px; font-size: 14px; line-height: 20px; }
.planner-fine { margin-top: 10px; }
.planner-out { padding: 24px 28px; }
.pl-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px 40px; align-items: start; }
.pl-arrive b { font-size: 30px; line-height: 38px; }
.pl-arrive .mini { margin-bottom: 4px; }
.pl-bar { position: relative; height: 38px; margin: 18px 0 0; overflow: visible; gap: 3px; }
.pl-bar span { align-items: center; justify-content: center; padding: 0 4px; background: var(--indigo-tint); }
.pl-bar em { display: none; font-size: 12px; line-height: 14px; font-weight: 600; color: var(--indigo-deep); }
.pl-bar span[style*="flex:35"] em, .pl-bar span[style*="flex:45"] em, .pl-bar span[style*="flex:50"] em, .pl-bar span[style*="flex:21"] em { display: block; }
.pl-bar span[style*="flex:35"] small, .pl-bar span[style*="flex:45"] small, .pl-bar span[style*="flex:50"] small, .pl-bar span[style*="flex:21"] small { font-weight: 400; color: var(--muted); }
@media (max-width: 560px) { .pl-bar em { display: none !important; } .pl-bar span small, .pl-bar span[style] small { font-weight: 600; color: var(--indigo-deep); } }
.pl-bar span:nth-child(even) { background: #e2e7f5; }
.pl-bar span.sea { background: var(--kumkum-tint); }
.pl-bar small { font: 600 12px/16px var(--sans); color: var(--indigo-deep); }
.pl-ship { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: var(--radius-full); background: var(--indigo); border: 2px solid var(--white); box-sizing: border-box; opacity: 0; }
.pl-anim .pl-ship { animation: sail 1.9s cubic-bezier(.4, 0, .2, 1) .25s both; }
@keyframes sail { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.pl-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; line-height: 20px; color: var(--muted); }
.pl-legend li { display: inline-flex; align-items: center; gap: 6px; }
.pl-legend li i { width: 10px; height: 10px; border-radius: 2px; background: var(--indigo-tint); border: 1px solid var(--hairline); }
.pl-legend li.sea i { background: var(--kumkum-tint); }
.pl-legend li b { color: var(--indigo-deep); font-weight: 600; }
.pl-right .mini { margin-bottom: 4px; }
.pl-right .pl-seasons { margin: 0; padding: 0; list-style: none; }
.pl-right .pl-seasons li { padding: 9px 0; font-size: 14px; line-height: 20px; gap: 10px; flex-wrap: nowrap; }
.pl-right .pl-seasons li b { white-space: nowrap; }
.pl-right .pl-seasons li:last-child { border-bottom: 1px solid var(--hairline); }
.pl-right .btn { margin-top: 16px; width: 100%; }
.pl-anim .pl-legend li { animation: rise .6s cubic-bezier(.16, 1, .3, 1) both; animation-delay: .35s; }
@media (max-width: 860px) { .pl-grid { grid-template-columns: 1fr; gap: 18px; } .planner-out { padding: 20px 16px; } .pl-arrive b { font-size: 26px; line-height: 32px; } .pl-right .pl-seasons li { font-size: 13px; } }

/* ---------- how it works ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px; counter-reset: st; }
.steps li { counter-increment: st; border-top: 1.5px solid var(--indigo); padding-top: 20px; }
.step-ico { width: 44px; height: 44px; color: var(--indigo); margin-bottom: 14px; display: block; stroke-width: 1.5; }
.steps .when { display: block; }
.steps .when::before { content: counter(st, decimal-leading-zero) "  "; color: var(--kumkum); }
.steps h3 { margin: 6px 0 4px; }
.steps p { font-size: 16px; line-height: 24px; color: var(--muted); margin: 0; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; } }
@media (max-width: 560px) {
  /* phones: six steps in two lines of three; icon dropped, label and title only */
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  .steps li { border-top-width: 1px; padding-top: 8px; min-width: 0; }
  .step-ico { display: none; }
  .steps .when { font-size: 11px; line-height: 16px; letter-spacing: .08em; }
  .steps h3 { font-size: 15px; line-height: 19px; margin: 2px 0 0; }
  .steps p { display: none; }
}

/* ---------- quality and terms ---------- */
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: 980px; }
@media (max-width: 760px) { .cols-2 { grid-template-columns: 1fr; gap: 40px; } }
.cols-2 h3 { margin-bottom: 12px; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 12px 0; border-top: 1px solid var(--hairline); font-size: 16px; line-height: 24px; color: var(--indigo-deep); display: flex; justify-content: space-between; gap: 16px; }
.plain li:last-child { border-bottom: 1px solid var(--hairline); }
.plain li span:last-child:not(:first-child) { color: var(--muted); text-align: right; }
.fine { margin-top: var(--space-3); }

/* ---------- FAQ ---------- */
.faq-split { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 72px; align-items: start; }
.faq-aside { position: sticky; top: 116px; }
.faq-aside .lede { margin: 12px 0 20px; }
.faq { margin: 0; max-width: none; }
.faq details { border-top: 1px solid var(--hairline); }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font: 400 24px/32px var(--display); color: var(--indigo); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 1.5px; background: var(--indigo); transition: transform .3s; }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { color: var(--indigo-deep); padding-bottom: 22px; margin: 0; }
@media (max-width: 900px) { .faq-split { grid-template-columns: 1fr; gap: 28px; } .faq-aside { position: static; } }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 80px; align-items: start; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } }
.contact-photo { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3; margin: var(--space-4) 0; }
.direct { list-style: none; margin: 0; padding: 0; }
.direct li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--hairline); font-size: 16px; line-height: 24px; }
.direct li:last-child { border-bottom: 1px solid var(--hairline); }
.direct li > span:first-child { color: var(--muted); }
.clock { display: block; font-style: normal; color: var(--muted); margin-top: 4px; font-size: 14px; line-height: 22px; }
form.enquiry { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 40px; display: grid; gap: 20px; }
form.enquiry h3 { font: 400 28px/36px var(--display); color: var(--indigo); }
@media (max-width: 560px) { form.enquiry { padding: 24px; } }
.f-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 560px) { .f-row { grid-template-columns: 1fr; } }
.field label, .field legend { display: block; margin-bottom: 8px; padding: 0; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; font: 400 17px/24px var(--sans); color: var(--indigo-deep); background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; outline: none; transition: border-color .2s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--indigo); outline: 2px solid var(--focus); outline-offset: 2px; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font: 500 15px/20px var(--sans); color: var(--indigo-deep); margin: 0; cursor: pointer; white-space: nowrap; }
.checks label:has(input:checked) { border-color: var(--indigo); background: var(--indigo-tint); }
.checks input { width: 16px; height: 16px; margin: 0; accent-color: var(--indigo); }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.form-foot small { font-size: 14px; line-height: 22px; color: var(--muted); }
.sent { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 40px; outline: none; }
.sent h3 { font: 400 28px/36px var(--display); color: var(--indigo); margin-bottom: 12px; }
.sent p { margin: 0; }

/* ---------- sample kit ---------- */
.lbl-like { display: block; margin-bottom: 8px; }
.kit-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; align-items: center; padding: 8px 12px; border: 1.5px dashed var(--border); border-radius: var(--radius-sm); background: var(--white); }
.kit-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 4px 4px 4px 12px; font-size: 15px; line-height: 20px; }
.kit-chip i { width: 9px; height: 9px; border-radius: var(--radius-full); }
.kit-chip button { width: 24px; height: 24px; border-radius: var(--radius-sm); border: 0; background: var(--indigo-tint); cursor: pointer; display: grid; place-items: center; color: var(--indigo); }
.kit-chip button:hover { background: var(--indigo); color: var(--on-indigo); }
.kit-empty { font-size: 14px; line-height: 22px; color: var(--muted); }
.kit-bar { position: fixed; left: 20px; bottom: 20px; z-index: 55; display: flex; align-items: center; gap: 18px; background: var(--white); border: 1.5px solid var(--indigo); border-radius: var(--radius-md); padding: 10px 10px 10px 20px; max-width: min(560px, calc(100vw - 110px)); }
.kit-bar[hidden] { display: none; }
.kit-bar b { display: block; font-size: 15px; line-height: 20px; color: var(--indigo-deep); }
.kit-bar .kit-names { display: block; font-size: 14px; line-height: 20px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.kit-bar .btn { padding: 11px 16px; flex: none; min-height: 44px; }
@media (max-width: 560px) { .kit-bar { left: 12px; right: 84px; bottom: 16px; padding: 8px; gap: 10px; } .kit-bar .kit-names { display: none; } .kit-bar b { font-size: 14px; } .kit-bar .btn { padding: 9px 12px; } }
.toast { position: fixed; left: 50%; top: 104px; transform: translate(-50%, -10px); background: var(--indigo); color: var(--on-indigo); padding: 12px 20px; border-radius: var(--radius-sm); font-size: 15px; line-height: 20px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s; z-index: 70; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- fragrance sheet ---------- */
dialog.frag-sheet { padding: 0; border: 0; border-left: 1px solid var(--hairline); margin: 0 0 0 auto; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; width: min(900px, 100vw); max-width: 100vw; background: var(--white); color: var(--indigo-deep); }
dialog.frag-sheet::backdrop { background: rgba(15, 26, 69, .4); }
dialog.frag-sheet[open] { animation: sheet-in .4s cubic-bezier(.16, 1, .3, 1); }
@keyframes sheet-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-close { position: absolute; top: 18px; right: 18px; z-index: 2; width: 48px; height: 48px; border-radius: var(--radius-sm); border: 1.5px solid var(--indigo); background: var(--white); display: grid; place-items: center; cursor: pointer; color: var(--indigo); }
.sheet-close:hover { background: var(--indigo-tint); }
.sheet-body { height: 100%; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.sheet-pack { background: var(--white); border-right: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; padding: 60px 20px; position: sticky; top: 0; height: 100vh; height: 100dvh; }
.sheet-info { padding: 64px 52px 56px 48px; }
.sheet-title { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; }
.sheet-title h2 { font-size: 40px; line-height: 48px; margin: 0; }
.sheet-title .mini { margin-bottom: 4px; }
.also { font-size: 14px; line-height: 22px; color: var(--muted); }
.also span[lang=ar] { font-family: Amiri, "Noto Naskh Arabic", serif; font-size: 1.15em; }
.pyramid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-4) 0; border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.pyramid div { padding: 16px 18px; font: 400 18px/26px var(--display); color: var(--indigo); }
.pyramid div + div { border-left: 1px solid var(--hairline); }
.sheet-facts { margin: 0 0 var(--space-4); }
.sheet-facts div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--hairline); font-size: 16px; line-height: 24px; }
.sheet-facts dt { color: var(--muted); }
.sheet-facts dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pair { font: 500 15px/20px var(--sans); min-height: 36px; padding: 6px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--white); cursor: pointer; color: var(--indigo-deep); }
.pair:hover { border-color: var(--indigo); color: var(--indigo); }
.sheet-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.sheet-info .hint { font-size: 14px; line-height: 22px; color: var(--muted); margin-top: 18px; }
@media (max-width: 760px) {
  .sheet-body { grid-template-columns: 1fr; }
  .sheet-pack { position: static; height: auto; padding: 72px 20px 36px; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .sheet-info { padding: 34px 22px 48px; }
  .sheet-title h2 { font-size: 32px; line-height: 40px; }
  .pyramid { grid-template-columns: 1fr; }
  .pyramid div + div { border-left: 0; border-top: 1px solid var(--hairline); }
  .sheet-facts div { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- film and motion ---------- */
.media { position: relative; overflow: hidden; background: var(--indigo-tint); }
.media video { width: 100%; height: 100%; object-fit: cover; display: block; transform: translateY(var(--py, 0px)) scale(1.08); will-change: transform; }
.media-toggle { position: absolute; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: var(--radius-sm); border: 0; background: var(--white); display: grid; place-items: center; cursor: pointer; opacity: .85; transition: opacity .25s; }
.media:hover .media-toggle, .media-toggle:focus-visible { opacity: 1; }
.i-pause { width: 12px; height: 13px; border-left: 3.5px solid var(--indigo); border-right: 3.5px solid var(--indigo); box-sizing: border-box; display: block; }
.media-toggle.paused .i-pause { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--indigo); margin-left: 3px; }
.rv { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }
.rv.in { opacity: 1; transform: none; }

/* ---------- footer: white, one hairline above ---------- */
/* footer: the one solid-indigo surface on the page; reversed logo, soft white text */
footer.site { background: var(--indigo); color: #fff; padding: var(--space-6) 0 var(--space-4); font-size: 16px; line-height: 24px; }
footer .cols { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
@media (max-width: 860px) { footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { footer .cols { grid-template-columns: 1fr; } }
footer .logo { padding: 0; }
footer .logo img { height: 60px; }
@media (max-width: 560px) { footer .logo img { height: 52px; } }
/* footer option B: one large gold knot as a watermark at the right; gold headings and hairlines (decoration only, text stays white) */
footer.site { position: relative; overflow: hidden; }
footer.site::after { content: ""; position: absolute; right: -150px; top: -70px; width: 420px; height: 420px; background: url(brand/unity-export-mark-gold.svg) no-repeat center / contain; opacity: .07; pointer-events: none; }
@media (max-width: 860px) { footer.site::after { width: 300px; height: 300px; right: -110px; top: auto; bottom: 40px; opacity: .06; } }
footer .wrap { position: relative; }
footer p { color: rgba(255, 255, 255, .72); margin-top: 18px; max-width: 36ch; }
footer h4 { margin: 6px 0 16px; color: #c9a45c; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin: 8px 0; color: rgba(255, 255, 255, .82); }
footer a { text-decoration: none; color: #fff; }
footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.legal { margin-top: var(--space-6); padding-top: 20px; padding-right: 84px; border-top: 1px solid rgba(201, 164, 92, .45); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; line-height: 22px; color: rgba(255, 255, 255, .66); }
.legal a { color: #fff; }
footer .logo:focus-visible, footer a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 760px) { .legal { padding-right: 0; } }
.credits { margin: 14px 0 0; font-size: 14px; line-height: 22px; color: var(--muted); max-width: none; }
.credits a { color: var(--indigo); }

.wa-float { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--indigo); box-shadow: 0 0 0 2px #fff, 0 12px 28px -10px rgba(0,0,0,.45); display: grid; place-items: center; z-index: 60; }
.wa-float:hover { background: var(--indigo-deep); }

/* ---------- legal pages ---------- */
.doc { max-width: 760px; padding-top: var(--space-6); padding-bottom: var(--space-7); }
.doc h1 { font-size: 40px; line-height: 48px; margin-bottom: 8px; }
.doc h2 { font-size: 28px; line-height: 36px; margin: var(--space-5) 0 12px; }
.doc .updated { color: var(--muted); font-size: 14px; line-height: 22px; margin-bottom: var(--space-4); }
.doc ul { padding-left: 20px; }
.doc li { margin: 6px 0; }

/* ---------- small screens ---------- */
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  section { padding: var(--space-6) 0; }
  .head { margin-bottom: var(--space-4); }
  .lineup { padding: 56px 12px 36px; min-height: 0; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .box3d { transition: none; }
  dialog.frag-sheet[open] { animation: none; }
  .knot-track, .ports-track, .ph-pack .slot, .drift img, .lineup .slot, .stage .slot, .sheet-pack .slot, .pl-anim .pl-bar span, .pl-anim .pl-arrive, .pl-anim .pl-seasons li, .frame-img.drift img { animation: none; }
  .media video { transform: none; }
  .ports-track { flex-wrap: wrap; width: auto; justify-content: center; }
  .rv { opacity: 1; transform: none; transition: none; }
}

/* enquiry widget: keep paired fields level when one label wraps */
#ue-enquiry .ue-row { align-items: start; }
#ue-enquiry .ue-row > div { display: flex; flex-direction: column; min-width: 0; }
#ue-enquiry .ue-row > div > label { flex: none; min-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ue-enquiry .ue-row > div > .ue-msg { flex: none; }

/* enquiry widget: folded option groups, less text, phone-friendly */
#ue-enquiry .ue-fold { border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--white); }
#ue-enquiry .ue-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 40px 12px 14px; position: relative; min-height: 48px; }
#ue-enquiry .ue-fold > summary::-webkit-details-marker { display: none; }
#ue-enquiry .ue-fold > summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--indigo); border-bottom: 1.5px solid var(--indigo); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
#ue-enquiry .ue-fold[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
#ue-enquiry .ue-fold > summary .ue-lbl { margin: 0; font-size: 15px; font-weight: 500; color: var(--indigo-deep); }
#ue-enquiry .ue-fold > summary em { font-style: normal; font-size: 14px; color: var(--muted); white-space: nowrap; }
#ue-enquiry .ue-fold > .ue-checks, #ue-enquiry .ue-fold > .ue-other, #ue-enquiry .ue-fold > ol { margin: 0 14px 14px; }
#ue-enquiry .ue-fold > .ue-other { margin-top: 10px; }
#ue-enquiry .ue-fold.ue-next { padding: 0; background: var(--white); }
#ue-enquiry .ue-fold.ue-next > ol { padding-left: 18px; font-size: 14px; line-height: 22px; color: var(--muted); }
#ue-enquiry .ue-fold.ue-next > ol li { margin: 4px 0; }
#ue-enquiry form { gap: 14px; }
#ue-enquiry fieldset { gap: 14px; }
#ue-enquiry .ue-get { padding: 12px 14px; }
#ue-enquiry .ue-get > b { font-size: 14px; margin-bottom: 8px; }
#ue-enquiry .ue-get strong { font-size: 14px; }
#ue-enquiry .ue-get span { font-size: 12px; }
#ue-enquiry .ue-get svg { width: 20px; height: 20px; }
@media (max-width: 560px) {
  #ue-enquiry { padding: var(--space-6) 0; }
  #ue-enquiry .ue-wrap { padding: 0 var(--gutter); gap: 24px; }
  #ue-enquiry form { padding: 16px; }
  #ue-enquiry form .ue-get ul { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  #ue-enquiry form .ue-get li { flex-direction: column; gap: 4px; }
  #ue-enquiry form .ue-get span { display: none; }
  #ue-enquiry form .ue-get strong { font-size: 13px; line-height: 18px; }
  #ue-enquiry .ue-lede { margin-bottom: 14px; }
  #ue-enquiry h2 { font-size: 30px; line-height: 36px; }
  #ue-enquiry .ue-nav { display: flex; gap: 10px; }
  #ue-enquiry .ue-nav .ue-btn { flex: 1; justify-content: center; }
}

/* hero buttons side by side on phones */
@media (max-width: 560px) {
  .hero .actions { flex-wrap: nowrap; gap: 10px; }
  .hero .actions .btn { flex: 1 1 0; min-width: 0; padding: 14px 8px; font-size: 12px; letter-spacing: .1em; }
}

/* ---------- mobile: fixed quote bar ---------- */
.quote-bar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .quote-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--white); border-top: 1px solid var(--hairline); transition: transform .3s; }
  .quote-bar-text { font-size: 13px; line-height: 18px; color: var(--muted); min-width: 0; }
  .quote-bar .btn { flex: none; }
  .quote-bar.ue-hide { transform: translateY(110%); }
  .ue-float { display: none; }
  .wa-float { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; }
}









/* ---------- incense around the world ---------- */
#world { padding: var(--space-5, 56px) 0; }
#world .head { text-align: center; max-width: 680px; margin: 0 auto 8px; }
#world .head .lead { margin: 0 auto; }
.wmap { position: relative; width: 100%; max-width: 900px; margin: 44px auto 0; aspect-ratio: 1000 / 400; }
.wbase, .wroutes { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wlines path { fill: none; stroke: #c9a45c; stroke-width: 1.1; stroke-dasharray: 3 3; opacity: .9; animation: wflow 12s linear infinite; }
@keyframes wflow { to { stroke-dashoffset: -60; } }
.wdot { fill: var(--kumkum); stroke: #fff; stroke-width: 1.2; }
.wpin { position: absolute; width: 0; height: 0; }
.wpin .wph { position: absolute; width: 84px; height: 84px; border-radius: var(--radius-full); overflow: hidden; background: var(--indigo-tint); box-shadow: 0 0 0 3px #fff, 0 10px 24px -10px rgba(15, 26, 69, .45); transition: transform .3s; }
.wpin:hover .wph { transform: scale(1.04); }
.wph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpin .wlab { position: absolute; width: 176px; padding: 7px 9px 8px; border-radius: 8px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); box-shadow: 0 0 0 1px rgba(28, 45, 127, .06); font-size: 12.5px; line-height: 17px; color: var(--indigo-deep); }
.wpin .wlab b, .wcards b, .whub b { display: block; font: 600 12px/16px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--indigo); margin-bottom: 2px; }
.whub { display: flex; gap: 16px; align-items: center; max-width: 680px; margin: 56px auto 0; font-size: 14px; line-height: 21px; color: var(--muted); }
.whub img { width: 72px; height: 72px; border-radius: var(--radius-full); object-fit: cover; flex: none; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--hairline); }
.wcards { display: none; list-style: none; margin: 28px 0 0; padding: 0; }
.wfoot { text-align: center; margin: 22px auto 0; max-width: 60ch; color: var(--muted); font-size: 14px; line-height: 21px; }
@media (max-width: 1000px) {
  .wmap { margin-top: 0; }
  .wpin, .whub { display: none; }
  .wcards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
  .wcards li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--hairline); }
  .wcards .wph { width: 64px; height: 64px; border-radius: var(--radius-full); overflow: hidden; }
  .wcards b i { font-style: normal; letter-spacing: 0; text-transform: none; color: var(--kumkum); font-weight: 500; }
  .wcards p { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }
}
@media (max-width: 600px) { .wcards { grid-template-columns: 1fr; gap: 0; } }
@media (prefers-reduced-motion: reduce) { .wlines path { animation: none; } }
.frag-list .tier { font-style: normal; color: var(--kumkum); margin-left: 6px; white-space: nowrap; }
/* language strip above the header */
.lang-strip { background: var(--indigo); color: #fff; font-size: 13px; line-height: 20px; }
.lang-strip .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 36px; flex-wrap: wrap; }
.lang-strip a { color: #fff; text-decoration: none; padding: 2px 4px; border-radius: 4px; }
.lang-strip a:hover { text-decoration: underline; text-underline-offset: 3px; color: #fff; }
.lang-strip a.on { background: rgba(255, 255, 255, .18); }
.lang-strip .ls-l { color: rgba(255, 255, 255, .78); }
.lang-strip .ls-r { white-space: nowrap; } .lang-strip .ls-r a { font-weight: 600; }
.lang-strip .ls-note { display: inline-block; margin-left: 10px; color: #fff; }
@media (max-width: 700px) { .lang-strip { font-size: 12px; line-height: 18px; } .lang-strip .wrap { justify-content: center; text-align: center; padding-top: 5px; padding-bottom: 5px; gap: 4px 14px; min-height: 0; } .lang-strip .ls-l { display: block; width: 100%; } .lang-strip .ls-note { display: block; margin: 2px 0 0; } }