/* Price 2027 — extends marketing-web styles */
@import url('../colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--lw-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* ---------- shared topbar ---------- */
.p-topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 56px);
  background: var(--lw-canvas);
  border-bottom: 1px solid transparent;
  transition: border-color 260ms var(--ease-standard);
}
.p-topbar.scrolled { border-bottom-color: var(--border-hairline); }
.p-topbar img { height: 28px; width: auto; display: block; }
.p-topbar nav { display: flex; gap: 36px; align-items: center; }
.p-topbar nav a {
  font-family: var(--font-sans); font-size: 11px; font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-2);
  text-decoration: none; transition: color 160ms var(--ease-standard);
}
.p-topbar nav a:hover, .p-topbar nav a.active { color: var(--fg-1); }

/* ---------- hero ---------- */
.p-hero {
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 56px) clamp(52px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 8vw, 120px);
  background: var(--lw-ink);
}
.p-hero > div:not(.p-hero-bg) { position: relative; z-index: 2; }
.p-hero > .p-hero-bg { position: absolute; inset: 0; z-index: 0; }
.p-hero-top { align-self: flex-start; }
.p-hero-bottom {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(36px, 5vw, 88px);
  align-items: end;
}
.p-hero-main { align-self: end; }
.p-hero-side { align-self: end; padding-bottom: 8px; }
.p-hero-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.p-hero-bg iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;       /* 16:9 cover */
  min-width: 177.78vh; min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
}
.p-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,15,15,0.55) 0%, rgba(15,15,15,0.42) 45%, rgba(15,15,15,0.72) 100%);
}
.p-eyebrow {
  font-family: var(--font-sans); font-size: 13px; font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-2);
}
.p-hero .p-eyebrow { color: rgba(250,247,241,0.72); }
.p-hero-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(46px, 6.4vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--lw-canvas);
  margin: 24px 0 0;
  overflow-wrap: break-word;
}
.p-hero-title em { font-style: italic; }

/* ---------- about (husband & wife team) ---------- */
.p-about {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
  padding: clamp(80px, 11vw, 160px) clamp(20px, 4vw, 56px);
  background: var(--lw-paper);
}
.p-about-media {
  order: 2;
  background-size: cover;
  background-position: center 30%;
  aspect-ratio: 4 / 5;
  width: clamp(280px, 30vw, 360px);
  min-height: 360px;
}
.p-about-body {
  order: 1;
  display: flex; flex-direction: column; gap: 22px;
  max-width: 44ch;
}
.p-about-body h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(48px, 6vw, 96px); line-height: 0.98;
  letter-spacing: -0.025em; color: var(--fg-1); margin: 8px 0 4px;
}
.p-about-body h2 em { font-style: italic; color: var(--fg-3); }
.p-about-body p {
  font-family: var(--font-sans); font-weight: 300; font-size: 18px;
  line-height: 1.75; color: var(--fg-2); margin: 0;
}
.p-hero-side p {
  font-family: var(--font-sans); font-weight: 300; font-size: 16px;
  line-height: 1.7; color: rgba(250,247,241,0.86); margin: 0; max-width: 38ch;
}
.p-hero-side p + p { margin-top: 16px; }
.p-hero-meta {
  display: flex; gap: 32px; margin-top: 32px;
  border-top: 1px solid rgba(250,247,241,0.22); padding-top: 24px;
}
.p-hero-meta .stat {
  display: flex; flex-direction: column; gap: 6px;
}
.p-hero-meta .stat .v {
  font-family: var(--font-display); font-weight: 300; font-size: 36px;
  line-height: 1; color: var(--lw-canvas);
}
.p-hero-meta .stat .l {
  font-family: var(--font-sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: rgba(250,247,241,0.6);
}

/* ---------- sticky package selector ---------- */
.p-sticky-nav {
  position: sticky; top: 72px; z-index: 40;
  background: var(--lw-canvas);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  margin: 0;
  padding: 0 clamp(20px, 4vw, 56px);
}
.p-sticky-nav .label {
  display: flex; align-items: center; padding: 14px 0;
  margin-right: 32px;
  font-family: var(--font-sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-4);
  white-space: nowrap;
}
.p-sticky-nav .tabs { display: flex; flex: 1; gap: 0; }
.p-sticky-nav .tab {
  flex: 1; background: transparent; border: 0;
  padding: 18px 12px; cursor: pointer;
  font-family: var(--font-sans); font-size: 11px; font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-3);
  border-bottom: 1px solid transparent;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: color 160ms var(--ease-standard), border-color 260ms var(--ease-standard);
  position: relative;
}
.p-sticky-nav .tab:hover, .p-sticky-nav .tab.active { color: var(--fg-1); }
.p-sticky-nav .tab.active { border-bottom-color: var(--fg-1); }
.p-sticky-nav .tab .price {
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  letter-spacing: -0.01em; text-transform: none; color: var(--fg-1);
}
.p-sticky-nav .tab .badge {
  position: absolute; top: 6px; right: 12px;
  font-family: var(--font-sans); font-size: 9px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--lw-canvas); background: var(--fg-1);
  padding: 3px 8px;
}

