/* =========================================================
   TEMA Photography — styles
   ========================================================= */
@property --hole { syntax: '<length>'; inherits: false; initial-value: 0px; }

:root {
  --cream: #F6EEE7;
  --paper: #FBF7F2;
  --sand: #EADCD0;
  --line: rgba(26, 20, 22, .14);
  --ink: #1A1416;
  --ink-2: #4A3D3F;
  --muted: #8C7C77;
  --rose: #E4005B;
  --rose-2: #FF4D8A;
  --blush: #F8D5DF;
  --gold: #C6A07A;
  --night: #120D0F;

  --f-head: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Alexandria', system-ui, sans-serif;
  --f-script: 'Aref Ruqaa', serif;
  --f-en: 'Cinzel', 'Cormorant Garamond', serif;
  --f-it: 'Cormorant Garamond', serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --pad: clamp(16px, 5vw, 84px);
  --nav-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html.no-scroll, html.no-scroll body { overflow: hidden; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--f-body); font-size: 17px; line-height: 1.85;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
::selection { background: var(--rose); color: #fff; }
h1, h2, h3 { font-family: var(--f-head); margin: 0; line-height: 1.4; font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 1em; }
svg { flex-shrink: 0; }

.rose { color: var(--rose); }
.en-caps { font-family: var(--f-en); letter-spacing: .32em; text-transform: uppercase; font-size: 12px; direction: ltr; unicode-bidi: isolate; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); margin-bottom: 18px; font-weight: 500; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 4px rgba(228, 0, 91, .15); animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(228, 0, 91, 0); } }
/* Arabic display type needs room: taller lines and a little extra space between words */
.display { font-size: clamp(38px, 5.6vw, 88px); font-weight: 800; letter-spacing: 0; line-height: 1.6; word-spacing: .12em; }
.lead { font-size: clamp(19px, 1.6vw, 23px); color: var(--ink); font-weight: 500; }
.script { font-family: var(--f-script); color: var(--rose); font-size: clamp(34px, 4vw, 60px); line-height: 1.5; }

