/* ==========================================================================
   kainos.html — pricing page (builds on site.css)
   Hero · sticky chips · Valentina's printed card · hair panel · gifts · CTA
   ========================================================================== */

/* anchors land below the scrolled header (62px) + sticky chip bar */
html { scroll-padding-top: calc(62px + var(--pnav-h, 66px) + 14px); }
.nowrap { white-space: nowrap; }
[tabindex="-1"]:focus { outline: none; }
/* shared-shell override (drop once site.css has it): the open menu (z 1000) covered the
   header, so its close button could not be tapped */
.menu-open .site-header { z-index: 1001; }

/* ---------- hero ---------------------------------------------------------- */
.p-hero {
  position: relative; overflow: clip;
  padding: calc(var(--header-h) + clamp(1.6rem, 6vw, 4.5rem)) 0 clamp(2.4rem, 5vw, 4rem);
}
.p-hero__grid {
  display: grid; align-items: center; column-gap: .5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head art" "body body";
}
.p-hero__head { grid-area: head; position: relative; z-index: 2; }
.p-hero__head .eyebrow { margin-bottom: .9rem; }
.p-hero__title { font-size: clamp(3.3rem, 8.2vw, 6.6rem); line-height: .96; }
.p-hero__title .ln { padding-bottom: .2em; margin-bottom: -.2em; }   /* room for ų / g descenders */
.p-hero__title em { padding-right: .08em; }
.p-hero__body { grid-area: body; position: relative; z-index: 2; display: grid; gap: 1.6rem; margin-top: 1.4rem; }
.p-hero__body .lede { max-width: 34em; }

/* art: blossom-a mirrored over the emblem, exactly like the owner's card
   (emblem geometry is fitted to the printed circle edge left in the cut-out) */
.p-hero__art {
  grid-area: art; position: relative; z-index: 1;
  width: clamp(126px, 34vw, 260px); aspect-ratio: 900 / 1239;
  margin-right: calc(-1 * var(--gutter));
}
.p-hero__wash {
  position: absolute; left: -28%; top: 6%; width: 136%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247,219,228,.95), rgba(247,219,228,.5) 58%, rgba(247,219,228,0));
}
.p-hero__emblem {
  position: absolute; left: 19.83%; top: 58.32%; width: 57.33%; height: auto; border-radius: 50%;
  box-shadow: 0 28px 40px -24px rgba(21,19,18,.6);
}
.p-hero__bloom {
  position: absolute; inset: 0 0 auto; display: block; transform-origin: 100% 40%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%);
  mask-image: linear-gradient(90deg, transparent, #000 8%);
}
.p-hero__blossom { width: 100%; scale: -1 1; }

@media (min-width: 900px) {
  .p-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .66fr);
    grid-template-areas: "head art" "body art";
    column-gap: clamp(2rem, 4vw, 4rem);
  }
  .p-hero__head { align-self: end; }
  .p-hero__body { align-self: start; margin-top: 2rem; }
  .p-hero__art {
    width: min(100%, 410px); justify-self: end;
    margin-right: calc(-1 * var(--gutter) - max(0px, (100vw - var(--container)) / 2));
  }
}

/* load-in (CSS only — waits for the first-visit intro curtain) */
.show-intro { --p-delay: .55s; }
@keyframes p-up    { from { opacity: 0; translate: 0 26px; } }
@keyframes p-line  { from { translate: 0 110%; } }
@keyframes p-bloom { from { opacity: 0; translate: 46px -20px; rotate: 8deg; } }
@keyframes p-seal  { from { opacity: 0; scale: .76; rotate: -30deg; } }
@keyframes p-sway  { 0%, 100% { rotate: 0deg; } 35% { rotate: -1.6deg; } 70% { rotate: 1deg; } }
.js .p-in { animation: p-up 1.1s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + var(--p-delay, .1s)); }
.js .p-hero__title .ln > span { animation: p-line 1.25s var(--ease) both; animation-delay: calc(var(--p-delay, .1s) + .08s); }
.js .p-hero__title .ln + .ln > span { animation-delay: calc(var(--p-delay, .1s) + .2s); }
.js .p-hero__wash { animation: p-up 1.6s var(--ease) calc(var(--p-delay, .1s)) both; }
.js .p-hero__emblem { animation: p-seal 1.5s var(--ease) calc(var(--p-delay, .1s) + .3s) both; }
.js .p-hero__bloom {
  animation: p-bloom 1.9s var(--ease) calc(var(--p-delay, .1s) + .15s) both,
             p-sway 9s ease-in-out calc(var(--p-delay, .1s) + 2.1s) infinite;
}

