/* OneRouter — Contact Page Styles */

body { background: #fafaf9; }

/* Hero */
.contact-hero { text-align: center; padding: 7rem 2rem 5rem; max-width: 640px; margin: 0 auto; }
.contact-hero__eyebrow { font-size: .7rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: #8b8b8b; margin-bottom: 1.5rem; }
.contact-hero h1 { font-size: clamp(2.5rem,5.5vw,4rem); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; margin: 0; }
.contact-hero__text { font-size: 1.05rem; line-height: 1.75; color: #5c5c5c; margin: 1.5rem auto 0; max-width: 480px; }

/* Section */
.contact-section--warm { background: #f5f4f1; max-width: 100%; padding: 5rem 2rem; }
.contact-section__inner { max-width: 56rem; margin: 0 auto; }

/* Email */
.contact-email { text-align: center; padding: 3rem 2rem; }
.contact-email__label { font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #8b8b8b; margin-bottom: .75rem; }
.contact-email a { font-size: clamp(1.5rem,3.5vw,2.5rem); font-weight: 600; letter-spacing: -.025em; color: #1c1c1c; border-bottom: 2px solid #d5d5cf; padding-bottom: 4px; transition: border-color .2s; }
.contact-email a:hover { border-color: #1c1c1c; }
.contact-email__note { margin-top: 1.25rem; font-size: .85rem; color: #8b8b8b; }

/* Instructions */
.contact-instructions { background: #fff; border: 1px solid #eaeae6; border-radius: 1rem; padding: 2rem 2rem 1.5rem; }
.contact-instructions h3 { font-size: .9rem; font-weight: 500; margin: 0 0 1rem; letter-spacing: -.01em; }
.contact-instructions ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.contact-instructions li { font-size: .88rem; color: #5c5c5c; padding-left: 1.25rem; position: relative; line-height: 1.6; }
.contact-instructions li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: #c5c2b8; }

/* Support cards */
.contact-cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.5rem; }
.contact-card { background: #fff; border: 1px solid #eaeae6; border-radius: 1rem; padding: 1.75rem; transition: box-shadow .3s,border-color .3s; }
.contact-card:hover { border-color: #d5d5cf; box-shadow: 0 6px 24px rgba(0,0,0,.04); }
.contact-card__tag { display: inline-block; font-size: .65rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .6rem; border-radius: .375rem; margin-bottom: 1rem; }
.contact-card__tag--blue { background: #e8edf5; color: #4a6fa5; }
.contact-card__tag--green { background: #e8f0e8; color: #3d7a3d; }
.contact-card__tag--amber { background: #f0ece5; color: #8b7355; }
.contact-card__tag--purple { background: #f0e8f0; color: #7a4d8b; }
.contact-card h3 { font-size: .95rem; font-weight: 500; margin: 0 0 .5rem; letter-spacing: -.01em; }
.contact-card p { font-size: .85rem; color: #6b6b6b; line-height: 1.65; margin: 0; }

/* CTA */
.contact-cta { text-align: center; padding: 5rem 2rem; max-width: 500px; margin: 0 auto; }
.contact-cta h2 { font-size: clamp(1.5rem,3vw,2rem); font-weight: 600; letter-spacing: -.025em; margin: 0 0 1rem; }
.contact-cta p { font-size: 1rem; color: #5c5c5c; margin: 0 0 1.5rem; line-height: 1.7; }
.contact-cta__btn { display: inline-flex; align-items: center; gap: .5rem; background: #1c1c1c; color: #fff; height: 3rem; padding: 0 1.75rem; border-radius: .75rem; font-size: .875rem; font-weight: 500; text-decoration: none; transition: opacity .15s; }
.contact-cta__btn:hover { opacity: .85; }
.contact-cta__btn svg { width: 1rem; height: 1rem; }

/* Dark mode */
.dark body { background: #1a1a1a; color: #e5e5e0; }
.dark .contact-section--warm { background: #1e1e1e; }
.dark .contact-hero__eyebrow,.dark .contact-email__label,.dark .contact-email__note,.dark .contact-instructions li { color: #7a7a72; }
.dark .contact-hero__text,.dark .contact-card p { color: #9b9b94; }
.dark .contact-email a { color: #f5f5f0; border-color: rgba(255,255,255,.12); }
.dark .contact-email a:hover { border-color: rgba(255,255,255,.3); }
.dark .contact-instructions,.dark .contact-card { background: #222; border-color: rgba(255,255,255,.06); }
.dark .contact-card:hover { border-color: rgba(255,255,255,.1); box-shadow: 0 6px 24px rgba(0,0,0,.2); }
.dark .contact-instructions li::before { background: rgba(255,255,255,.2); }
.dark .contact-cta__btn { background: #f5f5f0; color: #1a1a1a; }

/* Animations — override default paused */
.contact-hero .anim-fade-up,.contact-hero .anim-scale-in,
.contact-section--warm .anim-fade-up,.contact-section--warm .anim-scale-in,
.contact-cta .anim-fade-up,.contact-cta .anim-scale-in { animation-play-state: paused; opacity: 0; }
.contact-hero .anim-fade-up.visible,.contact-hero .anim-scale-in.visible,
.contact-section--warm .anim-fade-up.visible,.contact-section--warm .anim-scale-in.visible,
.contact-cta .anim-fade-up.visible,.contact-cta .anim-scale-in.visible { animation-play-state: running; }

@media (min-width: 640px) { .contact-cards { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px) { .contact-hero { padding: 9rem 2rem 5rem; } .contact-email { padding: 4rem 2rem; } }