/* ============================================================
   STONEMOSS — INNER PAGES SHARED CSS
   ============================================================ */

/* ── SHARED INNER BODY TEXT ── */
.inner-body { font-size: var(--fs-base); color: var(--text-mid); line-height: var(--lh-loose); margin-bottom: var(--sp-4); }

/* ── IMAGE FRAME ── */
.inner-img-frame {
  position: relative; padding: var(--sp-3);
  background: var(--cream); border: var(--b-stone); box-shadow: var(--sh-card);
  overflow: hidden;
}
.inner-img-frame img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: sepia(0.08) brightness(0.95); transition: transform var(--dur-slow) var(--ease); }
.inner-img-frame:hover img { transform: scale(1.02); }

/* ── SECTION HEAD CENTERED ── */
.sect-head-centered { text-align: center; margin-bottom: var(--sp-12); }

/* ── CTA SECTION (shared) ── */
.cta-sect { position: relative; padding: var(--sp-32) 0; text-align: center; overflow: hidden; }
.cta-sect__bg { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(184,115,51,0.10) 0%, transparent 65%), var(--concrete-mid); background-image: var(--tex-concrete); }
.cta-sect__bg::before,.cta-sect__bg::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg); border: 1px solid var(--copper-rim); }
.cta-sect__bg::before { width: 360px; height: 360px; }
.cta-sect__bg::after  { width: 640px; height: 640px; opacity: 0.4; }
.cta-sect__inner { position: relative; z-index: 1; }
.cta-sect__title { font-family: var(--font-display); font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl)); font-weight: 900; color: var(--plaster-warm); line-height: var(--lh-snug); margin-bottom: var(--sp-4); }
.cta-sect__title em { font-style: italic; color: var(--copper-bright); }
.cta-sect__sub { font-size: var(--fs-md); color: var(--text-on-dark-dim); font-style: italic; max-width: 48ch; margin: 0 auto var(--sp-8); line-height: var(--lh-loose); }

/* ── ABOUT PAGE ── */
.founder-sect { }
.founder-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--sp-16); align-items: start; }
.founder-img-col { position: relative; }
.founder-plaque { margin-top: var(--sp-5); padding-left: var(--sp-4); border-left: 2px solid var(--copper); }
.founder-plaque__name { display: block; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--text-warm); margin-bottom: var(--sp-1); }
.founder-plaque__title { font-family: var(--font-label); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); }
.timeline { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--plaster-dark); }
.tl-item { display: flex; gap: var(--sp-5); align-items: baseline; }
.tl-item__yr { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--copper); flex-shrink: 0; min-width: 50px; line-height: 1; }
.tl-item__ev { font-size: var(--fs-sm); color: var(--text-mid); font-style: italic; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-10); }
.team-card { padding: var(--sp-6); background: var(--concrete-mid); border: 1px solid rgba(184,115,51,0.18); transition: border-color var(--dur-mid), box-shadow var(--dur-mid); }
.team-card:hover { border-color: var(--copper-rim); box-shadow: var(--sh-copper); }
.team-card:hover::before, .team-card:hover::after { border-color: var(--copper); }
.team-card__head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.team-card__avatar { width: 52px; height: 52px; flex-shrink: 0; border: 2px solid var(--copper-aged); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 900; color: var(--copper-bright); background: var(--concrete-deep); }
.team-card__name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--plaster-warm); margin-bottom: var(--sp-1); }
.team-card__bio { font-size: var(--fs-sm); color: var(--text-on-dark-dim); line-height: var(--lh-loose); font-style: italic; }
.phil-grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-16); align-items: start; }
.phil-items { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.phil-item { padding: var(--sp-6); }
.phil-item__num { font-family: var(--font-display); font-size: var(--fs-3xl); color: rgba(184,115,51,0.20); line-height: 1; display: block; margin-bottom: var(--sp-2); border-bottom: 1px solid var(--plaster-dark); padding-bottom: var(--sp-2); }
.phil-item__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--text-warm); margin-bottom: var(--sp-3); }
.phil-item__body { font-size: var(--fs-sm); color: var(--text-mid); line-height: var(--lh-loose); font-style: italic; }

