/* An original immersive mehndi world, inspired by the reference's scene-led flow. */
body.cone-world { --ink: #392237; --maroon: #9e2559; --ink-soft: #74556a; background: #fff8f1; }
body.cone-world .site-header { position: fixed; height: 88px; min-height: 88px; background: #fff9f0c9; border-bottom: 1px solid #fff8; padding-inline: max(32px, calc((100vw - 1320px)/2)); backdrop-filter: blur(20px); }
body.cone-world .site-header.is-scrolled { background: #fff9f1f0; box-shadow: 0 5px 30px #6a1d4710; }
body.cone-world .brand__mark { border-radius: 50% 50% 12px 12px; background: linear-gradient(140deg,#ffcc78,#e84388); border: 0; color: #fff; box-shadow: 0 4px 15px #ed719044; }
body.cone-world .brand__text { color: #752147; }
body.cone-world .brand__text small { font-size: .625rem; letter-spacing: .19em; }
body.cone-world .site-nav { gap: 12px; }
body.cone-world .site-nav > a { font-size: .8125rem; padding: 11px 14px; color: #68394f; }
body.cone-world .site-nav .nav-cta { color: #fff; border: 1px solid #a2245c; background: #a2245c; border-radius: 50px; padding: 13px 21px; }
body.cone-world .site-nav .nav-cta:hover { background: #c22a71; }
.cone-journey { height: 165svh; position: relative; background: #efbcb5; }
.cone-journey > .cone-hero { position: sticky; top: 0; height: 100svh; min-height: 680px; isolation: isolate; overflow: hidden; color: #fff; }
.cone-world__backdrop { position: absolute; z-index: -3; inset: -3%; background: url('/assets/images/mehndi-satin-world.png') center 58% / cover no-repeat; transform: scale(var(--world-scale, 1)) translate3d(var(--world-x, 0px), var(--world-y, 0px), 0); }
.cone-world__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg,#53214f4d,transparent 61%), linear-gradient(0deg,#501e5066,transparent 65%); }
.cone-world__grain { position: absolute; inset: 0; pointer-events: none; z-index: 2; box-shadow: inset 0 -1px #f7d4b0; }
.cone-stage { position: absolute; inset: 0; z-index: 1; }
.cone-stage canvas { position: absolute; display: block; inset: 0; width: 100%; height: 100%; max-width: none; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity .6s; }
.cone-stage.is-ready canvas { opacity: 1; }
.cone-stage canvas:active { cursor: grabbing; }
.cone-stage canvas:focus-visible { outline: 2px solid #ffe1a3; outline-offset: -7px; }
.cone-fallback { position: absolute; width: 41%; height: 78%; top: 10%; right: 11%; margin: 0; object-fit: contain; border-radius: 35%; mix-blend-mode: multiply; transform: rotate(18deg); transition: opacity .5s; }
.cone-stage.is-ready .cone-fallback { opacity: 0; pointer-events: none; }
.cone-scene-heading { position: absolute; z-index: 3; top: 128px; left: max(5.5vw,calc((100vw - 1240px)/2)); margin: 0; color: #76384a; font-size: .6875rem; letter-spacing: .21em; text-transform: uppercase; font-weight: 600; }
.cone-scene-heading span { display: inline-block; width: 28px; height: 1px; vertical-align: middle; margin-right: 12px; background: #a94160; }
.cone-copy { position: absolute; z-index: 4; left: max(5.5vw,calc((100vw - 1240px)/2)); bottom: max(100px,14vh); width: min(46%,560px); opacity: var(--intro-opacity,1); transform: translateY(var(--intro-y,0px)); }
body.cone-world .cone-copy h1 { font-family: var(--serif); font-size: clamp(4.2rem,6.9vw,7rem); letter-spacing: -.048em; line-height: .94; font-weight: 400; color: #fffaf1; margin: 0 0 22px; text-shadow: 0 2px 24px #58213d33; }
body.cone-world .cone-copy h1 em { color: #ffe0a3; font-weight: 400; }
.cone-copy > p { color: #fff3eb; font-size: 1rem; line-height: 1.7; max-width: 340px; margin: 0 0 27px; text-shadow: 0 1px 9px #51233c55; }
.cone-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.cone-world .cone-actions .btn { border-radius: 40px; font-weight: 500; min-height: 48px; font-size: .8125rem; padding: 13px 23px; }
body.cone-world .cone-actions .btn--primary { background: #fff5e2; color: #822148; border-color: #fff5e2; }
body.cone-world .cone-actions .btn--outline { background: #7827511c; border-color: #fff9; color: #fff; backdrop-filter: blur(8px); }
.cone-caption { position: absolute; z-index: 4; right: 6%; top: 26%; padding-left: 15px; border-left: 1px solid #fff8; color: #743849; text-align: left; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.7; pointer-events: none; }
.cone-caption strong { display: block; font-family: var(--serif); font-size: 1.25rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.cone-scene-controls { position: absolute; z-index: 5; right: 5.5%; bottom: 31px; display: flex; gap: 8px; }
.cone-scene-controls button { min-height: 42px; padding: 10px 15px; border-radius: 30px; border: 1px solid #fff7; color: #fff9ef; background: #812c6852; backdrop-filter: blur(12px); font: 500 .75rem 'Manrope',sans-serif; cursor: pointer; }
.cone-scene-controls button:hover { background: #8d285c; }
.cone-scroll { position: absolute; z-index: 4; bottom: 30px; left: max(5.5vw,calc((100vw - 1240px)/2)); display: flex; align-items: center; gap: 16px; color: #fff4eb; text-decoration: none; font-size: .75rem; }
.cone-scroll__icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #fff8; border-radius: 50%; font-size: 1.15rem; }
.cone-scroll span:last-child { max-width: 130px; line-height: 1.5; }
.cone-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #fff2; z-index: 7; }
.cone-progress span { display: block; height: 100%; background: #ffd77d; transform: scaleX(var(--journey-progress,0)); transform-origin: left; }
.cone-scroll-story { position: absolute; z-index: 4; right: 8%; top: 35%; width: 320px; opacity: var(--story-opacity,0); visibility: hidden; transform: translateY(var(--story-y,20px)); pointer-events: none; }
.cone-journey.story-visible .cone-scroll-story { visibility: visible; }
body.cone-world .cone-scroll-story h2 { color: #fffaee; font-size: 4.2rem; line-height: .98; font-weight: 400; margin: 0 0 20px; text-shadow: 0 2px 22px #51153d44; }
.cone-scroll-story p { font-size: .9375rem; line-height: 1.8; color: #fff2e9; text-shadow: 0 1px 10px #52203c55; }
body.cone-world .quick-facts { background: #ffe9b8; border-color: #eacbc0; }
body.cone-world .quick-facts__panel { padding-block: 32px; }
body.cone-world .service-card__media { border: 0; border-radius: 22px; box-shadow: 0 15px 35px #99487215; }
body.cone-world .service-card:nth-child(3n + 2) .service-card__media { border-radius: 22px; }
body.cone-world .service-card { border-color: #eec6d3; }
body.cone-world .service-card__number { display: inline-flex; align-items: center; justify-content: center; width: 33px; height: 33px; border-radius: 50%; background: #ffd989; color: #7d2d4c; }
body.cone-world .section-heading h2 { font-size: clamp(3rem,4.8vw,4.8rem); }
body.cone-world .service-page-links a { border-radius: 30px; padding: 10px 16px; background: #fff0e1; }
body.cone-world .showcase { background: linear-gradient(125deg,#f49a9a,#ecc1e5 55%,#b7b0ed); }
body.cone-world .showcase h2 { color: #6c275b; }
body.cone-world .showcase p { color: #682d55; }
body.cone-world .gallery-card { border-radius: 20px; overflow: hidden; }
body.cone-world .booking__inner { border-radius: 25px; outline: none; border: 0; background: linear-gradient(125deg,#a72968,#783b91); }
body.cone-world .btn { border-radius: 30px; }
body.cone-world .site-footer { background: #672b56; }
body.cone-world .hero { padding-top: 130px; background: radial-gradient(ellipse at 75% 25%,#fdd9ac,transparent 65%),#f8deea; }
body.cone-world .hero-photo-card { border-radius: 30px; transform: rotate(4deg); }
body.cone-world .hero-photo-card img { border-radius: 25px; }
body.cone-world .booking-form-panel,body.cone-world .service-sidebar { border-radius: 22px; }
body.cone-world .atelier-cursor::before { border-color: #fff8; box-shadow: 0 0 20px #ffe3ba77; }
body.cone-world .atelier-cursor.is-over-link::before { border-color: #c86189; }
@media (max-width:1000px) {
  body.cone-world .site-header { height: 80px; min-height: 80px; padding-inline: 25px; }
  body.cone-world .site-nav { background: #fff8f0fa; }
  .cone-scene-heading { top: 112px; }
  body.cone-world .cone-copy h1 { font-size: clamp(3.8rem,8vw,5.5rem); }
  .cone-copy { width: 47%; }
  .cone-caption { right: 4%; top: 20%; }
}
@media (max-width:720px) {
  .cone-journey { height: auto; }
  .cone-journey > .cone-hero { position: relative; height: 960px; height: max(900px,112svh); min-height: 900px; }
  body.cone-world .site-header { height: 76px; min-height: 76px; padding-inline: 20px; }
  body.cone-world .brand__text small { font-size: .625rem; }
  .cone-world__backdrop { background-position: 59% 50%; }
  .cone-world__shade { background: linear-gradient(0deg,#60204bbc,transparent 80%); }
  .cone-scene-heading { top: 104px; left: 26px; font-size: .625rem; letter-spacing: .12em; }
  .cone-copy { bottom: 103px; left: 27px; width: calc(100% - 54px); opacity: 1; transform: none; }
  body.cone-world .cone-copy h1 { font-size: clamp(3.5rem,13vw,5rem); margin-bottom: 18px; }
  .cone-copy > p { font-size: .9375rem; max-width: 310px; margin-bottom: 22px; }
  .cone-caption { right: 28px; top: 165px; font-size: .625rem; }
  .cone-caption strong { font-size: 1.1rem; }
  .cone-fallback { top: 10%; right: 22%; width: 56%; height: 44%; }
  .cone-scroll { bottom: 28px; left: 27px; font-size: .6875rem; gap: 10px; }
  .cone-scroll__icon { width: 35px; height: 35px; }
  .cone-scene-controls { right: 24px; bottom: 31px; }
  .cone-scene-controls button { padding: 9px 12px; font-size: .6875rem; }
  .cone-scroll-story, .cone-progress { display: none; }
}
body.cone-world .brand__text small { font-size: .75rem; letter-spacing: .12em; }
.cone-scene-heading,.cone-caption { font-size: .75rem; }
@media (min-width:721px) {
  .cone-caption { top: auto; bottom: 24%; right: 5.5%; }
}
@media (max-width:720px) {
  .cone-scene-heading { font-size: .75rem; letter-spacing: .08em; }
  .cone-caption { font-size: .75rem; max-width: 155px; }
  .cone-scroll,.cone-scene-controls button { font-size: .75rem; }
}
@media (prefers-reduced-motion:reduce) {
  .cone-journey { height: auto; }
  .cone-journey > .cone-hero { position: relative; }
  .cone-world__backdrop,.cone-copy { transform: none; }
  .cone-copy { opacity: 1; }
  .cone-scroll-story,.cone-progress { display: none; }
}