/* ==========================================================================
   Oscar Studio — inner pages (services, about, contact, thanks, 404)
   Loaded after site.css. Reuses the tokens in site.css :root.
   ========================================================================== */

/* ---------- Page shell ----------
   On inner pages the header sits outside <main> (so <main id="main"> can wrap
   all page content) and overlays the short hero, which keeps the same look as
   the homepage. Without JS the nav wraps, so the header goes back in the flow. */
/* Header overlay rule lives in site.css */

.page-intro {
  position: relative; display: flex; flex-direction: column; gap: 24px;
  padding-block: clamp(136px, 15vw, 196px) clamp(56px, 7vw, 104px);
}
.no-js .page-intro { padding-top: clamp(40px, 5vw, 72px); }
.page-intro .lede { max-width: 620px; }
.page-intro--tall { min-height: min(86svh, 820px); justify-content: center; }

.on-light .link-ul:hover { color: var(--ember-deep); }

/* In-page jump links (services intro) */
.jump { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid rgba(242, 239, 233, 0.22); border-radius: 999px;
  font-size: 15px; font-weight: 500; text-decoration: none;
}
.jump a:hover { border-color: var(--paper); color: var(--paper); }

/* Small heading used inside cards and grids */
.mini-h { font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }

/* Body copy block */
.prose { display: flex; flex-direction: column; gap: 18px; max-width: 600px; font-size: clamp(17px, 1.4vw, 20px); color: var(--soft); }
.on-light .prose { color: var(--text-on-light); }

/* ---------- Packages (services) ---------- */
.pkg {
  display: grid; align-items: start; gap: 40px clamp(48px, 6vw, 112px);
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.pkg__head { display: flex; flex-direction: column; gap: 18px; }
.pkg__price { font-family: var(--font-serif); font-size: clamp(34px, 3.8vw, 56px); line-height: 1.05; color: var(--ember); }
.on-light .pkg__price { color: var(--ember-deep); }
.pkg__cur { margin-left: 6px; font-family: var(--font-sans); font-size: 15px; color: var(--muted); }
.on-light .pkg__cur { color: var(--muted-on-light); }
.pkg__for { font-size: clamp(18px, 1.5vw, 21px); color: var(--soft); max-width: 520px; }
.pkg__body { display: flex; flex-direction: column; gap: 18px; }
.pkg__note { font-size: 16px; color: var(--muted); max-width: 560px; }
.on-light .pkg__note { color: var(--muted-on-light); }

/* Tick list */
.ticks { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.ticks li {
  position: relative; padding: 14px 0 14px 36px; border-bottom: 1px solid var(--line);
  font-size: 17px; color: var(--soft);
}
.ticks li::before {
  content: ""; position: absolute; left: 3px; top: 21px; width: 14px; height: 7px;
  border-left: 2px solid var(--ember); border-bottom: 2px solid var(--ember); transform: rotate(-45deg);
}
.on-light .ticks { border-color: var(--line-light); }
.on-light .ticks li { color: var(--text-on-light); border-color: var(--line-light); }
.on-light .ticks li::before { border-color: var(--ember-deep); }

/* ---------- Info grid (payment details) ---------- */
.info-grid {
  display: grid; gap: 40px clamp(32px, 4vw, 56px); list-style: none; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.info-grid > li { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.info-grid p { font-size: 17px; color: var(--soft); }
.info-grid .info-grid__key { border-top-color: var(--ember); }

/* ---------- FAQ (designed for light sections) ---------- */
.faq { border-top: 2px solid currentColor; }
.faq details { border-bottom: 1px solid var(--line-light); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 56px; padding-block: 20px; cursor: pointer; list-style: none;
  font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-light);
  background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
              linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: transform 0.3s var(--ease-out);
}
.faq details[open] > summary::after { transform: rotate(45deg); }
.on-light .faq summary:hover { color: var(--ember-deep); }
.faq__answer { display: flex; flex-direction: column; gap: 12px; max-width: 680px; padding-bottom: 28px; }

/* ---------- About ---------- */
.about-intro {
  display: grid; align-items: center; gap: 48px clamp(48px, 6vw, 96px);
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.about-intro__copy { display: flex; flex-direction: column; gap: 24px; }
.about-photo {
  width: 100%; max-width: 480px; justify-self: end; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(242, 239, 233, 0.14);
}
@media (max-width: 960px) { .about-photo { justify-self: start; } }

.values {
  display: grid; gap: 48px clamp(32px, 4vw, 64px); list-style: none; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.values > li { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 2px solid var(--ink); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 56px clamp(48px, 6vw, 96px); align-items: start; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.form-card--raised { background: var(--ink-2); border: 1px solid var(--line); }
.form-card--raised .input, .form-card--raised .select, .form-card--raised .textarea { background: var(--ink); }
.select option { background: var(--ink-2); color: var(--paper); }
.field__label { display: flex; flex-wrap: wrap; gap: 4px 8px; }

.contact-direct { display: flex; flex-direction: column; gap: 28px; }
.contact-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.contact-list > li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.contact-list__label { font-size: 15px; color: var(--muted); }
.contact-list__value { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; overflow-wrap: anywhere; }

/* ---------- Thanks: what happens next ---------- */
.next-list { list-style: none; padding: 0; counter-reset: next; display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.next-list li { counter-increment: next; position: relative; padding-left: 44px; color: var(--soft); font-size: 17px; }
.next-list li::before {
  content: counter(next); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--ember); color: var(--ink);
}