/* who to call */
.p-who { display: grid; gap: .7rem; max-width: 42rem; }
.p-who__item {
  position: relative; display: grid; align-content: start; height: 100%;
  padding: .95rem 4rem .95rem 1.2rem;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: rgba(251,248,243,.62);
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.p-who__item::after {
  content: ''; position: absolute; right: 1rem; top: 50%; width: 2.4rem; height: 2.4rem; margin-top: -1.2rem;
  border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f6f1ea' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / 1rem no-repeat;
  transition: background-color .4s var(--ease), transform .6s var(--ease);
}
.p-who__item:hover { border-color: var(--ink); background: var(--card); }
.p-who__item:hover::after { background-color: var(--rose-deep); transform: rotate(-12deg); }
.p-who__role { font: 500 .66rem/1.2 var(--f-body); letter-spacing: .28em; text-transform: uppercase; color: var(--rose-deep); }
.p-who__tel { order: 1; font: 500 1.5rem/1.15 var(--f-display); color: var(--ink); margin-top: .2rem; }
.p-who__what { order: 2; font-size: .84rem; line-height: 1.4; color: var(--muted); }
@media (min-width: 600px) { .p-who { grid-template-columns: 1fr 1fr; } }

/* ---------- sticky category chips ----------------------------------------- */
.p-nav-sentinel { height: 1px; margin-bottom: -1px; }
.p-nav {
  position: sticky; top: 61px; z-index: 60;
  background: rgba(246,241,234,.94);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-block: 1px solid var(--line);
  transition: top .5s var(--ease), box-shadow .45s var(--ease);
}
body:has(.site-header.is-hidden) .p-nav { top: 0; }
.p-nav.is-stuck { box-shadow: 0 16px 30px -26px rgba(21,19,18,.5); }
.p-nav__scroller {
  position: relative; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  --fl: 0px; --fr: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
}
.p-nav__scroller::-webkit-scrollbar { display: none; }
.p-nav__scroller.is-l { --fl: 36px; }
.p-nav__scroller.is-r { --fr: 36px; }
.p-nav__list { display: flex; gap: .45rem; width: max-content; margin-inline: auto; padding: .55rem var(--gutter); }
.p-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.15rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  font: 400 .72rem/1 var(--f-body); letter-spacing: .15em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap; scroll-snap-align: center;
  transition: background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.p-chip:hover { border-color: var(--ink); }
.p-chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.p-nav__bar {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--blossom), var(--rose), var(--rose-deep));
  transform-origin: 0 50%; transform: scaleX(0);
}

/* ---------- Valentina: the printed card ------------------------------------ */
.p-val { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 4.5rem); }
.p-val__grid { display: grid; gap: clamp(3rem, 7vw, 5.5rem); }
.p-val__intro h2 { margin-bottom: 1.2rem; }
.p-val__intro p:not(.eyebrow) { max-width: 31rem; }
.p-val__call { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 2rem; }
.p-val__num { font: italic 500 1.55rem/1 var(--f-display); color: var(--ink); padding-block: .5rem; }
.p-val__num:hover { color: var(--rose-deep); }
.p-val__legend { margin-top: 1.8rem; padding-left: 1rem; border-left: 1px solid var(--blossom); max-width: 24rem; }
@media (min-width: 980px) {
  .p-val__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .p-val__sticky { position: sticky; top: calc(62px + var(--pnav-h, 66px) + 2.5rem); padding-top: 2.5rem; }
}