/* ----- Buttons ----- */
.btn {
  --bg: transparent; position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 30px; font-family: var(--f-head); font-weight: 600; font-size: 16px;
  border-radius: 2px; overflow: hidden; isolation: isolate; transition: color .5s var(--ease), transform .5s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.btn:hover svg { transform: translateX(-6px); }
.btn::before { content: ''; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); z-index: -1; }
.btn:hover::before { transform: scaleX(1); transform-origin: right; }
.btn--rose { background: var(--rose); color: #fff; box-shadow: 0 14px 40px -12px rgba(228, 0, 91, .55); }
.btn--skew { clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); padding-inline: 40px; }
.btn--line { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--line:hover { color: #fff; }
.btn--block { width: 100%; justify-content: center; }
.btn.is-loading span { opacity: .4; }
.btn.is-loading::after { content: ''; width: 16px; height: 16px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.link-arrow { display: inline-flex; gap: 10px; align-items: center; font-family: var(--f-head); font-weight: 600; color: var(--rose); font-size: 15px; position: relative; padding-bottom: 4px; }
.link-arrow::after { content: '←'; transition: transform .4s var(--ease); }
.link-arrow::before { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(.3); transform-origin: right; transition: transform .5s var(--ease); }
.link-arrow:hover::before { transform: scaleX(1); }
.link-arrow:hover::after { transform: translateX(-6px); }

/* ----- Section index ----- */
.sec-index { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 26px; color: var(--ink-2); }
.sec-index span { font-family: var(--f-en); font-size: 14px; color: var(--rose); }
.sec-index i { width: 54px; height: 1px; background: currentColor; opacity: .5; }
.sec-index em { font-style: normal; font-size: 11px; }
.sec-index--light { color: rgba(255, 255, 255, .7); }
.sec-head { padding: 0 var(--pad); max-width: 1500px; margin: 0 auto 60px; display: grid; gap: 4px; position: relative; }
.sec-head__p { max-width: 560px; color: var(--ink-2); margin-top: 18px; }
.sec-head--center { text-align: center; justify-items: center; }
.sec-head .btn { justify-self: start; margin-top: 24px; }

/* ----- Viewfinder corners ----- */
.vf { position: absolute; width: 26px; height: 26px; border-color: currentColor; border-style: solid; border-width: 0; pointer-events: none; }
.vf--tl { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.vf--tr { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.vf--bl { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.vf--br { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* ----- Reveal primitives ----- */
.rv { opacity: 0; transform: translateY(40px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 120ms); }
.rv.in { opacity: 1; transform: none; }
.ln { display: block; overflow: hidden; padding: .08em 0 .2em; margin: -.08em 0 -.2em; }
.ln__in { display: block; transform: translateY(110%) rotate(3deg); transform-origin: right bottom; transition: transform 1.3s var(--ease); transition-delay: calc(var(--i, 0) * 130ms); }
[data-split].in .ln__in { transform: none; }
.img-rv { background: transparent !important; transition: background 0s 1.5s; }
.img-rv img { clip-path: inset(100% 0 0 0); transform: scale(1.35); transition: clip-path 1.5s var(--ease-io), transform 1.9s var(--ease); }
.img-rv.in img { clip-path: inset(0 0 0 0); transform: scale(1); }
.img-rv.in.wk:hover img { transform: scale(1.07); }

/* ----- Grain ----- */
/* Static film grain: no blend mode or animation, so it costs nothing while scrolling */
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@keyframes grain { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } }

/* =========================================================
   INTRO
   ========================================================= */
.intro {
  position: fixed; inset: 0; z-index: 200; background: radial-gradient(ellipse at 50% 45%, #3a3236 0%, #1c1618 55%, #110c0e 100%);
  color: rgba(255, 255, 255, .78); display: grid; place-items: center; overflow: hidden;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
          mask: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
}
.intro.open { animation: holeOpen 1.25s var(--ease-io) forwards; }
@keyframes holeOpen { to { --hole: 150vmax; } }
.intro.done { display: none; }
.intro__grain { position: absolute; inset: -50%; opacity: .12; background-image: inherit; }
.intro__frame { position: absolute; inset: clamp(16px, 4vw, 48px); opacity: 0; transition: opacity .8s; }
.intro.play .intro__frame { opacity: 1; }
.intro__frame .vf { width: 44px; height: 44px; transition: color .4s, transform .8s var(--ease); transform: scale(1.6); }
.intro.play .intro__frame .vf { transform: none; }
.intro.lock .intro__frame .vf { color: var(--rose-2); }
.intro__hud { position: absolute; left: 64px; right: 64px; display: flex; justify-content: space-between; gap: 18px; font-size: 11px; }
.intro__hud .en-caps { font-size: 10.5px; letter-spacing: .28em; }
.intro__hud--top { top: 14px; }
.intro__hud--bot { bottom: 14px; }
.intro.lock .intro__focus { color: var(--rose-2); }
.rec { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-en); letter-spacing: .3em; font-size: 11px; direction: ltr; }
.rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff2d55; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.intro__stage { position: relative; display: grid; justify-items: center; gap: clamp(18px, 3.4vmin, 34px); }
@keyframes rot { to { rotate: 360deg; } }

/* The camera: lens ring + logo in its exact centre + an iris that opens over it */
.intro__cam { --s: min(56vmin, 430px); position: relative; width: var(--s); height: var(--s); display: grid; place-items: center;
  opacity: 0; scale: .92; transition: opacity 1s var(--ease), scale 1.6s var(--ease); }
.intro.play .intro__cam { opacity: 1; scale: 1; }
.intro__ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; overflow: visible; }
.intro__ring .r-outer { stroke: rgba(255,255,255,.28); stroke-width: .5; }
.intro__ring .r-mid { stroke: rgba(255,255,255,.12); stroke-width: 6; }
.intro__ring .r-in { stroke: rgba(255,255,255,.22); stroke-width: .5; }
.intro__ring .ticks line { stroke: rgba(255,255,255,.35); stroke-width: .5; }
.intro__ring .ticks line.big { stroke: rgba(255,255,255,.7); stroke-width: .8; }
.intro__ring .spin { transform-origin: 100px 100px; animation: rot 26s linear infinite; }
.intro__ring .focus { transform-origin: 100px 100px; transition: transform 1.6s var(--ease); transform: rotate(-38deg); }
.intro.lock .intro__ring .focus { transform: rotate(0deg); }
.intro__ring text { font-family: var(--f-en); font-size: 5.2px; letter-spacing: 1.6px; fill: rgba(255,255,255,.55); }
.intro__ring .r-glow { stroke: var(--rose-2); stroke-width: .8; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.4s .1s var(--ease); filter: drop-shadow(0 0 4px rgba(255,77,138,.8)); }
.intro.lock .intro__ring .r-glow { stroke-dashoffset: 0; }

.intro__lens { position: absolute; width: 78%; height: 78%; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.07), transparent 40%), radial-gradient(circle, #241d20 0%, #120d0f 70%);
  box-shadow: inset 0 0 40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06); }
.intro__logo { position: relative; width: 44%; aspect-ratio: 824 / 906; translate: 0 2%; }
.intro__logo img { width: 100%; height: 100%; filter: blur(14px); opacity: .25; transform: scale(1.12);
  transition: filter 1.5s var(--ease), opacity 1.2s, transform 2s var(--ease); }
.intro.focus .intro__logo img { opacity: 1; filter: blur(0) drop-shadow(0 0 22px rgba(255,77,138,.5)); transform: none; }
.intro.lock .intro__logo img { filter: drop-shadow(0 0 30px rgba(255,77,138,.7)) drop-shadow(0 0 3px rgba(255,255,255,.5)); }
.intro__glint { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(../assets/logo.png) center / contain no-repeat; mask: url(../assets/logo.png) center / contain no-repeat;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.95) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 150% 0; }
.intro.lock .intro__glint { animation: glint 1.2s .2s var(--ease) forwards; }
@keyframes glint { to { background-position: -60% 0; } }
.intro__iris { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.intro__iris path { fill: url(#bladeGrad); stroke: rgba(255,255,255,.14); stroke-width: .35; stroke-linejoin: round; }
/* lens reflections sit above everything for a glassy feel */
.intro__lens::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 40% 22% at 34% 26%, rgba(255,255,255,.14), transparent 70%), radial-gradient(circle at 70% 76%, rgba(255,77,138,.10), transparent 30%); }
.intro__af { position: absolute; width: 52%; height: 52%; opacity: 0; transition: all .9s var(--ease); scale: 1.25; color: rgba(255,255,255,.85); }
.intro__af .vf { width: 16px; height: 16px; }
.intro.focus .intro__af { opacity: 1; scale: 1; }
.intro.lock .intro__af { color: #6dff9a; scale: .9; }

.intro__word { display: grid; justify-items: center; gap: 6px; direction: ltr; }
.tema-word { font-family: var(--f-en); font-weight: 500; font-size: clamp(38px, 7vmin, 64px); letter-spacing: .14em; color: #fff; display: inline-flex; line-height: 1; }
.tema-word b { font-weight: 500; display: inline-block; }
.intro .tema-word b { opacity: 0; transform: translateY(70%); filter: blur(8px); transition: all 1s var(--ease); }
.intro.lock .tema-word b { opacity: 1; transform: none; filter: none; }
.intro.lock .tema-word b:nth-child(2) { transition-delay: .08s; }
.intro.lock .tema-word b:nth-child(3) { transition-delay: .16s; }
.intro.lock .tema-word b:nth-child(4) { transition-delay: .24s; }
.intro__sub { font-size: 12px; letter-spacing: .2em; opacity: 0; transition: all 1.4s .35s var(--ease); color: rgba(255,255,255,.75); }
.intro.lock .intro__sub { letter-spacing: .62em; opacity: 1; margin-right: -.62em; }
.intro__line { width: 90px; height: 1.5px; background: var(--rose-2); transform: scaleX(0); transition: transform 1s .55s var(--ease); margin-top: 8px; }
.intro.lock .intro__line { transform: scaleX(1); }
.intro__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.intro.open .intro__flash { animation: flash .5s ease-out; }
@keyframes flash { 15% { opacity: .85; } 100% { opacity: 0; } }
.intro__skip { position: absolute; bottom: clamp(40px, 7vw, 76px); left: 50%; translate: -50% 0; font-size: 10px; color: rgba(255,255,255,.45); padding: 8px 12px; transition: color .3s; }
.intro__skip:hover { color: #fff; }

/* =========================================================
   NAV
   ========================================================= */
.scroll-progress { position: fixed; top: 0; inset-inline: 0; height: 2px; z-index: 120; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--rose); transform-origin: right; transform: scaleX(0); }
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 110; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--pad);
  transition: transform .7s var(--ease), background .5s, height .5s var(--ease), box-shadow .5s;
}
.nav.is-scrolled { background: rgba(246, 238, 231, .78); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); height: 70px; box-shadow: 0 1px 0 var(--line); }
.nav.is-hidden { transform: translateY(-110%); }
.nav__brand { display: flex; align-items: center; gap: 12px; direction: ltr; }
.nav__brand img { height: 42px; width: auto; transition: transform .8s var(--ease); }
.nav__brand:hover img { transform: rotate(-8deg) scale(1.06); }
.nav__word { display: grid; line-height: 1; }
.nav__word b { font-family: var(--f-en); font-weight: 500; font-size: 22px; letter-spacing: .12em; }
.nav__word small { font-family: var(--f-en); font-size: 7.5px; letter-spacing: .5em; margin-top: 4px; color: var(--ink-2); }
.nav__links { display: flex; gap: clamp(16px, 2.4vw, 38px); font-family: var(--f-head); font-size: 15px; font-weight: 500; }
.nav__links a { position: relative; padding: 6px 0; }
.nav__links a::after { content: ''; position: absolute; bottom: 0; right: 0; left: 0; height: 1.5px; background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: right; }
.nav__links a.is-active { color: var(--rose); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__gallery { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 40px; background: var(--ink); color: #fff; font-family: var(--f-head); font-size: 14px; font-weight: 500; transition: background .4s; }
.nav__gallery:hover { background: var(--rose); }
.nav__gallery svg, .nav__login svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav__login { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.2px var(--line); transition: box-shadow .4s, color .4s, background .4s; }
.nav__login:hover { color: var(--rose); box-shadow: inset 0 0 0 1.2px var(--rose); }
.nav__login.is-owner { background: var(--rose); color: #fff; box-shadow: none; }
.nav__burger { display: none; width: 44px; height: 44px; position: relative; }
.nav__burger i { position: absolute; left: 10px; right: 10px; height: 1.6px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.nav__burger i:first-child { top: 17px; } .nav__burger i:last-child { top: 26px; }
.nav__burger[aria-expanded=true] i:first-child { top: 21.5px; transform: rotate(45deg); }
.nav__burger[aria-expanded=true] i:last-child { top: 21.5px; transform: rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 105; pointer-events: none; display: grid; align-content: center; padding: var(--nav-h) var(--pad) 40px; }
.menu__bg { position: absolute; inset: 0; background: var(--cream); clip-path: circle(0% at calc(100% - 40px) 40px); transition: clip-path .9s var(--ease-io); }
.menu.is-open { pointer-events: auto; }
.menu.is-open .menu__bg { clip-path: circle(150% at calc(100% - 40px) 40px); }
html[dir=rtl] .menu__bg { clip-path: circle(0% at 40px 40px); }
html[dir=rtl] .menu.is-open .menu__bg { clip-path: circle(150% at 40px 40px); }
.menu__links { position: relative; display: grid; gap: 4px; }
.menu__links a { font-family: var(--f-head); font-weight: 700; font-size: clamp(32px, 9vw, 52px); display: flex; align-items: baseline; gap: 14px; opacity: 0; transform: translateY(30px); transition: all .7s var(--ease); line-height: 1.35; }
.menu__links a small { font-family: var(--f-en); font-size: 12px; color: var(--rose); }
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links a:nth-child(1) { transition-delay: .25s; } .menu.is-open .menu__links a:nth-child(2) { transition-delay: .3s; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: .35s; } .menu.is-open .menu__links a:nth-child(4) { transition-delay: .4s; }
.menu.is-open .menu__links a:nth-child(5) { transition-delay: .45s; } .menu.is-open .menu__links a:nth-child(6) { transition-delay: .5s; }
.menu.is-open .menu__links a:nth-child(7) { transition-delay: .55s; }
.menu__foot { position: relative; margin-top: 40px; opacity: 0; transition: opacity .6s .6s; color: var(--ink-2); }
.menu.is-open .menu__foot { opacity: 1; }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(24px, 4vw, 80px); padding: calc(var(--nav-h) + 30px) var(--pad) 90px; overflow: hidden; }
.light-rays { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.light-rays i { position: absolute; top: -30%; height: 170%; width: 9vw; transform: rotate(32deg); will-change: translate; animation: ray 16s ease-in-out infinite alternate; }
.light-rays i:nth-child(odd) { background: linear-gradient(90deg, transparent, rgba(255,255,255,.28) 25%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.28) 75%, transparent); }
.light-rays i:nth-child(even) { background: linear-gradient(90deg, transparent, rgba(120, 78, 64, .035) 30%, rgba(120, 78, 64, .06) 50%, rgba(120, 78, 64, .035) 70%, transparent); width: 6vw; }
.light-rays i:nth-child(1) { left: 8%; } .light-rays i:nth-child(2) { left: 18%; animation-delay: -3s; }
.light-rays i:nth-child(3) { left: 30%; animation-delay: -6s; width: 10vw; } .light-rays i:nth-child(4) { left: 46%; animation-delay: -9s; }
.light-rays i:nth-child(5) { left: 62%; animation-delay: -12s; }
@keyframes ray { from { translate: -6vw 0; opacity: .5; } to { translate: 6vw 0; opacity: 1; } }
.light-rays--soft { opacity: .7; }
.hero__bar { position: absolute; top: 0; right: 0; width: clamp(10px, 1.4vw, 22px); height: 46%; background: var(--rose); transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--ease-io); }
.is-ready .hero__bar { transform: scaleY(1); }

.hero__text { position: relative; z-index: 2; }
.hero-in { opacity: 0; transform: translateY(30px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--d) * 140ms + 150ms); }
.hero__title .ln__in.hero-in { opacity: 1; transform: translateY(115%) rotate(4deg); transition: transform 1.5s var(--ease); transition-delay: calc(var(--d) * 160ms + 100ms); }
.is-ready .hero-in, .is-ready .hero__title .ln__in.hero-in { opacity: 1; transform: none; }
.hero__title { font-size: clamp(54px, 8.2vw, 136px); font-weight: 800; line-height: 1.3; margin-bottom: 26px; letter-spacing: 0; }
.hero__title .rose { position: relative; }
.hero__lead { max-width: 520px; font-size: clamp(17px, 1.35vw, 20px); color: var(--ink-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin: 34px 0 44px; }
.hero__tags { display: flex; gap: 14px; align-items: center; font-family: var(--f-en); letter-spacing: .32em; font-size: 11px; direction: ltr; justify-content: flex-end; color: var(--ink-2); }
.hero__tags i { color: var(--rose); font-style: normal; }

.hero__visual { position: relative; z-index: 1; height: min(78vh, 760px); display: grid; place-items: center; }
.hero__arch { position: relative; width: min(100%, 520px); height: 100%; border-radius: 999px 999px 14px 14px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(80, 30, 40, .45);
  clip-path: inset(100% 0 0 0 round 999px 999px 14px 14px); transition: clip-path 1.8s var(--ease-io); }
.is-ready .hero__arch { clip-path: inset(0 0 0 0 round 999px 999px 14px 14px); }
.hero__slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.15); transition: opacity 1.6s var(--ease), transform 1.6s var(--ease); }
.hero__slides img.is-active { opacity: 1; animation: kenburns 7s linear forwards; }
@keyframes kenburns { from { transform: scale(1.12) translate(0, 0); } to { transform: scale(1.0) translate(-1.5%, -1%); } }
.hero__arch-link { position: absolute; inset: 0; z-index: 3; }
.hero__arch-outline { position: absolute; width: min(100%, 520px); height: 100%; border-radius: 999px 999px 14px 14px; border: 1.2px solid var(--rose); translate: 26px 26px; opacity: 0; transition: opacity 1s 1s; }
.is-ready .hero__arch-outline { opacity: .7; }

.viewfinder { position: absolute; inset: 0; z-index: 2; color: rgba(255,255,255,.9); pointer-events: none; }
.viewfinder > .vf { margin: 22% 9% 0; }
.viewfinder .vf--tl { top: 0; left: 0; } .viewfinder .vf--tr { top: 0; right: 0; }
.viewfinder .vf--bl { top: auto; bottom: 7%; margin-top: 0; } .viewfinder .vf--br { top: auto; bottom: 7%; margin-top: 0; }
.vf__rec { position: absolute; top: 15%; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 8px; font-family: var(--f-en); font-size: 11px; letter-spacing: .3em; direction: ltr; }
.vf__rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff2d55; animation: blink 1.1s steps(2) infinite; }
.vf__count { position: absolute; bottom: calc(7% + 6px); left: calc(9% + 36px); font-size: 11px; }
.vf__count b { font-weight: 600; color: #fff; }
.vf__meta { position: absolute; bottom: calc(7% + 6px); right: calc(9% + 36px); font-size: 9.5px; letter-spacing: .18em; opacity: .85; }
.vf__focus { position: absolute; width: 64px; height: 64px; left: 50%; top: 42%; translate: -50% -50%; border: 1.2px solid rgba(255,255,255,.9); transition: left 1.2s var(--ease), top 1.2s var(--ease), border-color .3s, scale .4s var(--ease); }
.vf__focus.is-lock { border-color: #6dff9a; scale: .82; }
.vf__grid { position: absolute; inset: 0; opacity: .14;
  background: linear-gradient(90deg, transparent calc(33.33% - .5px), #fff calc(33.33% - .5px), #fff calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), #fff calc(66.66% - .5px), #fff calc(66.66% + .5px), transparent calc(66.66% + .5px)),
              linear-gradient(0deg, transparent calc(33.33% - .5px), #fff calc(33.33% - .5px), #fff calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), #fff calc(66.66% - .5px), #fff calc(66.66% + .5px), transparent calc(66.66% + .5px)); }

.hero__polaroid { position: absolute; z-index: 4; bottom: 4%; right: -2%; width: clamp(130px, 13vw, 190px); background: #fff; padding: 9px 9px 0; margin: 0; box-shadow: 0 30px 60px -20px rgba(60, 20, 30, .4); rotate: 7deg; opacity: 0; transition: opacity 1s 1.2s, translate 1.2s 1.2s var(--ease); translate: 0 40px; }
.is-ready .hero__polaroid { opacity: 1; translate: 0 0; }
.hero__polaroid img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.hero__polaroid figcaption { font-family: var(--f-script); text-align: center; color: var(--ink-2); font-size: 15px; padding: 6px 0 8px; }
.hero__badge { position: absolute; z-index: 4; top: 8%; left: -4%; width: clamp(104px, 10vw, 140px); aspect-ratio: 1; display: grid; place-items: center; background: var(--paper); border-radius: 50%; box-shadow: 0 20px 50px -20px rgba(60,20,30,.35); opacity: 0; scale: .6; transition: opacity 1s 1.4s, scale 1.2s 1.4s var(--ease); }
.is-ready .hero__badge { opacity: 1; scale: 1; }
.hero__badge svg { position: absolute; inset: 0; animation: rot 18s linear infinite; }
.hero__badge text { font-family: var(--f-en); font-size: 9.6px; letter-spacing: .24em; fill: var(--ink); }
.hero__badge img { width: 34%; }
.hero__scroll { position: absolute; bottom: 26px; left: 50%; translate: -50% 0; display: grid; justify-items: center; gap: 10px; color: var(--ink-2); z-index: 3; }
.hero__scroll .en-caps { font-size: 10px; }
.hero__scroll i { width: 1px; height: 46px; background: linear-gradient(var(--ink-2), transparent); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ''; position: absolute; top: -20px; left: 0; width: 1px; height: 20px; background: var(--rose); animation: drip 2s var(--ease) infinite; }
@keyframes drip { to { top: 46px; } }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 26px 0; background: var(--paper); direction: ltr; }
.marquee__track { display: flex; align-items: center; gap: 42px; width: max-content; will-change: transform; }
.marquee span { font-family: var(--f-en); font-size: clamp(42px, 6.4vw, 104px); line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--ink); white-space: nowrap; letter-spacing: .04em; }
.marquee span.ar { font-family: var(--f-head); font-weight: 800; color: var(--ink); -webkit-text-stroke: 0; letter-spacing: 0; }
.marquee em { font-style: normal; color: var(--rose); font-size: clamp(22px, 2.6vw, 40px); }

/* =========================================================
   ABOUT
   ========================================================= */
.about { padding: clamp(90px, 13vw, 190px) var(--pad); max-width: 1560px; margin: 0 auto; position: relative; }
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.about__text .display { margin-bottom: 30px; }
.about__text > p { max-width: 560px; color: var(--ink-2); }
.about__text .lead { color: var(--ink); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 46px 0; padding: 30px 0; border-block: 1px solid var(--line); }
.stat b { font-family: var(--f-it); font-size: clamp(52px, 5vw, 78px); font-weight: 500; line-height: 1; color: var(--ink); }
.stat sup { color: var(--rose); font-size: 26px; font-family: var(--f-it); }
.stat span { display: block; font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
.about__pick { font-size: 20px; color: var(--ink) !important; font-weight: 500; margin-bottom: 0; }
.about .script { position: relative; display: inline-block; padding-bottom: 14px; padding-left: 60px; clip-path: inset(0 0 0 100%); transition: clip-path 2.2s var(--ease-io); }
.about .script.in { clip-path: inset(0 0 0 -2%); }
.about .script .heart { position: absolute; left: 0; top: 34%; width: 42px; fill: none; stroke: var(--rose); stroke-width: 2.2; stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1.4s 1.8s var(--ease); }
.about .script.in .heart { stroke-dashoffset: 0; }
.about .script .underline { position: absolute; bottom: 0; left: 10%; width: 82%; height: 22px; fill: none; stroke: var(--rose); stroke-width: 2; stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 1.6s 1.4s var(--ease); }
.about .script.in .underline { stroke-dashoffset: 0; }

.about__media { position: relative; height: clamp(520px, 52vw, 760px); }
.ab { position: absolute; margin: 0; overflow: hidden; background: var(--sand); }
.ab img { width: 100%; height: 100%; object-fit: cover; }
.ab--1 { top: 0; right: 4%; width: 58%; height: 76%; border-radius: 999px 999px 10px 10px; z-index: 1; }
.ab--2 { bottom: 0; left: 0; width: 46%; height: 58%; border-radius: 6px; z-index: 2; box-shadow: 0 40px 80px -30px rgba(60,20,30,.4); }
.ab--3 { bottom: 4%; right: 0; width: 30%; aspect-ratio: 1; z-index: 3; border: 8px solid #fff; box-shadow: 0 30px 60px -20px rgba(60,20,30,.35); rotate: -6deg; }
.about__stamp { position: absolute; top: 6%; left: 6%; z-index: 4; width: 118px; aspect-ratio: 1; border-radius: 50%; background: var(--rose); color: #fff; display: grid; place-items: center; align-content: center; line-height: 1; box-shadow: 0 20px 40px -14px rgba(228,0,91,.6); animation: bob 5s ease-in-out infinite; }
.about__stamp b { font-family: var(--f-it); font-size: 50px; font-weight: 500; }
.about__stamp .en-caps { font-size: 9px; letter-spacing: .3em; }
@keyframes bob { 50% { translate: 0 -12px; rotate: 6deg; } }
.plus { position: absolute; color: var(--rose); font-size: 46px; font-weight: 300; line-height: 1; animation: spinSlow 12s linear infinite; }
.plus--1 { top: 40%; left: 2%; } .plus--2 { top: -4%; left: 40%; font-size: 40px; animation-duration: 20s; }
@keyframes spinSlow { to { rotate: 360deg; } }

/* =========================================================
   SERVICES
   ========================================================= */
.services { padding: clamp(80px, 10vw, 150px) 0; background: var(--paper); position: relative; }
.services::before { content: ''; position: absolute; top: 0; left: 0; width: clamp(160px, 22vw, 340px); aspect-ratio: 1; background: var(--rose); border-radius: 0 0 100% 0; opacity: .95; }
.services .sec-head { margin-bottom: 70px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); padding: 0 var(--pad); max-width: 1560px; margin: 0 auto; }
.svc { position: relative; padding: clamp(30px, 3vw, 48px); min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); background: var(--cream); overflow: hidden; isolation: isolate; transition: color .7s var(--ease), border-color .7s; }
.svc__bg { position: absolute; inset: 0; z-index: -1; clip-path: circle(0% at var(--mx, 50%) var(--my, 50%)); transition: clip-path 1s var(--ease-io); }
.svc__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,13,15,.92), rgba(18,13,15,.35)); }
.svc__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform 1.4s var(--ease); }
.svc:hover { color: #fff; border-color: transparent; }
.svc:hover .svc__bg { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); }
.svc:hover .svc__bg img { transform: scale(1); }
.svc__num { position: absolute; top: 28px; left: 30px; color: var(--rose); font-size: 13px; }
.svc__icon { width: 84px; height: 84px; margin-bottom: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.svc__icon .p { stroke-dasharray: 240; stroke-dashoffset: 240; transition: stroke-dashoffset 2s var(--ease); }
.svc.in .svc__icon .p { stroke-dashoffset: 0; }
.svc h3 { font-size: clamp(26px, 2.4vw, 36px); margin: 40px 0 6px; }
.svc .en-caps { color: var(--rose); margin-bottom: 18px; font-size: 11px; }
.svc p:last-child { margin: 0; color: inherit; opacity: .78; max-width: 360px; }
.svc:hover .ic-camera .shutter { animation: shut .6s var(--ease); transform-origin: 32px 35px; }
@keyframes shut { 40% { transform: scale(.2); } }
.svc:hover .ic-clap .clap { animation: clap .7s var(--ease); transform-origin: 9px 30px; }
@keyframes clap { 30% { transform: rotate(-12deg); } 60% { transform: rotate(0); } }
.ic-drone .prop { transform-box: fill-box; transform-origin: center; animation: prop .25s linear infinite; }
.svc:hover .ic-drone { animation: hover 1.6s ease-in-out infinite; }
@keyframes prop { 50% { transform: scaleX(.25); } }
@keyframes hover { 50% { transform: translateY(-6px); } }

/* =========================================================
   STORY (chapters, normal vertical scroll)
   ========================================================= */
.story { position: relative; background: var(--cream); padding: clamp(80px, 10vw, 150px) var(--pad) clamp(60px, 8vw, 110px); max-width: 1500px; margin: 0 auto; }
.story__head { display: grid; justify-items: center; text-align: center; margin-bottom: clamp(50px, 7vw, 100px); }
.story__head .script { font-size: clamp(26px, 2.8vw, 42px); color: var(--ink-2); margin-top: 8px; }
.story__list { display: grid; gap: clamp(70px, 10vw, 150px); }
.chap { display: grid; grid-template-columns: minmax(240px, 0.75fr) 1.25fr; gap: clamp(30px, 5vw, 90px); align-items: center; }
.chap:nth-child(even) .chap__txt { order: 2; }
.chap__txt h3 { font-size: clamp(34px, 3.6vw, 56px); margin: 10px 0 14px; }
.chap__txt p { color: var(--ink-2); max-width: 360px; }
.chap__n { color: var(--rose); font-size: 11px; }
.chap__media { position: relative; height: clamp(380px, 42vw, 600px); }
.chap__media > figure { position: absolute; margin: 0; overflow: hidden; border-radius: 4px; }
.chap__media > figure img { width: 100%; height: 100%; object-fit: cover; }
.cimg--a { right: 0; top: 0; width: 58%; height: 88%; border-radius: 999px 999px 6px 6px !important; }
.cimg--b { left: 8%; bottom: 0; width: 40%; height: 52%; z-index: 2; box-shadow: 0 30px 60px -24px rgba(60,20,30,.4); border: 7px solid var(--paper); }
.cimg--c { left: 0; top: 4%; width: 28%; height: 38%; }
.chap:nth-child(even) .cimg--a { right: auto; left: 0; }
.chap:nth-child(even) .cimg--b { left: auto; right: 8%; }
.chap:nth-child(even) .cimg--c { left: auto; right: 0; }
.chap--dark { background: var(--night); color: #fff; padding: clamp(28px, 4vw, 60px); border-radius: 6px; }
.chap--dark .chap__txt p { color: rgba(255,255,255,.7); }
.chap--dark .cimg--b { border-color: var(--night); }
.story__end { display: grid; place-items: center; margin-top: clamp(70px, 9vw, 130px); }
.chap__cta { width: min(340px, 70vw); aspect-ratio: 1; border-radius: 50%; background: var(--rose); color: #fff; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; transition: transform .8s var(--ease), background .5s; }
.chap__cta:hover { transform: scale(1.05) rotate(-4deg); background: var(--ink); }
.chap__cta b { font-family: var(--f-head); font-size: clamp(32px, 3.4vw, 50px); line-height: 1.3; }
.chap__cta .en-caps { font-size: 11px; opacity: .8; }
.chap__cta svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 1.5; }

/* =========================================================
   RECENTLY ADDED
   ========================================================= */
.recent { padding: clamp(70px, 9vw, 130px) 0 clamp(30px, 4vw, 60px); overflow: hidden; }
.recent[hidden] { display: none; }
.recent__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding: 0 var(--pad); max-width: 1560px; margin: 0 auto 36px; }
.recent__title { font-size: clamp(36px, 4.6vw, 70px); }
.recent__track { display: flex; gap: clamp(10px, 1.4vw, 20px); padding: 4px var(--pad) 50px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.recent__track::-webkit-scrollbar { display: none; }
.rc { position: relative; flex: 0 0 auto; width: clamp(220px, 24vw, 340px); aspect-ratio: 4 / 5; border-radius: 999px 999px 6px 6px; overflow: hidden; background: var(--sand); scroll-snap-align: start;
  animation: rcIn 1.1s var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes rcIn { from { opacity: 0; transform: translate3d(0, 40px, 0); } }
.rc:nth-child(even) { border-radius: 6px; margin-top: 40px; }
.rc img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.rc:hover img { transform: scale(1.06); }
.rc__new { position: absolute; top: 16px; left: 50%; translate: -50% 0; background: var(--rose); color: #fff; font-size: 12px; padding: 3px 12px; border-radius: 20px; font-family: var(--f-head); }
.rc:nth-child(even) .rc__new { left: 16px; translate: none; }
.rc__play { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.6); }
.rc__play svg { width: 20px; fill: #fff; margin-left: 3px; }

/* =========================================================
   FILM
   ========================================================= */
.film { background: var(--night); color: #fff; position: relative; overflow: hidden; }
.film__sprockets { height: 34px; background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.14) 14px 34px, transparent 34px 48px); background-size: 48px 14px; background-repeat: repeat-x; background-position: 0 center; animation: sprocket 3s linear infinite; }
.film__sprockets--bot { animation-direction: reverse; }
@keyframes sprocket { to { background-position: 480px center; } }
.film__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(30px, 6vw, 100px); align-items: center; padding: clamp(70px, 9vw, 140px) var(--pad); max-width: 1560px; margin: 0 auto; }
.film__text p { color: rgba(255,255,255,.72); max-width: 480px; }
.film__text .display { margin-bottom: 30px; }
.film__list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; }
.film__list li { display: flex; gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); font-family: var(--f-head); }
.film__list li::before { content: ''; width: 7px; height: 7px; background: var(--rose); rotate: 45deg; }
.film__screen { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #000; box-shadow: 0 60px 120px -40px rgba(228,0,91,.35); }
.film__screen.is-portrait { aspect-ratio: 4 / 5; max-height: 80vh; justify-self: center; width: auto; height: min(80vh, 760px); }
.film__screen video { width: 100%; height: 100%; object-fit: cover; }
.film__letter { position: absolute; inset-inline: 0; height: 9%; background: #000; z-index: 2; transition: height .9s var(--ease); pointer-events: none; }
.film__letter--t { top: 0; } .film__letter--b { bottom: 0; }
.film__screen.is-playing .film__letter { height: 0; }
.film__play { position: absolute; inset: 0; margin: auto; width: 130px; height: 130px; z-index: 3; display: grid; place-items: center; transition: opacity .5s, scale .5s var(--ease); }
.film__play span { width: 70px; height: 70px; border-radius: 50%; background: var(--rose); display: grid; place-items: center; transition: transform .5s var(--ease); }
.film__play span svg { width: 26px; fill: #fff; margin-left: 4px; }
.film__play:hover span { transform: scale(1.12); }
.film__ring { position: absolute; inset: 0; animation: rot 14s linear infinite; }
.film__ring text { font-family: var(--f-en); font-size: 9px; letter-spacing: .3em; fill: #fff; }
/* Gone while the film plays; comes back the moment it is paused */
.film__screen.is-playing .film__play { opacity: 0; scale: .7; pointer-events: none; }
.film__tc { position: absolute; top: calc(9% + 14px); right: 18px; z-index: 3; font-size: 10px; color: #ff2d55; }
.film__tc b { color: #fff; font-weight: 500; }
.film__title { position: absolute; bottom: calc(9% + 14px); left: 18px; z-index: 3; font-size: 10px; color: rgba(255,255,255,.8); }
.film__screen.is-playing .film__tc { top: 14px; } .film__screen.is-playing .film__title { bottom: 14px; }

/* =========================================================
   PACKAGES — one colour for all three, luxurious reveal
   ========================================================= */
.packages { padding: clamp(90px, 12vw, 180px) 0; position: relative; overflow: hidden; }
.pk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 30px); padding: 0 var(--pad); max-width: 1500px; margin: 0 auto; align-items: start; position: relative; z-index: 1; perspective: 1400px; }
.pk { position: relative; background: var(--paper); padding: 0 clamp(22px, 2.2vw, 36px) 32px; border-radius: 4px;
  box-shadow: 0 30px 70px -45px rgba(60,20,30,.35);
  opacity: 0; transform: translate3d(0, 80px, 0) rotateX(8deg); transform-origin: 50% 100%;
  transition: opacity 1.1s ease, transform 1.4s var(--ease), box-shadow .6s;
  transition-delay: calc(var(--d) * 180ms); }
.pk.in { opacity: 1; transform: none; }
.pk.in:hover { transform: translate3d(0, -10px, 0); box-shadow: 0 60px 100px -45px rgba(228,0,91,.35); transition-delay: 0ms; }
/* a thin rose line traces the frame after the card lands */
.pk__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.pk__frame rect { width: calc(100% - 1.5px); height: calc(100% - 1.5px); fill: none; stroke: var(--rose); stroke-width: 1.2; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: .55;
  transition: stroke-dashoffset 2.2s var(--ease-io); transition-delay: calc(var(--d) * 180ms + 600ms); }
.pk.in .pk__frame rect { stroke-dashoffset: 0; }
.pk__img { position: relative; margin: 0 calc(-1 * clamp(22px, 2.2vw, 36px)) 26px; height: 210px; overflow: hidden; border-radius: 4px 4px 0 0; }
.pk__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--paper) 2%, transparent 55%); }
.pk__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); transition: transform 2.2s var(--ease); transition-delay: calc(var(--d) * 180ms + 200ms); }
.pk.in .pk__img img { transform: scale(1); }
.pk.in:hover .pk__img img { transform: scale(1.07); transition-delay: 0ms; }
.pk__num { position: absolute; top: 176px; left: clamp(22px, 2.2vw, 36px); z-index: 2; font-size: 12px; color: var(--rose); background: var(--paper); padding: 4px 10px; border-radius: 20px; }
.pk__ribbon { position: absolute; z-index: 3; top: 22px; left: -10px; background: var(--rose); color: #fff; padding: 6px 18px 6px 16px; font-family: var(--f-head); font-size: 13px; line-height: 1.4; text-align: center; box-shadow: 0 10px 24px -8px rgba(228,0,91,.6); }
.pk__ribbon small { display: block; font-family: var(--f-it); font-style: italic; font-size: 13px; opacity: .9; border-top: 1px solid rgba(255,255,255,.4); }
.pk__ribbon::after { content: ''; position: absolute; left: 0; bottom: -10px; border: 5px solid #99003d; border-left-color: transparent; border-bottom-color: transparent; }
.pk__en { font-family: var(--f-it); font-style: italic; font-size: 30px; color: var(--gold); line-height: 1.1; direction: ltr; text-align: right; margin: 0; }
.pk--gold .pk__en { font-family: 'Pinyon Script', cursive; font-style: normal; font-size: 44px; }
.pk__name { font-size: clamp(34px, 3.2vw, 48px); margin: 4px 0 2px; font-weight: 800; }
.pk__kind { color: var(--rose); font-size: 14px; font-family: var(--f-head); }
.pk__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); margin: 24px 0; border: 1px solid var(--line); }
.pk__stat { background: var(--paper); padding: 13px 14px 11px; }
.pk__stat span { display: block; font-size: 12px; color: var(--muted); }
.pk__stat b { font-family: var(--f-head); font-weight: 600; font-size: 15.5px; line-height: 1.6; }
.pk__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pk__price b { font-family: var(--f-it); font-weight: 500; font-size: clamp(58px, 5vw, 80px); line-height: 1; color: var(--rose); }
.pk__price em { font-style: normal; font-family: var(--f-head); font-size: 20px; }
.pk__vat { display: block; font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.pk__toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); font-family: var(--f-head); font-weight: 500; font-size: 15px; }
.pk__toggle i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; position: relative; }
.pk__toggle i::before, .pk__toggle i::after { content: ''; position: absolute; inset: 0; margin: auto; width: 10px; height: 1.4px; background: currentColor; }
.pk__toggle i::after { rotate: 90deg; transition: rotate .5s var(--ease); }
.pk.is-open .pk__toggle i::after { rotate: 0deg; }
.pk__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.pk.is-open .pk__more { grid-template-rows: 1fr; }
.pk__more > div { overflow: hidden; }
.pk__list h4 { font-family: var(--f-head); color: var(--rose); font-size: 15px; margin: 14px 0 8px; font-weight: 600; }
.pk__list ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 15px; }
.pk__list li { display: flex; gap: 10px; align-items: baseline; }
.pk__list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--rose); flex-shrink: 0; translate: 0 -2px; }
.pk__addons { display: grid; gap: 8px; margin-top: 8px; }
.pk__addon { display: flex; justify-content: space-between; padding: 10px 14px; border: 1px dashed rgba(228,0,91,.45); font-size: 14px; }
.pk__addon b { color: var(--rose); font-family: var(--f-head); font-weight: 600; }
.pk__btns { position: relative; z-index: 3; display: grid; gap: 10px; margin-top: 22px; }
.pk__btns .btn { justify-content: center; }
.pk__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.btn--wa { padding: 0; width: 54px; justify-content: center; color: #1f9d55; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--wa svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.btn--wa::before { background: #25D366; }
.btn--wa:hover { color: #fff; }
.btn--wa:hover svg { transform: none; }

/* Payment methods */
.pay { position: relative; z-index: 1; max-width: 1100px; margin: clamp(50px, 6vw, 90px) auto 0; padding: 0 var(--pad); text-align: center; }
.pay__title { display: inline-grid; gap: 2px; margin-bottom: 26px; }
.pay__title span { font-family: var(--f-head); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); }
.pay__title em { font-style: normal; color: var(--muted); font-size: 10px; }
.pay__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pay__item { display: grid; justify-items: center; gap: 4px; padding: 22px 14px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; transition: transform .6s var(--ease), border-color .4s, opacity 1.1s var(--ease); }
.pay__item:hover { transform: translateY(-6px); border-color: var(--rose); }
.pay__mark { font-weight: 700; font-size: 18px; line-height: 1; padding: 8px 14px; border-radius: 8px; margin-bottom: 8px; direction: ltr; }
.pay__item--bank .pay__mark { font-family: var(--f-en); font-size: 11px; letter-spacing: .2em; background: var(--ink); color: #fff; font-weight: 500; }
.pay__item--tabby .pay__mark { font-family: system-ui, sans-serif; background: #3BFFC1; color: #0b0b0b; letter-spacing: -.02em; }
.pay__item--tamara .pay__mark { font-family: system-ui, sans-serif; background: linear-gradient(90deg, #F8C8A8, #E9A1C4, #B3A6F2); color: #1b1b1b; letter-spacing: -.02em; }
.pay__item--split .pay__mark { font-family: var(--f-en); font-size: 11px; letter-spacing: .2em; background: var(--blush); color: var(--rose); font-weight: 600; }
.pay__item b { font-family: var(--f-head); font-size: 17px; }
.pay__item small { color: var(--muted); font-size: 13px; line-height: 1.6; }

/* Booking form */
.book { position: fixed; inset: 0; z-index: 165; display: grid; place-items: center; padding: 16px; visibility: hidden; pointer-events: none; transition: visibility 0s .8s; }
.book.is-open { visibility: visible; pointer-events: auto; transition: none; }
.book__bg { position: absolute; inset: 0; background: rgba(18,13,15,.62); opacity: 0; transition: opacity .6s; }
.book.is-open .book__bg { opacity: 1; }
.book__card { position: relative; width: min(980px, 100%); max-height: 94vh; overflow: auto; display: grid; grid-template-columns: .8fr 1.2fr; background: var(--paper); border-radius: 4px;
  opacity: 0; transform: translate3d(0, 40px, 0) scale(.98); transition: opacity .6s ease, transform .9s var(--ease); box-shadow: 0 60px 140px -40px rgba(0,0,0,.6); }
.book.is-open .book__card { opacity: 1; transform: none; }
.book__x { position: absolute; top: 14px; left: 14px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.9); transition: rotate .5s var(--ease); }
.book__x:hover { rotate: 90deg; }
.book__x svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.book__side { position: relative; min-height: 100%; overflow: hidden; }
.book__side > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.book__side::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,13,15,.85), transparent 60%); }
.book__side > div { position: absolute; bottom: 26px; right: 26px; left: 26px; z-index: 2; color: #fff; display: flex; align-items: center; gap: 14px; }
.book__logo { width: 50px; filter: drop-shadow(0 0 16px rgba(255,77,138,.6)); }
.book__side .en-caps { margin: 0; font-size: 11px; }
.book__form { padding: clamp(28px, 3.4vw, 48px); }
.book__form h3 { font-size: clamp(30px, 3vw, 42px); margin-bottom: 20px; }
.book__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.book__wide { grid-column: 1 / -1; }
.book__card--solo { grid-template-columns: 1fr; width: min(720px, 100%); }
.field select { height: 58px; padding: 22px 16px 4px 36px !important; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E4005B' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") !important;
  background-repeat: no-repeat !important; background-size: 16px !important; background-position: 12px 60% !important; }
.field input[type=date], .field input[type=time] { height: 58px; }
.field select, .field textarea { width: 100%; font: inherit; font-size: 16px; padding: 22px 16px 8px; border: 1px solid var(--line); background: var(--cream); color: var(--ink); border-radius: 2px; outline: none; resize: vertical; transition: border-color .3s, box-shadow .3s; }
.field select:focus, .field textarea:focus { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(228,0,91,.1); }
.field--sel > span, .field--date > span, .field textarea:focus + span, .field textarea:not(:placeholder-shown) + span { top: 5px; font-size: 11.5px; color: var(--rose); }
.field--date input { padding-top: 22px; }
.book__err { color: var(--rose); font-size: 14px; min-height: 22px; margin: 0 0 8px; }
.book__done { display: none; grid-column: 2; padding: clamp(28px, 3.4vw, 48px); text-align: center; align-content: center; justify-items: center; gap: 14px; }
.book.is-done .book__form { display: none; }
.book.is-done .book__done { display: grid; }
.book__done p { color: var(--ink-2); max-width: 380px; }
.book__check { width: 74px; fill: none; stroke: var(--rose); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.book__check circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: drawc 1s var(--ease) forwards; }
.book__check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: drawc .6s .7s var(--ease) forwards; }
@keyframes drawc { to { stroke-dashoffset: 0; } }

/* Poster viewer extras */
.poster__title { position: absolute; top: 22px; left: 50%; translate: -50% 0; z-index: 2; color: #fff; font-family: var(--f-head); font-size: 18px; margin: 0; opacity: 0; transition: opacity .5s .2s; }
.poster.is-open .poster__title { opacity: 1; }
.poster__spin { position: absolute; width: 38px; height: 38px; border: 2px solid rgba(255,255,255,.3); border-top-color: var(--rose-2); border-radius: 50%; animation: spin .8s linear infinite; opacity: 0; transition: opacity .3s; }
.poster.is-open.is-loading .poster__spin { opacity: 1; }
.poster.is-loading img { opacity: 0 !important; transform: translateY(30px) scale(.97) !important; }

/* Music toggle */
.music { position: fixed; bottom: 22px; right: 22px; z-index: 95; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 14px; border-radius: 30px;
  background: rgba(251,247,242,.9); box-shadow: 0 12px 30px -12px rgba(60,20,30,.4), inset 0 0 0 1px var(--line); font-family: var(--f-head); font-size: 13px; color: var(--ink-2);
  transform: translateY(120px); transition: transform .8s var(--ease); }
.music.is-ready { transform: none; }
.music__bars { display: flex; align-items: flex-end; gap: 2.5px; height: 16px; }
.music__bars i { width: 3px; height: 4px; background: var(--rose); border-radius: 2px; }
.music.is-on .music__bars i { animation: eq 1.1s ease-in-out infinite; }
.music.is-on .music__bars i:nth-child(2) { animation-delay: -.3s; } .music.is-on .music__bars i:nth-child(3) { animation-delay: -.6s; } .music.is-on .music__bars i:nth-child(4) { animation-delay: -.9s; }
@keyframes eq { 50% { height: 16px; } }
.music__hint { position: absolute; bottom: 56px; right: 0; white-space: nowrap; background: var(--ink); color: #fff; font-size: 12px; padding: 6px 12px; border-radius: 20px; opacity: 0; transform: translateY(6px); transition: all .5s var(--ease); pointer-events: none; }
.music.show-hint .music__hint { opacity: 1; transform: none; }

/* =========================================================
   WORKS
   ========================================================= */
.works { padding: clamp(80px, 10vw, 150px) 0; background: var(--paper); }
.works .sec-head { grid-template-columns: 1fr auto; align-items: end; }
.works .sec-head .sec-index { grid-column: 1 / -1; }
.works .sec-head .btn { margin: 0; }
.works__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(70px, 8vw, 120px); gap: clamp(10px, 1.4vw, 20px); padding: 0 var(--pad); max-width: 1560px; margin: 0 auto; }
.wk { position: relative; overflow: hidden; background: var(--sand); }
.wk img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter 1s; }
.wk:hover img { transform: scale(1.07); }
.wk::before, .wk::after { content: ''; position: absolute; z-index: 2; width: 30px; height: 30px; border: 0 solid #fff; transition: all .6s var(--ease); opacity: 0; }
.wk::before { top: 22px; right: 22px; border-top-width: 1.5px; border-right-width: 1.5px; }
.wk::after { bottom: 22px; left: 22px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.wk:hover::before { opacity: 1; top: 14px; right: 14px; }
.wk:hover::after { opacity: 1; bottom: 14px; left: 14px; }
.wk__cap { position: absolute; bottom: 0; inset-inline: 0; padding: 40px 20px 18px; z-index: 1; color: #fff; font-family: var(--f-head); font-size: 14px; background: linear-gradient(transparent, rgba(0,0,0,.6)); transform: translateY(100%); transition: transform .7s var(--ease); }
.wk:hover .wk__cap { transform: none; }
.wk--1 { grid-column: 8 / 13; grid-row: 1 / 5; border-radius: 999px 999px 4px 4px; }
.wk--2 { grid-column: 5 / 8; grid-row: 1 / 6; }
.wk--3 { grid-column: 1 / 5; grid-row: 1 / 4; }
.wk--4 { grid-column: 1 / 5; grid-row: 4 / 8; }
.wk--5 { grid-column: 8 / 10; grid-row: 5 / 8; }
.wk--6 { grid-column: 10 / 13; grid-row: 5 / 8; }
.wk--7 { grid-column: 5 / 8; grid-row: 6 / 8; }
/* Mosaic develops frame by frame: each photo opens from its centre, softly de-zooms and sharpens, in order */
.works__grid .wk img { clip-path: inset(14% 10% 14% 10% round 18px); transform: scale(1.16); opacity: 0; filter: blur(6px);
  transition: clip-path 1.7s var(--ease-io), transform 2.2s var(--ease), opacity 1.1s ease, filter 1.4s ease;
  transition-delay: calc(var(--i, 0) * 150ms); }
.works__grid.is-in .wk img { clip-path: inset(0 0 0 0 round 0); transform: none; opacity: 1; filter: none; }
.works__grid.is-in .wk:hover img { transform: scale(1.07); transition-delay: 0ms; }
.works__grid .wk { background: transparent; }

/* =========================================================
   QUOTE
   ========================================================= */
.quote { position: relative; min-height: 90vh; display: grid; place-items: center; overflow: hidden; color: #fff; text-align: center; padding: 100px var(--pad); }
.quote__bg { position: absolute; inset: -12% 0; }
.quote__bg img { width: 100%; height: 100%; object-fit: cover; }
.quote__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(18,13,15,.55), rgba(18,13,15,.85)); }
.quote__inner { position: relative; max-width: 1000px; }
.quote__mark { font-family: var(--f-it); font-size: 180px; line-height: .6; color: var(--rose); display: block; height: 70px; }
.quote__txt { font-family: var(--f-head); font-size: clamp(26px, 3.4vw, 50px); font-weight: 600; line-height: 1.55; }
.quote__by { color: rgba(255,255,255,.7); margin-top: 26px; }

/* =========================================================
   CONTACT / FOOTER
   ========================================================= */
.contact { padding: clamp(90px, 12vw, 180px) var(--pad) clamp(60px, 8vw, 110px); max-width: 1560px; margin: 0 auto; }
.contact__big { font-size: clamp(52px, 10vw, 170px); font-weight: 800; line-height: 1.5; word-spacing: .14em; margin-bottom: 70px; }
.contact__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 24px); }
.cc { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 18px; align-items: center; padding: 30px; border: 1px solid var(--line); background: var(--paper); overflow: hidden; isolation: isolate; transition: color .6s var(--ease), border-color .6s; }
.cc::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--rose); transform: translateY(101%); transition: transform .7s var(--ease); }
.cc:hover { color: #fff; border-color: var(--rose); }
.cc:hover::before { transform: none; }
.cc > svg { grid-row: span 2; width: 40px; height: 40px; fill: currentColor; color: var(--rose); transition: color .5s; }
.cc:hover > svg { color: #fff; }
.cc__k { font-size: 13px; opacity: .7; }
.cc b { font-family: var(--f-it); font-size: 30px; font-weight: 500; line-height: 1.2; text-align: right; }
.cc__go { grid-row: 1 / span 2; grid-column: 3; font-style: normal; font-size: 24px; transition: transform .5s var(--ease); }
.cc:hover .cc__go { transform: translateX(-8px); }

.footer { background: var(--night); color: rgba(255,255,255,.75); padding: 80px var(--pad) 30px; }
.footer__top { display: grid; justify-items: center; text-align: center; gap: 10px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer__logo { width: 90px; filter: drop-shadow(0 0 30px rgba(255,77,138,.45)); }
.footer__word { display: grid; justify-items: center; direction: ltr; }
.footer__word .tema-word { font-size: 46px; }
.footer__word small { font-size: 10px; letter-spacing: .6em; margin-right: -.6em; }
.footer__tag { margin-top: 10px; }
.footer__bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 26px; font-size: 13px; }
.footer__bot .en-caps { font-size: 10px; }
.footer__owner { font-size: 13px; opacity: .55; transition: opacity .3s, color .3s; }
.footer__owner:hover { opacity: 1; color: var(--rose-2); }

.wa-float { position: fixed; bottom: 22px; left: 22px; z-index: 95; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 16px 34px -10px rgba(37,211,102,.7); transform: scale(0); transition: transform .7s var(--ease); }
.wa-float.is-on { transform: scale(1); }
.wa-float svg { width: 28px; fill: currentColor; }
.wa-float::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: ring 2.2s infinite; }
@keyframes ring { to { transform: scale(1.6); opacity: 0; } }

/* Poster viewer */
.poster { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: 70px 20px 24px; pointer-events: none; }
.poster__bg { position: absolute; inset: 0; background: rgba(18,13,15,.9); opacity: 0; transition: opacity .5s; backdrop-filter: blur(6px); }
.poster img { position: relative; max-height: calc(100vh - 100px); max-width: min(92vw, 900px); box-shadow: 0 40px 100px rgba(0,0,0,.5); opacity: 0; transform: translateY(40px) scale(.96); transition: all .7s var(--ease); }
.poster__x { position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; border-radius: 50%; background: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .4s; }
.poster__x svg, .login__x svg, .lb__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.poster.is-open { pointer-events: auto; }
.poster.is-open .poster__bg, .poster.is-open .poster__x { opacity: 1; }
.poster.is-open img { opacity: 1; transform: none; }

/* =========================================================
   LOGIN MODAL
   ========================================================= */
.login { position: fixed; inset: 0; z-index: 170; display: grid; place-items: center; padding: 16px; pointer-events: none; visibility: hidden; transition: visibility 0s .8s; }
.login.is-open { pointer-events: auto; visibility: visible; transition: none; }
.login__backdrop { position: absolute; inset: 0; background: rgba(18,13,15,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .6s; }
.login.is-open .login__backdrop { opacity: 1; }
.login__card { position: relative; width: min(900px, 100%); display: grid; grid-template-columns: .95fr 1.05fr; background: var(--paper); color: var(--ink); overflow: hidden; border-radius: 4px;
  clip-path: inset(50% 0 50% 0); transition: clip-path .9s var(--ease-io); box-shadow: 0 60px 140px -40px rgba(0,0,0,.6); }
.login.is-open .login__card { clip-path: inset(0 0 0 0); }
.login__card > .vf { color: var(--rose); margin: 12px; z-index: 3; width: 22px; height: 22px; }
.login__x { position: absolute; top: 16px; left: 16px; z-index: 4; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.85); transition: rotate .5s var(--ease); }
.login__x:hover { rotate: 90deg; }
.login__media { position: relative; min-height: 520px; overflow: hidden; }
.login__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform 1.6s var(--ease); }
.login.is-open .login__media > img { transform: scale(1); }
.login__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,13,15,.85), rgba(18,13,15,.1) 60%); }
.login__media-txt { position: absolute; bottom: 30px; right: 30px; left: 30px; z-index: 2; color: #fff; display: flex; align-items: center; gap: 16px; }
.login__logo { width: 56px; filter: drop-shadow(0 0 18px rgba(255,77,138,.6)); }
.login__media-txt .en-caps { font-size: 11px; margin: 0; }
.login__form { padding: clamp(34px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.login__form > * { opacity: 0; transform: translateY(18px); transition: all .7s var(--ease); }
.login.is-open .login__form > * { opacity: 1; transform: none; }
.login.is-open .login__form > *:nth-child(2) { transition-delay: .35s; } .login.is-open .login__form > *:nth-child(3) { transition-delay: .4s; }
.login.is-open .login__form > *:nth-child(4) { transition-delay: .45s; } .login.is-open .login__form > *:nth-child(5) { transition-delay: .5s; }
.login.is-open .login__form > *:nth-child(6) { transition-delay: .55s; } .login.is-open .login__form > *:nth-child(n+7) { transition-delay: .6s; }
.login.is-open .login__form > *:first-child { transition-delay: .3s; }
.login__form h3 { font-size: clamp(34px, 3.4vw, 46px); margin-bottom: 8px; }
.login__sub { color: var(--muted); font-size: 15px; margin-bottom: 26px; }
.field { position: relative; display: block; margin-bottom: 18px; }
.field input { width: 100%; font: inherit; font-size: 16px; padding: 22px 16px 8px; border: 1px solid var(--line); background: var(--cream); color: var(--ink); border-radius: 2px; outline: none; transition: border-color .3s, box-shadow .3s; }
.field input:focus { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(228,0,91,.1); }
.field > span { position: absolute; right: 16px; top: 16px; color: var(--muted); font-size: 15px; pointer-events: none; transition: all .3s var(--ease); }
.field input:focus + span, .field input:not(:placeholder-shown) + span { top: 5px; font-size: 11.5px; color: var(--rose); }
.field__eye { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); }
.field__eye svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); margin-bottom: 10px; cursor: pointer; user-select: none; }
.check input { position: absolute; opacity: 0; }
.check i { width: 18px; height: 18px; border: 1.4px solid var(--line); border-radius: 3px; display: grid; place-items: center; transition: all .3s; }
.check input:checked + i { background: var(--rose); border-color: var(--rose); }
.check input:checked + i::after { content: ''; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -1px; }
.check input:focus-visible + i { box-shadow: 0 0 0 3px rgba(228,0,91,.25); }
.login__err { color: var(--rose); font-size: 14px; min-height: 24px; margin: 0 0 10px; }
.login__card.shake { animation: shake .5s; }
@keyframes shake { 20%,60% { translate: -10px 0; } 40%,80% { translate: 10px 0; } }
.login.is-success .login__form { animation: none; }
.login.is-success .btn--rose { background: #1b9e5a; }

/* =========================================================
   CURTAIN / TOAST / CURSOR
   ========================================================= */
.curtain { position: fixed; inset: 0; z-index: 300; pointer-events: none; display: grid; place-items: center; }
.curtain__panel { position: absolute; inset: 0; background: var(--rose); transform: translateY(100%); }
.curtain__panel--2 { background: var(--night); }
.curtain__logo { position: relative; width: 90px; opacity: 0; transform: scale(.8); filter: drop-shadow(0 0 30px rgba(255,77,138,.6)); }
.curtain.is-entering { pointer-events: auto; }
.curtain.is-entering .curtain__panel { animation: cIn .7s var(--ease-io) forwards; }
.curtain.is-entering .curtain__panel--2 { animation-delay: .1s; }
.curtain.is-entering .curtain__logo { animation: cLogo .5s .35s var(--ease) forwards; }
.curtain.is-covered .curtain__panel { transform: none; transition: none; }
.curtain.is-covered .curtain__logo { opacity: 1; transform: none; }
.curtain.is-leaving .curtain__panel { transform: translateY(-100%); transition: transform .9s .15s var(--ease-io); }
.curtain.is-leaving .curtain__panel--2 { transition-delay: 0s; }
.curtain.is-leaving .curtain__logo { opacity: 0; transition: opacity .3s; }
@keyframes cIn { from { transform: translateY(100%); } to { transform: none; } }
@keyframes cLogo { to { opacity: 1; transform: none; } }

.toasts { position: fixed; bottom: 26px; left: 50%; translate: -50% 0; z-index: 400; display: grid; gap: 10px; justify-items: center; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 40px; font-size: 14px; font-family: var(--f-head); opacity: 0; transform: translateY(20px); transition: all .5s var(--ease); box-shadow: 0 20px 40px -14px rgba(0,0,0,.5); }
.toast--ok { background: var(--rose); }
.toast.is-in { opacity: 1; transform: none; }

.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: text !important; }
.cursor { position: fixed; inset: 0; z-index: 500; pointer-events: none; opacity: 0; transition: opacity .3s; mix-blend-mode: normal; }
.cursor.is-on { opacity: 1; }
.cursor__dot { position: absolute; top: -3px; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }
.cursor__ring { position: absolute; top: -18px; left: -18px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(26,20,22,.45); transition: width .45s var(--ease), height .45s var(--ease), top .45s var(--ease), left .45s var(--ease), border-radius .45s var(--ease), border-color .3s, background .3s; }
.cursor__ring i { position: absolute; width: 12px; height: 12px; border: 0 solid #fff; opacity: 0; transition: opacity .3s; }
.cursor__ring i:nth-child(1) { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.cursor__ring i:nth-child(2) { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.cursor__ring i:nth-child(3) { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.cursor__ring i:nth-child(4) { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.cursor.is-link .cursor__ring { width: 56px; height: 56px; top: -28px; left: -28px; border-color: var(--rose); background: rgba(228,0,91,.08); }
.cursor.is-view .cursor__ring { width: 96px; height: 96px; top: -48px; left: -48px; border-radius: 0; border-color: transparent; background: rgba(18,13,15,.18); backdrop-filter: blur(2px); }
.cursor.is-view .cursor__ring i { opacity: 1; }
.cursor.is-view .cursor__dot { background: #fff; }
.cursor.is-down .cursor__ring { scale: .85; }
.cursor__label { position: absolute; top: 0; left: 0; font-family: var(--f-head); font-size: 13px; color: #fff; white-space: nowrap; }
.cursor__label:not(:empty) { translate: -50% 18px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .pk-grid { grid-template-columns: 1fr; max-width: 640px; }
  .pay__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --nav-h: 70px; }
  body { font-size: 16px; }
  .hero { grid-template-columns: 1fr; padding-top: calc(var(--nav-h) + 20px); gap: 40px; }
  .hero__visual { height: 70vh; max-height: 620px; order: -1; }
  .hero__arch { width: min(84vw, 440px); }
  .hero__arch-outline { width: min(84vw, 440px); translate: 14px 14px; }
  .hero__badge { left: 0; top: 2%; }
  .hero__polaroid { right: 0; }
  .hero__tags { justify-content: flex-start; flex-wrap: wrap; }
  .hero__scroll { display: none; }
  .about__grid { grid-template-columns: 1fr; }
  .about__media { height: 120vw; max-height: 640px; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc { min-height: 340px; }
  .chap { grid-template-columns: 1fr; gap: 26px; }
  .chap:nth-child(even) .chap__txt { order: 0; }
  .chap__media { height: 110vw; max-height: 520px; }
  .cimg--c { display: none; }
  .cimg--a { width: 72%; }
  .cimg--b { width: 48%; }
  .book__card { grid-template-columns: 1fr; }
  .book__side { min-height: 140px; }
  .book__done { grid-column: 1; }
  .film__inner { grid-template-columns: 1fr; }
  .works__grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 22vw; }
  .wk--1 { grid-column: 1 / 7; grid-row: 1 / 5; }
  .wk--2 { grid-column: 1 / 4; grid-row: 5 / 9; }
  .wk--3 { grid-column: 4 / 7; grid-row: 5 / 7; }
  .wk--4 { grid-column: 4 / 7; grid-row: 7 / 9; }
  .wk--5 { grid-column: 1 / 3; grid-row: 9 / 12; }
  .wk--6 { grid-column: 3 / 7; grid-row: 9 / 12; }
  .wk--7 { display: none; }
  .wk__cap { transform: none; }
  .works .sec-head { grid-template-columns: 1fr; }
  .contact__cards { grid-template-columns: 1fr; }
  .login__card { grid-template-columns: 1fr; max-height: 94vh; overflow-y: auto; }
  .login__media { min-height: 170px; }
  .intro__hud { left: 30px; right: 30px; }
  .intro__hud--bot .en-caps:nth-child(n+3) { display: none; }
}
@media (max-width: 560px) {
  .nav__gallery span { display: none; }
  .nav__gallery { padding: 0; width: 42px; height: 42px; justify-content: center; }
  .stats { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .stat span { font-size: 12px; }
  .hero__cta .btn { flex: 1 1 100%; justify-content: center; }
  .cc { padding: 22px; }
  .cc b { font-size: 24px; }
  .about .script { padding-left: 46px; }
  .about .script .heart { width: 34px; }
  .pk__stats { grid-template-columns: 1fr 1fr; }
  .hero__polaroid { width: 110px; }
  .vf__meta { display: none; }
  .book__grid { grid-template-columns: 1fr; }
  .music__label { display: none; }
  .music { padding: 0 15px; }
}
/* ----- Curtain stays closed (logo breathing) until the next page is ready ----- */
.curtain.is-covered .curtain__logo { animation: cBreathe 1.6s ease-in-out infinite; }
@keyframes cBreathe { 50% { transform: scale(1.06); filter: drop-shadow(0 0 44px rgba(255,77,138,.85)); } }
.curtain__panel { will-change: transform; }

/* ----- Calm in-page glide: the arriving section's index line draws in ----- */
.is-arrived .sec-index i { animation: arriveLine 1.2s var(--ease) both; transform-origin: right; }
@keyframes arriveLine { from { transform: scaleX(0); } }
.is-arrived .sec-index span { animation: arriveNum .9s var(--ease) both; }
@keyframes arriveNum { from { opacity: 0; transform: translateY(10px); } }

/* ----- Booking: taken day ----- */
.field.is-taken input { border-color: var(--rose) !important; background: #fdeef3 !important; }
.book__taken { grid-column: 1 / -1; margin: -10px 0 12px; font-size: 14px; color: var(--rose); font-weight: 600; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease), opacity .4s; }
.book__taken.is-on { max-height: 40px; opacity: 1; }
.book__form button[type=submit]:disabled { opacity: .5; cursor: not-allowed; }

/* ----- Packages: no image / owner manage card ----- */
.pk__img--none { height: 34px; }
.pk__img--none::after { display: none; }
.pk-manage { display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; min-height: 260px; padding: 30px;
  border: 1.5px dashed rgba(228,0,91,.45); border-radius: 4px; color: var(--ink-2); transition: background .4s, border-color .4s, transform .5s var(--ease); }
.pk-manage span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--rose); color: #fff; font-size: 26px; }
.pk-manage b { font-family: var(--f-head); font-size: 20px; color: var(--ink); }
.pk-manage small { font-size: 13px; max-width: 240px; }
.pk-manage:hover { background: rgba(228,0,91,.05); border-color: var(--rose); transform: translateY(-6px); }

/* ----- Owner dock + control panel ----- */
.owner-dock { position: fixed; bottom: 96px; left: 22px; z-index: 96; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 30px;
  background: var(--ink); color: #fff; font-family: var(--f-head); font-size: 13.5px; box-shadow: 0 14px 34px -12px rgba(0,0,0,.5);
  transform: translateY(160px); transition: transform .8s var(--ease), background .4s; }
.owner-dock.is-in { transform: none; }
.owner-dock:hover { background: var(--rose); }
.owner-dock svg, .img-swap svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.is-editing .owner-dock { background: var(--rose); }
.owner-panel { position: fixed; inset: 0; z-index: 170; visibility: hidden; transition: visibility 0s .7s; }
.owner-panel.is-open { visibility: visible; transition: none; }
.owner-panel__bg { position: absolute; inset: 0; background: rgba(18,13,15,.45); opacity: 0; transition: opacity .5s; }
.owner-panel.is-open .owner-panel__bg { opacity: 1; }
.owner-panel__in { position: absolute; top: 0; bottom: 0; left: 0; width: min(420px, 100%); background: var(--paper); padding: 26px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px;
  transform: translateX(-102%); transition: transform .7s var(--ease); box-shadow: 30px 0 80px -40px rgba(0,0,0,.4); }
.owner-panel.is-open .owner-panel__in { transform: none; }
.owner-panel header { display: flex; justify-content: space-between; align-items: flex-start; }
.owner-panel header h3 { font-size: 26px; }
.owner-panel header .en-caps { color: var(--rose); margin: 0; font-size: 10.5px; }
.owner-panel__x { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.owner-panel__x svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.owner-panel .btn { white-space: normal; text-align: center; font-size: 14px; }
.op-studio { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 16px 18px; border-radius: 4px; background: var(--rose); color: #fff;
  box-shadow: 0 14px 40px -12px rgba(228,0,91,.55); transition: background .4s, transform .5s var(--ease); }
.op-studio b { font-family: var(--f-head); font-size: 16px; line-height: 1.5; }
.op-studio small { font-size: 12.5px; line-height: 1.6; opacity: .85; }
.op-studio:hover { background: var(--ink); transform: translateY(-3px); }
.op-part { padding: 16px; border-radius: 6px; background: var(--cream); opacity: 0; transform: translateX(-24px); transition: opacity .6s, transform .7s var(--ease); transition-delay: calc(var(--i) * 70ms + 150ms); }
.owner-panel.is-open .op-part { opacity: 1; transform: none; }
.op-part h4 { font-family: var(--f-head); font-size: 16px; margin: 0 0 4px; }
.op-hint { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin: 0 0 10px; }
.op-field { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.op-field input, .op-field textarea { font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); resize: vertical; }
.op-field input:focus, .op-field textarea:focus { outline: none; border-color: var(--rose); }
.op-row { display: flex; flex-wrap: wrap; gap: 6px; }
.op-btn { font: inherit; font-size: 12.5px; padding: 7px 13px; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background .3s, color .3s; }
.op-btn:hover { background: var(--ink); color: #fff; }
.op-btn--wide { width: 100%; }
.op-order { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 5px; }
.op-order li { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--paper); border-radius: 4px; font-size: 14px; animation: rcIn .4s var(--ease); }
.op-order li span { flex: 1; }
.op-order button { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
.op-order button:hover:not(:disabled) { background: var(--rose); color: #fff; }
.op-order button:disabled { opacity: .3; }

/* "Change photo" chip that follows the pointer while editing */
.img-swap { position: fixed; z-index: 120; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 30px; background: var(--rose); color: #fff;
  font-family: var(--f-head); font-size: 13px; box-shadow: 0 10px 30px -8px rgba(228,0,91,.6); animation: rcIn .35s var(--ease); }
body.is-editing main img[data-img] { outline: 1.5px dashed rgba(228,0,91,.35); outline-offset: -6px; }

/* Photo picker: old ↔ new, confirm before anything changes */
.imgpick { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; visibility: hidden; pointer-events: none; transition: visibility 0s .5s; }
.imgpick.is-open { visibility: visible; pointer-events: auto; transition: none; }
.imgpick__bg { position: absolute; inset: 0; background: rgba(18,13,15,.7); opacity: 0; transition: opacity .4s; }
.imgpick.is-open .imgpick__bg { opacity: 1; }
.imgpick__card { position: relative; width: min(820px, 100%); max-height: 94vh; overflow: auto; background: var(--paper); border-radius: 6px; padding: clamp(22px, 3vw, 36px);
  opacity: 0; transform: translateY(30px) scale(.97); transition: opacity .5s, transform .6s var(--ease); }
.imgpick.is-open .imgpick__card { opacity: 1; transform: none; }
.imgpick__x { position: absolute; top: 14px; left: 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.imgpick__x svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.imgpick__title { font-size: 26px; margin-bottom: 16px; }
.imgpick__cmp { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.imgpick__cmp > i { font-style: normal; font-size: 26px; color: var(--rose); }
.imgpick__cmp figure { margin: 0; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.imgpick__now, .imgpick__new { aspect-ratio: 4 / 3; border-radius: 4px; background: var(--sand) center / contain no-repeat; }
.imgpick__new { display: grid; place-items: center; text-align: center; border: 1.5px dashed rgba(228,0,91,.5); cursor: pointer; transition: background-color .3s; }
.imgpick__new:hover { background-color: var(--blush); }
.imgpick__new b { font-family: var(--f-head); font-size: 14px; color: var(--rose); padding: 10px; }
.imgpick__new.has { border-style: solid; border-color: var(--rose); }
.imgpick__new.has b { display: none; }
.imgpick__note { font-size: 13px; color: var(--ink-2); margin: 14px 0; }
.imgpick__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.imgpick__acts .btn { padding: 12px 22px; }
.imgpick__acts .btn:disabled { opacity: .45; pointer-events: none; }
@media (max-width: 600px) { .imgpick__cmp { grid-template-columns: 1fr; } .imgpick__cmp > i { transform: rotate(-90deg); justify-self: center; } }

/* ----- Couples' words ----- */
.comments { padding: clamp(80px, 10vw, 140px) 0; background: linear-gradient(180deg, var(--cream), var(--paper)); overflow: hidden; }
.cm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(14px, 1.6vw, 22px); padding: 0 var(--pad); max-width: 1400px; margin: 0 auto 50px; }
.cm { position: relative; margin: 0; padding: 30px 28px 24px; background: var(--paper); border-radius: 6px; box-shadow: 0 30px 60px -40px rgba(80,30,40,.35), inset 0 0 0 1px var(--line);
  opacity: 0; transform: translateY(46px) rotate(calc((var(--i) - 1) * .6deg)); transition: opacity 1s ease, transform 1.3s var(--ease); transition-delay: calc(var(--i) * 120ms); }
.cm-list.is-in .cm { opacity: 1; transform: none; }
.cm-list.is-in .cm:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -40px rgba(228,0,91,.4), inset 0 0 0 1px rgba(228,0,91,.25); transition-delay: 0ms; }
.cm__q { position: absolute; top: -6px; right: 22px; font-family: var(--f-it); font-size: 90px; line-height: 1; color: var(--rose); opacity: .25; }
.cm blockquote { margin: 0 0 18px; font-size: 17px; line-height: 1.9; color: var(--ink); }
.cm figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.cm figcaption b { font-family: var(--f-head); font-size: 15px; color: var(--rose); }
.cm figcaption small { color: var(--muted); font-size: 12px; }
.cm-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); font-family: var(--f-head); }
.cm-form { max-width: 900px; margin: 0 auto; padding: 0 var(--pad); display: grid; justify-items: center; gap: 6px; }
.cm-form__row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 14px; width: 100%; }
.cm-form .field input, .cm-form .field textarea { width: 100%; }
.cm-form__err { color: var(--rose); font-size: 14px; min-height: 22px; margin: 0; }
.cm-form__note { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.cm-form.shake { animation: shake .5s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.cm-form.is-sent .btn { animation: sent 1.2s var(--ease); }
@keyframes sent { 40% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(228,0,91,.15); } }
@media (max-width: 700px) { .cm-form__row { grid-template-columns: 1fr; } }
body.is-editing [data-edit] { outline: 1.5px dashed rgba(228,0,91,.45); outline-offset: 6px; border-radius: 3px; cursor: text; transition: outline-color .3s, background .3s; }
body.is-editing [data-edit]:hover { outline-color: var(--rose); background: rgba(228,0,91,.04); }
body.is-editing [data-edit]:focus { outline: 2px solid var(--rose); background: rgba(255,255,255,.7); }
body.is-editing .rv, body.is-editing [data-split] .ln__in { opacity: 1 !important; transform: none !important; }
body.is-editing .wa-float { display: none; }

/* Reduced motion: keep the elegant fades, drop continuous / large movement */
@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
  .light-rays i, .hero__slides img.is-active, .film__sprockets, .hero__badge svg, .film__ring, .plus, .about__stamp, .intro__ring .spin, .wa-float::after { animation: none !important; }
  .rv { transform: none; }
}

/* Background video upload bar (survives page changes) */
.upill { position: fixed; left: 50%; bottom: 76px; z-index: 9000; transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 14px; width: min(540px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 16px;
  background: rgba(20,16,18,.92); color: #fff; font-size: 13px; box-shadow: 0 12px 34px rgba(0,0,0,.28); backdrop-filter: blur(10px);
  transition: opacity .4s ease, transform .4s ease; }
.upill.is-in { opacity: 1; transform: translate(-50%, 0); }
.upill__thumb { flex: none; width: 64px; height: 44px; border-radius: 8px; background: #3a2f33 center/cover no-repeat; }
.upill__body { flex: 1; min-width: 0; }
.upill__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.upill__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: .8; }
.upill__txt { flex: none; font-weight: 600; }
.upill__bar { display: block; height: 6px; border-radius: 6px; background: rgba(255,255,255,.15); overflow: hidden; }
.upill__bar b { display: block; height: 100%; width: 0; border-radius: 6px; background: #d9a3ad; transition: width .3s ease; }
/* Confirm dialog */
.ask { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 16px; background: rgba(15,10,12,.55);
  backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s ease; }
.ask.is-in { opacity: 1; }
.ask__card { width: min(380px, 100%); padding: 26px 24px 20px; border-radius: 18px; background: #fff; color: #1a1416; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.3); transform: scale(.94); transition: transform .25s ease; }
.ask.is-in .ask__card { transform: none; }
.ask__title { margin: 0 0 8px; font-size: 18px; }
.ask__text { margin: 0 0 20px; font-size: 14px; opacity: .7; }
.ask__btns { display: flex; gap: 10px; }
.ask__btns button { flex: 1; padding: 11px; border: 0; border-radius: 12px; font: inherit; font-weight: 600; cursor: pointer; }
.ask__yes { background: #d6245b; color: #fff; }
.ask__no { background: #f1eaec; color: #1a1416; }