/* ProjectSG Premier (/premier, prefix prm-): the private client tier. The hero card is black and gold in both
   themes and tilts to the pointer (src/js/premier.js); it drifts slowly while idle and stays still for reduced
   motion. Then the four privilege pillars (each led by the client's questions), the ambitions
   accordion, a quiet eligibility panel and Why ProjectSG. */

/* ---------- Hero */
.prm-hero .prm-h1 { max-width: 18ch; font-size: clamp(36px, 4.3vw, 58px); text-wrap: balance; }
@media (min-width: 861px) { .prm-hero .prm-h1 span { white-space: nowrap; } }
.prm-hero .prm-h1 em { font-style: normal; background: linear-gradient(100deg, #7a581c, #a87d2e 45%, #8a5a26); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .prm-hero .prm-h1 em { background-image: linear-gradient(100deg, #c99a45, #f2dc9e 45%, #c9a24f); }

@property --rx { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ry { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --mx { syntax: "<percentage>"; inherits: false; initial-value: 30%; }

.prm-stage { position: relative; margin: 0; display: grid; place-items: center; padding: clamp(8px, 3vw, 36px) 0 clamp(30px, 4vw, 48px); perspective: 1200px; }
.prm-stage::before { content: ""; position: absolute; inset: 4% 2% 14%; background: radial-gradient(closest-side, rgba(212, 166, 72, 0.26), transparent 72%); pointer-events: none; }
:root[data-theme="light"] .prm-stage::before { background: radial-gradient(closest-side, rgba(212, 166, 72, 0.22), transparent 72%); }

.prm-card { position: relative; isolation: isolate; overflow: hidden; width: min(100%, 470px); aspect-ratio: 1.586; border-radius: 22px; padding: clamp(18px, 3vw, 30px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: #f3e6c4;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(233, 207, 138, 0.15), transparent 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(181, 138, 53, 0.13), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 6px),
    linear-gradient(135deg, #1e1f24 0%, #0d0e11 50%, #17181c 100%);
  box-shadow: inset 0 0 0 1px rgba(233, 207, 138, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 34px 60px -20px rgba(0, 0, 0, 0.6), 0 12px 24px -12px rgba(0, 0, 0, 0.45);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
:root[data-theme="light"] .prm-card { box-shadow: inset 0 0 0 1px rgba(233, 207, 138, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 34px 60px -22px rgba(48, 36, 12, 0.45), 0 12px 24px -14px rgba(48, 36, 12, 0.3); }
.prm-card::before { content: ""; position: absolute; inset: 10px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(233, 207, 138, 0.15); pointer-events: none; }
.prm-card__mark { position: absolute; z-index: -1; right: -7%; bottom: -16%; height: 96%; width: auto; opacity: 0.08; }
.prm-card__tier { font: 600 10.5px/1 var(--font-body); letter-spacing: 0.26em; text-transform: uppercase; color: rgba(233, 207, 138, 0.8); }
.prm-card__logo { align-self: center; width: 80%; height: auto; }
.prm-card__foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(233, 207, 138, 0.2); }
.prm-card__foot > span { display: grid; gap: 5px; }
.prm-card__foot > span:last-child { text-align: right; }
.prm-card__foot small { font: 600 9.5px/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(243, 230, 196, 0.58); }
.prm-card__foot b { font: 600 clamp(11.5px, 1.3vw, 13.5px)/1.2 var(--font-body); color: #f3e6c4; }
.prm-card__sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 32%, rgba(255, 238, 196, 0.14) 46%, rgba(255, 255, 255, 0.04) 53%, transparent 66%) var(--mx) 0 / 260% 100% no-repeat; mix-blend-mode: screen; }
.prm-stage__floor { position: absolute; bottom: 6px; left: 20%; right: 20%; height: 24px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.45), transparent); filter: blur(6px); }
:root[data-theme="light"] .prm-stage__floor { background: radial-gradient(closest-side, rgba(60, 45, 15, 0.28), transparent); }
@keyframes prm-drift { 0%, 100% { --rx: 5deg; --ry: -11deg; --mx: 18%; } 50% { --rx: -2deg; --ry: 9deg; --mx: 82%; } }
html.motion .prm-card { animation: prm-drift 10s ease-in-out infinite; }
html.motion .prm-card.is-live { animation: none; transition: transform 0.12s linear; }
@media (prefers-reduced-motion: reduce) { .prm-card { animation: none; transition: none; } }

/* ---------- Private letter: cream paper with a gold double frame, paper-coloured in both themes. "Dear Valued
   Client," and the signature are in Pinyon Script. When the letter comes into view its greeting, paragraphs and
   signature fade and rise into focus one after another (premier.js); without motion it all shows at once. */
.prm-letter { position: relative; isolation: isolate; overflow: hidden; max-width: 880px; margin: 0 auto; padding: clamp(56px, 7.5vw, 108px) clamp(36px, 7.5vw, 108px); border-radius: var(--radius-card); display: grid; gap: clamp(20px, 2.6vw, 30px); color: #1c1a16; background: radial-gradient(120% 80% at 50% 0%, #fffaf0, #f3ead7 72%); box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.6); }
:root[data-theme="light"] .prm-letter { box-shadow: 0 0 0 1px rgba(138, 100, 32, 0.18), 0 30px 60px -36px rgba(60, 45, 15, 0.35); }
.prm-letter::before, .prm-letter::after { content: ""; position: absolute; border-radius: 12px; pointer-events: none; }
.prm-letter::before { inset: 12px; border: 1px solid rgba(138, 100, 32, 0.5); }
.prm-letter::after { inset: 17px; border: 1px solid rgba(138, 100, 32, 0.2); border-radius: 9px; }
.prm-letter__page { display: grid; gap: clamp(20px, 2.6vw, 30px); }
.prm-letter__dear { margin: 0; font: 400 clamp(38px, 4.8vw, 58px)/1.15 "Pinyon Script", "Snell Roundhand", cursive; color: #1c1a16; }
.prm-letter__text { display: grid; gap: 1.2em; font: 400 clamp(16.5px, 1.45vw, 19px)/1.8 var(--font-body); letter-spacing: -0.005em; color: #3a352c; }
.prm-letter__text p { margin: 0; }
.prm-letter__sign { margin-top: -6px; font: 400 clamp(42px, 5.2vw, 64px)/1.1 "Pinyon Script", "Snell Roundhand", cursive; color: #7a581c; }
.prm-letter.is-reveal-ready .prm-rev { opacity: 0; transform: translateY(16px); filter: blur(5px); transition: opacity 1s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1s ease; transition-delay: calc(var(--i) * 0.32s); }
.prm-letter.is-revealed .prm-rev { opacity: 1; transform: none; filter: none; }

/* ---------- Roomier spacing on this page (user's request) */
.sec.prm-sec { padding-top: clamp(88px, 11vw, 168px); }
.prm-sec .sec__head { margin-bottom: clamp(40px, 5.4vw, 76px); }

/* ---------- Numbered principles list (Why ProjectSG) */
.prm-principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.prm-principles li { position: relative; display: grid; gap: 12px; align-content: start; padding-top: 26px; border-top: 1px solid var(--line-2); }
.prm-principles li::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--gold-grad); }
.prm-principles b { font: 600 13px/1 var(--font-body); letter-spacing: 0.14em; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.prm-principles h3, .prm-principles p { margin: 0; }
@media (max-width: 860px) { .prm-principles { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Privilege pillars */
.prm-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); }
.prm-pillar { position: relative; display: grid; gap: 22px; align-content: start; padding: clamp(30px, 4.6vw, 64px); border-radius: var(--radius-card); background: var(--panel); }
.prm-pillar::before { content: ""; position: absolute; top: 0; left: clamp(30px, 4.6vw, 64px); width: 56px; height: 2px; background: var(--gold-grad); }
.prm-pillar header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "disk title num"; align-items: center; gap: 18px; }
.prm-pillar .psg-disk { grid-area: disk; margin: 0; }
.prm-pillar h3 { grid-area: title; margin: 0; }
.prm-pillar__q { margin: 0; padding-left: 14px; box-shadow: inset 2px 0 0 var(--gold-line); font: 500 clamp(17px, 1.5vw, 19px)/1.45 var(--font-body); letter-spacing: -0.01em; color: var(--ink-2); }
.prm-num { grid-area: num; font: 700 clamp(30px, 3vw, 42px)/1 var(--font-body); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1px var(--gold-line); }
.prm-list { list-style: none; margin: 0; padding: 0; display: grid; }
.prm-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; padding: 20px 0; border-top: 1px solid var(--line); }
.prm-list li:last-child { padding-bottom: 0; }
.prm-list li::before { content: ""; grid-row: 1 / span 2; justify-self: center; width: 7px; height: 7px; margin-top: 8px; transform: rotate(45deg); background: var(--gold-grad); }
.prm-list b { font: 600 16px/1.4 var(--font-body); letter-spacing: -0.01em; color: var(--ink); }
.prm-list span { font: 400 14.5px/1.5 var(--font-body); color: var(--muted); }
:root[data-theme="light"] .prm-pillar { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
/* Pillar 05 (Lifestyle) spans the row; its complimentary sessions and preferred privileges (picked by the user from
   ProjectSG Client Benefits) sit three across. */
.prm-pillar--wide { grid-column: 1 / -1; }
.prm-pillar__sub { margin: 18px 0 -6px; font: 600 12px/1.2 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); }
.prm-pillar--wide .prm-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 4.4vw, 64px); }
.prm-pillar--wide .prm-list li { padding-bottom: 0; }
.prm-offer { margin-left: 6px; font-style: normal; font-weight: 600; font-size: 14px; color: var(--accent-text); white-space: nowrap; }
@media (max-width: 860px) { .prm-pillars { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .prm-pillar--wide .prm-list { grid-template-columns: minmax(0, 1fr); } .prm-pillar--wide .prm-list li { padding-bottom: 20px; } .prm-pillar--wide .prm-list li:last-child { padding-bottom: 0; } }

/* ---------- Your ambitions: question-led goals in an exclusive <details> accordion; the heading stays beside
   the list on wide screens */
.prm-goals { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.prm-goals .sec__head { position: sticky; top: 110px; margin: 0; }
.prm-goals__list { display: grid; border-top: 1px solid var(--line-2); }
.prm-goal { border-bottom: 1px solid var(--line-2); }
.prm-goal summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; grid-template-areas: "label chev" "q chev"; gap: 6px 16px; align-items: center; padding: clamp(24px, 3.2vw, 36px) 0; }
.prm-goal summary::-webkit-details-marker { display: none; }
.prm-goal summary:focus-visible { outline: 2px solid var(--gold-line); outline-offset: 4px; border-radius: 6px; }
.prm-goal__label { grid-area: label; font: 600 12px/1.2 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); }
.prm-goal__q { grid-area: q; font: 600 clamp(21px, 2.2vw, 28px)/1.2 var(--font-body); letter-spacing: -0.025em; color: var(--ink); transition: color 0.2s; }
.prm-goal summary:hover .prm-goal__q { color: var(--accent-text); }
.prm-goal summary .psg-ic { grid-area: chev; font-size: 22px; color: var(--muted); transition: transform 0.2s; }
.prm-goal[open] summary .psg-ic { transform: rotate(180deg); color: var(--accent-text); }
.prm-goal__body { display: grid; gap: 18px; padding: 0 40px clamp(28px, 3.4vw, 40px) 0; }
.prm-goal__body p { margin: 0; max-width: 62ch; }
.prm-goal__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prm-goal__tags a { color: inherit; }
@media (max-width: 860px) {
  .prm-goals { grid-template-columns: minmax(0, 1fr); }
  .prm-goals .sec__head { position: static; }
  .prm-goal__body { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .prm-goal__q, .prm-goal summary .psg-ic { transition: none; } }

/* ---------- Eligibility: a quiet panel (the user found the earlier gold card too loud). Two criteria side by side
   with modest figures, and a text link to check eligibility. */
.prm-elig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-areas: "intro crit" "intro more"; gap: 18px clamp(28px, 5vw, 72px); align-items: start; padding: clamp(28px, 4vw, 48px) clamp(26px, 4vw, 52px); border-radius: var(--radius-card); background: var(--panel); }
:root[data-theme="light"] .prm-elig { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(60, 50, 20, 0.04); }
.prm-elig__intro { grid-area: intro; display: grid; gap: 12px; }
.prm-elig__intro p { margin: 0; max-width: 42ch; }
.prm-elig__crit { grid-area: crit; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prm-elig__crit > div { display: grid; gap: 6px; align-content: start; padding: 4px clamp(16px, 2.6vw, 32px); border-left: 1px solid var(--line-2); }
.prm-elig__crit dt { font: 500 13.5px/1.4 var(--font-body); color: var(--muted); }
.prm-elig__crit dd { margin: 0; font: 600 clamp(22px, 2.2vw, 28px)/1.15 var(--font-body); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.prm-elig__more { grid-area: more; justify-self: start; margin-left: clamp(16px, 2.6vw, 32px); }
@media (max-width: 760px) {
  .prm-elig { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "crit" "more"; }
  .prm-elig__crit { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .prm-elig__crit > div { padding: 0 0 0 16px; }
  .prm-elig__more { margin-left: 0; }
}