/* Paintasy — static production build
   Transcribed 1:1 from "Paintasy Site.dc.html" (Claude Design handoff).
   Every value below matches the source's inline style="" exactly; only the
   location moved. Do not "improve" colors/spacing/sizes here. */

@font-face {
  font-family: "Cherella";
  src: url("assets/fonts/cherella-bold.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

html, body {
  margin: 0;
  padding: 0;
  background: #F6E9D8;
}

body {
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
  font-family: Quicksand, system-ui, sans-serif;
  color: #6B4A38;
  overflow-x: hidden;
}

a {
  color: #A08652;
  text-decoration: none;
}
a:hover {
  color: #2E5C58;
}

@keyframes pt-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes pt-twinkle {
  0%, 100% { opacity: .25; }
  50% { opacity: .9; }
}
@keyframes pt-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pt-pop {
  from { opacity: 0; transform: translateY(16px) scale(.975); }
  to { opacity: 1; transform: none; }
}

/* ---------- defs svg (filters/masks holder) ---------- */
.pt-defs {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ---------- fixed background wash + splatter canvas ---------- */
.pt-wash {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(46% 34% at 6% 4%, rgba(231,182,160,0.60), rgba(231,182,160,0) 70%),
    radial-gradient(38% 26% at 96% 12%, rgba(231,182,160,0.42), rgba(231,182,160,0) 72%),
    radial-gradient(52% 30% at 88% 92%, rgba(231,182,160,0.50), rgba(231,182,160,0) 70%),
    radial-gradient(34% 22% at 14% 88%, rgba(160,134,82,0.20), rgba(160,134,82,0) 72%);
  filter: url(#pt-wash) blur(6px);
  mix-blend-mode: multiply;
}

.pt-splatter-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  display: block;
  mix-blend-mode: multiply;
}

/* ---------- corner frame ornament (top + bottom, page level) ---------- */
.pt-frame {
  position: absolute;
  left: 22px;
  right: 22px;
  height: 60px;
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  opacity: 0.85;
}
.pt-frame--top { top: 20px; }
.pt-frame--bottom { bottom: 20px; transform: scaleY(-1); }

.pt-frame-corner { display: block; flex: none; }
.pt-frame-corner--mirror { transform: scaleX(-1); }

.pt-frame-mid {
  position: relative;
  flex: 1;
  height: 60px;
  display: flex;
  align-items: center;
}
.pt-frame-tick { position: absolute; height: 1.4px; background: #A08652; width: 8%; top: 3.3px; }
.pt-frame-tick--left { left: 0; }
.pt-frame-tick--right { right: 0; }
.pt-frame-tick-sm { position: absolute; height: 0.9px; background: #A08652; width: 8%; top: 9.5px; }
.pt-frame-tick-sm--left { left: 0; }
.pt-frame-tick-sm--right { right: 0; }
.pt-frame-dashes {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pt-frame-dash {
  flex: 1;
  height: 4px;
  background-image: radial-gradient(circle at 50% 50%, #A08652 0 1.5px, rgba(160,134,82,0) 1.7px);
  background-size: 13px 4px;
  background-repeat: repeat-x;
  background-position: center;
}
.pt-frame-diamond { flex: none; }
.pt-frame-diamond--flip { transform: scaleY(-1); }

/* ---------- main content stacking ---------- */
.pt-main {
  position: relative;
  z-index: 3;
}

/* ---------- Hero ---------- */
.pt-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 8vh 6vw;
  box-sizing: border-box;
}

.pt-hero-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 46vh);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 58%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0) 100%);
}

.pt-hero-collage {
  position: absolute;
  inset: 0;
  background-image: url("assets/images/boho-shoulder-body-art-miami.jpg");
  background-size: cover;
  background-position: center 30%;
}

.pt-hero-paint-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.pt-hero-splatter-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: multiply;
}

.pt-hero-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 30% at 8% 8%, rgba(231,182,160,0.55), rgba(231,182,160,0) 70%),
    radial-gradient(40% 26% at 94% 16%, rgba(231,182,160,0.40), rgba(231,182,160,0) 72%),
    radial-gradient(44% 26% at 86% 88%, rgba(231,182,160,0.42), rgba(231,182,160,0) 70%);
  filter: url(#pt-wash) blur(6px);
  mix-blend-mode: multiply;
}

