/*
 * page-about.css — styles for page-about.php
 * Moved out of the template in v2.3.0: it used to be an inline <style>
 * block printed AFTER the page content (unstyled flash + reflow, never cached).
 * Loaded in <head> only when WordPress renders page-about.php (see ewt_template_styles()).
 */

/* --- 01. Hero --- */

/* --- 02. Story + Key Facts --- */
.abt-story__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 4rem; align-items: start; }
.abt-section-title { font-family: var(--ewt-font-display); font-weight: 400; font-size: 40px; letter-spacing: -.01em; color: var(--ewt-ink); margin: 8px 0 1.5rem; }
.abt-story__content { font-weight: 300; font-size: 17px; line-height: 1.8; color: var(--ewt-ink-soft); }
.abt-story__content > * + * { margin-top: 1.25em; }
.abt-story__content p { max-width: 62ch; margin: 0; }
.abt-story__content h2, .abt-story__content h3 { font-family: var(--ewt-font-display); font-weight: 400; color: var(--ewt-ink); line-height: 1.3; }
.abt-story__content h2 { font-size: clamp(1.5rem, 1.2vw + 1.2rem, 1.875rem); margin-top: 1.75em; }
.abt-story__content h3 { font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem); margin-top: 1.5em; }
.abt-story__content a { color: var(--ewt-bronze); text-decoration: underline; text-underline-offset: 2px; }
.abt-story__content a:hover { color: var(--ewt-ink); }
.abt-story__content ul, .abt-story__content ol { padding-left: 1.5rem; max-width: 62ch; }
.abt-story__content li + li { margin-top: .5em; }
.abt-story__content blockquote { border-left: 2px solid var(--ewt-bronze); padding-left: 1.5rem; font-family: var(--ewt-font-display); font-size: 1.25rem; font-weight: 400; color: var(--ewt-ink); line-height: 1.5; }
.abt-facts { background: var(--ewt-surface); border: .5px solid var(--ewt-border); padding: 2rem; position: sticky; top: 100px; }
.abt-facts__heading { font-family: var(--ewt-font-display); font-size: 1.25rem; font-weight: 400; color: var(--ewt-ink); margin: 0 0 1.25rem; }
.abt-facts__row { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: .5px solid var(--ewt-border); }
.abt-facts__row:last-child { border-bottom: none; }
.abt-facts__label { font-size: .75rem; letter-spacing: .04em; color: var(--ewt-muted); }
.abt-facts__value { font-size: .8125rem; color: var(--ewt-ink-soft); text-align: right; }

/* --- 03. Why Choose Us --- */
.abt-why { background: var(--ewt-surface); }
.abt-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2.5rem; margin-top: 3rem; }
.abt-why__icon { color: var(--ewt-bronze); margin-bottom: 1.25rem; }
.abt-why__title { font-family: var(--ewt-font-display); font-size: 1.25rem; font-weight: 400; color: var(--ewt-ink); margin-bottom: .75rem; }
.abt-why__desc { font-size: .875rem; color: var(--ewt-ink-soft); line-height: 1.75; max-width: none; }

/* --- 04. Trust / Reviews --- */
.abt-trust { background: var(--ewt-canvas); }
.abt-trust__para { font-weight: 300; font-size: 16px; line-height: 1.7; color: var(--ewt-ink-soft); max-width: 620px; margin: 1.25rem auto 0; }
.abt-trust__links { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.abt-trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3.5rem; }
.abt-testi { background: var(--ewt-surface); border: .5px solid var(--ewt-border); padding: 2rem; text-align: center; }
.abt-testi__stars { font-size: 1rem; color: var(--ewt-ghost); letter-spacing: .1em; margin-bottom: 1.25rem; }
.abt-testi__stars .is-filled { color: var(--ewt-bronze); }
.abt-testi__q { margin: 0 0 1.25rem; }
.abt-testi__q p { font-family: var(--ewt-font-display); font-size: 1.0625rem; font-weight: 400; color: var(--ewt-ink-soft); line-height: 1.5; margin: 0; }
.abt-testi__author { font-size: .8125rem; font-style: normal; color: var(--ewt-bronze); }
.abt-testi__author span { color: var(--ewt-muted); }

/* --- 05. How We Work --- */
.abt-process { background: var(--ewt-surface-2); }
.abt-process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 3rem; }
.abt-process__step { border-top: 1px solid var(--ewt-bronze); padding-top: 1.5rem; }
.abt-process__num { display: block; font-family: var(--ewt-font-display); font-size: 1.75rem; color: var(--ewt-bronze); margin-bottom: 1rem; }
.abt-process__step h3 { font-family: var(--ewt-font-display); font-size: 1.125rem; font-weight: 400; color: var(--ewt-ink); margin: 0 0 .75rem; }
.abt-process__step p { font-size: .875rem; color: var(--ewt-ink-soft); line-height: 1.7; margin: 0; }

/* --- 06. Bottom CTA --- */
.abt-cta { background: linear-gradient(135deg, var(--ewt-ember), var(--ewt-bronze)); }
.abt-cta__inner { text-align: center; max-width: 720px; margin: 0 auto; }
.abt-cta .ewt-eyebrow { color: var(--ewt-ink); }
.abt-cta__heading { font-family: var(--ewt-font-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); letter-spacing: -.01em; color: var(--ewt-ink); margin: 8px 0 20px; }
.abt-cta__para { font-weight: 400; font-size: 16px; line-height: 1.7; color: rgba(16,14,11,.8); margin: 0 0 32px; }
.abt-cta__actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.abt-cta .ewt-btn--ghost { color: var(--ewt-ink); border-color: var(--ewt-ink); }
.abt-cta .ewt-btn--ghost:hover { background-color: var(--ewt-ink); color: var(--ewt-bronze); }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .abt-story__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .abt-facts { position: static; }
  .abt-why__grid { grid-template-columns: repeat(2, 1fr); }
  .abt-trust__grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .abt-process__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  
  .abt-why__grid, .abt-process__grid { grid-template-columns: 1fr; }
  .abt-trust__links, .abt-cta__actions { flex-direction: column; align-items: center; }
}