/* ---------- package detail ---------- */
.p-section {
  padding: clamp(64px, 9vw, 128px) 0;
}
.p-package {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  scroll-margin-top: 140px;
}
.p-package--flip .p-package-media { order: 2; }
.p-package--flip .p-package-body { order: 1; }

.p-package-media {
  background-size: cover; background-position: center;
  min-height: 720px;
  position: relative;
}
.p-package-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15,15,15,0.35) 100%);
  pointer-events: none;
}
.p-package-media .ribbon {
  position: absolute; top: 28px; left: 28px;
  background: var(--lw-canvas); color: var(--fg-1);
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  padding: 10px 16px;
}

.p-package-body {
  padding: clamp(40px, 5vw, 80px);
  display: flex; flex-direction: column; gap: 28px;
  justify-content: center;
  background: var(--lw-canvas);
}
.p-package-body .kicker {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-3);
}
.p-package-body h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(56px, 7vw, 128px); line-height: 0.95;
  letter-spacing: -0.02em; color: var(--fg-1); margin: 0;
}
.p-package-body .restriction {
  display: inline-flex; align-self: flex-start;
  padding: 8px 14px; background: var(--lw-bone);
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-2);
}
.p-package-body .desc {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 22px; line-height: 1.4; color: var(--fg-2); max-width: 30ch; margin: 0;
}
.p-package-body ul.features {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2);
}
ul.features li {
  padding-left: 16px; position: relative; line-height: 1.5;
}
ul.features li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 8px; height: 1px; background: var(--fg-1);
}
.p-package-body .price-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding-top: 24px; border-top: 1px solid var(--border-hairline);
}
.p-package-body .price {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(56px, 6vw, 96px); line-height: 1;
  letter-spacing: -0.02em; color: var(--fg-1);
}
.p-package-body .price small {
  font-family: var(--font-sans); font-size: 14px; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-3);
}
.p-package-body .price-note {
  font-family: var(--font-sans); font-size: 13px; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3);
  max-width: 30ch; line-height: 1.7;
}
.p-package-body .actions { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 8px; }

.p-btn {
  font-family: var(--font-sans); font-size: 12px; font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-1);
  background: transparent; border: 1px solid var(--fg-1); padding: 16px 32px;
  cursor: pointer; transition: background 260ms var(--ease-standard), color 260ms var(--ease-standard);
  display: inline-flex; align-items: center; gap: 12px;
}
.p-btn:hover { background: var(--fg-1); color: var(--lw-canvas); }
.p-btn--solid { background: var(--fg-1); color: var(--lw-canvas); }
.p-btn--solid:hover { background: var(--lw-canvas); color: var(--fg-1); }
.p-btn--text { border: 0; border-bottom: 1px solid var(--fg-1); padding: 6px 0; }
.p-btn--text:hover { background: transparent; color: var(--fg-3); border-bottom-color: var(--fg-3); }
.p-btn--on-dark { color: var(--lw-canvas); border-color: var(--lw-canvas); }
.p-btn--on-dark:hover { background: var(--lw-canvas); color: var(--fg-1); }