/* ── SERVICES PAGE ── */
.svc-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; }
.svc-detail-grid--rev .svc-detail-text { order: 1; }
.svc-detail-grid--rev .svc-detail-img  { order: 2; }
.svc-detail-img { position: relative; }
.svc-detail-num { position: absolute; bottom: var(--sp-5); left: var(--sp-5); background: var(--concrete-deep); border: 2px solid var(--copper-aged); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 900; color: var(--copper-bright); box-shadow: var(--sh-card); }
.svc-lead { font-size: var(--fs-md); font-style: italic; color: var(--text); line-height: var(--lh-loose); margin-bottom: var(--sp-4); }
.svc-features { margin: var(--sp-5) 0 var(--sp-8); }
.svc-features__head { font-family: var(--font-label); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--copper-aged); margin-bottom: var(--sp-4); }
.svc-features__list { display: flex; flex-direction: column; gap: var(--sp-3); }
.svc-features__list li { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-mid); line-height: var(--lh-body); }
.svc-features__list li span:first-child { color: var(--copper); flex-shrink: 0; font-size: 0.75rem; margin-top: 3px; }

/* ── PRICING PAGE ── */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); align-items: start; }
.plan-card { padding: var(--sp-8); display: flex; flex-direction: column; position: relative; }
.plan-card--featured { background: var(--concrete); border: 2px solid var(--copper-aged); box-shadow: var(--sh-copper); transform: scale(1.02); background-image: var(--tex-concrete); }
.plan-card__ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--copper); color: var(--cream); font-family: var(--font-label); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--ls-wider); text-transform: uppercase; padding: 2px var(--sp-5); white-space: nowrap; }
.plan-card__tier { font-family: var(--font-label); font-size: var(--fs-xs); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--copper); display: block; margin-bottom: var(--sp-2); }
.plan-card--featured .plan-card__tier { color: var(--copper-bright); }
.plan-card__name { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 900; color: var(--text-warm); margin-bottom: var(--sp-4); }
.plan-card--featured .plan-card__name { color: var(--plaster-warm); }
.plan-card__price { display: flex; align-items: baseline; gap: 4px; margin-bottom: var(--sp-3); }
.plan-card__dollar { font-family: var(--font-body); font-size: var(--fs-lg); color: var(--copper); }
.plan-card--featured .plan-card__dollar { color: var(--copper-bright); }
.plan-card__amount { font-family: var(--font-display); font-size: var(--fs-4xl); color: var(--text-warm); line-height: 1; }
.plan-card--featured .plan-card__amount { color: var(--plaster-warm); }
.plan-card__freq { font-size: var(--fs-sm); color: var(--text-muted); font-style: italic; }
.plan-card--featured .plan-card__freq { color: var(--text-on-dark-dim); }
.plan-card__ideal { font-size: var(--fs-sm); color: var(--text-muted); font-style: italic; margin-bottom: var(--sp-6); line-height: var(--lh-body); }
.plan-card--featured .plan-card__ideal { color: var(--text-on-dark-dim); }
.plan-card__features { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); border-top: 1px solid var(--plaster-dark); padding-top: var(--sp-6); margin-bottom: var(--sp-8); }
.plan-card--featured .plan-card__features { border-top-color: rgba(184,115,51,0.25); }
.plan-card__features li { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-mid); line-height: var(--lh-body); }
.plan-card--featured .plan-card__features li { color: var(--text-on-dark-dim); }
.plan-check { color: var(--copper); flex-shrink: 0; font-size: 0.7rem; margin-top: 4px; }
.plan-card__btn { width: 100%; justify-content: center; }
.pricing-note { text-align: center; font-size: var(--fs-xs); color: var(--text-muted); max-width: 60ch; margin: var(--sp-8) auto 0; line-height: var(--lh-loose); font-style: italic; }
.pricing-note a { color: var(--copper); }

