/* ==========================================================================
   assets/css/premium.css — ThePrivateTheatre single-page design system
   --------------------------------------------------------------------------
   Ported from the approved tpt.html art direction, then scoped.

   WHY THE SCOPE MATTERS
   includes/header.new.php loads this file for EVERY white-label brand
   (Maya Darbar, BingeNplex), not just ThePrivateTheatre. The design's class
   names are deliberately generic -- .header, .btn, .footer, .section, .media,
   .hero, .nav -- which collide with Bootstrap and with css/all.min.css. So
   every rule here is prefixed with `.ptx`, and `.ptx` is placed on <body>.
   Because it IS the body, the original `html` / `body` / `:root` rules collapse
   to bare `.ptx` instead of `.ptx html`.

   @keyframes names were left untouched (a prefixed name would break every
   `animation:` shorthand that references it).

   FIXES APPLIED TO THE ORIGINAL DESIGN
   1. `--line` was used by ~40 rules (borders, card edges, the value-grid hair
      line, the accordion rule) but was only ever defined as a TAILWIND COLOR,
      never as a CSS custom property. Every one of those rules was silently
      dropping its border. It is now defined here.
   2. The two `@media` blocks that redefined `--gutter` / `--header-h` on
      `:root` are re-pointed at `.ptx`, otherwise the 768px/1280px gutter steps
      never applied.
   3. `::selection` and the `::-webkit-scrollbar` rules were emitted as
      descendants (`.ptx ::-webkit-scrollbar`), so they styled nested boxes
      instead of the page. Re-attached to `.ptx` itself.
   4. The preloader honours `prefers-reduced-motion` and is force-dismissed by
      premium.js, so a slow or blocked script can never trap the visitor on a
      splash screen.
   ========================================================================== */

/* Alpine's x-cloak must hide pre-hydration flashes. Scoped to .ptx because it
   is a global attribute selector otherwise. */
.ptx [x-cloak]{ display:none !important; }

/* ------------------------------------------------------------ tokens --- */
.ptx{
  --ease: cubic-bezier(.22,.61,.36,1);
  --shell: 1360px;
  --gutter: 24px;
  --header-h: 76px;

  /* Was missing from the design: referenced by every hairline border in the
     stylesheet but only ever defined as a Tailwind color token. */
  --line: rgba(245,243,238,0.08);
}
@media (min-width:768px){.ptx{ --gutter: 40px; } }
@media (min-width:1280px){.ptx{ --gutter: 56px; --header-h: 88px; } }

.ptx *{ -webkit-tap-highlight-color: transparent; }

/* ---- scoped preflight reset -------------------------------------------
   The design (tpt.html) was authored against the Tailwind CDN, whose
   preflight zeroes every element margin and lets headings/paragraphs
   inherit font-weight and colour. This page also loads Bootstrap,
   css/all.min.css and css/custom.css, all of which load AFTER
   premium.css and set those same elements globally:

     custom.css  h1..h6 { margin:0; font-family:Epilogue;
                          font-weight:600; line-height:1.2em;
                          color:#1e1e1e }
     custom.css  p      { line-height:1.6em; margin-bottom:1.5em }
     Bootstrap   h1..h6 { margin-top:0; margin-bottom:.5rem }
     Bootstrap   p      { margin-top:0; margin-bottom:1rem }

   Every one of those is (0,0,1) and loses to nothing in premium.css,
   because premium.css declared no margin on a bare heading and no margin
   on `.value__text` / `.tech__desc` and friends -- the rules just copied
   the design, which never needed them. Result on the live page: a stray
   8px-24px gap under EVERY heading (the "empty line" after each section
   title) and a light-coloured underline gap under every card paragraph.

   This restores the baseline the design actually renders against.
   `.ptx :is(...)` is (0,1,1), so it beats the (0,0,1) legacy rules but
   still loses to every real design rule, which is at least (0,2,0). */
.ptx :is(h1,h2,h3,h4,h5,h6){ margin:0; font-weight:inherit; color:inherit; }
.ptx :is(p,ul,ol,dl,dd,figure,blockquote){ margin:0; }

/* ---- `.reveal` must stay a block ----------------------------------------
   css/custom.css ships an UNSCOPED rule that this page loads:

     .reveal { position:relative; display:-webkit-inline-box;
               display:-ms-inline-flexbox; display:inline-flex;
               visibility:visible; overflow:visible; opacity:1 }

   It was written for the old marketing templates' scroll-reveal wrapper, and
   it is (0,1,0) -- it beats the user-agent `h2{display:block}`. premium.css
   reuses the `.reveal` class name for its fade-up animation but only ever
   declared opacity/transform on it, never `display`. So every
   `class="eyebrow reveal"` and `class="h2 reveal"` on this page became an
   INLINE-FLEX box:

     - the eyebrow <p> and the <h2> that follows it are inline-level, so they
       share a line instead of stacking -- the heading appeared glued to the
       right of "Occasions", "How It Works", "Locations", "Guest Notes", ...
     - an inline-flex box wraps its text as an atomic unit and collapses
       whitespace, so the `<br class="hidden md:block">` split headings could
       not break at all, and the two lines ran together with no space
       ("2 studios.8Private rooms.").

   The design's own `.reveal` only animates, so the fix is to restore the
   element's natural display inside the animation rule. `.ptx .reveal` is
   (0,2,0) and `.ptx :is(h2).reveal` is (0,2,1), so both beat the legacy
   (0,1,0) rule; every .reveal element on this page is a block-level tag
   (p, h1, h2, a, article, div, figure, li), so `display:block` is correct
   for all of them. */
.ptx .reveal{ display:block; }
.ptx :is(h1,h2,h3).reveal{ display:block; }

/* Same defence for the design's own heading/eyebrow classes. Any future
   `class="h2 reveal"` is covered by the two rules above, but stating the
   display here too means a heading that is inline-flex for any other reason
   cannot silently swallow its `<br>` and run two lines together again.
   `.ptx .h2` is (0,2,0), which beats the legacy (0,1,0) inline-flex rule. */
.ptx .h1,.ptx .h2,.ptx .h3,.ptx .eyebrow{ display:block; }

/* ---- page scrollbar ----------------------------------------------------
   `::-webkit-scrollbar` is scoped to its subject element, and `.ptx` is
   <body>. But `.ptx{ overflow-x:hidden }` propagates the body's overflow
   to the viewport, so the scrollbar a visitor actually scrolls is the one
   belonging to <html> -- a `.ptx::-webkit-scrollbar` rule cannot paint it.
   Meanwhile css/custom.css ships its OWN unscoped page-level rules:

     ::-webkit-scrollbar       { width:7px; background-color:#eaeef1 }
     ::-webkit-scrollbar-track { background-color:#eaeef1;
                                 border-left:1px solid #eaeef1 }
     ::-webkit-scrollbar-thumb { background:#f9d67b }

   --secondary-color is #eaeef1, i.e. near-white. That is the pale scrollbar
   and the stray white 1px line down the side of the page. premium.css
   overrode width and the two background colours but never the track's
   `border-left` or the scrollbar's own background, so both survived.

   `html:has(.ptx)` is the subject that owns the viewport scrollbar and is
   still brand-safe (this sheet is served to every white-label brand; only
   ThePrivateTheatre ever puts `.ptx` on the body). The `.ptx` selectors are
   kept so a nested scroller still gets the design's treatment. */
