/* ═══════════════════════════════════════════════════════════════
   TULSA HOME INSIDER — Warm Consumer Magazine
   Design: Wirecutter meets lifestyle magazine. Warm, trustworthy.
   Layout: Split heroes, amber accents, quiz cards, generous whitespace
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Nunito Sans';src:url(/fonts/nunito-sans-latin.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Bitter';src:url(/fonts/bitter-latin.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}

:root{
  --forest:#1A5632;--forest-light:#22803E;--forest-dark:#134225;
  --amber:#D97706;--amber-light:#FBBF24;--amber-pale:#FEF3C7;--amber-glow:rgba(217,119,6,0.12);
  --cream:#FFFBEB;--warm-white:#FFFEF7;--white:#FFFFFF;
  --bark:#1C1917;--bark-soft:#292524;--bark-muted:#78716C;--bark-light:#A8A29E;
  --border:#E7E5E4;--border-warm:#D6D3D1;
  --font-body:'Nunito Sans',-apple-system,sans-serif;
  --font-display:'Bitter',Georgia,serif;
  --max-w:1180px;--content-w:780px;
  --radius:16px;--radius-sm:10px;--radius-xs:6px;
  --shadow-sm:0 2px 8px rgba(28,25,23,0.06);
  --shadow:0 8px 24px rgba(28,25,23,0.08);
  --shadow-lg:0 16px 48px rgba(28,25,23,0.12);
  --ease:cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--bark);background:var(--warm-white);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.2;color:var(--bark);letter-spacing:-0.01em}
h1{font-size:clamp(2.25rem,4.5vw,3.5rem)}
h2{font-size:clamp(1.65rem,3vw,2.35rem)}
h3{font-size:clamp(1.15rem,2vw,1.45rem)}

.container{max-width:var(--max-w);margin:0 auto;padding:0 2rem}
.narrow{max-width:var(--content-w);margin:0 auto}

/* Scroll Reveal */
.reveal{opacity:0;transform:translateY(35px);transition:opacity 0.8s var(--ease),transform 0.8s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.stagger-1{transition-delay:0.1s}.stagger-2{transition-delay:0.2s}.stagger-3{transition-delay:0.3s}.stagger-4{transition-delay:0.4s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Announcement Bar */
.announce{background:var(--forest);color:rgba(255,255,255,0.8);text-align:center;padding:8px 0;font-size:0.75rem;letter-spacing:0.08em;font-weight:600}

/* Header */
.site-header{background:var(--white);border-bottom:3px solid var(--amber);position:sticky;top:0;z-index:100;transition:box-shadow 0.4s}
.site-header.scrolled{box-shadow:0 4px 20px rgba(28,25,23,0.08)}
.header-inner{max-width:var(--max-w);margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{font-family:var(--font-display);font-size:1.2rem;font-weight:800;color:var(--bark);display:flex;align-items:center;gap:0.6rem}
.logo-icon{width:32px;height:32px;background:var(--forest);border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center}
.logo-icon svg{width:18px;height:18px}
.logo span{color:var(--forest)}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:0.85rem;font-weight:700;color:var(--bark-muted);transition:color 0.3s}
.nav-links a:hover,.nav-links a.active{color:var(--forest)}

/* Hero - Split Layout */
.hero{padding:0;background:var(--cream);overflow:hidden}
.hero-split{display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.hero-text{padding:5rem 4rem 5rem 2rem;display:flex;flex-direction:column;justify-content:center;max-width:600px;margin-left:auto}
.hero-badge{display:inline-flex;align-items:center;gap:0.4rem;background:var(--amber-pale);color:var(--amber);font-size:0.72rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:0.4rem 0.9rem;border-radius:2rem;margin-bottom:1.25rem;width:fit-content}
.hero h1{margin-bottom:1rem}
.hero-sub{color:var(--bark-muted);font-size:1.1rem;line-height:1.8;margin-bottom:2rem}
.hero-actions{display:flex;gap:0.75rem;flex-wrap:wrap}
.btn-forest{display:inline-flex;align-items:center;gap:0.5rem;background:var(--forest);color:white;padding:0.9rem 1.75rem;border-radius:var(--radius-sm);font-weight:700;font-size:0.88rem;border:none;cursor:pointer;font-family:var(--font-body);transition:all 0.3s var(--ease)}
.btn-forest:hover{background:var(--forest-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(26,86,50,0.25)}
.btn-outline{display:inline-flex;align-items:center;gap:0.5rem;background:transparent;color:var(--forest);padding:0.9rem 1.75rem;border-radius:var(--radius-sm);font-weight:700;font-size:0.88rem;border:2px solid var(--forest);cursor:pointer;font-family:var(--font-body);transition:all 0.3s var(--ease)}
.btn-outline:hover{background:var(--forest);color:white}
.hero-img{overflow:hidden;position:relative}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--cream) 0%,transparent 15%)}

/* Quick Start Cards */
.quick-start{padding:4.5rem 0;border-bottom:1px solid var(--border)}
.quick-start .eyebrow{font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--amber);font-weight:800;margin-bottom:0.75rem;text-align:center}
.quick-start h2{text-align:center;margin-bottom:2.5rem}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.quick-card{background:var(--white);border:2px solid var(--border);border-radius:var(--radius);padding:1.75rem;text-align:center;transition:all 0.4s var(--ease);cursor:pointer;text-decoration:none;display:block}
.quick-card:hover{border-color:var(--amber);box-shadow:var(--shadow);transform:translateY(-4px)}
.quick-card-icon{font-size:2rem;margin-bottom:0.75rem}
.quick-card h3{font-size:1.05rem;margin-bottom:0.35rem;color:var(--forest)}
.quick-card p{font-size:0.82rem;color:var(--bark-muted);line-height:1.5}