/* ---------- comparison ---------- */
.p-compare {
  padding: clamp(64px, 9vw, 128px) clamp(20px, 4vw, 56px);
  background: var(--lw-paper);
}
.p-compare-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 32px; flex-wrap: wrap; margin-bottom: 48px;
}
.p-compare-head h2 {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 5.5vw, 88px);
  line-height: 0.95; letter-spacing: -0.02em; color: var(--fg-1); margin: 0;
}
.p-compare-head h2 em { font-style: italic; }
.p-compare table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); }
.p-compare th, .p-compare td {
  padding: 18px 16px; text-align: left;
  border-bottom: 1px solid var(--border-hairline);
  vertical-align: middle;
}
.p-compare th {
  font-size: 11px; font-weight: 500; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--fg-1);
  border-bottom: 1px solid var(--fg-1);
  padding-bottom: 24px; padding-top: 0;
}
.p-compare th.package-col {
  text-align: center;
}
.p-compare th .pname {
  font-family: var(--font-display); font-weight: 300; font-size: 28px;
  letter-spacing: -0.01em; text-transform: none; color: var(--fg-1);
  line-height: 1; display: block; margin-bottom: 8px;
}
.p-compare th .pprice {
  display: block;
  font-family: var(--font-sans); font-size: 12px; font-weight: 400;
  letter-spacing: 0.24em; color: var(--fg-2); margin-top: 6px;
}
.p-compare td { font-size: 13px; font-weight: 300; color: var(--fg-2); }
.p-compare td.row-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--fg-1); width: 22%;
}
.p-compare td.cell { text-align: center; }
.p-compare td.cell .yes {
  display: inline-block; width: 8px; height: 8px;
  background: var(--fg-1); border-radius: 50%;
}
.p-compare td.cell .no {
  display: inline-block; width: 8px; height: 1px;
  background: var(--lw-mist);
}
.p-compare td.cell .v {
  font-family: var(--font-sans); font-size: 12px; color: var(--fg-1); font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.p-compare tr.highlight td { background: var(--lw-canvas); }
.p-compare tr.section-row td {
  font-size: 10px; font-weight: 500; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--fg-4);
  padding-top: 32px; border-bottom: 0; padding-bottom: 8px;
}

/* ---------- bespoke add-ons (editorial list, not a calculator) ---------- */
.p-addons-section {
  padding: clamp(64px, 9vw, 128px) clamp(20px, 4vw, 56px);
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
  background: var(--lw-paper);
}
.p-addons-head {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 40px;
}
.p-addons-head h2 {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 5.5vw, 88px);
  line-height: 0.95; letter-spacing: -0.02em; color: var(--fg-1); margin: 0;
}
.p-addons-head h2 em { font-style: italic; }
.p-addons-head p {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 19px; line-height: 1.45; color: var(--fg-2); margin: 16px 0 0; max-width: 30ch;
}
.p-addons-video {
  margin-top: 24px;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--lw-bone);
  position: relative;
}
.p-addons-video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}
.p-addons-list {
  display: flex; flex-direction: column;
}
.p-addon-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 24px; align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-hairline);
}
.p-addon-row:first-child { border-top: 1px solid var(--border-hairline); }
.p-addon-row .name {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(22px, 2vw, 28px); line-height: 1.2;
  letter-spacing: -0.01em; color: var(--fg-1);
}
.p-addon-row .name em { font-style: italic; color: var(--fg-3); font-size: 0.7em; margin-left: 8px; }
.p-addon-row .desc {
  grid-column: 1;
  font-family: var(--font-sans); font-size: 15px; font-weight: 300;
  line-height: 1.6; color: var(--fg-3); margin-top: 6px; max-width: 52ch;
}
.p-addon-row .price {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.01em; color: var(--fg-1); white-space: nowrap;
}
.p-addon-row .price small {
  font-family: var(--font-sans); font-size: 13px; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3);
  display: block; margin-top: 4px; text-align: right;
}

