/*
  PLVN Shared Design System
  Shared across all marketing sub-pages.
  index.html keeps its own inline styles for page-specific overrides.
*/

@font-face { font-family: 'Radlush'; src: url('/assets/fonts/Radlush-Regular.ttf')   format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Radlush'; src: url('/assets/fonts/Radlush-Medium.ttf')    format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Radlush'; src: url('/assets/fonts/Radlush-SemiBold.ttf')  format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Radlush'; src: url('/assets/fonts/Radlush-Bold.ttf')      format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Radlush'; src: url('/assets/fonts/Radlush-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Radlush'; src: url('/assets/fonts/Radlush-Black.ttf')     format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --teal-deeper: #05352f;
  --teal-900:   #094a42;
  --teal-mid:   #118879;
  --teal-500:   #16b19e;
  --teal-300:   #7ed8c8;
  --teal-100:   #c7fdf6;
  --teal-50:    #e8f7f5;
  --coral:      #fd623b;
  --coral-soft: #ffefeb;
  --yellow:     #fac23b;
  --blue:       #124e67;

  --ink-900: #0a1f1c;
  --ink-700: #2c3e3a;
  --ink-500: #5a6e6a;
  --ink-300: #9aaeaa;
  --ink-100: #d8e3df;

  --paper:   #f7f3ec;
  --paper-2: #efe9df;
  --paper-3: #e6dfd1;

  --grid-max: 1320px;
  --gutter: 24px;

  --ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emph: cubic-bezier(0.16, 1, 0.3, 1);
}

html, body {
  background: var(--paper);
  color: var(--ink-900);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--coral); color: white; }

/* ── Layout ── */
.frame { max-width: var(--grid-max); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Nav ── */
nav.top {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(247,243,236,0.78);
  border-bottom: 1px solid var(--ink-100);
}
.top-inner {
  max-width: var(--grid-max); margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex; align-items: center; gap: 32px;
}
.mark {
  font-family: 'Lexend', sans-serif; font-weight: 700;
  letter-spacing: -3px; font-size: 26px; color: var(--ink-900);
  text-decoration: none; flex-shrink: 0;
}
.mark .dot { color: var(--coral); }
.top-links {
  display: flex; align-items: center; gap: 28px; font-size: 14px;
}
.top-links a {
  color: var(--ink-700); text-decoration: none;
  transition: color 0.2s var(--ease);
  display: inline-flex; align-items: center; gap: 4px;
  position: relative;
}
/* Animated underline: draws left-to-right on hover */
.top-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 100%; height: 1px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.32s var(--ease-emph);
  pointer-events: none;
}
.top-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.top-links a:hover { color: var(--coral); }
.top-links a .chev { font-size: 9px; opacity: 0.6; transform: translateY(-1px); }
.top-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
@media (max-width: 900px) { .top-links { display: none; } }
@media (max-width: 640px) {
  .top-inner { padding: 12px var(--gutter); gap: 12px; }
  .mark { font-size: 22px; letter-spacing: -2px; }
}

/* ── Button ── */
.btn {
  --bg: var(--ink-900); --fg: white; --br: transparent;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--br);
  font-family: 'Lexend', sans-serif; font-weight: 500; font-size: 15px;
  padding: 14px 22px 14px 24px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn .arrow {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.4s var(--ease-emph);
  font-size: 13px;
}
.btn:hover .arrow { transform: rotate(-45deg); }
.btn--coral { --bg: var(--coral); }
.btn--coral:hover { box-shadow: 0 14px 36px -10px rgba(253,98,59,0.5); }
.btn--ghost { --bg: transparent; --fg: var(--ink-900); --br: var(--ink-300); }
.btn--ghost .arrow { background: var(--paper-2); color: var(--ink-900); }
.btn--ghost:hover { --br: var(--ink-900); }
.btn--white { --bg: white; --fg: var(--ink-900); }
.btn--white .arrow { background: var(--paper-2); color: var(--ink-900); }
.btn.sm { padding: 9px 16px 9px 18px; font-size: 13px; }
.btn.sm .arrow { width: 22px; height: 22px; font-size: 11px; }
@media (max-width: 640px) {
  .btn.sm { min-height: 40px; padding: 8px 14px 8px 16px; }
}