/* Section Defaults */
.section{padding:5rem 0}
.section-cream{background:var(--cream)}
.section .eyebrow{font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--amber);font-weight:800;margin-bottom:0.75rem;text-align:center}
.section h2{text-align:center;margin-bottom:0.5rem}
.section-sub{text-align:center;color:var(--bark-muted);margin-bottom:3rem;max-width:560px;margin-left:auto;margin-right:auto}

/* Guide Cards */
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.guide-card{background:var(--white);border:2px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all 0.4s var(--ease);display:block;text-decoration:none}
.guide-card:hover{border-color:var(--amber);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.guide-card-img{height:220px;overflow:hidden}
.guide-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.7s var(--ease)}
.guide-card:hover .guide-card-img img{transform:scale(1.05)}
.guide-card-body{padding:1.5rem}
.guide-card .tag{font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--amber);font-weight:800}
.guide-card h3{margin:0.4rem 0;color:var(--bark)}
.guide-card p{color:var(--bark-muted);font-size:0.88rem;line-height:1.6}
.guide-card .read-link{display:inline-flex;align-items:center;gap:0.35rem;color:var(--forest);font-weight:700;font-size:0.82rem;margin-top:0.75rem;transition:gap 0.3s var(--ease)}
.guide-card .read-link:hover{gap:0.6rem}

/* Neighborhood Matchmaker */
.matchmaker{padding:5rem 0;background:var(--forest);color:white;position:relative;overflow:hidden}
.matchmaker::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(217,119,6,0.15) 0%,transparent 70%);pointer-events:none}
.matchmaker .eyebrow{color:var(--amber-light)}
.matchmaker h2{color:white;text-align:center;margin-bottom:0.5rem}
.matchmaker .section-sub{color:rgba(255,255,255,0.7)}
.match-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.match-card{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-sm);padding:1.5rem;transition:all 0.3s var(--ease)}
.match-card:hover{background:rgba(255,255,255,0.12);border-color:var(--amber);transform:translateY(-2px)}
.match-q{font-family:var(--font-display);font-size:1rem;color:var(--amber-light);margin-bottom:0.5rem}
.match-a{color:rgba(255,255,255,0.75);font-size:0.88rem;line-height:1.65}
.match-a strong{color:white}