/* legacy calc styles (unused, retained for safety) */
.p-calc {
  padding: clamp(64px, 9vw, 128px) clamp(20px, 4vw, 56px);
  display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.p-calc-head h2 {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 5.5vw, 88px);
  line-height: 0.95; letter-spacing: -0.02em; color: var(--fg-1); margin: 0;
}
.p-calc-head h2 em { font-style: italic; }
.p-calc-head p {
  font-family: var(--font-sans); font-weight: 300; font-size: 15px; line-height: 1.7;
  color: var(--fg-3); margin: 24px 0 0; max-width: 36ch;
}
.p-calc-head .summary {
  margin-top: 40px; padding: 28px;
  background: var(--lw-ink); color: var(--lw-canvas);
  display: flex; flex-direction: column; gap: 18px;
}
.p-calc-head .summary .label {
  font-family: var(--font-sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: rgba(250,247,241,0.55);
}
.p-calc-head .summary .total {
  font-family: var(--font-display); font-weight: 300;
  font-size: 72px; line-height: 1; letter-spacing: -0.02em;
}
.p-calc-head .summary .total small {
  font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.24em;
  text-transform: uppercase; opacity: 0.7; margin-left: 8px;
}
.p-calc-head .summary .breakdown {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase;
  border-top: 1px solid rgba(250,247,241,0.18); padding-top: 16px;
}
.p-calc-head .summary .breakdown div {
  display: flex; justify-content: space-between; gap: 16px;
}
.p-calc-head .summary .breakdown div span:first-child { opacity: 0.7; }

.p-calc-side h3 {
  font-family: var(--font-sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-4);
  margin: 0 0 16px;
}
.p-calc-options {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin-bottom: 40px;
}
.p-calc-option {
  background: transparent; border: 1px solid var(--border-soft);
  padding: 20px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 200ms var(--ease-standard), background 200ms var(--ease-standard);
  font-family: inherit;
}
.p-calc-option:hover { border-color: var(--fg-2); }
.p-calc-option.active { border-color: var(--fg-1); background: var(--lw-paper); }
.p-calc-option .pname {
  font-family: var(--font-display); font-weight: 300; font-size: 28px;
  line-height: 1; letter-spacing: -0.01em; color: var(--fg-1);
}
.p-calc-option .ptype {
  font-family: var(--font-sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-3);
}
.p-calc-option .pprice {
  font-family: var(--font-sans); font-size: 14px; font-weight: 400;
  letter-spacing: 0.2em; color: var(--fg-1); margin-top: auto;
}

.p-addons {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--border-hairline);
}
.p-addon {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px 4px;
  border-bottom: 1px solid var(--border-hairline);
  cursor: pointer;
  transition: background 160ms var(--ease-standard);
}
.p-addon:hover { background: rgba(15,15,15,0.02); }
.p-addon.disabled { opacity: 0.35; cursor: not-allowed; }
.p-addon-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.p-addon .name {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-1);
}
.p-addon .desc {
  font-family: var(--font-sans); font-size: 12px; font-weight: 300;
  line-height: 1.5; color: var(--fg-3);
}
.p-addon-price {
  font-family: var(--font-display); font-weight: 300; font-size: 24px;
  letter-spacing: -0.01em; color: var(--fg-1); white-space: nowrap;
}
.p-addon-price small {
  font-family: var(--font-sans); font-size: 11px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3);
}
.p-addon-toggle {
  width: 28px; height: 28px; border: 1px solid var(--fg-1);
  background: transparent; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.p-addon.checked .p-addon-toggle { background: var(--fg-1); }
.p-addon.checked .p-addon-toggle::after {
  content: ''; width: 12px; height: 6px;
  border-left: 1px solid var(--lw-canvas);
  border-bottom: 1px solid var(--lw-canvas);
  transform: rotate(-45deg) translate(2px, -1px);
}

/* ---------- included strip ---------- */
.p-included {
  background: var(--lw-ink); color: var(--lw-canvas);
  padding: clamp(64px, 9vw, 128px) clamp(20px, 4vw, 56px);
}
.p-included h2 {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(32px, 4.5vw, 56px); line-height: 1.1; margin: 0 0 56px; max-width: 18ch;
}
.p-included-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 56px;
}
.p-included-item {
  border-top: 1px solid rgba(250,247,241,0.16);
  padding-top: 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.p-included-item .n {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: 18px; opacity: 0.5;
}
.p-included-item .t {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--lw-canvas);
}
.p-included-item .d {
  font-family: var(--font-sans); font-size: 15px; font-weight: 300;
  line-height: 1.65; color: rgba(250,247,241,0.72);
}