/* ── Footer ── */
footer.site {
  background: var(--ink-900); color: rgba(255,255,255,0.7);
  padding: 80px 0 32px;
  position: relative; overflow: hidden;
}
.ft-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ft-grid h5 {
  color: white; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 18px; font-weight: 600;
}
.ft-grid ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ft-grid a { color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s var(--ease); }
.ft-grid a:hover { color: white; }
.ft-brand .mark { color: white; }
.ft-brand p { font-family: 'Fraunces', serif; font-size: 18px; line-height: 1.45; margin-top: 16px; max-width: 320px; }
.ft-brand .socials { display: flex; gap: 8px; margin-top: 24px; }
.ft-brand .socials a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.65);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.ft-brand .socials a:hover { background: var(--coral); color: white; }
.ft-bot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 32px; flex-wrap: wrap; gap: 16px; font-size: 13px;
}
.biglogo {
  font-family: 'Radlush', 'Boogaloo', sans-serif;
  font-size: clamp(80px, 18vw, 280px);
  line-height: 0.9; letter-spacing: -0.04em;
  color: rgba(255,255,255,0.06);
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  pointer-events: none; user-select: none; white-space: nowrap;
}
@media (max-width: 1000px) { .ft-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .ft-grid { grid-template-columns: 1fr; } }

/* ── Sub-page hero ── */
.page-hero {
  padding: 80px 0 72px;
  border-bottom: 1px solid var(--ink-100);
}
.page-eyebrow {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--coral); font-weight: 600; margin-bottom: 20px;
  display: inline-flex; align-items: center; gap: 10px;
}
.page-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--coral); }
.page-hero h1 {
  font-family: 'Radlush', 'Boogaloo', sans-serif;
  font-size: clamp(44px, 6vw, 96px);
  line-height: 0.93; letter-spacing: -0.035em;
  color: var(--ink-900); text-wrap: balance;
  max-width: 900px;
}
.page-hero h1 em {
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 400; color: var(--coral);
}
.page-hero .lede {
  font-family: 'Fraunces', serif;
  font-size: 20px; line-height: 1.5; color: var(--ink-700);
  max-width: 600px; margin-top: 28px;
}
@media (max-width: 640px) { .page-hero { padding: 52px 0 48px; } }

/* ── Document / prose layout ── */
.doc-body {
  max-width: 740px;
  padding: 72px var(--gutter) 128px;
  margin: 0 auto;
}
.doc-body h2 {
  font-family: 'Radlush', 'Boogaloo', sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1; letter-spacing: -0.025em;
  color: var(--ink-900); margin: 56px 0 20px;
}
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 {
  font-family: 'Lexend', sans-serif; font-weight: 600;
  font-size: 18px; color: var(--ink-900);
  margin: 36px 0 12px;
}
.doc-body p {
  font-family: 'Fraunces', serif;
  font-size: 18px; line-height: 1.65; color: var(--ink-700);
  margin-bottom: 20px;
}
.doc-body ul, .doc-body ol {
  font-family: 'Fraunces', serif;
  font-size: 18px; line-height: 1.65; color: var(--ink-700);
  margin: 0 0 20px 24px;
}
.doc-body li { margin-bottom: 8px; }
.doc-body a { color: var(--teal-mid); text-decoration: underline; }
.doc-body a:hover { color: var(--coral); }
.doc-meta {
  display: flex; gap: 32px; flex-wrap: wrap;
  padding: 20px 0; border-top: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
  margin-bottom: 48px;
  font-size: 13px; color: var(--ink-500);
  font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.doc-body hr {
  border: none; border-top: 1px solid var(--ink-100); margin: 48px 0;
}
.doc-body table.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0 32px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-700);
}
.doc-body table.doc-table th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10, 31, 28, 0.5);
  font-weight: 500;
  text-align: left;
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: top;
}
.doc-body table.doc-table td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: top;
}
.doc-body table.doc-table tr:last-child th,
.doc-body table.doc-table tr:last-child td {
  border-bottom: none;
}
@media (max-width: 640px) {
  .doc-body table.doc-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Cards grid ── */
.card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 48px;
}
@media (max-width: 900px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .card-grid { grid-template-columns: 1fr; } }
.card {
  background: white; border: 1px solid var(--ink-100);
  border-radius: 16px; padding: 28px;
}
.card h3 {
  font-family: 'Lexend', sans-serif; font-weight: 600;
  font-size: 17px; color: var(--ink-900); margin-bottom: 10px;
}
.card p {
  font-family: 'Fraunces', serif; font-size: 16px;
  line-height: 1.55; color: var(--ink-700);
}