.p-card-wrap { position: relative; width: 100%; max-width: 640px; justify-self: center; align-self: start; }
.p-card {
  position: relative; z-index: 2; isolation: isolate;
  padding: clamp(1.6rem, 5vw, 3.2rem) clamp(1.2rem, 5vw, 3.4rem) clamp(1.5rem, 4vw, 2.6rem);
  background: #fdfbf8 var(--grain);
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(21,19,18,.05), 0 2px 4px rgba(21,19,18,.05),
              0 22px 40px -22px rgba(21,19,18,.32), 0 70px 100px -60px rgba(21,19,18,.4);
}
/* paper light: soft sheen from the top-left, warm shade at the foot */
.p-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.85), rgba(255,255,255,0) 34%),
              linear-gradient(0deg, rgba(229,217,202,.32), rgba(229,217,202,0) 18%);
}
.p-card__sheet {
  position: absolute; inset: 18px -12px -16px 14px; z-index: 1;
  background: var(--paper-2) var(--grain); border-radius: 5px; rotate: 1.8deg;
  box-shadow: 0 0 0 1px rgba(21,19,18,.05), var(--shadow-1);
}
.p-card__sprig {
  position: absolute; z-index: 3; pointer-events: none;
  width: clamp(150px, 30vw, 270px); right: clamp(-90px, -5vw, -36px); top: clamp(-96px, -8vw, -52px);
  rotate: -14deg;   /* blossom-c is cut by the photo's right edge: fade that edge */
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 16%);
  mask-image: linear-gradient(270deg, transparent, #000 16%);
  filter: drop-shadow(0 10px 10px rgba(21,19,18,.14));
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.p-card__sprig.is-loaded, .no-js .p-card__sprig { opacity: 1; }

@media (max-width: 600px) {
  .p-val__grid { row-gap: 4.5rem; }
  .p-card__sprig { width: 140px; right: -34px; top: -92px; rotate: -10deg; }
}
.p-card__head { padding-bottom: clamp(1.1rem, 3vw, 1.8rem); margin-bottom: clamp(.4rem, 1.5vw, 1rem); border-bottom: 1px solid var(--line); }
.p-card__sign { width: min(86%, 340px); margin-inline: auto; }
.js .p-card__sign { clip-path: inset(0 100% 0 0); transition: clip-path 2.2s var(--ease-io) .45s; }
.js .p-card-wrap.in .p-card__sign { clip-path: inset(0 -4% 0 0); }

.p-card .p-grp { padding-top: clamp(1.25rem, 3vw, 1.75rem); }
.p-grp__title {
  display: flex; align-items: baseline; gap: .75rem; margin-bottom: .45rem;
  font: 500 .76rem/1.3 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
}
.p-grp__n { font: italic 500 1.05rem/1 var(--f-display); letter-spacing: 0; color: var(--rose-deep); }
.p-grp__sub {
  display: flex; align-items: center; gap: .8rem; margin: .7rem 0 .1rem;
  font: 500 .64rem/1.2 var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--muted);
}
.p-grp__sub::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* a price row: name · · · · · price */
.p-row {
  display: grid; align-items: end; column-gap: .55rem;
  grid-template-columns: minmax(0, max-content) minmax(1.2rem, 1fr) auto;
  padding-block: .48rem;
}
.p-row__name { color: var(--ink); line-height: 1.35; }
.p-row__dots {
  height: 3px; margin-bottom: .45em; opacity: .62;
  background: radial-gradient(circle at 1.5px 1.5px, var(--ink-2) .85px, transparent 1.25px) 0 0 / 5px 3px repeat-x;
}
.p-row__price { font-weight: 500; color: var(--ink); white-space: nowrap; text-align: right; font-variant-numeric: lining-nums tabular-nums; transition: color .3s; }
.p-row__note { grid-column: 1 / -1; font-size: .86rem; line-height: 1.4; color: var(--muted); }
.p-row--sub { padding-left: 1.3rem; }
.p-row--sub .p-row__name { position: relative; font: italic 500 1.16rem/1.25 var(--f-display); color: var(--ink-2); }
.p-row--sub .p-row__name::before { content: '–'; content: '–' / ''; position: absolute; left: -1.15rem; font-style: normal; color: var(--rose-deep); }
@media (hover: hover) { .p-card .p-row:hover .p-row__price { color: var(--rose-deep); } }