.pt-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
}

.pt-hero-logo {
  display: block;
  width: min(78vw, 495px);
  height: auto;
  margin: 0 auto;
}

.pt-hero-tagline-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}
.pt-hero-tagline-line {
  height: 1px;
  width: clamp(30px, 8vw, 90px);
}
.pt-hero-tagline-line--left { background: linear-gradient(90deg, rgba(160,134,82,0), #A08652); }
.pt-hero-tagline-line--right { background: linear-gradient(90deg, #A08652, rgba(160,134,82,0)); }
.pt-hero-tagline-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(11px, 1.4vw, 16px);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #6B4A38;
  white-space: nowrap;
}

/* ---------- Book now button ---------- */
.pt-book-btn {
  display: inline-block;
  position: relative;
  text-decoration: none;
}
.pt-book-btn--hero { margin-top: 54px; }
.pt-book-btn--sm { margin-top: 28px; }
.pt-book-btn--modal { margin-top: 34px; }
.pt-book-btn-svg { display: block; }
.pt-book-btn-svg--bristle { filter: url(#pt-bristle-sm); }
.pt-book-btn-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Cormorant Garamond', serif;
  text-transform: uppercase;
  color: #F6E9D8;
}
.pt-book-btn-label--lg { font-size: 17px; letter-spacing: 0.34em; padding-left: 0.34em; }
.pt-book-btn-label--sm { font-size: 15px; letter-spacing: 0.32em; padding-left: 0.32em; }

/* ---------- Choose your experience ---------- */
.pt-choose {
  position: relative;
  z-index: 1;
  padding: 4vh 6vw 14vh;
  max-width: 1240px;
  margin: 0 auto;
}

.pt-choose-title {
  margin: 0 0 8px;
  text-align: center;
  font-family: Cherella, Parisienne, cursive;
  font-weight: 400;
  color: #2E5C58;
  font-size: clamp(54px, 9vw, 104px);
  line-height: 0.95;
  /* forces the two-line break — one long line shrinks to nothing on a phone */
  max-width: min(88vw, 620px);
  margin-inline: auto;
  text-wrap: balance;
}

.pt-choose-divider {
  display: flex;
  justify-content: center;
  gap: 14px;
  align-items: center;
  margin-bottom: 8vh;
}
.pt-choose-divider-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #A08652;
}
.pt-choose-divider-line {
  height: 1px;
  width: 120px;
  background: rgba(160,134,82,0.55);
}

.pt-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(34px, 5vw, 80px);
}

.pt-category {
  position: relative;
  width: min(74vw, 300px);
  flex: 0 1 280px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 38px 18px 24px;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  background: radial-gradient(70% 70% at 30% 22%, rgba(255,252,246,0.85), rgba(231,182,160,0.42) 78%);
  border: 1px solid rgba(160,134,82,0.75);
  box-shadow: 0 0 0 7px rgba(246,233,216,0.55), 0 0 0 8px rgba(160,134,82,0.38), 0 18px 40px -28px rgba(107,74,56,0.45);
  transition: transform 620ms cubic-bezier(.2,.8,.25,1), box-shadow 620ms ease;
  transform: scale(1);
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.pt-category:focus-visible {
  outline: 2px solid #2E5C58;
  outline-offset: 4px;
}
.pt-category.is-hover { transform: scale(1.045); }

.pt-category-image-wrap {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 700ms ease;
}
.pt-category.is-hover .pt-category-image-wrap { opacity: 1; }
.pt-category-image-wrap--none { opacity: 0; }

.pt-category-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pt-category-bloom {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(231,182,160,0.85), rgba(160,134,82,0.35) 55%, rgba(231,182,160,0) 74%);
  filter: url(#pt-wash) blur(4px);
  mix-blend-mode: multiply;
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 700ms ease, transform 900ms cubic-bezier(.2,.8,.25,1);
}
.pt-category.is-hover .pt-category-bloom {
  opacity: 0.95;
  transform: scale(1);
}

.pt-category-veil {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity 620ms ease;
  background: linear-gradient(to bottom, rgba(255,252,246,0.96) 0%, rgba(255,252,246,0.94) 30%, rgba(255,252,246,0.55) 46%, rgba(255,252,246,0) 62%);
  opacity: 1;
}
.pt-category.is-hover .pt-category-veil { opacity: 0.5; }

.pt-category-text { position: relative; width: 100%; }
.pt-category-script {
  position: relative;
  z-index: 1;
  font-family: Cherella, Parisienne, cursive;
  color: #5A3B2B;
  font-size: clamp(54px, 5.8vw, 72px);
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(255,252,246,0.95), 0 0 22px rgba(255,252,246,0.8);
}
.pt-category-label {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #234A47;
  padding-left: 0.32em;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(255,252,246,0.95);
}
.pt-category-hint {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #5A3B2B;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(255,252,246,0.95);
  transition: opacity 500ms ease;
  opacity: 0.92;
}
.pt-category.is-hover .pt-category-hint { opacity: 1; }

/* ---------- section divider (ornamental line) ---------- */
.pt-section-divider {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 6vw;
  height: 60px;
}
.pt-section-divider-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(160,134,82,0), #A08652 12%, #A08652 88%, rgba(160,134,82,0));
}
.pt-section-divider-cross {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
}
.pt-section-divider-cross--a { left: 15%; }
.pt-section-divider-cross--b { left: 88%; }
.pt-section-divider-cross-v { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #A08652; }
.pt-section-divider-cross-h { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #A08652; }
.pt-section-divider-dot {
  position: absolute;
  left: 88%;
  top: calc(50% + 9px);
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(160,134,82,0.55);
}
.pt-section-divider-dot-sm {
  position: absolute;
  left: 6%;
  top: calc(50% - 12px);
  transform: translate(-50%, -50%);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(160,134,82,0.35);
}

/* ---------- Gallery ---------- */
.pt-gallery {
  position: relative;
  z-index: 1;
  padding: 0 4vw 16vh;
  max-width: 1400px;
  margin: 0 auto;
}
/* =====================================================================
   Hero treatment by input, not by screen size

   The watercolour trail is driven by pointer movement, so on a touch
   device it never fires and the hero photo simply never appears. The
   split is therefore on (hover) rather than width — a touch laptop and
   a tablet get the video too, which is right, because neither can work
   the trail either.

   The clip is portrait 480x848, so on a phone it fills the screen at
   close to its native shape with no crop.
   ===================================================================== */
.pt-hero-reel { display: none; }

@media (hover: none) {
  /* nothing here can reveal the collage, so don't ship the layer */
  .pt-hero-collage,
  .pt-hero-paint-canvas { display: none; }

  .pt-hero-reel {
    display: block;
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
  }
  .pt-hero-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #E8DCC8;          /* cream, so there is no black flash */
  }
  /* the wordmark is gold line art and needs the footage knocked back
     several stops before it is legible over it */
  .pt-hero-reel-edge {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(244,235,221,0.94) 0%, rgba(244,235,221,0.68) 34%,
                              rgba(244,235,221,0.68) 62%, rgba(244,235,221,0.94) 100%),
      linear-gradient(0deg, rgba(231,182,160,0.2), rgba(231,182,160,0.2));
  }
}

/* ---------- touch: the service circles ----------
   Their photographs are held at 0.55 behind a full veil and only clear
   on :hover, which touch never fires — so without this they sit dimmed
   permanently. Here the revealed state is simply the resting state. */
@media (hover: none) {
  .pt-category-image-wrap { opacity: 1; }
  /* the veil is the white gradient the names sit on — it has to stay
     strong enough to read against a now fully-opaque photograph */
  .pt-category-veil { opacity: 0.88; }
  .pt-category-hint { opacity: 1; }
}

/* ---------- gallery carousel ----------
   Five pieces, alternating stills and clips. A native horizontal scroller
   with snap points, so a phone swipes it and a pointer gets the arrows;
   the arrows just drive scrollBy, which keeps one source of truth for
   position and means keyboard and swipe cannot disagree. */
.pt-gallery-carousel {
  position: relative;
}

.pt-gallery-track {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 3vw, 52px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* room for the tilt and the drop of each piece, so nothing clips */
  padding: 10px clamp(8px, 5vw, 64px) clamp(28px, 6vw, 80px);
}
.pt-gallery-track::-webkit-scrollbar { display: none; }
.pt-gallery-track:focus-visible {
  outline: 2px solid #2E5C58;
  outline-offset: 6px;
}

.pt-gallery-item {
  margin: 0;
  flex: 0 0 auto;
  width: clamp(190px, 24vw, 290px);
  scroll-snap-align: center;
}
.pt-gallery-item--1 { transform: translateY(0px) rotate(-1.6deg); }
.pt-gallery-item--2 { transform: translateY(clamp(20px, 5vw, 64px)) rotate(1.2deg); }
.pt-gallery-item--3 { transform: translateY(clamp(8px, 2vw, 26px)) rotate(-0.9deg); }
.pt-gallery-item--4 { transform: translateY(clamp(24px, 5.5vw, 70px)) rotate(1.5deg); }
.pt-gallery-item--5 { transform: translateY(clamp(4px, 1.5vw, 18px)) rotate(-1.2deg); }

.pt-gallery-mask {
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  /* mask-image is set dynamically by app.js (scroll reveal wipe) */
}

.pt-gallery-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 5;
  object-fit: cover;
}
.pt-gallery-video { background: #E8DCC8; }
.pt-gallery-img--1 { object-position: 50% 42%; mask: url(#pt-brush-v1); -webkit-mask: url(#pt-brush-v1); }
.pt-gallery-img--2 { object-position: 55% 55%; mask: url(#pt-brush-v2); -webkit-mask: url(#pt-brush-v2); }
.pt-gallery-img--3 { object-position: 45% 58%; mask: url(#pt-brush-v3); -webkit-mask: url(#pt-brush-v3); }

/* ---------- arrows ---------- */
.pt-gallery-arrow {
  position: absolute;
  top: 46%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 246, 238, 0.86);
  cursor: pointer;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 320ms ease;
}
.pt-gallery-arrow--prev { left: clamp(-4px, 0.5vw, 10px); }
.pt-gallery-arrow--next { right: clamp(-4px, 0.5vw, 10px); }

.pt-gallery-arrow:hover,
.pt-gallery-arrow:focus-visible { transform: translateY(-50%) scale(1.09); }
.pt-gallery-arrow:focus-visible { outline: 2px solid #2E5C58; outline-offset: 3px; }
.pt-gallery-arrow:active { transform: translateY(-50%) scale(0.97); }

.pt-gallery-arrow[disabled] { opacity: 0.28; cursor: default; }
.pt-gallery-arrow[disabled]:hover { transform: translateY(-50%); }

/* the little sparkle only lands when you reach for the arrow */
.pt-gallery-arrow-spark {
  opacity: 0;
  transform-origin: 50% 50%;
  transition: opacity 340ms ease;
}
.pt-gallery-arrow:hover .pt-gallery-arrow-spark,
.pt-gallery-arrow:focus-visible .pt-gallery-arrow-spark { opacity: 0.9; }

@media (max-width: 620px) {
  .pt-gallery-arrow { width: 40px; height: 40px; }
  .pt-gallery-arrow svg { width: 30px; height: 30px; }
}

/* ---------- About ---------- */
.pt-about {
  padding: 0 6vw 16vh;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.pt-about-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  transform: rotate(-1.5deg);
  filter: grayscale(0.18);
  mask: url(#pt-torn-mask);
  -webkit-mask: url(#pt-torn-mask);
}
.pt-about-name {
  font-family: Cherella, Parisienne, cursive;
  color: #A08652;
  font-size: clamp(52px, 8vw, 96px);
  line-height: 0.92;
}
.pt-about-role {
  margin: 14px 0 30px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #2E5C58;
  padding-left: 0.4em;
}
.pt-about-bio {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.85;
  font-weight: 400;
  color: #6B4A38;
  margin: 0;
}
.pt-about-bio--first { text-wrap: pretty; margin: 0 0 22px; }

/* ---------- Footer ---------- */
.pt-footer {
  padding: 0 6vw 8vh;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.pt-footer-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(160,134,82,0), rgba(160,134,82,0.6), rgba(160,134,82,0));
  margin-bottom: 5vh;
}
.pt-footer-logo {
  display: block;
  width: min(52vw, 260px);
  height: auto;
  margin: 0 auto;
}
.pt-footer-tagline {
  margin-top: 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #6B4A38;
}
.pt-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 34px;
  font-size: 14px;
  letter-spacing: 0.05em;
}
.pt-footer-location {
  margin-top: 40px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(107,74,56,0.45);
}

/* ---------- Modal ---------- */
.pt-modal-overlay[hidden] {
  display: none;
}
.pt-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 5vw;
  box-sizing: border-box;
  background: rgba(107,74,56,0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: pt-fade 240ms ease both;
}
.pt-modal {
  position: relative;
  width: min(660px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 30px;
  text-align: center;
  background: radial-gradient(100% 80% at 30% 0%, #FFFCF6, #F6E9D8 78%);
  border: 1px solid rgba(160,134,82,0.5);
  box-shadow: 0 0 0 8px rgba(255,252,246,0.35), 0 40px 90px -40px rgba(107,74,56,0.55);
  animation: pt-pop 420ms cubic-bezier(.2,.8,.25,1) both;
}

.pt-modal-fade-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 64px;
  z-index: 2;
  pointer-events: none;
  border-radius: 30px 30px 0 0;
  background: linear-gradient(to bottom, #FEFAF2 62%, rgba(254,250,242,0));
}
.pt-modal-fade-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 66px;
  z-index: 2;
  pointer-events: none;
  border-radius: 0 0 30px 30px;
  background: linear-gradient(to top, #F7EBDB 62%, rgba(247,235,219,0));
}

.pt-modal-frame {
  position: absolute;
  left: 18px;
  right: 18px;
  height: 34px;
  z-index: 3;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  opacity: 0.9;
}
.pt-modal-frame--top { top: 16px; }
.pt-modal-frame--bottom { bottom: 16px; transform: scaleY(-1); }
.pt-modal-frame-corner { display: block; flex: none; }
.pt-modal-frame-corner--mirror { transform: scaleX(-1); }
.pt-modal-frame-mid { position: relative; flex: 1; height: 34px; }
.pt-modal-frame-tick { position: absolute; height: 1.2px; background: #A08652; width: 10%; top: 2.4px; }
.pt-modal-frame-tick--left { left: 0; }
.pt-modal-frame-tick--right { right: 0; }
.pt-modal-frame-tick-sm { position: absolute; height: 0.8px; background: #A08652; width: 10%; top: 7.6px; }
.pt-modal-frame-tick-sm--left { left: 0; }
.pt-modal-frame-tick-sm--right { right: 0; }
.pt-modal-frame-dashes {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  height: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pt-modal-frame-dash {
  flex: 1;
  height: 4px;
  background-image: radial-gradient(circle at 50% 50%, #A08652 0 1.3px, rgba(160,134,82,0) 1.5px);
  background-size: 11px 4px;
  background-repeat: repeat-x;
  background-position: center;
}
.pt-modal-frame-diamond { flex: none; }
.pt-modal-frame-diamond--flip { transform: scaleY(-1); }

.pt-modal-close {
  position: absolute;
  z-index: 4;
  top: -16px;
  right: -16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(160,134,82,0.6);
  background: #FFFCF6;
  color: #A08652;
  font-family: Quicksand, sans-serif;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(107,74,56,0.6);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.pt-modal-close:hover,
.pt-modal-close:focus-visible {
  background: #2E5C58;
  color: #F6E9D8;
  border-color: #2E5C58;
}
.pt-modal-close:focus-visible {
  outline: 2px solid #FFFCF6;
  outline-offset: 2px;
}

.pt-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 52px clamp(22px, 4vw, 54px) 20px;
  box-sizing: border-box;
}
.pt-modal-title {
  font-family: Cherella, Parisienne, cursive;
  color: #2E5C58;
  font-size: clamp(60px, 9vw, 98px);
  line-height: 0.94;
  text-wrap: balance;
}
.pt-modal-tagline[hidden] { display: none; }
.pt-modal-tagline {
  margin: 18px auto 0;
  max-width: 34ch;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(19px, 2.3vw, 24px);
  line-height: 1.55;
  color: #A08652;
}
.pt-modal-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 26px 0 24px;
}
.pt-modal-divider-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(160,134,82,0.7);
}
.pt-modal-divider-line {
  height: 1px;
  width: 90px;
  background: rgba(160,134,82,0.5);
}
.pt-modal-paras {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
  max-width: 52ch;
  margin: 0 auto;
}
/* ---------- card footer ----------
   The booking button used to sit inside the scrolling copy, which meant
   that on any card with more than a couple of paragraphs it scrolled out
   of sight — the decorative frame reads as a finished panel, so nobody
   thinks to scroll for it. It is now pinned below the scroll area: the
   copy moves, the call to action does not. */
.pt-modal-cta {
  position: relative;
  flex: none;
  padding: 0 clamp(22px, 4vw, 54px) clamp(30px, 4vw, 46px);
}
/* a short fade so it reads as "more above", not as a hard cut */
.pt-modal-cta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 34px;
  pointer-events: none;
  background: linear-gradient(to top, #F7EBDA, rgba(247, 235, 218, 0));
}

.pt-modal-para {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: #6B4A38;
  text-wrap: pretty;
}

/* ---------- reduced motion ---------- */
/* The lockup is near-square, so on short viewports (small laptops, phones
   in landscape) its full width would push the booking button below the
   fold. Above this height it keeps its full size. */
@media (max-height: 760px) {
  .pt-hero-logo { width: min(78vw, 58vh); }
}

/* ---------- logo ornament motion ----------
   Parts are classified by script from each element's bounding box in the
   logo's own 1830x1743 viewBox — see the matching block in app.js. The
   classes are added by script, so with JS off the logo renders static and
   complete rather than stuck invisible. */
.pt-hero-logo {
  --pt-stagger: 34;     /* ms between successive parts */
  --pt-reveal: 1500;    /* ms for a leaf to fade up */
  --pt-lead-in: 700;    /* ms before the first leaf */
  --pt-draw: 1600;      /* ms to draw a garland line */
  --pt-draw-lead: 500;  /* ms before the garland starts */
  --pt-sway: 0.45;      /* degrees */
  --pt-period: 9;       /* seconds per sway cycle */
}

.pt-logo-leaf {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 50% 100%;
  animation: ptLeafIn calc(var(--pt-reveal) * 1ms) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(var(--pt-i, 0) * var(--pt-stagger) * 1ms + var(--pt-lead-in) * 1ms);
}
@keyframes ptLeafIn {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.pt-logo-lace-line {
  stroke-dasharray: var(--pt-len);
  stroke-dashoffset: var(--pt-len);
  animation: ptDraw calc(var(--pt-draw) * 1ms) cubic-bezier(0.35, 0.02, 0.25, 1) forwards;
  animation-delay: calc(var(--pt-li, 0) * var(--pt-stagger) * 1ms + var(--pt-draw-lead) * 1ms);
}
@keyframes ptDraw { to { stroke-dashoffset: 0; } }

.pt-logo-bead {
  opacity: 0;
  animation: ptBeadIn 520ms ease forwards;
  animation-delay: calc(var(--pt-li, 0) * var(--pt-stagger) * 1ms + var(--pt-draw-lead) * 1ms + var(--pt-draw) * 0.55ms);
}
@keyframes ptBeadIn { from { opacity: 0; } to { opacity: 1; } }

.pt-logo-lace {
  transform-box: view-box;
  transform-origin: 50% 73.9%;
  animation: ptLaceSway calc(var(--pt-period) * 1s) ease-in-out
             calc(var(--pt-draw) * 1ms + var(--pt-draw-lead) * 1ms) infinite;
}
@keyframes ptLaceSway {
  0%, 100% { transform: rotate(calc(var(--pt-sway) * -1deg)) translateY(0); }
  50%      { transform: rotate(calc(var(--pt-sway) * 1deg)) translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .pt-logo-leaf { opacity: 1; animation: none; transform: none; }
  .pt-logo-lace-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .pt-logo-bead { opacity: 1; animation: none; }
  .pt-logo-lace { animation: none; }
  .pt-gallery-track { scroll-behavior: auto; }
  .pt-gallery-arrow,
  .pt-gallery-arrow-spark { transition: none; }
  .pt-modal-overlay,
  .pt-modal {
    animation: none;
  }
  .pt-category,
  .pt-category-image-wrap,
  .pt-category-bloom,
  .pt-category-veil,
  .pt-category-hint,
  .pt-modal-close {
    transition: none;
  }
}