/* ── Section util ── */
.sec-pad { padding: 96px 0; }
.sec-pad + .sec-pad { border-top: 1px solid var(--ink-100); }
.label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--coral); font-weight: 600; margin-bottom: 16px;
  display: inline-block;
}
.sec-h2 {
  font-family: 'Radlush', 'Boogaloo', sans-serif;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.95; letter-spacing: -0.03em;
  color: var(--ink-900); text-wrap: balance;
}
.sec-h2 em {
  font-family: 'Fraunces', serif;
  font-style: italic; font-weight: 400; color: var(--coral);
}
.sec-body {
  font-family: 'Fraunces', serif;
  font-size: 19px; line-height: 1.55; color: var(--ink-700);
  max-width: 600px; margin-top: 20px;
}
@media (max-width: 640px) { .sec-pad { padding: 64px 0; } }

/* ═══════════════════════════════════════════════
   PLVN Motion System — Emil Kowalski principles
   Restrained, spring-physics, purposeful.
   ═══════════════════════════════════════════════ */

/* ── Scroll progress bar ── */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 200;
  width: 100%; height: 2px;
  background: var(--coral);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
  will-change: transform;
}

/* ── Nav scrolled state ── */
nav.top.is-scrolled {
  box-shadow: 0 1px 0 var(--ink-100), 0 8px 32px -8px rgba(10,31,28,0.08);
}

/* ── Scroll reveal system ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="scale"] { transform: scale(0.95); transform-origin: center; }
[data-reveal].is-revealed { opacity: 1; transform: none !important; }

/* Stagger delays */
[data-delay="1"] { transition-delay: 80ms; }
[data-delay="2"] { transition-delay: 160ms; }
[data-delay="3"] { transition-delay: 240ms; }
[data-delay="4"] { transition-delay: 320ms; }
[data-delay="5"] { transition-delay: 400ms; }
[data-delay="6"] { transition-delay: 480ms; }

/* ── Card hover lift ── */
.card, .ev-card, .feat, .price {
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.card:hover  { transform: translateY(-4px); box-shadow: 0 16px 40px -12px rgba(10,31,28,0.12); }
.ev-card:hover { transform: translateY(-3px) scale(1.005); box-shadow: 0 12px 32px -10px rgba(10,31,28,0.1); }
.price:hover { transform: translateY(-4px); box-shadow: 0 20px 48px -14px rgba(10,31,28,0.14); }
.feat:hover  { transform: translateY(-3px); box-shadow: 0 14px 36px -10px rgba(10,31,28,0.1); }

/* ── Hero float chips ── */
@keyframes plvn-float-a {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-8px) rotate(-0.8deg); }
}
@keyframes plvn-float-b {
  0%, 100% { transform: translateY(0) rotate(1.5deg); }
  50%       { transform: translateY(-6px) rotate(2.2deg); }
}
.float-chip.a { animation: plvn-float-a 4.5s ease-in-out infinite; }
.float-chip.b { animation: plvn-float-b 5.5s ease-in-out 0.6s infinite; }

/* ── Hero phone gentle float ── */
@keyframes plvn-phone-drift {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.phone { animation: plvn-phone-drift 7s ease-in-out 0.3s infinite; }

/* ── Pulse dot ── */
@keyframes plvn-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.75); }
}
.pulse { animation: plvn-pulse 2.2s ease-in-out infinite; }

/* ── FAQ details expand ── */
details.faq {
  border-top: 1px solid var(--ink-100);
  padding: 20px 0;
}
details.faq summary {
  cursor: pointer; list-style: none;
  font-family: 'Lexend', sans-serif; font-weight: 500;
  font-size: 17px; color: var(--ink-900);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  user-select: none;
  transition: color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--paper-2); color: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 300;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s;
}
details.faq[open] summary::after { transform: rotate(45deg); background: var(--coral); color: white; }
details.faq summary:hover { color: var(--coral); }
.ans { padding-top: 12px; font-family: 'Fraunces', serif; font-size: 17px; line-height: 1.65; color: var(--ink-700); }

/* ── Page visual band (inner pages) ── */
.page-visual {
  width: 100%; aspect-ratio: 21/9;
  border-radius: 20px; overflow: hidden;
  margin: -16px 0 72px;
  background: linear-gradient(135deg, var(--teal-900) 0%, var(--ink-900) 100%);
  position: relative;
}
.page-visual img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-visual:hover img { transform: scale(1.025); }
.page-visual-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(10,31,28,0.4) 100%);
  pointer-events: none;
}
@media (max-width: 768px) {
  .page-visual { aspect-ratio: 16/9; border-radius: 14px; margin-bottom: 48px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-hero] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .float-chip, .phone { animation: none !important; }
  .pulse { animation: none !important; }
  .card, .ev-card, .feat, .price { transition: none !important; }
  .page-visual img { transition: none !important; }
}