html:has(.ptx){ scrollbar-color:#222 #080808; scrollbar-width:auto; }
html:has(.ptx)::-webkit-scrollbar,
.ptx::-webkit-scrollbar{ width:10px; height:10px; background:#080808; }
html:has(.ptx)::-webkit-scrollbar-track,
.ptx::-webkit-scrollbar-track{ background:#080808; border:0; }
html:has(.ptx)::-webkit-scrollbar-thumb,
.ptx::-webkit-scrollbar-thumb{ background:#222; border-radius:0; border:0; }
html:has(.ptx)::-webkit-scrollbar-thumb:hover,
.ptx::-webkit-scrollbar-thumb:hover{ background:#333; }
html:has(.ptx)::-webkit-scrollbar-corner,
.ptx::-webkit-scrollbar-corner{ background:#080808; }

.ptx{
  overflow-x:hidden;
  background:#080808; color:#F5F3EE;
  font-family:'Inter',system-ui,sans-serif;
  font-weight:400; line-height:1.6;
  letter-spacing:-0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ptx::selection{ background:#C9A961; color:#080808; }

.ptx .shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.ptx .shell--narrow{ max-width:880px; }

/* ---------- PRELOADER ---------- */
.ptx .preloader{
  position:fixed; inset:0; z-index:9999;
  background:#080808; display:grid; place-items:center;
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
  overflow:hidden;
}
.ptx .preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.ptx .preloader__glow{
  position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,169,97,.10) 0%, transparent 65%);
  filter:blur(20px);
  animation:preGlow 3.2s ease-in-out infinite;
}
@keyframes preGlow{
  0%,100%{ transform:scale(1); opacity:.6; }
  50%{ transform:scale(1.16); opacity:1; }
}
.ptx .preloader__scan{
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,169,97,.55), transparent);
  animation:preScan 2.4s var(--ease) infinite;
}
@keyframes preScan{
  0%{ top:12%; opacity:0; }
  20%{ opacity:1; }
  80%{ opacity:1; }
  100%{ top:88%; opacity:0; }
}
.ptx .preloader__inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:34px; z-index:2; }
.ptx .preloader__mark{ text-align:center; line-height:1; }
.ptx .preloader__mark span{
  display:block; font-size:11px; letter-spacing:.46em;
  text-transform:uppercase; color:#96938C; font-weight:500;
}
.ptx .preloader__mark-thin{
  margin-top:12px; font-family:'Instrument Serif',serif;
  font-size:clamp(32px,6vw,44px); letter-spacing:.16em; color:#F5F3EE;
}
.ptx .preloader__bar{ width:200px; height:1px; background:rgba(245,243,238,.1); position:relative; overflow:hidden; }
.ptx .preloader__bar i{
  position:absolute; inset:0; background:linear-gradient(90deg,#A98B45,#C9A961,#D4C4A0);
  transform-origin:left; transform:scaleX(0); transition:transform .2s linear;
}
.ptx .preloader__pct{
  font-size:11px; letter-spacing:.34em; color:#96938C;
  font-variant-numeric:tabular-nums;
  font-family:'Instrument Serif',serif;
}
.ptx .preloader__pct b{ font-weight:400; color:#C9A961; font-size:14px; }

/* ---------- TYPOGRAPHY ---------- */
.ptx .eyebrow{
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:#C9A961; font-weight:500; margin-bottom:24px;
}
.ptx .h1{
  font-family:'Instrument Serif',serif; font-weight:400;
  font-size:clamp(2.75rem,7vw,5.5rem); line-height:1.02;
  letter-spacing:-0.02em;
}
.ptx .h2{
  font-family:'Instrument Serif',serif; font-weight:400;
  font-size:clamp(2rem,4.2vw,3.5rem); line-height:1.08;
  letter-spacing:-0.015em;
}
.ptx .h2 em,.ptx .h1 em{ font-style:italic; color:#C9A961; }
.ptx .h3{
  font-family:'Instrument Serif',serif; font-weight:400;
  font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.15;
}
.ptx .lede{ font-size:clamp(1rem,1.3vw,1.125rem); color:#D8D5CD; line-height:1.7; max-width:60ch; }
.ptx .center{ margin-inline:auto; text-align:center; }

/* ---------- REVEAL ---------- */
.ptx .reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease) var(--d,0s), transform .9s var(--ease) var(--d,0s); }
.ptx .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){.ptx .reveal{ opacity:1; transform:none; transition:none; }.ptx *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- HEADER ---------- */
.ptx .header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.ptx .header.is-solid{
  background:rgba(8,8,8,.82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:rgba(245,243,238,.06);
}
.ptx .header__row{ display:flex; align-items:center; justify-content:space-between; gap:32px; width:100%; }
.ptx .logo{ display:flex; flex-direction:column; line-height:1; text-decoration:none; }
.ptx .logo__top{ font-size:9px; letter-spacing:.42em; color:#96938C; font-weight:500; }
.ptx .logo__bottom{ font-family:'Instrument Serif',serif; font-size:19px; letter-spacing:.18em; color:#F5F3EE; margin-top:3px; }
.ptx .nav{ display:none; align-items:center; gap:36px; }
@media (min-width:1024px){.ptx .nav{ display:flex; } }
.ptx .nav a{
  font-size:13px; color:#D8D5CD; text-decoration:none;
  letter-spacing:.02em; position:relative; padding:6px 0;
  transition:color .3s var(--ease);
}
.ptx .nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:#C9A961; transition:width .4s var(--ease);
}
.ptx .nav a:hover{ color:#F5F3EE; }
.ptx .nav a:hover::after{ width:100%; }
.ptx .header__cta{ display:none; }
@media (min-width:1024px){.ptx .header__cta{ display:inline-flex; } }

.ptx .menu-btn{
  display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:1px solid rgba(245,243,238,.12); border-radius:999px;
  color:#F5F3EE; cursor:pointer;
  transition:border-color .3s var(--ease);
}
.ptx .menu-btn:hover{ border-color:#C9A961; }
@media (min-width:1024px){.ptx .menu-btn{ display:none; } }

/* ---------- BUTTONS ---------- */
.ptx .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 28px; border-radius:2px;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:all .35s var(--ease); white-space:nowrap;
  font-family:inherit;
}
.ptx .btn-lg{ height:56px; padding:0 36px; font-size:12.5px; }
.ptx .btn-sm{ height:42px; padding:0 20px; font-size:11px; }
.ptx .btn-primary{ background:#C9A961; color:#080808; }
.ptx .btn-primary:hover{ background:#D4C4A0; transform:translateY(-1px); }
.ptx .btn-primary:active{ transform:translateY(0); }
.ptx .btn-outline{ background:transparent; color:#F5F3EE; border-color:rgba(245,243,238,.22); }
.ptx .btn-outline:hover{ border-color:#F5F3EE; background:rgba(245,243,238,.04); }
.ptx .btn:focus-visible{ outline:2px solid #C9A961; outline-offset:3px; }
.ptx .btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

.ptx .link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:#D8D5CD; text-decoration:none; padding:8px 0;
  border-bottom:1px solid rgba(245,243,238,.14);
  transition:all .3s var(--ease);
}
.ptx .link-arrow:hover{ color:#C9A961; border-color:#C9A961; gap:16px; }

/* ---------- MEDIA ---------- */
.ptx .media{ position:relative; overflow:hidden; background:#171717; }
.ptx .media img{ width:100%; height:100%; object-fit:cover; display:block; }
.ptx .media-zoom img{ transition:transform 1.2s var(--ease); }
.ptx .media-zoom:hover img{ transform:scale(1.05); }

/* ============================================
   HERO
   ============================================ */
.ptx .hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden; isolation:isolate; background:#080808;
  /* css/custom.css ships a `.hero{ padding:155px 0 0; margin-top:50px }` rule for
     the legacy marketing hero. At (0,1,0) it lost every property we do declare but
     still won padding and margin, stacking ~205px of dead space on top of the
     design's own hero padding. Declare both at (0,2,0) so the design wins. */
  padding:0; margin:0;
}
/* Likewise `.hero::after` in custom.css paints a decorative leaf texture over the
   hero photograph; the design has no such overlay. */
.ptx .hero::after{ content:none; }
.ptx .hero__media{
  position:absolute; inset:-6%; z-index:0;
  will-change:transform;
  transform:translate3d(0,0,0) scale(1.06);
}
.ptx .hero__img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.12);
  animation:heroZoom 16s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.14); } to{ transform:scale(1.02); } }

.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 95% at 18% 82%,
      rgba(8,8,8,.94) 0%, rgba(8,8,8,.6) 38%,
      rgba(8,8,8,.15) 68%, rgba(8,8,8,.55) 100%),
    linear-gradient(180deg,
      rgba(8,8,8,.8) 0%, rgba(8,8,8,0) 32%,
      rgba(8,8,8,0) 58%, rgba(8,8,8,.98) 100%);
}
.ptx .hero__grain{
  position:absolute; inset:0; z-index:2;
  pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grainShift 1.2s steps(3) infinite;
}
@keyframes grainShift{
  0%  { transform:translate(0,0); }
  33% { transform:translate(-2%,1%); }
  66% { transform:translate(1%,-2%); }
  100%{ transform:translate(0,0); }
}
.ptx .hero__spotlight{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(
    460px circle at var(--mx,60%) var(--my,40%),
    rgba(201,169,97,.10) 0%, rgba(201,169,97,.04) 35%, transparent 65%);
  transition:background .25s linear;
}
.hero__letterbox-top,
.ptx .hero__letterbox-bottom{
  position:absolute; left:0; right:0; height:52px; z-index:4;
  pointer-events:none;
}
.ptx .hero__letterbox-top{ top:0; background:linear-gradient(180deg, rgba(8,8,8,.9), rgba(8,8,8,0)); }
.ptx .hero__letterbox-bottom{ bottom:0; background:linear-gradient(0deg, rgba(8,8,8,.9), rgba(8,8,8,0)); }

.ptx .hero__content{
  position:relative; z-index:6;
  padding-top:calc(var(--header-h) + 40px);
  padding-bottom:clamp(90px,13vh,150px);
  width:100%;
}
.ptx .hero__eyebrow{
  display:inline-flex; align-items:center; gap:16px;
  margin-bottom:clamp(22px,3vh,34px);
  animation:fadeUp .9s var(--ease) .2s both;
}
.ptx .hero__eyebrow .eyebrow{ margin:0; }
.ptx .hero__eyebrow-line{
  display:block; width:56px; height:1px;
  background:linear-gradient(90deg, transparent, #C9A961);
  transform-origin:left;
  animation:lineDraw 1.1s var(--ease) .55s both;
}
@keyframes lineDraw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

.hero__title{ margin:0 0 clamp(20px,3vh,32px); max-width:18ch; }
.hero__title .word{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.12em; margin-bottom:-.12em;
}
.ptx .hero__title .word > span{
  display:inline-block; transform:translateY(110%);
  animation:wordRise 1.15s cubic-bezier(.22,.61,.36,1) var(--wd,0s) forwards;
}
@keyframes wordRise{ to{ transform:translateY(0); } }

.hero__sub{
  color:#D8D5CD; font-size:clamp(15px,1.35vw,17px);
  line-height:1.65; max-width:52ch;
  margin:0 0 clamp(32px,4vh,44px);
  animation:fadeUp .9s var(--ease) 1.15s both;
}
.ptx .hero__actions{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-bottom:clamp(40px,5vh,64px);
  animation:fadeUp .9s var(--ease) 1.3s both;
}
.ptx .hero__actions .btn-primary{ position:relative; overflow:hidden; isolation:isolate; }
.ptx .hero__actions .btn-primary::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform:translateX(-130%);
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
  z-index:1;
}
.ptx .hero__actions .btn-primary:hover::before{ transform:translateX(130%); }
.ptx .hero__actions .btn-primary > *{ position:relative; z-index:2; }

.ptx .hero__facts{
  display:flex; flex-wrap:wrap; gap:16px 40px; list-style:none;
  padding:24px 0 0; border-top:1px solid rgba(245,243,238,.1);
  font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:#96938C;
  animation:fadeUp .9s var(--ease) 1.45s both;
}
.ptx .hero__facts li{ display:flex; align-items:baseline; gap:10px; }
.ptx .hero__facts span{
  font-family:'Instrument Serif', serif;
  font-size:19px; letter-spacing:.01em;
  color:#F5F3EE; font-weight:400;
}

.ptx .hero__badge{
  position:absolute;
  top:calc(var(--header-h) + 20px); right:var(--gutter);
  display:none; align-items:center; gap:10px;
  padding:8px 16px 8px 12px;
  border:1px solid rgba(201,169,97,.3);
  background:rgba(8,8,8,.55);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:#C9A961;
  z-index:7; animation:fadeIn 1s var(--ease) 1.7s both;
}
@media (min-width:768px){.ptx .hero__badge{ display:inline-flex; } }
.ptx .hero__badge-dot{
  width:6px; height:6px; border-radius:50%; background:#C9A961;
  box-shadow:0 0 0 0 rgba(201,169,97,.55);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(201,169,97,.55); }
  70% { box-shadow:0 0 0 10px rgba(201,169,97,0); }
  100%{ box-shadow:0 0 0 0 rgba(201,169,97,0); }
}

.ptx .hero__side{
  position:absolute; right:var(--gutter); top:50%;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-size:10.5px; letter-spacing:.42em;
  text-transform:uppercase; color:#96938C;
  display:none; z-index:7;
  animation:fadeIn 1.2s var(--ease) 1.6s both;
}
@media (min-width:1024px){.ptx .hero__side{ display:block; } }

.ptx .hero__scroll{
  position:absolute; bottom:56px; right:var(--gutter);
  display:none; flex-direction:column; align-items:center; gap:14px;
  color:#96938C; text-decoration:none;
  font-size:9.5px; letter-spacing:.34em;
  text-transform:uppercase; z-index:7;
  animation:fadeIn 1s var(--ease) 1.85s both;
}
@media (min-width:1024px){.ptx .hero__scroll{ display:flex; } }
.ptx .hero__scroll-line{
  display:block; width:1px; height:56px;
  background:linear-gradient(to bottom, rgba(201,169,97,0), #C9A961);
  overflow:hidden; position:relative;
}
.ptx .hero__scroll-line::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent, #C9A961, transparent);
  animation:scrollDot 2.4s var(--ease) infinite;
}
@keyframes scrollDot{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(100%); } }

.hero__marquee{
  position:absolute; bottom:0; left:0; right:0; z-index:5;
  overflow:hidden; border-top:1px solid rgba(245,243,238,.06);
  background:rgba(8,8,8,.65);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:11px 0; pointer-events:none;
}
.ptx .hero__marquee-track{
  display:flex; gap:64px; white-space:nowrap; width:max-content;
  animation:marquee 44s linear infinite;
  font-size:10px; letter-spacing:.36em;
  text-transform:uppercase; color:#96938C;
}
.ptx .hero__marquee-track > span{ display:inline-flex; align-items:center; gap:64px; }
.ptx .hero__marquee-track i{ display:inline-block; width:4px; height:4px; border-radius:50%; background:#C9A961; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media (max-width:1023px){.ptx .hero__content{ padding-bottom:clamp(80px,11vh,120px); }.ptx .hero__title{ max-width:14ch; }.ptx .hero__facts{ gap:14px 32px; }
}
@media (max-width:767px){.ptx .hero__marquee{ display:none; }.ptx .hero__letterbox-top,.ptx .hero__letterbox-bottom{ height:36px; }.ptx .hero__content{ padding-bottom:96px; }.ptx .hero__title{ max-width:100%; }.ptx .hero__sub{ margin-bottom:32px; }.ptx .hero__actions{ margin-bottom:40px; gap:10px; }.ptx .hero__facts{ gap:12px 26px; padding-top:20px; }.ptx .hero__facts li{ font-size:10.5px; letter-spacing:.16em; }.ptx .hero__facts span{ font-size:17px; }
}
@media (max-width:639px){.ptx .hero{ min-height:100svh; }.ptx .hero__content{ padding-top:calc(var(--header-h) + 24px); padding-bottom:88px; }.ptx .hero__eyebrow{ margin-bottom:20px; gap:12px; }.ptx .hero__eyebrow-line{ width:36px; }.ptx .hero__actions{ flex-direction:column; align-items:stretch; }.ptx .hero__actions .btn{ width:100%; }
}
@media (max-height:640px) and (orientation:landscape){.ptx .hero{ min-height:auto; padding:110px 0 80px; }.ptx .hero__content{ padding-top:0; padding-bottom:40px; }.ptx .hero__scroll{ display:none; }
}
@media (prefers-reduced-motion: reduce){.ptx .hero__img,.ptx .hero__grain,.ptx .hero__marquee-track,.ptx .hero__scroll-line::after,.ptx .hero__badge-dot{ animation:none !important; }.ptx .hero__title .word > span{ transform:none !important; }.ptx .hero__eyebrow,.ptx .hero__sub,.ptx .hero__actions,.ptx .hero__facts,.ptx .hero__side,.ptx .hero__scroll,.ptx .hero__badge{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}

/* ---------- SECTIONS ---------- */
.ptx .section{ padding-block:clamp(80px,10vw,140px); position:relative; }
.ptx .section--tight{ padding-block:clamp(64px,7vw,100px); }
.ptx .section--alt{ background:#101010; }
.ptx .section--flush{ padding-block:clamp(60px,8vw,120px); }

.ptx .sec-head{ margin-bottom:clamp(40px,5vw,72px); max-width:780px; }
.ptx .sec-head--split{ display:flex; flex-direction:column; gap:24px; max-width:none; align-items:flex-start; }
@media (min-width:768px){.ptx .sec-head--split{ flex-direction:row; justify-content:space-between; align-items:flex-end; }
}

/* ============================================
   THE DIFFERENCE
   ============================================ */
/* The design draws the four cards as one 1px hairline mesh: the grid paints
   `--line` and a 1px gap lets it show through between the cards. On a near-black
   page that hairline is the only thing separating them, and at 8% white it
   reads as a stray light line running across the section -- plus a border box
   around the whole block, which is the line that showed up under the heading.
   The cards are already told apart on hover (.value:hover lifts the surface and
   .value::after draws the gold top rule), so the resting state gets no border
   at all -- not the outer box and not the 1px seams between the cards. With
   `gap:0` the four 28px/32px/36px paddings still separate the copy, and
   `.value{ background:#080808 }` sits flush on the section's own #080808, so
   the grid disappears into the page and the cards read as one open row. */
.ptx .value-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  background:transparent;
  border:0;
}
@media (min-width:640px){.ptx .value-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){.ptx .value-grid{ grid-template-columns:repeat(4,1fr); } }

.ptx .value{
  position:relative;
  padding:44px 28px;
  background:#080808;
  overflow:hidden;
  transition:background .6s var(--ease);
  cursor:default;
  display:flex;
  flex-direction:column;
}
@media (min-width:768px){.ptx .value{ padding:52px 32px; } }
@media (min-width:1024px){.ptx .value{ padding:56px 36px; min-height:400px; } }

.ptx .value:hover{ background:#0d0d0d; }

.ptx .value::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 0%,
    rgba(201,169,97,.10) 0%,
    rgba(201,169,97,.02) 40%,
    transparent 70%);
  opacity:0; transition:opacity .6s var(--ease);
  pointer-events:none;
}
.ptx .value:hover::before{ opacity:1; }

.ptx .value::after{
  content:''; position:absolute;
  top:0; left:0; height:1px; width:0;
  background:linear-gradient(90deg, #C9A961, transparent);
  transition:width .8s var(--ease);
  z-index:2;
}
.ptx .value:hover::after{ width:100%; }

/* The design's corner brackets (`.value__corner`, a 1px gold L at the top right
   of each card that drew itself in on hover) are gone. On a borderless row of
   cards they read as a stray bracket rather than as an accent, and they were
   the last piece of "border" left on these cards. The hover cues that actually
   carry the design are still here: `.value:hover` lifts the surface, `.value::after`
   draws the gold top rule and `.value__num` / `.value__line` shift. */

.ptx .value__num{
  display:block;
  font-family:'Instrument Serif', serif;
  font-size:clamp(2.75rem,5vw,3.75rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(201,169,97,.5);
  margin-bottom:36px;
  transition:all .7s var(--ease);
  font-weight:400;
  letter-spacing:.01em;
}
@media (min-width:1024px){.ptx .value__num{ margin-bottom:auto; } }
.ptx .value:hover .value__num{
  color:rgba(201,169,97,.05);
  -webkit-text-stroke-color:#C9A961;
  letter-spacing:.05em;
  transform:translateX(3px);
}

.ptx .value__line{
  display:block;
  width:36px; height:1px;
  background:#C9A961;
  margin-bottom:22px;
  transform-origin:left center;
  transition:transform .7s var(--ease);
}
.ptx .value:hover .value__line{ transform:scaleX(2.4); }

.ptx .value__title{
  font-family:'Instrument Serif', serif;
  font-size:clamp(1.6rem,2.1vw,1.95rem);
  font-weight:400;
  color:#F5F3EE;
  margin-bottom:14px;
  line-height:1.15;
  letter-spacing:-0.005em;
}

.ptx .value__text{
  font-size:14.5px;
  color:#96938C;
  line-height:1.7;
  transition:color .5s var(--ease);
  max-width:34ch;
}
.ptx .value:hover .value__text{ color:#D8D5CD; }

@media (max-width:639px){.ptx .value{ padding:36px 24px; }.ptx .value__num{ margin-bottom:28px; }
}

/* ============================================
   SIGNATURE ROOM — interactive gallery
   ============================================ */
.ptx .feature{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  background:#0c0c0c;
  border:1px solid var(--line);
  overflow:hidden;
}
@media (min-width:1024px){.ptx .feature{ grid-template-columns:1.2fr 1fr; } }

.ptx .feature__media{
  position:relative;
  min-height:400px;
  overflow:hidden;
  background:#111;
}
@media (min-width:768px){.ptx .feature__media{ min-height:500px; } }
@media (min-width:1024px){.ptx .feature__media{ min-height:680px; } }

.ptx .feature__media-inner{
  position:absolute;
  inset:-4%;
  width:108%;
  height:108%;
  will-change:transform;
}
.ptx .feature__media-inner img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  opacity:0;
  transition:opacity 1s var(--ease);
}
.ptx .feature__media-inner img.is-active{ opacity:1; }

.ptx .feature__media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(8,8,8,.35) 0%, transparent 25%,
    transparent 68%, rgba(8,8,8,.65) 100%);
  pointer-events:none;
  z-index:2;
}

.ptx .feature__tag{
  position:absolute; top:24px; left:24px;
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(8,8,8,.7);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:9px 16px;
  font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; color:#C9A961;
  border:1px solid rgba(201,169,97,.3);
  z-index:3;
}
.ptx .feature__tag::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:#C9A961;
  animation:pulse 2.4s var(--ease) infinite;
}

.ptx .feature__thumbs{
  position:absolute; bottom:22px; left:22px;
  display:flex; gap:8px; z-index:4;
}
.ptx .feature__thumb{
  width:52px; height:40px; padding:0;
  border:1px solid rgba(245,243,238,.18);
  background:rgba(8,8,8,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  overflow:hidden; cursor:pointer;
  transition:all .4s var(--ease);
  position:relative;
}
.ptx .feature__thumb img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  opacity:.5;
  transition:opacity .4s var(--ease);
}
.ptx .feature__thumb:hover{ border-color:rgba(245,243,238,.4); }
.ptx .feature__thumb:hover img{ opacity:.9; }
.ptx .feature__thumb.is-active{ border-color:#C9A961; width:64px; }
.ptx .feature__thumb.is-active img{ opacity:1; }
.ptx .feature__thumb:focus-visible{ outline:2px solid #C9A961; outline-offset:3px; }

.ptx .feature__panel{
  padding:44px 28px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  background:#0c0c0c;
}
@media (min-width:768px){.ptx .feature__panel{ padding:56px 44px; } }
@media (min-width:1024px){.ptx .feature__panel{ padding:72px 56px; } }

.ptx .feature__panel::before{
  content:'';
  position:absolute;
  top:-80px; right:-80px;
  width:260px; height:260px;
  background:radial-gradient(circle, rgba(201,169,97,.09) 0%, transparent 65%);
  pointer-events:none;
  z-index:0;
}
.ptx .feature__panel > *{ position:relative; z-index:1; }

.ptx .feature__title{
  margin-bottom:22px;
  transition:letter-spacing .8s var(--ease);
}
.ptx .feature:hover .feature__title{ letter-spacing:-0.01em; }

.ptx .feature__lede{
  color:#D8D5CD;
  font-size:15.5px;
  line-height:1.7;
  margin-bottom:40px;
  max-width:44ch;
}

.ptx .spec-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 24px;
  border-top:1px solid var(--line);
  margin:0 0 44px;
  padding:0;
}
.ptx .spec-list > div{
  padding:18px 0;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:padding-left .4s var(--ease);
}
.ptx .spec-list > div::after{
  content:'';
  position:absolute;
  left:0; bottom:-1px;
  height:1px; width:0;
  background:#C9A961;
  transition:width .8s var(--ease);
}
.ptx .spec-list > div:hover{ padding-left:6px; }
.ptx .spec-list > div:hover::after{ width:100%; }
.ptx .spec-list dt{
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#96938C;
  margin-bottom:8px;
  transition:color .4s var(--ease);
}
.ptx .spec-list > div:hover dt{ color:#C9A961; }
.ptx .spec-list dd{ font-size:14.5px; color:#F5F3EE; }

.ptx .feature__foot{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:28px;
}
/* The price and the CTA stack share this strip. `.price` is an inline-flex row
   whose `<small>` is a separate flex item, so any squeeze from a long room
   name used to drop "/ 2 hours" onto its own line and shove the CTA buttons
   out of shape. `.price` may therefore not shrink, and it holds one line of
   its own. The two buttons are stacked inside it -- see `.feature__cta`
   below. */
.ptx .feature__foot .price{ flex:0 0 auto; white-space:nowrap; }
@media (min-width:640px){.ptx .feature__foot{
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:flex-end;
    justify-content:space-between;
  }
}

/* "Starting from" and the amount are ONE line, as the design shows them: the
   label sits on the baseline to the LEFT of the price instead of stacked above
   it. `.price` is the row; `.price__val` stays an inline-flex item so its
   `<small>` ("/ 2 hours") keeps riding on the same baseline as the figure. */
.ptx .feature__foot .price{
  display:flex;
  align-items:baseline;
  flex-wrap:nowrap;
  gap:10px;
}
.ptx .price__from{
  display:inline;
  margin-bottom:0;
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#96938C;
  white-space:nowrap;
}
.ptx .price__val{
  font-family:'Instrument Serif', serif;
  font-size:clamp(1.75rem,2.6vw,2.25rem);
  color:#F5F3EE;
  display:inline-flex;
  align-items:baseline;
  flex-wrap:nowrap;
  gap:6px;
  line-height:1;
  white-space:nowrap;
}
.ptx .price__val small{
  font-family:'Inter', sans-serif;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#96938C;
  font-weight:500;
}

/* "View Theatre" and "Book Now" are stacked, one per row, at EVERY width.
   Side by side they were squeezed into an unreadable pair -- the two labels
   are long and the panel column is narrow, so on live they sat crushed on a
   single line. `flex-direction:column` puts Book Now directly under View
   Theatre; `flex-wrap:nowrap` keeps that deliberate (one button per row)
   rather than letting a squeeze reintroduce an unpredictable wrap, and
   `align-items:stretch` makes both buttons the same width so the pair reads
   as one block instead of two ragged edges. */
.ptx .feature__cta{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  flex-wrap:nowrap;
}
.ptx .feature__cta .btn{ white-space:nowrap; flex:0 0 auto; width:100%; }

.ptx .feature__cta .btn-primary{ position:relative; overflow:hidden; isolation:isolate; }
.ptx .feature__cta .btn-primary::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform:translateX(-130%);
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
  z-index:1;
}
.ptx .feature__cta .btn-primary:hover::before{ transform:translateX(130%); }
.ptx .feature__cta .btn-primary > *{ position:relative; z-index:2; }

@media (max-width:767px){.ptx .feature__media{ min-height:340px; }.ptx .feature__thumbs{ bottom:16px; left:16px; gap:6px; }.ptx .feature__thumb{ width:44px; height:34px; }.ptx .feature__thumb.is-active{ width:56px; }.ptx .feature__tag{ top:16px; left:16px; padding:7px 12px; font-size:9.5px; }.ptx .feature__panel{ padding:36px 22px; }.ptx .spec-list{ gap:0 16px; }.ptx .feature__cta{ width:100%; flex-wrap:nowrap; }.ptx .feature__cta .btn{ flex:0 0 auto; width:100%; min-width:0; }
}

/* ============================================
   OCCASIONS
   ============================================ */
.ptx .exp-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:640px){.ptx .exp-grid{ grid-template-columns:1fr 1fr; gap:16px; }
}
@media (min-width:1024px){.ptx .exp-grid{
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:300px;
    gap:16px;
  }.ptx .exp--tall{ grid-row:1 / 3; }.ptx .exp--wide{ grid-column:2 / 4; }
}

.ptx .exp{
  position:relative;
  display:block;
  text-decoration:none;
  overflow:hidden;
  background:#171717;
  min-height:290px;
  color:#F5F3EE;
  isolation:isolate;
}

.ptx .exp .media{
  position:absolute; inset:0;
  transform:scale(1.01);
  transition:transform 1.4s var(--ease);
}
.ptx .exp:hover .media{ transform:scale(1.06); }

.ptx .exp .media img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform 1.6s var(--ease);
}
.ptx .exp:hover .media img{ transform:scale(1.05); }

.ptx .exp::before{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(8,8,8,.05) 0%, rgba(8,8,8,.15) 40%,
    rgba(8,8,8,.75) 75%, rgba(8,8,8,.95) 100%);
  transition:background .6s var(--ease);
}
.ptx .exp:hover::before{
  background:linear-gradient(180deg,
    rgba(8,8,8,.15) 0%, rgba(8,8,8,.35) 40%,
    rgba(8,8,8,.85) 75%, rgba(8,8,8,.98) 100%);
}

.ptx .exp::after{
  content:'';
  position:absolute; inset:0; z-index:3;
  border:1px solid transparent;
  transition:border-color .5s var(--ease);
  pointer-events:none;
}
.ptx .exp:hover::after{ border-color:rgba(201,169,97,.55); }

.ptx .exp__num{
  position:absolute;
  top:20px; right:20px;
  z-index:4;
  font-family:'Instrument Serif', serif;
  font-size:13px;
  letter-spacing:.2em;
  color:rgba(245,243,238,.55);
  transition:color .4s var(--ease), transform .5s var(--ease);
}
.ptx .exp:hover .exp__num{ color:#C9A961; transform:translateY(-2px); }

.ptx .exp__arrow{
  position:absolute;
  top:20px; left:20px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  background:rgba(8,8,8,.7);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(201,169,97,.35);
  color:#C9A961;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(-6px);
  transition:all .5s var(--ease);
}
.ptx .exp:hover .exp__arrow{
  opacity:1;
  transform:translateY(0);
}
.ptx .exp__arrow svg{ transition:transform .4s var(--ease); }
.ptx .exp:hover .exp__arrow svg{ transform:translateX(3px); }

.ptx .exp__body{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:28px 24px 26px;
  z-index:5;
  transition:padding-bottom .5s var(--ease);
}
@media (min-width:1024px){.ptx .exp__body{ padding:32px 28px 28px; }
}
.ptx .exp:hover .exp__body{ padding-bottom:32px; }

.ptx .exp__title{
  font-family:'Instrument Serif', serif;
  font-size:clamp(1.4rem,1.9vw,1.65rem);
  line-height:1.15;
  margin:0 0 8px;
  position:relative;
  display:inline-block;
  transition:color .4s var(--ease);
}
.ptx .exp__title::after{
  content:'';
  position:absolute;
  left:0; bottom:-4px;
  width:0; height:1px;
  background:#C9A961;
  transition:width .6s var(--ease);
}
.ptx .exp:hover .exp__title{ color:#C9A961; }
.ptx .exp:hover .exp__title::after{ width:100%; }

.ptx .exp__text{
  font-size:13.5px;
  color:#D8D5CD;
  line-height:1.55;
  max-width:34ch;
  margin:0;
  transition:color .4s var(--ease);
}
.ptx .exp:hover .exp__text{ color:#F5F3EE; }

@media (max-width:639px){.ptx .exp{ min-height:260px; }.ptx .exp__body{ padding:24px 20px 22px; }.ptx .exp__num{ top:16px; right:16px; }.ptx .exp__arrow{ top:16px; left:16px; padding:6px 12px; font-size:9.5px; }
}

/* ============================================
   HOW IT WORKS — premium timeline
   ============================================ */
.ptx .hiw{
  position:relative;
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
@media (min-width:900px){.ptx .hiw{ grid-template-columns:repeat(5,1fr); gap:0; }.ptx .hiw::before{
    content:'';
    position:absolute;
    top:27px; left:10%; right:10%;
    height:1px;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(201,169,97,.45) 12%,
      rgba(201,169,97,.45) 88%,
      transparent 100%);
    z-index:0;
  }
}

.ptx .hiw__item{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:20px;
  align-items:start;
  padding:0 0 32px;
}
.ptx .hiw__item:last-child{ padding-bottom:0; }
.ptx .hiw__item:not(:last-child)::after{
  content:'';
  position:absolute;
  left:26.5px; top:54px; bottom:0;
  width:1px;
  background:linear-gradient(180deg, rgba(201,169,97,.35), rgba(201,169,97,.06));
}
@media (min-width:900px){.ptx .hiw__item{
    display:block;
    text-align:center;
    padding:0 16px;
  }.ptx .hiw__item:not(:last-child)::after{ display:none; }
}

.ptx .hiw__node{
  width:54px; height:54px;
  border-radius:50%;
  display:grid; place-items:center;
  background:#080808;
  border:1px solid rgba(201,169,97,.4);
  font-family:'Instrument Serif',serif;
  font-size:17px;
  color:#C9A961;
  letter-spacing:.04em;
  transition:all .5s var(--ease);
  position:relative;
}
.ptx .hiw__node::before{
  content:'';
  position:absolute; inset:-6px;
  border-radius:50%;
  border:1px solid rgba(201,169,97,0);
  transition:all .6s var(--ease);
}
.ptx .hiw__item:hover .hiw__node{
  border-color:#C9A961;
  background:rgba(201,169,97,.10);
  transform:translateY(-3px);
  box-shadow:0 12px 32px -12px rgba(201,169,97,.5);
}
.ptx .hiw__item:hover .hiw__node::before{
  border-color:rgba(201,169,97,.22);
  inset:-10px;
}
@media (min-width:900px){.ptx .hiw__node{ margin:0 auto 26px; }
}

.ptx .hiw__title{
  font-family:'Instrument Serif',serif;
  font-size:clamp(1.15rem,1.5vw,1.35rem);
  color:#F5F3EE;
  margin:0 0 8px;
  line-height:1.2;
  font-weight:400;
  letter-spacing:-0.005em;
}
.ptx .hiw__desc{
  font-size:13.5px;
  color:#96938C;
  line-height:1.6;
  margin:0;
  max-width:26ch;
  transition:color .4s var(--ease);
}
@media (min-width:900px){.ptx .hiw__desc{ margin-inline:auto; }
}
.ptx .hiw__item:hover .hiw__desc{ color:#D8D5CD; }

.ptx .hiw__meta{
  display:inline-block;
  margin-top:14px;
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#C9A961;
  opacity:0;
  transform:translateY(-4px);
  transition:all .5s var(--ease);
}
.ptx .hiw__item:hover .hiw__meta{ opacity:1; transform:translateY(0); }

@media (max-width:899px){.ptx .hiw__meta{ opacity:1; transform:none; margin-top:10px; }
}

/* ============================================
   LOCATIONS — premium cards
   ============================================ */
.ptx .loc-list{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
@media (min-width:1024px){.ptx .loc-list{ gap:32px; }
}

.ptx .loc-card{
  display:grid;
  grid-template-columns:1fr;
  background:#0c0c0c;
  border:1px solid var(--line);
  overflow:hidden;
  transition:border-color .5s var(--ease);
}
.ptx .loc-card:hover{ border-color:rgba(201,169,97,.28); }
@media (min-width:1024px){.ptx .loc-card{ grid-template-columns:minmax(340px, 0.85fr) 1.15fr; }
}

.ptx .loc-card__media{
  position:relative;
  min-height:280px;
  overflow:hidden;
  background:#111;
  isolation:isolate;
}
@media (min-width:768px){.ptx .loc-card__media{ min-height:340px; } }
@media (min-width:1024px){.ptx .loc-card__media{ min-height:100%; } }

.ptx .loc-card__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.6s var(--ease);
}
.ptx .loc-card:hover .loc-card__media img{ transform:scale(1.05); }

.ptx .loc-card__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(8,8,8,.25) 0%,
    rgba(8,8,8,.15) 35%,
    rgba(8,8,8,.85) 100%);
}
@media (min-width:1024px){.ptx .loc-card__scrim{
    background:linear-gradient(180deg,
      rgba(8,8,8,.2) 0%,
      rgba(8,8,8,.1) 30%,
      rgba(8,8,8,.92) 100%);
  }
}

.ptx .loc-card__badge{
  position:absolute; top:20px; left:20px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:rgba(8,8,8,.7);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(201,169,97,.3);
  font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:#C9A961;
  z-index:2;
}

.ptx .loc-card__head{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:26px 24px;
  z-index:2;
}
@media (min-width:768px){.ptx .loc-card__head{ padding:32px; } }

.ptx .loc-card__name{
  font-family:'Instrument Serif',serif;
  font-size:clamp(1.85rem,3.2vw,2.6rem);
  line-height:1.05;
  margin:0 0 8px;
  color:#F5F3EE;
  letter-spacing:-0.01em;
}
.ptx .loc-card__rooms{
  font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:#D8D5CD;
  margin:0;
  display:inline-flex; align-items:center; gap:10px;
}
.ptx .loc-card__rooms i{
  width:4px; height:4px; border-radius:50%;
  background:#C9A961; display:inline-block;
}

.ptx .loc-card__body{
  padding:28px 24px 32px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
@media (min-width:768px){.ptx .loc-card__body{ padding:36px 32px 40px; } }
@media (min-width:1024px){.ptx .loc-card__body{ padding:44px 40px; } }

.ptx .loc-card__info{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
@media (min-width:640px){.ptx .loc-card__info{ grid-template-columns:1.5fr 1fr; gap:24px; }
}

.ptx .loc-info__label{
  display:block;
  font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:#96938C;
  margin-bottom:8px;
}
.ptx .loc-info__value{
  font-size:14.5px;
  line-height:1.6;
  color:#D8D5CD;
  margin:0;
}
.ptx .loc-info__value a{
  color:#F5F3EE;
  text-decoration:none;
  transition:color .3s var(--ease);
  border-bottom:1px solid rgba(245,243,238,.14);
  padding-bottom:2px;
}
.ptx .loc-info__value a:hover{ color:#C9A961; border-color:#C9A961; }

.ptx .loc-card__cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.ptx .loc-card__cta .btn{ flex:1 1 auto; min-width:0; }
@media (min-width:640px){.ptx .loc-card__cta .btn{ flex:0 0 auto; }
}

.ptx .loc-card__pods-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:4px;
}
.ptx .loc-card__pods-title{
  font-size:10.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:#C9A961;
  margin:0;
}
.ptx .loc-card__pods-count{
  font-family:'Instrument Serif',serif;
  font-size:14px;
  color:#96938C;
  letter-spacing:.04em;
}

/* --- POD GRID --- */
.ptx .pod-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
@media (min-width:560px){.ptx .pod-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1280px){.ptx .pod-grid{ grid-template-columns:1fr 1fr; } }

.ptx .pod{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px 18px 16px;
  background:#101010;
  border:1px solid var(--line);
  overflow:hidden;
  transition:border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
}
.ptx .pod::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, #C9A961, transparent 70%);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .7s var(--ease);
}
.ptx .pod:hover{
  border-color:rgba(201,169,97,.35);
  background:#131313;
  transform:translateY(-2px);
}
.ptx .pod:hover::before{ transform:scaleX(1); }

.ptx .pod__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.ptx .pod__idx{
  font-family:'Instrument Serif',serif;
  font-size:12px;
  letter-spacing:.18em;
  color:#C9A961;
  line-height:1;
  padding-top:3px;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.ptx .pod__name{
  font-family:'Instrument Serif',serif;
  font-size:1.15rem;
  line-height:1.25;
  color:#F5F3EE;
  margin:0;
  flex:1;
  font-weight:400;
  letter-spacing:-0.005em;
}
.ptx .pod__meta{
  font-size:12.5px;
  color:#96938C;
  line-height:1.55;
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.ptx .pod__meta i{
  width:3px; height:3px; border-radius:50%;
  background:#3a3a3a; display:inline-block;
}

.ptx .pod__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.ptx .pod__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:38px;
  padding:0 10px;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  font-weight:500;
  border:1px solid rgba(245,243,238,.14);
  color:#D8D5CD;
  background:transparent;
  transition:all .35s var(--ease);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ptx .pod__link svg{ flex-shrink:0; opacity:.75; transition:opacity .3s var(--ease); }
.ptx .pod__link:hover{
  border-color:#F5F3EE;
  color:#F5F3EE;
  background:rgba(245,243,238,.04);
}
.ptx .pod__link:hover svg{ opacity:1; }

.ptx .pod__link--gold{
  border-color:rgba(201,169,97,.35);
  color:#C9A961;
}
.ptx .pod__link--gold svg{ color:#C9A961; opacity:1; }
.ptx .pod__link--gold:hover{
  border-color:#C9A961;
  color:#080808;
  background:#C9A961;
}
.ptx .pod__link--gold:hover svg{ color:#080808; }

@media (max-width:400px){.ptx .pod__link span{ display:none; }.ptx .pod__link{ gap:0; }.ptx .pod__link::after{
    content:attr(data-short);
    font-size:10.5px;
    letter-spacing:.12em;
  }
}

/* ============================================
   CELEBRATIONS
   ============================================ */
.ptx .celebrate{ display:grid; grid-template-columns:1fr; gap:56px; align-items:center; }
@media (min-width:1024px){.ptx .celebrate{ grid-template-columns:1fr 1fr; gap:80px; } }
.ptx .tick-list{ list-style:none; margin:32px 0 40px; padding:0; display:grid; gap:14px; }
.ptx .tick-list li{ position:relative; padding-left:28px; font-size:15px; color:#D8D5CD; }
.ptx .tick-list li::before{
  content:''; position:absolute; left:0; top:9px; width:14px; height:8px;
  border-left:1.5px solid #C9A961; border-bottom:1.5px solid #C9A961;
  transform:rotate(-45deg);
}
.ptx .celebrate__media{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ptx .celebrate__img{ aspect-ratio:3/4; }
.ptx .celebrate__img--b{ margin-top:48px; }

/* ============================================
   TECH
   ============================================ */
.ptx .tech{ display:grid; grid-template-columns:1fr; gap:48px; align-items:center; }
@media (min-width:1024px){.ptx .tech{ grid-template-columns:1fr 1fr; gap:80px; } }
.ptx .tech__media{ aspect-ratio:4/3; }
.ptx .tech__grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px 24px; margin-top:40px; }
.ptx .tech__grid h3{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:#C9A961; margin:0 0 10px; }
.ptx .tech__grid p{ font-size:14px; color:#96938C; line-height:1.65; margin:0; }

/* ============================================
   QUOTES
   ============================================ */
.ptx .quotes{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--line); }
@media (min-width:768px){.ptx .quotes{ grid-template-columns:repeat(3,1fr); } }
.ptx .quote{ padding:40px 0; border-bottom:1px solid var(--line); margin:0; }
@media (min-width:768px){.ptx .quote{ padding:48px 32px; border-right:1px solid var(--line); border-bottom:none; }.ptx .quote:last-child{ border-right:none; } }
.ptx .quote blockquote{ font-family:'Instrument Serif',serif; font-size:1.35rem; line-height:1.45; color:#F5F3EE; margin:0 0 24px; }
.ptx .quote figcaption{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#96938C; }
.ptx .quote figcaption span{ color:#C9A961; }

/* ============================================
   ACCORDION
   ============================================ */
.ptx .accordion{ border-top:1px solid var(--line); }
.ptx .acc-item{ border-bottom:1px solid var(--line); }
.ptx .acc-btn{
  width:100%; background:none; border:none; color:#F5F3EE;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:28px 0; text-align:left; cursor:pointer;
  font-family:'Instrument Serif',serif; font-size:1.25rem; line-height:1.3;
  transition:color .3s var(--ease);
}
.ptx .acc-btn:hover{ color:#C9A961; }
.ptx .acc-btn:focus-visible{ outline:2px solid #C9A961; outline-offset:4px; }
.ptx .acc-icon{ position:relative; width:16px; height:16px; flex-shrink:0; }
.ptx .acc-icon::before,.ptx .acc-icon::after{
  content:''; position:absolute; left:50%; top:50%;
  background:#C9A961; transition:transform .35s var(--ease);
}
.ptx .acc-icon::before{ width:14px; height:1.5px; transform:translate(-50%,-50%); }
.ptx .acc-icon::after{ width:1.5px; height:14px; transform:translate(-50%,-50%); }
.ptx .acc-icon.is-open::after{ transform:translate(-50%,-50%) rotate(90deg); }

.ptx .acc-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease), opacity .4s var(--ease);
  opacity:0;
}
.ptx .acc-panel.is-open{ grid-template-rows:1fr; opacity:1; }
.ptx .acc-panel > div{ overflow:hidden; }
.ptx .acc-panel p{ color:#96938C; font-size:15px; line-height:1.75; max-width:70ch; margin:0; padding-bottom:28px; }

/* ============================================
   FINAL CTA
   ============================================ */
.ptx .cta-final{ position:relative; overflow:hidden; padding-block:clamp(100px,14vw,180px); text-align:center; }
.ptx .cta-final__media{ position:absolute; inset:0; z-index:0; }
.ptx .cta-final__scrim{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(8,8,8,.75), rgba(8,8,8,.92)); }
.ptx .cta-final__inner{ position:relative; z-index:2; }
.ptx .cta-final__actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:40px; }

/* ============================================
   FOOTER
   ============================================ */
.ptx .footer{ background:#080808; border-top:1px solid var(--line); padding-top:80px; }
.ptx .footer__grid{ display:grid; grid-template-columns:1fr; gap:48px; padding-bottom:64px; }
@media (min-width:768px){.ptx .footer__grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:56px; } }
.ptx .footer__brand p{ color:#96938C; font-size:14px; line-height:1.7; margin-top:20px; max-width:34ch; }
.ptx .footer h4{ font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:#C9A961; margin:0 0 24px; }
.ptx .footer ul{ list-style:none; display:grid; gap:12px; padding:0; margin:0; }
.ptx .footer ul a{ color:#D8D5CD; font-size:14px; text-decoration:none; transition:color .3s var(--ease); }
.ptx .footer ul a:hover{ color:#C9A961; }

.ptx .footer__contact{
  margin-top:24px;
  display:grid;
  gap:10px;
}
.ptx .footer__contact a{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13.5px; color:#D8D5CD; text-decoration:none;
  transition:color .3s var(--ease);
}
.ptx .footer__contact a:hover{ color:#C9A961; }
.ptx .footer__contact svg{ color:#C9A961; flex-shrink:0; }

.ptx .footer__bottom{
  border-top:1px solid var(--line); padding-block:32px;
  display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center;
  font-size:12px; color:#96938C; letter-spacing:.06em;
}
@media (min-width:768px){.ptx .footer__bottom{ flex-direction:row; justify-content:space-between; text-align:left; } }
.ptx .footer__social{ display:flex; gap:20px; }
.ptx .footer__social a{ color:#D8D5CD; text-decoration:none; font-size:12px; letter-spacing:.14em; text-transform:uppercase; transition:color .3s var(--ease); }
.ptx .footer__social a:hover{ color:#C9A961; }

/* ============================================
   MOBILE MENU
   ============================================ */
.ptx .mobile-menu{
  position:fixed; inset:0; z-index:200; background:#080808;
  transform:translateX(100%); transition:transform .5s var(--ease);
  display:flex; flex-direction:column;
}
.ptx .mobile-menu.is-open{ transform:none; }
.ptx .mobile-menu__head{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between; padding-inline:var(--gutter); border-bottom:1px solid var(--line); }
.ptx .mobile-menu__close{ width:44px; height:44px; display:grid; place-items:center; background:none; border:1px solid rgba(245,243,238,.12); border-radius:999px; color:#F5F3EE; cursor:pointer; }
.ptx .mobile-menu__nav{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:40px var(--gutter); gap:8px; overflow-y:auto; }
.ptx .mobile-menu__nav a{
  font-family:'Instrument Serif',serif; font-size:1.75rem; color:#F5F3EE;
  text-decoration:none; padding:12px 0; border-bottom:1px solid var(--line);
  transition:color .3s var(--ease), padding-left .3s var(--ease);
}
.ptx .mobile-menu__nav a:hover{ color:#C9A961; padding-left:12px; }
.ptx .mobile-menu__foot{ padding:24px var(--gutter) 40px; }

/* ============================================
   BOOKING MODAL
   ============================================ */
.ptx .bk{ position:fixed; inset:0; z-index:300; display:none; }
.ptx .bk.is-open{ display:block; }
.ptx .bk__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.78); backdrop-filter:blur(6px); }
.ptx .bk__panel{
  position:absolute; inset:0; background:#0d0d0d;
  display:flex; flex-direction:column;
  animation:bkIn .5s var(--ease);
}
@media (min-width:1024px){.ptx .bk__panel{ inset:auto; top:50%; left:50%; transform:translate(-50%,-50%); width:min(1200px,94vw); height:min(840px,92vh); }
}
@keyframes bkIn{ from{ opacity:0; transform:translate(-50%,-48%); } to{ opacity:1; transform:translate(-50%,-50%); } }
@media (max-width:1023px){ @keyframes bkIn{ from{ opacity:0; } to{ opacity:1; } } }

.bk__head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); flex-shrink:0; }
@media (min-width:768px){.ptx .bk__head{ padding:20px 40px; } }
.bk__close{ width:44px; height:44px; display:grid; place-items:center; background:none; border:1px solid rgba(245,243,238,.12); border-radius:999px; color:#F5F3EE; cursor:pointer; transition:border-color .3s; }
.bk__close:hover{ border-color:#C9A961; }

.bk__steps{ display:flex; gap:8px; padding:14px 20px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; flex-shrink:0; }
@media (min-width:768px){.ptx .bk__steps{ padding:18px 40px; gap:20px; } }
.bk__steps::-webkit-scrollbar{ display:none; }
.bk__step{ display:flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#96938C; white-space:nowrap; padding:6px 0; cursor:pointer; background:none; border:none; transition:color .3s; font-family:inherit; }
.bk__step.is-active{ color:#C9A961; }
.bk__step.is-done{ color:#D8D5CD; }
.bk__step:disabled{ cursor:default; }
.bk__step-num{ width:22px; height:22px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:10px; transition:all .3s var(--ease); }
.bk__step.is-active .bk__step-num{ background:#C9A961; color:#080808; border-color:#C9A961; }

.bk__body{ flex:1; display:grid; grid-template-columns:1fr; overflow:hidden; min-height:0; }
@media (min-width:1024px){.ptx .bk__body{ grid-template-columns:1fr 360px; } }
.bk__main{ overflow-y:auto; padding:28px 20px 140px; }
@media (min-width:768px){.ptx .bk__main{ padding:40px; padding-bottom:140px; } }
@media (min-width:1024px){.ptx .bk__main{ padding:44px; padding-bottom:44px; } }
.bk__aside{ border-left:1px solid var(--line); background:#101010; padding:32px; overflow-y:auto; display:none; }
@media (min-width:1024px){.ptx .bk__aside{ display:block; } }

.bk__title{ font-family:'Instrument Serif',serif; font-size:clamp(1.5rem,2.4vw,1.85rem); margin:0 0 8px; line-height:1.15; }
.bk__sub{ color:#96938C; font-size:14px; margin:0 0 28px; }

.opt-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:560px){.ptx .opt-grid{ grid-template-columns:1fr 1fr; } }
/* Step 1 groups the location buttons by city, so `.opt` never sits directly in
   `.opt-grid` -- each city's buttons live in one `.opt-city` wrapper, which was
   an unstyled <div>. The grid's own 12px gap therefore only ever separated whole
   cities, and two branches of the SAME city (LB Nagar + Gachibowli are both
   Hyderabad) rendered edge to edge with no space at all. The wrapper now carries
   the same gap so the buttons read as separate choices. */
.ptx .opt-city{ display:grid; gap:12px; align-content:start; }
.opt{
  border:1px solid var(--line); background:#101010; padding:18px;
  cursor:pointer; text-align:left; color:#F5F3EE; transition:all .3s var(--ease);
  display:flex; flex-direction:column; gap:6px; font-family:inherit;
  position:relative;
}
.ptx .opt:hover{ border-color:rgba(201,169,97,.4); background:#131313; }
.ptx .opt.is-selected{ border-color:#C9A961; background:rgba(201,169,97,.06); }
.ptx .opt.is-selected::after{
  content:'';
  position:absolute; top:12px; right:12px;
  width:14px; height:8px;
  border-left:1.5px solid #C9A961; border-bottom:1.5px solid #C9A961;
  transform:rotate(-45deg);
}
.ptx .opt__name{ font-family:'Instrument Serif',serif; font-size:1.15rem; line-height:1.2; padding-right:20px; }
.ptx .opt__meta{ font-size:12px; color:#96938C; line-height:1.5; }
.ptx .opt__price{ font-size:13px; color:#C9A961; margin-top:6px; letter-spacing:.06em; }

.ptx .bk__field{ margin-bottom:20px; }
.ptx .bk__label{ display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#96938C; margin-bottom:10px; }
.ptx .bk__input,.ptx .bk__textarea,.ptx .bk__select{
  width:100%; background:#101010; border:1px solid var(--line); color:#F5F3EE;
  padding:14px 16px; font-size:15px; font-family:inherit;
  transition:border-color .3s var(--ease);
}
.ptx .bk__input:focus,.ptx .bk__textarea:focus,.ptx .bk__select:focus{ outline:none; border-color:#C9A961; }
.ptx .bk__textarea{ resize:vertical; min-height:100px; }

.ptx .cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:12px; }
.ptx .cal__dow{ text-align:center; font-size:10px; letter-spacing:.14em; color:#96938C; padding:8px 0; text-transform:uppercase; }
.ptx .cal__day{
  aspect-ratio:1; display:grid; place-items:center;
  background:none; border:1px solid transparent; color:#D8D5CD;
  font-size:13px; cursor:pointer; transition:all .2s var(--ease); font-family:inherit;
  border-radius:2px;
}
.ptx .cal__day:hover:not(:disabled){ border-color:rgba(201,169,97,.4); }
.ptx .cal__day:disabled{ color:#3a3a3a; cursor:not-allowed; }
.ptx .cal__day.is-selected{ background:#C9A961; color:#080808; font-weight:600; }

/* The slot button shows the whole window ("10:00 AM – 12:00 PM"), which is far
   wider than the old bare "10:00:00". 100px columns wrapped that range onto two
   lines and made the grid read as a stack of misaligned boxes, so the track
   minimum is sized to the label and the label is kept on one line. */
.ptx .slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:12px; }
.ptx .slot{
  padding:13px 8px; border:1px solid var(--line); background:#101010;
  color:#D8D5CD; font-size:12.5px; cursor:pointer; transition:all .2s var(--ease);
  font-family:inherit; text-align:center; border-radius:2px; white-space:nowrap;
}
.ptx .slot:hover:not(:disabled){ border-color:rgba(201,169,97,.4); color:#F5F3EE; }
.ptx .slot.is-selected{ background:#C9A961; color:#080808; border-color:#C9A961; font-weight:600; }
.ptx .slot:disabled{ color:#3a3a3a; cursor:not-allowed; text-decoration:line-through; }

.ptx .counter{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.ptx .counter__btn{
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--line); background:#101010; color:#F5F3EE;
  cursor:pointer; font-size:18px; transition:all .3s var(--ease); font-family:inherit;
  border-radius:2px;
}
.ptx .counter__btn:hover:not(:disabled){ border-color:#C9A961; color:#C9A961; }
.ptx .counter__btn:disabled{ opacity:.3; cursor:not-allowed; }
.ptx .counter__val{ font-family:'Instrument Serif',serif; font-size:1.75rem; min-width:44px; text-align:center; font-variant-numeric:tabular-nums; }
.ptx .counter__note{ font-size:12.5px; color:#96938C; }

.ptx .addon{
  display:flex; gap:16px; padding:16px; border:1px solid var(--line);
  background:#101010; cursor:pointer; transition:all .3s var(--ease); align-items:center;
  font-family:inherit; color:#F5F3EE; text-align:left; width:100%;
  border-radius:2px;
}
.ptx .addon:hover{ border-color:rgba(201,169,97,.4); }
.ptx .addon.is-selected{ border-color:#C9A961; background:rgba(201,169,97,.06); }
.ptx .addon__check{
  width:20px; height:20px; border:1px solid var(--line); flex-shrink:0;
  display:grid; place-items:center; transition:all .3s var(--ease); color:#080808;
  border-radius:2px;
}
.ptx .addon.is-selected .addon__check{ background:#C9A961; border-color:#C9A961; }
.ptx .addon__check svg{ opacity:0; transition:opacity .2s; }
.ptx .addon.is-selected .addon__check svg{ opacity:1; }
.ptx .addon__name{ font-size:14.5px; margin-bottom:2px; }
.ptx .addon__desc{ font-size:12.5px; color:#96938C; }
.ptx .addon__price{ margin-left:auto; font-size:13.5px; color:#C9A961; white-space:nowrap; }

.ptx .summary__row{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; font-size:13.5px; border-bottom:1px solid var(--line); }
.ptx .summary__row:last-of-type{ border-bottom:none; }
.ptx .summary__row span:first-child{ color:#96938C; }
.ptx .summary__row span:last-child{ color:#F5F3EE; text-align:right; }
.ptx .summary__total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:20px; margin-top:12px; border-top:1px solid rgba(201,169,97,.3); }
.ptx .summary__total span:first-child{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#96938C; }
.ptx .summary__total span:last-child{ font-family:'Instrument Serif',serif; font-size:1.75rem; color:#C9A961; }

.ptx .bk__foot{
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(13,13,13,.96); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); padding:14px 20px;
  display:flex; gap:12px; justify-content:space-between; align-items:center;
  z-index:5;
}
@media (min-width:1024px){.ptx .bk__foot{ position:static; padding:18px 40px; } }

.ptx .success{ text-align:center; padding:20px 0 40px; }
.ptx .success__icon{
  width:72px; height:72px; margin:0 auto 28px;
  border:1px solid #C9A961; border-radius:50%;
  display:grid; place-items:center; color:#C9A961;
  animation:successPop .7s var(--ease) both;
}
@keyframes successPop{
  0%{ transform:scale(.6); opacity:0; }
  60%{ transform:scale(1.06); opacity:1; }
  100%{ transform:scale(1); }
}
.ptx .success__title{ font-family:'Instrument Serif',serif; font-size:clamp(1.6rem,3vw,2.25rem); margin:0 0 12px; line-height:1.15; }
.ptx .success__id{ display:inline-block; padding:8px 18px; background:#101010; border:1px solid var(--line); font-size:12px; letter-spacing:.2em; color:#C9A961; margin-bottom:32px; }
.ptx .success__grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:32px 0; text-align:left; }
.ptx .success__grid > div{ padding:16px 18px; border-bottom:1px solid var(--line); }
.ptx .success__grid > div:nth-child(odd){ border-right:1px solid var(--line); }
.ptx .success__grid dt{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#96938C; margin-bottom:6px; }
.ptx .success__grid dd{ font-size:14.5px; color:#F5F3EE; margin:0; }

.ptx .text-center{ text-align:center; }
.ptx .mt-12{ margin-top:48px; }

/* ==========================================================================
   UTILITIES
   --------------------------------------------------------------------------
   The design was authored against the Tailwind CDN, so a handful of layout
   jobs were expressed as utility classes (hidden md:block, w-full, text-center,
   lg:inline, ...). The production page ships a purged per-brand Tailwind bundle
   whose safelist does not include them, so they are reproduced here as real,
   scoped classes and the markup uses these names instead.
   ========================================================================== */
.ptx .u-row{ display:flex; align-items:center; gap:.75rem; }
.ptx .u-center{ text-align:center; }
.ptx .u-mt-12{ margin-top:3rem; }

/* A <br> that only applies from the md breakpoint up (design: `hidden md:block`).
   The raw <br> is removed and this element put in its place, so there is never
   a stray line break on a phone. */
.ptx .u-br-md{ display:none; }
/* The design's markup is `<br class="hidden md:block">` -- Tailwind puts
   display:block on the <br> ITSELF, so it forces exactly one break. Our port
   wraps the <br> in a span so it can be hidden below md; making that span
   display:block instead gave the heading a block box PLUS a <br>, i.e. a whole
   empty line between "Your Movie." and "Your Moment." and between every
   split heading and the line below it. Keep the span inline and let the <br>
   do the breaking. */
@media (min-width:768px){.ptx .u-br-md{ display:inline; } }

/* `lg:inline` — visible only on the desktop breakpoint. */
.ptx .u-inline-lg{ display:none; }
@media (min-width:1024px){.ptx .u-inline-lg{ display:inline; } }

.ptx .u-w-full{ width:100%; }

/* Screen-reader-only. NOT display:none — that drops the node from the
   accessibility tree and makes it unreachable by keyboard. */
.ptx .u-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------- small helpers - */
/* Error banner used by the booking modal. Tinted rather than flat so it still
   reads against the near-black surfaces. */
.ptx .bk__error{
  margin:0 0 1.2rem; padding:.9rem 1.1rem;
  border:1px solid rgba(201,169,97,.35);
  background:rgba(201,169,97,.07);
  color:#D4C4A0; font-size:.85rem; line-height:1.5;
  overflow-wrap:anywhere;
}
.ptx .bk__error:empty{ display:none; }

/* Field-level message, shared by the form fields and the coupon box. */
.ptx .bk__msg{ font-size:12.5px; margin:8px 0 0; }
.ptx .bk__msg--ok{ color:#C9A961; }
.ptx .bk__msg--no{ color:#c96a6a; }
.ptx .bk__msg:empty{ display:none; }

/* Radio rows on the review/pay step. */
.ptx .pay-opt{
  display:flex; align-items:center; gap:12px;
  padding:16px; border:1px solid var(--line); background:#101010;
  cursor:pointer; transition:border-color .3s var(--ease);
}
.ptx .pay-opt:hover{ border-color:rgba(201,169,97,.4); }
.ptx .pay-opt input{ accent-color:#C9A961; flex-shrink:0; }
.ptx .pay-opt__t{ font-size:14px; }

/* The add-on row: checkbox, a left-aligned text stack, price pinned right. */
.ptx .addon__body{ text-align:left; flex:1; min-width:0; }
.ptx .addon__name{ display:block; margin-bottom:2px; }

/* Vertical stack used by the add-on list and the summary box. */
.ptx .bk-stack{ display:grid; gap:12px; }
.ptx .bk-stack--tight{ gap:10px; }
.ptx .summary-box{
  border:1px solid var(--line); background:#101010;
  padding:22px; margin-bottom:24px;
}

/* Small inline note under the payment options. */
.ptx .bk__secure{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:#96938C;
}

/* Success-state action row on the confirmation step. */
.ptx .bk__acts{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

/* ------------------------------------------------- preloader failsafe ---
   The splash is decorative. premium.js adds .is-done as soon as the window
   load event fires, but if that script is blocked, 404s or throws, the visitor
   would be stranded staring at a full-screen overlay with no way forward.
   This animation retires the overlay on its own after 4s. It is a no-op in
   the normal path because JS has already set display:none by then. */
.ptx .preloader{ animation:preFailSafe 1ms linear 4s forwards; }
@keyframes preFailSafe{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}
@media (prefers-reduced-motion: reduce){.ptx .preloader{ animation:none; }.ptx .preloader:not(.is-done){ display:none; }
}