/* leaders draw in when their block is revealed, prices follow */
.js .p-row__dots { transition: clip-path 1s var(--ease) calc(var(--i, 0) * 85ms + 180ms); }
.js .p-row__price { transition: color .3s, opacity .8s var(--ease) calc(var(--i, 0) * 85ms + 620ms), translate .8s var(--ease) calc(var(--i, 0) * 85ms + 620ms); }
.js .rv:not(.in) .p-row__dots { clip-path: inset(0 100% 0 0); }
.js .rv:not(.in) .p-row__price { opacity: 0; translate: -10px 0; }

.p-card__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1.5rem;
  margin-top: clamp(1.6rem, 4vw, 2.4rem); padding-top: 1.1rem; border-top: 1px solid var(--ink);
}
.p-card__tel { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; font: italic 600 clamp(1.55rem, 3.4vw, 1.95rem)/1 var(--f-display); color: var(--ink); transition: color .3s; }
.p-card__tel:hover { color: var(--rose-deep); }
.p-card__tel svg { width: .8em; height: .8em; }
.p-card__addr { font-size: .84rem; color: var(--muted); }

/* ---------- Indrė: her own printed card — ink stock, her logo in paper white */
.p-indre { padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 980px) {
  .p-val__grid--mirror { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .p-val__grid--mirror .p-val__intro { order: 2; }
}
.p-card--indre {
  background: radial-gradient(110% 60% at 100% 0%, rgba(199,107,142,.26), rgba(199,107,142,0) 60%), var(--ink);
  color: rgba(246,241,234,.78);
  border-radius: 5px 5px 5px 64px;
}
.p-card--indre::before { background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,0) 36%); }
.p-card-wrap--indre .p-card__sheet { inset: 18px 14px -16px -12px; rotate: -1.8deg; background: var(--blossom-2) var(--grain); border-radius: 5px 5px 5px 64px; }
.p-card--indre .p-card__head { border-color: rgba(246,241,234,.16); }
.p-card__logo { width: min(82%, 340px); margin-inline: auto; filter: invert(1); }
.js .p-card__logo { clip-path: inset(0 100% 0 0); transition: clip-path 2.2s var(--ease-io) .45s; }
.js .p-card-wrap.in .p-card__logo { clip-path: inset(0 -4% 0 0); }
.p-card--indre :is(.p-grp__title, .p-row__name, .p-row__price) { color: var(--paper); }
.p-card--indre .p-grp__n { color: var(--blossom); }
.p-card--indre .p-row__dots { opacity: .45; background-image: radial-gradient(circle at 1.5px 1.5px, var(--paper) .85px, transparent 1.25px); }
@media (hover: hover) { .p-card.p-card--indre .p-row:hover .p-row__price { color: var(--blossom); } }
.p-from { font: italic 500 1.02em/1 var(--f-display); color: var(--rose-deep); margin-right: .1em; }
.p-card--indre .p-from { color: var(--blossom); }
.p-card--indre .p-card__foot { border-color: rgba(246,241,234,.45); }
.p-card--indre .p-card__tel { color: var(--paper); }
.p-card--indre .p-card__tel:hover { color: var(--blossom); }
.p-card--indre .p-card__addr { color: rgba(246,241,234,.6); }