/* ── Apply modal (careers.html) ──
   <dialog>-based form. Keep the chrome restrained: paper card on the
   default backdrop, hairline borders, single coral accent on the
   submit button. The form fields fade in with the modal so motion
   stays consistent with the Emil pass on the rest of the site.
*/
.apply-modal {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--ink-900);
  max-width: 720px;
  width: calc(100vw - 32px);
  max-height: 92vh;
  border-radius: 18px;
  overflow: hidden;
}
.apply-modal::backdrop {
  background: rgba(10, 31, 28, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.apply-modal[open] {
  animation: applyModalIn 0.32s var(--ease-emph) both;
}
@keyframes applyModalIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.apply-modal__card {
  background: #fff;
  border-radius: 18px;
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 92vh;
  overflow-y: auto;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--ink-900);
}
.apply-modal__close {
  position: absolute;
  top: 18px;
  right: 22px;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-500);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.apply-modal__close:hover {
  color: var(--ink-900);
  background: var(--paper-2);
}
.apply-modal__header { display: flex; flex-direction: column; gap: 6px; padding-right: 36px; }
.apply-modal__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
}
.apply-modal__header h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  color: var(--ink-900);
  text-wrap: balance;
}
.apply-modal__subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
}
.apply-modal__role { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-500); }
.apply-modal__detail {
  background: var(--paper);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-700);
  max-height: 220px;
  overflow-y: auto;
}
.apply-modal__detail:empty { display: none; }
.apply-modal__detail h3, .apply-modal__detail h4 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  color: var(--ink-900);
  margin: 16px 0 6px;
  font-size: 1rem;
}
.apply-modal__detail h3:first-child, .apply-modal__detail h4:first-child { margin-top: 0; }
.apply-modal__detail p { margin: 0 0 10px; }
.apply-modal__detail ul { margin: 4px 0 12px 18px; padding: 0; }
.apply-modal__detail li { margin: 4px 0; }
.apply-detail-loading, .apply-detail-fallback {
  font-style: italic;
  color: var(--ink-500);
  margin: 0;
}
.apply-modal__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.apply-modal__form--hidden { display: none; }
.apply-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) {
  .apply-modal__row { grid-template-columns: 1fr; }
  .apply-modal__card { padding: 22px 20px 24px; }
}
.apply-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  font-size: 0.9rem;
}
.apply-modal__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-700);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.apply-modal__hint {
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
  color: var(--ink-500);
  font-weight: 400;
}
.apply-modal__field input[type="text"],
.apply-modal__field input[type="email"],
.apply-modal__field input[type="tel"],
.apply-modal__field input[type="file"],
.apply-modal__field textarea {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--ink-900);
  background: #fff;
  border: 1.5px solid var(--ink-100);
  border-radius: 8px;
  padding: 12px 14px;
  line-height: 1.45;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.apply-modal__field textarea {
  resize: vertical;
  min-height: 96px;
  font-family: 'DM Sans', sans-serif;
}
.apply-modal__field input[type="file"] {
  padding: 10px 12px;
  cursor: pointer;
}
.apply-modal__field input:focus,
.apply-modal__field textarea:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(253, 98, 59, 0.18);
}
.apply-modal__counter {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-500);
  pointer-events: none;
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 6px;
  border-radius: 4px;
}
.apply-modal__counter--over { color: var(--coral); font-weight: 600; }
.apply-modal__feedback {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-700);
  min-height: 1.5em;
}
.apply-modal__feedback--info { color: var(--ink-700); }
.apply-modal__feedback--error { color: var(--coral); }
.apply-modal__fallback-link {
  color: var(--coral);
  text-decoration: underline;
  font-weight: 600;
}
.apply-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--ink-100);
  padding-top: 16px;
}
.apply-modal__btn {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 100px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s var(--ease-emph), box-shadow 0.2s, background 0.2s, color 0.2s;
}
.apply-modal__btn:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}
.apply-modal__btn--ghost {
  background: transparent;
  color: var(--ink-700);
  border-color: var(--ink-100);
}
.apply-modal__btn--ghost:hover {
  border-color: var(--ink-300);
  color: var(--ink-900);
}
.apply-modal__btn--primary {
  background: var(--coral);
  color: #fff;
}
.apply-modal__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -10px rgba(253, 98, 59, 0.55);
}
.apply-modal__btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.apply-modal__success {
  display: none;
  text-align: center;
  padding: 18px 4px 4px;
  flex-direction: column;
  gap: 12px;
}
.apply-modal__success--visible { display: flex; }
.apply-modal__success-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
}
.apply-modal__success h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  color: var(--ink-900);
  margin: 0;
}
.apply-modal__success p {
  font-family: 'DM Sans', sans-serif;
  color: var(--ink-700);
  margin: 0 auto;
  max-width: 42ch;
  font-size: 0.95rem;
  line-height: 1.55;
}
.apply-modal__success [data-application-id] {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-500);
}
.apply-modal__success .apply-modal__btn { align-self: center; margin-top: 6px; }