/* Article Cards */
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.article-card{background:var(--white);border:2px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all 0.4s var(--ease);display:block;text-decoration:none}
.article-card:hover{border-color:var(--amber);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.article-card-img{height:180px;overflow:hidden}
.article-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.7s var(--ease)}
.article-card:hover .article-card-img img{transform:scale(1.05)}
.article-card-body{padding:1.25rem}
.article-card .tag{font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--amber);font-weight:800}
.article-card h3{margin:0.35rem 0;font-size:1.1rem;color:var(--bark)}
.article-card p{color:var(--bark-muted);font-size:0.82rem;line-height:1.6}

/* FAQ */
.faq{padding:5rem 0;background:var(--cream)}
.faq .eyebrow{text-align:center}
.faq h2{text-align:center;margin-bottom:2.5rem}
.faq-list{max-width:var(--content-w);margin:0 auto}
.faq-item{border-bottom:1px solid var(--border-warm);padding:1.25rem 0;cursor:pointer}
.faq-q{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--bark);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-q::after{content:'+';font-size:1.5rem;color:var(--amber);transition:transform 0.3s;flex-shrink:0;font-weight:400}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{color:var(--bark-muted);font-size:0.92rem;line-height:1.75;max-height:0;overflow:hidden;transition:max-height 0.5s var(--ease),padding 0.5s var(--ease);padding-top:0}
.faq-item.open .faq-a{max-height:300px;padding-top:0.75rem}

/* CTA */
.cta{padding:5rem 0;background:var(--amber);text-align:center}
.cta h2{color:var(--bark);margin-bottom:0.5rem}
.cta p{color:var(--bark-soft);margin-bottom:2rem;font-size:1.05rem}
.cta-form{display:flex;gap:0;max-width:480px;margin:0 auto}
.cta-form input{flex:1;padding:0.9rem 1.25rem;border:2px solid rgba(28,25,23,0.15);border-right:none;border-radius:var(--radius-sm) 0 0 var(--radius-sm);background:var(--white);color:var(--bark);font-family:var(--font-body);font-size:0.9rem;outline:none;transition:border-color 0.3s}
.cta-form input:focus{border-color:var(--forest)}
.cta-form input::placeholder{color:var(--bark-light)}
.cta-form button{padding:0.9rem 1.75rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--forest);color:white;font-weight:700;font-size:0.85rem;letter-spacing:0.04em;text-transform:uppercase;border:none;cursor:pointer;font-family:var(--font-body);transition:all 0.3s}
.cta-form button:hover{background:var(--forest-dark)}

/* Footer */
.site-footer{background:var(--bark);color:rgba(255,255,255,0.5);padding:4rem 0 2.5rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-brand{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:white;margin-bottom:0.5rem}
.footer-desc{font-size:0.82rem;line-height:1.7;color:rgba(255,255,255,0.4)}
.footer-heading{font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:0.75rem;font-weight:700}
.footer-links{display:flex;flex-direction:column;gap:0.5rem}
.footer-links a{font-size:0.85rem;color:rgba(255,255,255,0.45);transition:color 0.3s}
.footer-links a:hover{color:var(--amber-light)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:2rem;font-size:0.75rem;color:rgba(255,255,255,0.3);text-align:center;line-height:1.7}

/* Inner Pages */
.page-hero{position:relative;overflow:hidden;min-height:320px;display:flex;align-items:flex-end;background:var(--forest)}
.page-hero-img{position:absolute;inset:0;z-index:0}
.page-hero-img img{width:100%;height:100%;object-fit:cover;opacity:0.3}
.page-hero-content{position:relative;z-index:2;padding:3rem 0;width:100%}
.page-hero h1{color:white;margin-bottom:0.35rem}
.page-hero .eyebrow{font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--amber-light);font-weight:800;margin-bottom:0.75rem}
.page-hero p{color:rgba(255,255,255,0.7);font-size:1.05rem}
.page-content{padding:4rem 0}
.page-content .narrow{max-width:var(--content-w);margin:0 auto}

