/* Q Services LLC — about page styles.
   Loads after style.css (the shared design system). Extracted from the
   Claude Design prototype; the pages each carried their own <style> block
   and they conflict if merged (.page-hero padding differs per page). */

.page-hero { padding: 56px 0 40px; position: relative; overflow: hidden; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(900px 460px at 80% -20%, var(--accent-wash), transparent 60%); }
.page-hero .wrap { max-width: 820px; }
.page-hero h1 { font-size: clamp(36px,5vw,58px); letter-spacing:-.035em; }
.page-hero h1 .grad { background: linear-gradient(120deg,var(--accent-deep),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-hero p { margin-top: 20px; font-size: 20px; color: var(--ink-soft); }

.story-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items:center; }
.story-grid h2 { font-size: clamp(26px,3.2vw,38px); }
.story-grid p { margin-top:16px; font-size:17.5px; color:var(--ink-soft); }
.story-photo { position:relative; }
.story-photo image-slot { width:100%; height:420px; border-radius:var(--r-lg); box-shadow:var(--shadow); }
.photo-cap { position:absolute; left:18px; bottom:18px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 16px; box-shadow:var(--shadow-sm); font-family:var(--font-head); font-size:13.5px; font-weight:600; }
.photo-cap span { display:block; font-weight:400; color:var(--ink-faint); font-size:12px; margin-top:2px; }

.timeline { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.tl { padding:30px 26px; border-radius:var(--r); border:1px solid var(--line); background:#fff; }
.tl .yr { font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--accent-deep); letter-spacing:.04em; }
.tl h4 { font-size:19px; margin-top:8px; }
.tl p { margin-top:9px; font-size:15px; color:var(--ink-soft); }

.values { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.value { padding:30px 26px; border-radius:var(--r); background:#fff; border:1px solid var(--line); }
.value .ic { width:48px; height:48px; border-radius:13px; background:var(--accent-wash); color:var(--accent-deep); display:grid; place-items:center; margin-bottom:16px; }
.value .ic svg { width:24px; height:24px; }
.value h4 { font-size:18px; }
.value p { margin-top:8px; font-size:15px; color:var(--ink-soft); }

.stats-band { display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.sb { text-align:center; padding:28px 18px; border-radius:var(--r); border:1px solid var(--line); background:#fff; }
.sb b { font-family:var(--font-head); font-weight:700; font-size:40px; letter-spacing:-.03em; background:linear-gradient(120deg,var(--accent-deep),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; }
.sb span { font-size:14px; color:var(--ink-faint); margin-top:6px; display:block; }

.cta-band { position: relative; overflow: hidden; background: var(--bg-deep); color:#fff; border-radius: var(--r-xl); padding: 60px; text-align:center; }
.cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(700px 380px at 50% -20%, color-mix(in srgb,var(--accent) 42%,transparent), transparent 60%); }
.cta-band .inner { position:relative; z-index:1; max-width:620px; margin:0 auto; }
.cta-band h2 { color:#fff; font-size: clamp(28px,3.6vw,42px); }
.cta-band p { margin-top:14px; font-size:18px; color:#B7CDD9; }
.cta-band .hero-cta { margin-top:28px; justify-content:center; display:flex; gap:13px; flex-wrap:wrap; }
.cta-band .btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.cta-band .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; border-color:#fff; }

@media (max-width:940px){ .story-grid,.timeline,.values,.stats-band{grid-template-columns:1fr;} .stats-band{grid-template-columns:1fr 1fr;} .cta-band{padding:40px 28px;} }