/* Fallback for browsers without <dialog>: render as fixed overlay when
   .apply-modal--shim-open is applied alongside [open]. Browsers that do
   support <dialog> use the native backdrop above.
*/
.apply-modal--shim-open {
  position: fixed;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 31, 28, 0.55);
  z-index: 100;
}

/* ── Cultural marquee ── */
@keyframes plvn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; width: max-content; animation: plvn-marquee 28s linear infinite; }
.marquee-wrap { overflow: hidden; }
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

/* ── Stat strip ── */
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-100); }
.stat-item { background: var(--paper); padding: 40px 32px; text-align: center; }
.stat-num { font-family: 'Radlush', 'Boogaloo', sans-serif; font-size: clamp(36px,6vw,72px); line-height:1; letter-spacing:-0.03em; color: var(--ink-900); }
.stat-label { font-size: 14px; color: var(--ink-500); margin-top: 8px; letter-spacing: 0.04em; text-transform: uppercase; }

/* ── Zigzag alternating blocks ── */
.zigzag { display: flex; flex-direction: column; gap: 80px; }
.zigzag-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.zigzag-row:nth-child(even) .zigzag-img { order: 2; }
.zigzag-row:nth-child(even) .zigzag-text { order: 1; }
.zigzag-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 16px; }
.zigzag-text h3 { font-family: 'Radlush','Boogaloo',sans-serif; font-size: clamp(24px,3vw,40px); line-height:1.1; letter-spacing:-0.02em; margin-bottom:16px; }
.zigzag-text p { font-size: 16px; line-height: 1.65; color: var(--ink-700); }

/* ── Process steps ── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 32px; }
.step { padding: 32px; background: white; border-radius: 16px; border: 1px solid var(--ink-100); }
.step-num { font-family: 'Radlush','Boogaloo',sans-serif; font-size: 48px; color: var(--coral); line-height:1; margin-bottom:16px; }
.step h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--ink-500); line-height: 1.6; }

/* ── Pull quote ── */
.pull-quote { border-left: 3px solid var(--coral); padding: 24px 32px; margin: 48px 0; }
.pull-quote blockquote { font-family: 'Fraunces',serif; font-style: italic; font-size: clamp(20px,2.5vw,28px); line-height:1.45; color: var(--ink-900); }
.pull-quote cite { display: block; margin-top: 16px; font-size: 13px; color: var(--ink-500); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Milestone pills ── */
.milestone-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; padding: 48px 0; }
.milestone-pill { font-family: 'Radlush','Boogaloo',sans-serif; font-size: clamp(28px,5vw,56px); font-weight:700; padding: 16px 36px; border-radius: 100px; background: var(--paper-2); color: var(--ink-900); letter-spacing:-0.03em; transition: background 0.3s var(--ease-emph), color 0.3s; cursor: default; }
.milestone-pill:hover { background: var(--coral); color: white; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .stat-strip { grid-template-columns: 1fr; }
  .zigzag-row { grid-template-columns: 1fr; }
  .zigzag-row:nth-child(even) .zigzag-img { order: 0; }
  .zigzag-row:nth-child(even) .zigzag-text { order: 1; }
}

/* ══════════════════════════════════════════════
   INNER-PAGE ENHANCEMENTS  — cultural identity
   ══════════════════════════════════════════════ */

