/* ═══════════════════════════════════════════════════════════════════════
   DECISION PAGE SYSTEM
   The shared layer for pages that ask for one decision: the Intensive's
   homework, extracted for the immersion pages. A page links this sheet and
   keeps only its own skin inline. One accent, one action, depth behind
   a tap.
   Components: tokens and type, spacing, hero, offer-facts block, inclusion
   tiles, proof strip, quote, disclosure, decision card, sticky mobile bar,
   waitlist and enquiry form, FAQ accordion.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── TOKENS. Charcoal ground, one orange accent, the site's palette. ── */
:root {
  --dp-bg:        #181a17;
  --dp-bg-alt:    #1e201c;
  --dp-card:      #1b1d19;
  --dp-orange:    #FF6B35;
  --dp-text:      #efefef;
  --dp-muted:     #7a7e74;
  --dp-muted-mid: #a0a49a;
  --dp-border:    rgba(240,240,237,0.09);
  /* spacing scale */
  --dp-s1: 8px;
  --dp-s2: 16px;
  --dp-s3: 24px;
  --dp-s4: 40px;
  --dp-s5: 64px;
}

/* ── TYPE SCALE. Bold display promises, quiet section headings, uppercase
      mono-style labels for short eyebrows only. Body 17 to 18px at 1.6,
      prose held to roughly 65ch. ── */
.dp-display { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(36px, 6vw, 68px); line-height: 1.07; letter-spacing: -0.01em; color: var(--dp-text); }
.dp-h2 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.15; color: var(--dp-text); }
.dp-eyebrow { display: block; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dp-orange); margin-bottom: var(--dp-s2); }
.dp-body { font-size: 18px; line-height: 1.6; color: var(--dp-muted-mid); max-width: 65ch; }
.dp-body strong { color: var(--dp-text); font-weight: 500; }
.dp-small { font-size: 14px; line-height: 1.55; color: var(--dp-muted); }
@media (max-width: 640px) { .dp-body { font-size: 17px; } }

/* ── HERO. Image led: full-bleed photograph, soft dark scrim, the promise
      and the offer facts together, then the one action. ── */
.dp-hero { position: relative; min-height: 86vh; display: flex; align-items: flex-end; overflow: hidden; }
.dp-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dp-hero-scrim { position: absolute; inset: 0; background: linear-gradient(rgba(16,17,15,0.18) 30%, rgba(16,17,15,0.82) 88%); }
.dp-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 120px 2rem 56px; }
.dp-hero .dp-body { color: var(--dp-text); opacity: 0.94; margin-top: var(--dp-s2); }
@media (max-width: 640px) { .dp-hero { min-height: 72vh; } .dp-hero-inner { padding: 100px 1.25rem 40px; } }

/* ── OFFER FACTS. The deal in one quiet strip: dates, duration, capacity,
      price, status. Lives in the hero and again on the decision card. ── */
.dp-facts { display: flex; flex-wrap: wrap; gap: var(--dp-s1) var(--dp-s3); margin-top: var(--dp-s3); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dp-text); }
.dp-facts .dp-fact { white-space: nowrap; }
.dp-facts .dp-fact--key { color: var(--dp-orange); }
.dp-facts .dp-fact--status { color: var(--dp-muted-mid); }
@media (max-width: 640px) { .dp-facts { gap: var(--dp-s1) var(--dp-s2); } .dp-facts .dp-fact { white-space: normal; } }

/* ── SECTION SHELL. Vertical rhythm from the spacing scale. ── */
.dp-section { padding: var(--dp-s5) 2rem; }
.dp-section--alt { background: var(--dp-bg-alt); }
.dp-wrap { max-width: 1200px; margin: 0 auto; }
.dp-prose { max-width: 65ch; }
@media (min-width: 900px) { .dp-section { padding: calc(var(--dp-s5) + var(--dp-s4)) 2rem; } }
@media (max-width: 640px) { .dp-section { padding: var(--dp-s4) 1.25rem; } }

/* ── INCLUSION TILES. Short titles, one quiet line each; the full list
      lives in a disclosure beneath. ── */
.dp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dp-s2); margin-top: var(--dp-s4); }
.dp-tile { background: var(--dp-card); border: 1px solid var(--dp-border); padding: var(--dp-s3); }
.dp-tile h3 { font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 800; color: var(--dp-text); margin: 0 0 var(--dp-s1); }
.dp-tile p { font-size: 16px; line-height: 1.55; color: var(--dp-muted-mid); margin: 0; }
@media (max-width: 900px) { .dp-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .dp-tiles { grid-template-columns: 1fr; } }