/* ---------- gifts --------------------------------------------------------- */
.p-gifts { overflow: clip; }
.p-gifts__deco { --w: clamp(150px, 24vw, 330px); right: -24px; top: 0; opacity: .95; }
.p-gifts__script { font-size: clamp(2.7rem, 6vw, 3.9rem); margin-bottom: .5rem; }
.p-gifts .section-head .lede { margin-inline: auto; margin-top: 1.2rem; }
.p-gifts__grid { display: grid; gap: clamp(1.1rem, 2.4vw, 2rem); }
.p-gift {
  display: flex; flex-direction: column;
  padding: .7rem; border-radius: 30px 22px 22px 22px;
  background: var(--card); box-shadow: var(--shadow-1);
}
.js .p-gift.rv {
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), translate .6s var(--ease), box-shadow .6s var(--ease);
  transition-delay: calc(var(--d, 0) * 110ms), calc(var(--d, 0) * 110ms), 0s, 0s;
}
.p-gift:hover { translate: 0 -5px; box-shadow: var(--shadow-2); }
.p-gift__ph { flex: none; border-radius: 84px 18px 18px 18px; }
.p-gift__body { display: flex; flex-direction: column; gap: .7rem; flex: 1; padding: 1.3rem .8rem .5rem; }
.p-gift__body .h3 { font-size: clamp(1.45rem, 2.2vw, 1.75rem); }
.p-gift__body > p:not(.p-row) { font-size: .98rem; }
.p-gift__quote { margin: 0; font: italic 400 1.3rem/1.35 var(--f-display); color: var(--ink); }
.p-gift__price { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line); }
.p-gift__price .p-row__name { font: 500 .66rem/1.2 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.p-gift__price .p-row__price { font: italic 600 1.2rem/1 var(--f-display); }
@media (max-width: 599px) {
  .p-gift__ph { aspect-ratio: 5 / 4; }
  .p-gifts__deco { --w: 110px; right: -22px; }   /* clear of the "Dovana Tau" script */
}
@media (min-width: 600px) and (max-width: 999px) {
  .p-gift { flex-direction: row; align-items: stretch; }
  .p-gift__ph { width: 40%; aspect-ratio: auto; min-height: 260px; }
  .p-gift__body { padding: 1.4rem 1.2rem .6rem 1.6rem; }
}
@media (min-width: 1000px) {
  .p-gifts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-gift__ph { aspect-ratio: 1; }   /* less bare table top around the vouchers */
}

.p-how {
  display: grid; gap: 1.2rem 3rem; margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.3rem, 3vw, 2.4rem);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: rgba(251,248,243,.5);
}
.p-how__title { font: italic 500 clamp(1.55rem, 2.4vw, 1.95rem)/1.1 var(--f-display); }
.p-how__k { display: block; margin-bottom: .35rem; font: 500 .66rem/1.2 var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--rose-deep); }
.p-how a { white-space: nowrap; }
@media (min-width: 900px) { .p-how { grid-template-columns: auto 1fr 1fr; align-items: center; } }

/* ---------- closing CTA --------------------------------------------------- */
.p-cta { overflow: hidden; text-align: center; }
.p-cta::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: min(900px, 140vw); aspect-ratio: 1.6; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(247,219,228,.75), rgba(247,219,228,0)); pointer-events: none;
}
.p-cta__inner { position: relative; z-index: 2; }
.p-cta__script { font-size: clamp(2.5rem, 5.5vw, 3.6rem); margin-bottom: .5rem; }
.p-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.2rem; margin-top: 2.2rem; }
.p-cta__note { margin-top: 2.2rem; }
@media (max-width: 560px) {
  .p-cta__actions { flex-direction: column; }
  .p-cta__actions .btn { width: min(100%, 320px); }
}

/* ---------- reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .js .p-card__sign, .js .p-card__logo, .js .rv .p-row__dots { clip-path: none; }
  .js .rv .p-row__price { opacity: 1; translate: none; }
}