/* ── Stat strip ── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
}
.stat-item {
  padding: 48px 32px;
  text-align: center;
  border-right: 1px solid var(--ink-100);
}
.stat-item:last-child { border-right: none; }
.stat-num {
  font-family: 'Radlush', 'Boogaloo', sans-serif;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-900);
}
.stat-num em { color: var(--coral); font-style: normal; }
.stat-label {
  font-size: 13px;
  color: var(--ink-500);
  margin-top: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Pull quote ── */
.pull-quote {
  border-left: 3px solid var(--coral);
  padding: 28px 36px;
  background: var(--paper-2);
  border-radius: 0 12px 12px 0;
}
.pull-quote blockquote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.5;
  color: var(--ink-900);
  margin: 0;
}
.pull-quote cite {
  display: block;
  margin-top: 16px;
  font-size: 12px;
  color: var(--ink-500);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Marquee (festivals) ── */
@keyframes plvn-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-wrap {
  overflow: hidden;
  border-top: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
  padding: 20px 0;
  background: var(--ink-900);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: plvn-marquee 32s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  font-family: 'Radlush', 'Boogaloo', sans-serif;
  font-size: clamp(20px, 3vw, 32px);
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.85);
  padding: 0 40px;
  white-space: nowrap;
}
.marquee-dot {
  color: var(--coral);
  padding: 0 8px;
}

/* ── Milestone pills (birthdays) ── */
.milestone-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-start;
  padding: 40px 0 16px;
}
.milestone-pill {
  font-family: 'Radlush', 'Boogaloo', sans-serif;
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 100px;
  background: var(--paper-2);
  color: var(--ink-900);
  letter-spacing: -0.03em;
  transition: background 0.3s var(--ease-emph), color 0.3s var(--ease-emph), transform 0.3s var(--ease-emph);
  cursor: default;
}
.milestone-pill:hover {
  background: var(--coral);
  color: white;
  transform: translateY(-4px);
}

/* ── Kente accent bar (weddings) ── */
.kente-bar {
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    #D4A017 0px, #D4A017 24px,
    #1A5C3A 24px, #1A5C3A 48px,
    #FD623B 48px, #FD623B 72px,
    #0a1f1c 72px, #0a1f1c 96px
  );
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .stat-strip { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--ink-100); padding: 32px 24px; }
  .stat-item:last-child { border-bottom: none; }
  .pull-quote { padding: 20px 24px; }
  .milestone-row { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ══════════════════════════════════════════════════════
   KOWALSKI INTERACTION LAYER
   CSS-side of the motion system. Purposeful, earned.
   JS counterparts live in plvn-motion.js.
══════════════════════════════════════════════════════ */

/* ── Feature cards: spring lift on hover ── */
.feature-card {
  transition:
    transform 0.38s var(--ease-emph),
    box-shadow 0.38s var(--ease-emph);
  cursor: default;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(10, 31, 28, 0.09);
}

/* ── Day blocks (funeral timeline): subtle warm hover ── */
.day-block {
  transition: background 0.22s var(--ease);
}
.day-block:hover { background: var(--paper-2); }

/* ── Stat items: quiet hover highlight ── */
.stat-item {
  transition: background 0.22s var(--ease);
  cursor: default;
}
.stat-item:hover { background: var(--paper-2); }

/* ── Vendor pills: spring bounce ── */
.vendor-pill {
  transition:
    background 0.25s var(--ease-emph),
    border-color 0.25s var(--ease-emph),
    transform 0.3s var(--ease-emph);
  cursor: default;
}
.vendor-pill:hover {
  background: var(--coral-soft);
  border-color: rgba(253, 98, 59, 0.35);
  transform: scale(1.05);
}

/* ── Input fields: spring focus ring ── */
input[type="email"],
input[type="text"],
input[type="tel"] {
  transition:
    border-color 0.28s var(--ease-emph),
    box-shadow 0.28s var(--ease-emph);
}
input[type="email"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus {
  border-color: var(--coral) !important;
  box-shadow: 0 0 0 3px rgba(253, 98, 59, 0.13);
  outline: none;
}

/* ── Page-visual: transition for cursor parallax ──
   JS removes this transition so cursor parallax is instant;
   it falls back here for no-JS environments.           ── */
.page-visual img {
  will-change: transform;
  transition: transform 0.55s var(--ease-emph);
}
.page-visual:hover img { transform: scale(1.025); }

/* ── Cursor dot placeholder ── */
#plvn-cursor { pointer-events: none; }

/* ── Page enter/exit fade ── */
body {
  transition: opacity 0.3s ease;
}