.prose{line-height:1.85;color:var(--bark-soft)}
.prose p{margin-bottom:1.5rem}
.prose h2{margin-top:3rem;margin-bottom:1rem;color:var(--bark)}
.prose h3{margin-top:2.25rem;margin-bottom:0.75rem;color:var(--bark)}
.prose ul,.prose ol{margin:0 0 1.5rem 1.75rem;list-style:disc;color:var(--bark-muted)}
.prose ol{list-style:decimal}
.prose li{margin-bottom:0.4rem}
.prose a{color:var(--forest);text-decoration:underline;text-decoration-color:var(--forest-light);text-underline-offset:3px;transition:text-decoration-color 0.3s}
.prose a:hover{text-decoration-color:var(--forest)}
.prose strong{color:var(--bark)}
.prose blockquote{border-left:4px solid var(--amber);background:var(--cream);padding:1.25rem 1.5rem;margin:1.5rem 0;border-radius:0 var(--radius-xs) var(--radius-xs) 0}

/* Takeaway box */
.takeaway{background:var(--amber-pale);border-left:4px solid var(--amber);padding:1.25rem 1.5rem;margin:1.5rem 0;border-radius:0 var(--radius-xs) var(--radius-xs) 0}
.takeaway h4{font-family:var(--font-body);font-weight:800;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--amber);margin-bottom:0.4rem}

.breadcrumbs{font-size:0.8rem;color:var(--bark-muted);margin-bottom:2rem}
.breadcrumbs a{color:var(--forest)}

.blog-list{display:flex;flex-direction:column;gap:1.5rem}
.blog-item{background:var(--white);border:2px solid var(--border);border-radius:var(--radius);padding:2rem;transition:all 0.4s var(--ease)}
.blog-item:hover{border-color:var(--amber);box-shadow:var(--shadow)}
.blog-meta{font-size:0.7rem;color:var(--amber);font-weight:800;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.5rem}
.blog-meta span{margin-right:1.5rem}
.blog-item h3 a{color:var(--bark);transition:color 0.3s}
.blog-item h3 a:hover{color:var(--forest)}
.blog-item p{color:var(--bark-muted);font-size:0.9rem}

.form-group{margin-bottom:1.5rem}
.form-group label{display:block;font-size:0.82rem;font-weight:700;color:var(--bark-muted);margin-bottom:0.4rem}
.form-group input,.form-group textarea{width:100%;padding:0.85rem 1.25rem;border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--white);font-family:var(--font-body);font-size:0.92rem;color:var(--bark);outline:none;transition:border-color 0.3s}
.form-group input:focus,.form-group textarea:focus{border-color:var(--forest)}
.form-group textarea{resize:vertical;min-height:140px}
.btn{display:inline-flex;align-items:center;gap:0.5rem;background:var(--forest);color:white;padding:0.85rem 2rem;border-radius:var(--radius-sm);font-weight:700;font-size:0.85rem;border:none;cursor:pointer;font-family:var(--font-body);transition:all 0.3s var(--ease)}
.btn:hover{background:var(--forest-dark);transform:translateY(-2px)}

/* Responsive */
@media(max-width:1024px){.hero-split{grid-template-columns:1fr}.hero-img{height:350px}.hero-text{padding:3rem 2rem}.guide-grid{grid-template-columns:1fr}.article-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.quick-grid{grid-template-columns:1fr 1fr}.match-grid{grid-template-columns:1fr}.article-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.nav-links{display:none}.cta-form{flex-direction:column}.cta-form input{border-right:2px solid rgba(28,25,23,0.15);border-radius:var(--radius-sm) var(--radius-sm) 0 0;border-bottom:none}.cta-form button{border-radius:0 0 var(--radius-sm) var(--radius-sm)}}
@media(max-width:480px){.quick-grid{grid-template-columns:1fr}.hero-text{padding:2.5rem 1.5rem}}

/* ═══ RELATED ARTICLES ═══ */
.related{padding:3rem 0;border-top:2px solid var(--border);margin-top:3rem}
.related h2{font-size:1.3rem;margin-bottom:1.25rem}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.related-card{background:var(--cream);border:2px solid var(--border);border-radius:var(--radius-sm);padding:1.25rem;transition:all 0.3s var(--ease)}
.related-card:hover{border-color:var(--amber);transform:translateY(-2px)}
.related-card .tag{font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--amber);font-weight:800}
.related-card h3{font-size:1rem;margin:0.3rem 0 0}
.related-card h3 a{color:var(--bark);transition:color 0.3s}
.related-card h3 a:hover{color:var(--forest)}