/* ── BLOG LISTING ── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.blog-card { display: flex; flex-direction: column; overflow: hidden; }
.blog-card__img-wrap { position: relative; height: 240px; overflow: hidden; }
.blog-card__img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.1) brightness(0.9); transition: transform var(--dur-slow) var(--ease); }
.blog-card:hover .blog-card__img { transform: scale(1.04); }
.blog-card__cat { position: absolute; top: var(--sp-4); left: var(--sp-4); }
.blog-card__body { padding: var(--sp-6); flex: 1; display: flex; flex-direction: column; }
.blog-card__meta { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.blog-card__date { font-family: var(--font-label); font-size: var(--fs-2xs); color: var(--text-faint); letter-spacing: var(--ls-wide); }
.blog-card__rt { font-size: var(--fs-2xs); color: var(--text-faint); }
.blog-card__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--text-warm); line-height: var(--lh-snug); margin-bottom: var(--sp-3); flex: 1; }
.blog-card__title a { color: var(--text-warm); transition: color var(--dur-fast); }
.blog-card__title a:hover { color: var(--copper); }
.blog-card__excerpt { font-size: var(--fs-sm); color: var(--text-mid); line-height: var(--lh-loose); font-style: italic; margin-bottom: var(--sp-4); }
.blog-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.blog-card__tag { font-family: var(--font-label); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); color: var(--text-faint); padding: 1px var(--sp-2); border: 1px solid var(--plaster-dark); }
.blog-card__read { font-family: var(--font-label); font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--copper); }

/* ── ARTICLE DETAIL ── */
.article-masthead { position: relative; padding-top: 140px; padding-bottom: var(--sp-16); background-size: cover; background-position: center; background-attachment: fixed; min-height: 480px; display: flex; align-items: flex-end; }
.article-masthead__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,26,23,0.97) 0%, rgba(28,26,23,0.72) 55%, rgba(28,26,23,0.35) 100%); }
.article-masthead__inner { position: relative; z-index: 1; }
.article-back { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-label); font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-on-dark-dim); margin-bottom: var(--sp-6); transition: color var(--dur-fast); }
.article-back:hover { color: var(--copper-bright); }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.article-date, .article-rt { font-family: var(--font-label); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); color: var(--text-on-dark-dim); }
.article-headline { font-family: var(--font-display); font-size: clamp(var(--fs-2xl), 3.8vw, var(--fs-4xl)); font-weight: 900; color: var(--plaster-warm); max-width: 820px; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.article-layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--sp-12); align-items: start; }
.article-prose { font-family: var(--font-body); font-size: var(--fs-base); color: var(--text); line-height: var(--lh-loose); min-width: 0; }
.article-prose h2 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--text-warm); margin: var(--sp-10) 0 var(--sp-4); border-bottom: 1px solid var(--plaster-dark); padding-bottom: var(--sp-3); }
.article-prose p { margin-bottom: var(--sp-5); }
.article-prose em { color: var(--copper-aged); }
.article-prose strong { color: var(--text-warm); }
.article-sidebar { display: flex; flex-direction: column; gap: var(--sp-5); position: sticky; top: 100px; }
.sidebar-card { padding: var(--sp-5); background: var(--cream); border: var(--b-stone); box-shadow: var(--sh-card); }
.sidebar-head { font-family: var(--font-label); font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--copper-aged); margin-bottom: var(--sp-3); }
.sidebar-body { font-size: var(--fs-sm); color: var(--text-mid); line-height: var(--lh-loose); font-style: italic; }
.sidebar-links { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.sidebar-links li a { font-size: var(--fs-sm); color: var(--text-mid); transition: color var(--dur-fast); }
.sidebar-links li a:hover { color: var(--copper); }
.related-post { margin-top: var(--sp-4); }
.related-post a { display: flex; gap: var(--sp-3); text-decoration: none; }
.related-post__img { width: 70px; height: 52px; object-fit: cover; flex-shrink: 0; filter: sepia(0.1); }
.related-post__title { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; color: var(--text-mid); line-height: var(--lh-snug); margin-top: var(--sp-1); transition: color var(--dur-fast); }
.related-post a:hover .related-post__title { color: var(--copper); }

/* ── CONTACT PAGE ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-16); align-items: start; }
.contact-facts { margin: var(--sp-8) 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.contact-fact { display: flex; gap: var(--sp-4); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--plaster-dark); }
.contact-fact:last-child { border-bottom: none; }
.contact-fact__icon { color: var(--copper); font-size: 0.9rem; flex-shrink: 0; margin-top: 4px; }
.contact-fact__label { font-family: var(--font-label); font-size: var(--fs-2xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--copper-aged); display: block; margin-bottom: var(--sp-1); }
.contact-fact__val { display: block; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--text-warm); text-decoration: none; margin-bottom: var(--sp-1); transition: color var(--dur-fast); }
a.contact-fact__val:hover { color: var(--copper); }
.contact-fact__note { font-size: var(--fs-xs); color: var(--text-faint); font-style: italic; }
.contact-form-card { background: var(--cream); border: var(--b-stone); box-shadow: var(--sh-card); padding: var(--sp-8); background-image: var(--tex-paper); }
.contact-form-card__title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 900; color: var(--text-warm); margin-bottom: var(--sp-2); }
.contact-form-card__sub { font-size: var(--fs-sm); color: var(--text-mid); font-style: italic; margin-bottom: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--plaster-dark); }
.cf-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.cf-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.cf-submit { width: 100%; justify-content: center; }
.cf-fine { font-size: var(--fs-xs); color: var(--text-faint); text-align: center; font-style: italic; }
.cf-success { text-align: center; padding: var(--sp-10); }
.cf-success__icon { font-size: 3rem; display: block; margin-bottom: var(--sp-4); }
.cf-success h3 { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text-warm); margin-bottom: var(--sp-3); }
.cf-success p { font-size: var(--fs-sm); color: var(--text-mid); font-style: italic; }
.faq-list { max-width: 780px; margin: var(--sp-10) auto 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item { border: 1px solid var(--plaster-dark); background: var(--plaster-warm); transition: border-color var(--dur-mid); }
.faq-item[open] { border-color: var(--copper-rim); }
.faq-item__q { list-style: none; padding: var(--sp-5) var(--sp-6); padding-right: var(--sp-10); font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--text-warm); cursor: pointer; position: relative; transition: color var(--dur-fast); user-select: none; }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after { content: '+'; position: absolute; right: var(--sp-6); top: 50%; transform: translateY(-50%); font-size: var(--fs-xl); color: var(--copper); transition: transform var(--dur-mid); }
.faq-item[open] .faq-item__q::after { transform: translateY(-50%) rotate(45deg); }
.faq-item__q:hover { color: var(--copper); }
.faq-item__a { padding: 0 var(--sp-6) var(--sp-5); border-top: 1px solid var(--plaster-dark); }
.faq-item__a p { font-size: var(--fs-sm); color: var(--text-mid); line-height: var(--lh-loose); font-style: italic; margin-top: var(--sp-4); }

/* ── LEGAL ── */
.legal-meta { display: flex; gap: var(--sp-8); flex-wrap: wrap; padding: var(--sp-4) var(--sp-6); background: var(--cream); border: var(--b-stone); border-left: 2px solid var(--copper-aged); margin-bottom: var(--sp-8); }
.legal-meta__item { font-family: var(--font-label); font-size: var(--fs-2xs); letter-spacing: var(--ls-wider); color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-2); }
.legal-meta__item span:first-child { color: var(--copper); }
.legal-intro { font-size: var(--fs-md); font-style: italic; color: var(--text); line-height: var(--lh-loose); padding: var(--sp-5) var(--sp-6); border-left: 3px solid var(--copper); background: var(--cream); margin-bottom: var(--sp-10); box-shadow: var(--sh-card); }
.legal-body h2 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--text-warm); margin: var(--sp-10) 0 var(--sp-4); border-bottom: 1px solid var(--plaster-dark); padding-bottom: var(--sp-3); }
.legal-body h3 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--text-warm); margin: var(--sp-6) 0 var(--sp-3); }
.legal-body p { font-size: var(--fs-sm); color: var(--text-mid); line-height: var(--lh-loose); margin-bottom: var(--sp-4); }
.legal-body ul { margin: var(--sp-3) 0 var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.legal-body ul li { font-size: var(--fs-sm); color: var(--text-mid); padding-left: var(--sp-4); position: relative; font-style: italic; }
.legal-body ul li::before { content: '❧'; position: absolute; left: 0; color: var(--copper); font-size: 0.7rem; top: 3px; }
.legal-body strong { color: var(--text-warm); }
.legal-body a { color: var(--copper); }
.legal-contact-block { background: var(--cream); border: var(--b-stone); border-left: 2px solid var(--copper); padding: var(--sp-6) var(--sp-8); margin-top: var(--sp-6); }
.legal-contact-block p { font-size: var(--fs-sm); color: var(--text-mid); margin-bottom: var(--sp-2); }
.legal-contact-block a { color: var(--copper); }

/* ── 404 ── */
.not-found-sect { min-height: 80vh; display: flex; align-items: center; padding: var(--sp-32) 0; background: var(--concrete); background-image: var(--tex-concrete); }
.not-found__inner { text-align: center; }
.not-found__num { font-family: var(--font-display); font-size: clamp(6rem, 15vw, 12rem); font-weight: 900; color: var(--copper-aged); line-height: 1; display: block; letter-spacing: -0.05em; }
.not-found__title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--plaster-warm); margin-bottom: var(--sp-4); }
.not-found__text { font-size: var(--fs-md); color: var(--text-on-dark-dim); font-style: italic; max-width: 44ch; margin: 0 auto var(--sp-8); line-height: var(--lh-loose); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .founder-grid { grid-template-columns: 1fr; }
  .founder-img-col { max-width: 380px; }
  .team-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .phil-grid { grid-template-columns: 1fr; }
  .phil-items { grid-template-columns: 1fr 1fr; }
  .svc-detail-grid { grid-template-columns: 1fr; }
  .svc-detail-grid--rev .svc-detail-text,
  .svc-detail-grid--rev .svc-detail-img { order: unset; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .plan-card--featured { transform: none; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .phil-items { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .cf-two { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
}