/* ---------- booking process ---------- */
.p-booking {
  padding: clamp(64px, 9vw, 128px) clamp(20px, 4vw, 56px);
}
.p-booking h2 {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 5.5vw, 88px);
  line-height: 0.95; letter-spacing: -0.02em; color: var(--fg-1); margin: 0 0 64px; max-width: 14ch;
}
.p-booking h2 em { font-style: italic; }
.p-booking-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  position: relative;
}
.p-step {
  border-top: 1px solid var(--fg-1);
  padding: 24px 24px 0 0;
  position: relative;
}
.p-step .n {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: 14px; color: var(--fg-3); margin-bottom: 16px;
  display: block;
}
.p-step .t {
  font-family: var(--font-display); font-weight: 300;
  font-size: 28px; line-height: 1.1; letter-spacing: -0.01em;
  color: var(--fg-1); margin: 0 0 14px;
}
.p-step .d {
  font-family: var(--font-sans); font-size: 15px; font-weight: 300;
  line-height: 1.7; color: var(--fg-3); margin: 0;
}

/* ---------- FAQ ---------- */
.p-faq {
  padding: clamp(64px, 9vw, 128px) clamp(20px, 4vw, 56px);
  background: var(--lw-paper);
  display: grid; grid-template-columns: 0.8fr 1.4fr;
  gap: clamp(40px, 6vw, 96px);
}
.p-faq-head h2 {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 5.5vw, 88px);
  line-height: 0.95; letter-spacing: -0.02em; color: var(--fg-1); margin: 0;
}
.p-faq-head h2 em { font-style: italic; }
.p-faq-head p {
  font-family: var(--font-sans); font-weight: 300; font-size: 15px; line-height: 1.7;
  color: var(--fg-3); margin: 24px 0 0; max-width: 30ch;
}
.p-faq-list { display: flex; flex-direction: column; }
.p-faq-item {
  border-bottom: 1px solid var(--border-hairline);
}
.p-faq-item:first-child { border-top: 1px solid var(--border-hairline); }
.p-faq-q {
  width: 100%; text-align: left; background: transparent; border: 0;
  padding: 26px 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(20px, 2.4vw, 28px); line-height: 1.25;
  letter-spacing: -0.01em; color: var(--fg-1);
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
}
.p-faq-q .plus {
  font-family: var(--font-sans); font-size: 14px; font-weight: 300;
  color: var(--fg-2); transition: transform 320ms var(--ease-standard);
  flex-shrink: 0;
}
.p-faq-item.open .p-faq-q .plus { transform: rotate(45deg); }
.p-faq-a {
  font-family: var(--font-sans); font-size: 15px; font-weight: 300;
  line-height: 1.7; color: var(--fg-2);
  max-height: 0; overflow: hidden;
  transition: max-height 480ms var(--ease-editorial), padding 480ms var(--ease-editorial);
  padding: 0; max-width: 60ch;
}
.p-faq-item.open .p-faq-a { max-height: 1000px; padding: 0 0 26px; }
.p-faq-a p { margin: 0 0 12px; }
.p-faq-a p:last-child { margin-bottom: 0; }

/* ---------- final CTA ---------- */
.p-cta {
  padding: clamp(64px, 9vw, 128px) clamp(20px, 4vw, 56px);
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.p-cta-img {
  aspect-ratio: 4/5;
  background-size: cover; background-position: center;
  min-height: 480px;
}
.p-cta-body {
  display: flex; flex-direction: column; gap: 28px;
}
.p-cta-body h2 {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(64px, 9vw, 144px); line-height: 0.95;
  letter-spacing: -0.025em; color: var(--fg-1); margin: 0;
}
.p-cta-channels { display: flex; flex-direction: column; gap: 0; margin-top: 16px; }
.p-cta-channel {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--border-hairline);
  text-decoration: none; color: var(--fg-1);
  transition: padding-left 260ms var(--ease-editorial);
}
.p-cta-channel:first-child { border-top: 1px solid var(--border-hairline); }
.p-cta-channel:hover { padding-left: 8px; }
.p-cta-channel .l {
  font-family: var(--font-sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-3);
}
.p-cta-channel .v {
  font-family: var(--font-display); font-weight: 300; font-size: 24px;
  letter-spacing: -0.01em; color: var(--fg-1);
}

/* ---------- footer mini ---------- */
.p-footer {
  background: var(--lw-ink); color: var(--lw-canvas);
  padding: 48px clamp(20px, 4vw, 56px);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(250,247,241,0.6);
  flex-wrap: wrap; gap: 16px;
}
.p-footer img { height: 24px; filter: invert(1); }
.p-footer a { color: rgba(250,247,241,0.85); text-decoration: none; margin-left: 24px; }
.p-footer a:hover { color: var(--lw-canvas); }