/* ── PROOF STRIP. Verifiable claims, flat list, no decoration. The list
      items carry their own page styling; this is the frame. ── */
.dp-proof { border-left: 3px solid var(--dp-orange); padding-left: var(--dp-s3); }

/* ── QUOTE. Permissioned person-proof only, orange left border. ── */
.dp-quote { border-left: 3px solid var(--dp-orange); padding: var(--dp-s1) 0 var(--dp-s1) var(--dp-s3); margin: var(--dp-s4) 0; }
.dp-quote p { font-family: 'Montserrat', sans-serif; font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; line-height: 1.45; color: var(--dp-text); margin: 0; }
.dp-quote footer { margin-top: var(--dp-s2); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dp-muted); }

/* ── DISCLOSURE. Native details/summary so keyboard and screen readers
      work for free. Quiet one-line summary, plus turns to a cross. ── */
.dp-d { border-top: 1px solid var(--dp-border); }
.dp-d:last-of-type { border-bottom: 1px solid var(--dp-border); }
.dp-d > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--dp-s2); font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 600; color: var(--dp-text); padding: var(--dp-s2) 2px; min-height: 44px; }
.dp-d > summary::-webkit-details-marker { display: none; }
.dp-d > summary::after { content: "+"; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 24px; line-height: 1; color: var(--dp-muted); transition: transform 0.25s ease; flex-shrink: 0; }
.dp-d[open] > summary::after { transform: rotate(45deg); color: var(--dp-orange); }
.dp-d-body { padding: var(--dp-s1) 2px var(--dp-s3) var(--dp-s2); }
.dp-d-body > * + * { margin-top: var(--dp-s2); }
.dp-ds { margin-top: var(--dp-s4); }

/* ── FAQ ACCORDION. The same disclosure, numbered. ── */
.dp-faq { counter-reset: dpfaq; margin-top: var(--dp-s3); }
.dp-faq .dp-d > summary::before { counter-increment: dpfaq; content: counter(dpfaq, decimal-leading-zero); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; color: var(--dp-muted); margin-right: var(--dp-s1); }
.dp-faq .dp-d > summary { justify-content: flex-start; }
.dp-faq .dp-d > summary::after { margin-left: auto; }
.dp-faq .dp-d-body p { font-size: 17px; line-height: 1.6; color: var(--dp-muted-mid); max-width: 65ch; }

/* ── DECISION CARD. The deal restated where the decision happens: facts,
      money terms, the one action. ── */
.dp-decision { background: var(--dp-card); border: 1px solid var(--dp-border); padding: var(--dp-s4) var(--dp-s3); max-width: 640px; }
.dp-decision .dp-facts { margin-top: var(--dp-s2); }
.dp-decision .dp-price { font-family: 'Montserrat', sans-serif; font-size: clamp(34px, 4.6vw, 52px); font-weight: 800; color: var(--dp-text); margin: var(--dp-s2) 0 var(--dp-s1); }

/* ── STICKY MOBILE BAR. One fact, one action, dismissible. A page enables
      it by rendering .dp-sticky and adding .is-on after first scroll. ── */
.dp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: none; align-items: center; justify-content: space-between; gap: var(--dp-s2); padding: 10px 1rem calc(10px + env(safe-area-inset-bottom)); background: rgba(20,21,19,0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--dp-border); transform: translateY(100%); transition: transform 0.3s ease; }
.dp-sticky.is-on { transform: none; }
.dp-sticky-info { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dp-text); }
@media (max-width: 760px) { .dp-sticky { display: flex; } }

/* ── FORM. Waitlist or enquiry; the page keeps its own Netlify wiring and
      field markup, this styles the shell. ── */
.dp-form { max-width: 560px; }
.dp-form input[type="text"], .dp-form input[type="email"], .dp-form textarea { width: 100%; background: var(--dp-card); border: 1px solid var(--dp-border); color: var(--dp-text); font-family: 'Inter', sans-serif; font-size: 17px; padding: 12px 14px; min-height: 44px; border-radius: 2px; }
.dp-form input::placeholder, .dp-form textarea::placeholder { color: var(--dp-muted); }
.dp-form label { display: block; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dp-muted-mid); margin: var(--dp-s2) 0 6px; }

/* ── ANALYTICS PLACEHOLDER. GoatCounter snippet to come. Intentionally
      empty: no analytics load from this file. ──
   <script data-goatcounter="" async src=""></script>
*/