/* Q Services LLC — contact 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 24px; 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(34px,4.6vw,54px); 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: 18px; font-size: 20px; color: var(--ink-soft); }

.contact-grid { display:grid; grid-template-columns: 1.25fr .9fr; gap: 40px; align-items:start; }

/* form card */
.form-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding: 36px; }
.form-card h2 { font-size: 24px; }
.form-card .sub { font-size:15px; color:var(--ink-soft); margin-top:8px; }
.seg { display:flex; gap:8px; margin: 22px 0 8px; background:var(--bg-tint); padding:5px; border-radius:12px; }
.seg button { flex:1; border:none; background:transparent; font-family:var(--font-head); font-weight:600; font-size:14.5px; padding:11px; border-radius:9px; cursor:pointer; color:var(--ink-soft); transition:all .15s ease; }
.seg button.on { background:#fff; color:var(--accent-deep); box-shadow:var(--shadow-sm); }
.field { margin-top:18px; }
.field label { display:block; font-family:var(--font-head); font-weight:500; font-size:14px; margin-bottom:7px; }
.field input, .field select, .field textarea {
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:11px;
  font-family:var(--font-body); font-size:15.5px; color:var(--ink); background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 110px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-card .btn { width:100%; justify-content:center; margin-top:22px; }
.form-note { margin-top:14px; font-size:13px; color:var(--ink-faint); text-align:center; }
.sent { display:none; text-align:center; padding: 40px 10px; }
.sent.show { display:block; }
.sent .ok { width:64px; height:64px; border-radius:50%; background:var(--grow-wash); color:var(--grow); display:grid; place-items:center; margin:0 auto 20px; }
.sent .ok svg { width:32px; height:32px; }
.sent h3 { font-size:23px; }
.sent p { margin-top:10px; color:var(--ink-soft); }
.form-body.hide { display:none; }

/* info side */
.info-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; }
.info-card + .info-card { margin-top:18px; }
.info-item { display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.info-item:last-child { border-bottom:none; padding-bottom:0; }
.info-item:first-child { padding-top:0; }
.info-item .ic { width:44px; height:44px; border-radius:12px; background:var(--accent-wash); color:var(--accent-deep); display:grid; place-items:center; flex:none; }
.info-item .ic svg { width:21px; height:21px; }
.info-item .lab { font-family:var(--font-head); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.info-item .val { font-family:var(--font-head); font-weight:600; font-size:17px; margin-top:3px; }
.info-item .val a { color:var(--ink); }
.info-item .val a:hover { color:var(--accent-deep); }
.info-item small { display:block; font-size:13px; color:var(--ink-faint); font-weight:400; font-family:var(--font-body); margin-top:3px; }

.hours-card h4 { font-family:var(--font-head); font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; }
.hours-row { display:flex; justify-content:space-between; padding:8px 0; font-size:15px; border-bottom:1px solid var(--line-soft); }
.hours-row:last-child { border-bottom:none; }
.hours-row span:first-child { color:var(--ink-soft); }
.hours-row span:last-child { font-family:var(--font-head); font-weight:600; }
.pro-note { margin-top:18px; padding:18px 20px; border-radius:var(--r); background:var(--bg-deep); color:#fff; position:relative; overflow:hidden; }
.pro-note::before { content:""; position:absolute; inset:0; background:radial-gradient(300px 160px at 90% 0%, color-mix(in srgb,var(--accent) 40%,transparent), transparent 62%); }
.pro-note b { position:relative; font-family:var(--font-head); font-size:15.5px; display:block; }
.pro-note p { position:relative; color:#AFC7D4; font-size:13.5px; margin-top:5px; }
.pro-note a { position:relative; display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-family:var(--font-head); font-weight:600; font-size:14px; color:#6FDCEE; }
.pro-note a svg { width:15px; height:15px; }

@media (max-width:940px){ .contact-grid{grid-template-columns:1fr;} }
@media (max-width:560px){ .row2{grid-template-columns:1fr;} }