/* ---------- floating CTA ---------- */
.p-float-cta {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: var(--lw-ink); color: var(--lw-canvas);
  padding: 14px 18px 14px 24px;
  display: flex; align-items: center; gap: 24px;
  box-shadow: 0 24px 80px rgba(15,15,15,0.18);
  transition: transform 480ms var(--ease-editorial);
  z-index: 60;
}
.p-float-cta.visible { transform: translateX(-50%) translateY(0); }
.p-float-cta .name {
  font-family: var(--font-display); font-weight: 300; font-size: 22px;
  letter-spacing: -0.01em;
}
.p-float-cta .price {
  font-family: var(--font-sans); font-size: 12px; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase; color: rgba(250,247,241,0.7);
}
.p-float-cta button {
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-1);
  background: var(--lw-canvas); border: 0; padding: 12px 20px; cursor: pointer;
  transition: opacity 160ms;
}
.p-float-cta button:hover { opacity: 0.85; }

/* ---------- modal (reused) ---------- */
.p-modal-bg {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,15,15,0.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 260ms var(--ease-standard);
}
.p-modal-bg.open { opacity: 1; pointer-events: auto; }
.p-modal {
  background: var(--lw-canvas); padding: 48px 56px;
  width: min(560px, 92vw); position: relative;
  transform: translateY(12px);
  transition: transform 480ms var(--ease-editorial);
  box-shadow: 0 24px 80px rgba(15,15,15,0.18);
}
.p-modal-bg.open .p-modal { transform: translateY(0); }
.p-modal h3 {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: 32px; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--fg-1); margin: 0 0 8px;
}
.p-modal .modal-sub {
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--fg-3); margin: 0 0 28px;
}
.p-modal .close {
  position: absolute; top: 18px; right: 22px;
  background: transparent; border: 0; cursor: pointer; padding: 4px;
  font-family: var(--font-sans); font-size: 18px; color: var(--fg-2);
}
.p-modal .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.p-modal .field { display: flex; flex-direction: column; gap: 8px; }
.p-modal .field.full { grid-column: 1 / -1; }
.p-modal .field label {
  font-family: var(--font-sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-4);
}
.p-modal .field input, .p-modal .field textarea {
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  padding: 6px 0; background: transparent; border: 0;
  border-bottom: 1px solid var(--border-soft); color: var(--fg-1); outline: none;
  resize: none; transition: border-color 160ms var(--ease-standard);
}
.p-modal .field input:focus, .p-modal .field textarea:focus {
  border-bottom-color: var(--fg-1);
}

.p-toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--lw-ink); color: var(--lw-canvas);
  padding: 16px 28px; z-index: 300;
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
  transition: opacity 260ms var(--ease-standard), transform 480ms var(--ease-editorial);
}
.p-toast.open { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- scroll reveal & motion ---------- */
/* Content is ALWAYS visible by default. The entrance animation is purely
   additive and only arms when JS adds `reveal-armed` to <html> — and the same
   JS removes it as a safety net. A blank page is therefore impossible. */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-armed .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity 1000ms var(--ease-editorial),
      transform 1000ms var(--ease-editorial);
    transition-delay: var(--reveal-delay, 0ms);
  }
  html.reveal-armed .reveal.in { opacity: 1; transform: none; }

  .p-hero-bg, .p-hero-bottom { will-change: transform; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .p-hero { grid-template-columns: 1fr; }
  .p-hero-bottom { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .p-about { grid-template-columns: 1fr; gap: 40px; justify-content: start; }
  .p-about-media { order: 1; width: 100%; max-width: 420px; justify-self: start; }
  .p-about-body { order: 2; }
  .p-package { grid-template-columns: 1fr; }
  .p-package-media { min-height: 480px; }
  .p-calc { grid-template-columns: 1fr; }
  .p-faq { grid-template-columns: 1fr; }
  .p-cta { grid-template-columns: 1fr; }
  .p-booking-steps { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .p-included-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .p-package-body ul.features { grid-template-columns: 1fr; }
  .p-calc-options { grid-template-columns: 1fr; }
  .p-included-grid { grid-template-columns: 1fr; }
  .p-booking-steps { grid-template-columns: 1fr; }
  .p-modal .grid { grid-template-columns: 1fr; }
  .p-sticky-nav .label { display: none; }
  .p-sticky-nav .tab .price { display: none; }
}