/* ============================================================ Insurance Badger — base + theme system Three directions switch via [data-theme] on : warm · Hearth (friendly, soft, cream) clean · Clarity (crisp, cool, corporate-lite) earthy · Woodland (moss + bark, leans woodland/Willows) Willows flavor switches via [data-willows]: off | subtle | playful ============================================================ */ /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0} img{display:block;max-width:100%} button{font:inherit;color:inherit;cursor:pointer} a{color:inherit;text-decoration:none} h1,h2,h3,h4,p{margin:0} ul{margin:0;padding:0;list-style:none} /* ============================================================ THEME TOKENS ============================================================ */ :root{ --green:#2E9A3E; --green-deep:#1F6E2C; --green-bright:#36AA3B; --green-soft:#EAF3E6; --ink:#2A2723; --ink-2:#564f45; --ink-soft:#7b7264; --paper:#FBF7F0; --surface:#FFFFFF; --surface-2:#FFFDF9; --line:#ECE4D8; --dark:#262320; --dark-2:#332f2a; --on-dark:#F4EFE5; --on-dark-soft:#b6aa9a; --radius:16px; --radius-sm:10px; --radius-lg:26px; --shadow-sm:0 1px 2px rgba(40,34,26,.06), 0 1px 1px rgba(40,34,26,.04); --shadow:0 12px 30px -14px rgba(40,34,26,.22), 0 4px 10px -6px rgba(40,34,26,.10); --shadow-lg:0 30px 60px -24px rgba(40,34,26,.30); --font-head:"Bricolage Grotesque", system-ui, sans-serif; --font-body:"Mulish", system-ui, sans-serif; --head-weight:700; --head-spacing:-0.02em; --head-italic:normal; --maxw:1200px; --pad:clamp(20px, 5vw, 88px); } /* WARM · Hearth (default) */ [data-theme="warm"]{ --green:#2E9A3E; --green-deep:#1F6E2C; --green-soft:#EBF4E7; --ink:#2A2723; --ink-2:#564f45; --ink-soft:#837a6c; --paper:#FBF7F0; --surface:#FFFFFF; --surface-2:#FFFDF8; --line:#EDE5D9; --dark:#262320; --dark-2:#34302a; --on-dark:#F4EFE5; --on-dark-soft:#bcae9c; --radius:18px; --radius-sm:11px; --radius-lg:28px; --font-head:"Bricolage Grotesque", system-ui, sans-serif; --font-body:"Mulish", system-ui, sans-serif; --head-weight:700; --head-spacing:-0.02em; --head-italic:normal; } /* CLEAN · Clarity */ [data-theme="clean"]{ --green:#2C8A33; --green-deep:#1E6726; --green-soft:#EAF4EA; --ink:#1B2126; --ink-2:#414b54; --ink-soft:#647079; --paper:#F6F8F9; --surface:#FFFFFF; --surface-2:#FBFCFD; --line:#E5E9ED; --dark:#141A1F; --dark-2:#202830; --on-dark:#EAEFF3; --on-dark-soft:#9aa7b2; --radius:10px; --radius-sm:7px; --radius-lg:16px; --shadow-sm:0 1px 2px rgba(20,26,31,.06); --shadow:0 14px 32px -18px rgba(20,26,31,.28), 0 3px 8px -5px rgba(20,26,31,.10); --shadow-lg:0 34px 64px -28px rgba(20,26,31,.34); --font-head:"Space Grotesk", system-ui, sans-serif; --font-body:"Hanken Grotesk", system-ui, sans-serif; --head-weight:600; --head-spacing:-0.03em; --head-italic:normal; } /* EARTHY · Woodland */ [data-theme="earthy"]{ --green:#557A2E; --green-deep:#39521E; --green-soft:#ECEFDD; --bark:#7A5230; --ink:#2B2920; --ink-2:#5a5040; --ink-soft:#857a64; --paper:#F4EEE1; --surface:#FBF6EB; --surface-2:#FCF8EF; --line:#E5DBC6; --dark:#2A3622; --dark-2:#384a2c; --on-dark:#F0EBDA; --on-dark-soft:#b3b596; --radius:14px; --radius-sm:9px; --radius-lg:24px; --shadow:0 14px 34px -16px rgba(43,41,32,.26), 0 4px 10px -6px rgba(43,41,32,.12); --font-head:"Newsreader", Georgia, serif; --font-body:"Mulish", system-ui, sans-serif; --head-weight:600; --head-spacing:-0.01em; --head-italic:normal; } /* ============================================================ BASE ============================================================ */ body{ font-family:var(--font-body); color:var(--ink); background:var(--paper); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; font-feature-settings:"ss01","cv01"; } h1,h2,h3,h4{ font-family:var(--font-head); font-weight:var(--head-weight); letter-spacing:var(--head-spacing); line-height:1.1; color:var(--ink); text-wrap:pretty; } [data-theme="earthy"] h1,[data-theme="earthy"] h2,[data-theme="earthy"] h3{line-height:1.16} .serif-italic{font-style:italic} [data-theme="earthy"] .accent-italic{font-style:italic; font-family:var(--font-head)} .wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)} .section{padding-block:clamp(56px, 8vw, 116px)} .eyebrow{ font-family:var(--font-body); font-weight:800; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green-deep); display:inline-flex; align-items:center; gap:.5em; } .eyebrow::before{ content:""; width:26px; height:2px; background:var(--green); display:inline-block; border-radius:2px; } .lead{color:var(--ink-2); font-size:1.18rem; line-height:1.55; max-width:46ch} :where(h1,h2,h3)+.lead{margin-top:18px} .muted{color:var(--ink-soft)} .center{text-align:center} .center .lead{margin-inline:auto} .center .eyebrow::before{display:none} h2.h{font-size:clamp(1.9rem, 3.6vw, 3rem)} h3.h{font-size:clamp(1.3rem,2.2vw,1.7rem)} .section-head{max-width:62ch} .section-head.center{margin-inline:auto} .section-head .lead{margin-top:18px} .section-head .eyebrow{margin-bottom:18px} /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-body); font-weight:800; font-size:.98rem; padding:.86em 1.35em; border-radius:var(--radius-sm); border:1.5px solid transparent; line-height:1; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s; white-space:nowrap; } .btn i{font-size:1.12em} /* lucide svg sizing */ svg.lucide{width:1em;height:1em;flex:none;stroke-width:2} .btn svg.lucide{width:1.12em;height:1.12em} .hero-trust svg.lucide,.cm-tag svg.lucide{width:1.1em;height:1.1em} .card-link svg.lucide{width:1.02em;height:1.02em} .nav-tel svg.lucide,.eyebrow svg.lucide{width:1.05em;height:1.05em} .f-social svg.lucide{width:1.15em;height:1.15em} .qprivacy svg.lucide{width:.95em;height:.95em;vertical-align:-0.12em;display:inline-block} .btn-primary{background:var(--green); color:#fff; box-shadow:var(--shadow-sm)} .btn-primary:hover{background:var(--green-deep); transform:translateY(-1px); box-shadow:var(--shadow)} .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)} .btn-ghost:hover{border-color:var(--ink-soft); background:var(--surface)} .btn-dark{background:var(--ink); color:var(--paper)} .btn-dark:hover{background:#000; transform:translateY(-1px)} .btn-on-dark{background:#fff; color:var(--ink)} .btn-on-dark:hover{transform:translateY(-1px); box-shadow:var(--shadow)} .btn-lg{padding:1.02em 1.7em; font-size:1.05rem; border-radius:var(--radius-sm)} .btn-block{width:100%; justify-content:center} /* ---------- placeholder imagery ---------- */ .ph{ position:relative; border-radius:var(--radius); overflow:hidden; background: repeating-linear-gradient(135deg, transparent 0 13px, rgba(46,154,62,.045) 13px 14px), linear-gradient(160deg, var(--green-soft), var(--surface-2)); border:1px solid var(--line); display:flex; align-items:flex-end; } .ph::after{ content:attr(data-label); font-family:"DM Mono", ui-monospace, monospace; font-size:.72rem; letter-spacing:.04em; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); padding:.3em .6em; border-radius:6px; margin:12px; box-shadow:var(--shadow-sm); } .ph.ph-dark{background: repeating-linear-gradient(135deg, transparent 0 13px, rgba(255,255,255,.05) 13px 14px), linear-gradient(160deg, var(--dark-2), var(--dark)); border-color:rgba(255,255,255,.12)} .ph.ph-dark::after{background:rgba(255,255,255,.08); color:var(--on-dark-soft); border-color:rgba(255,255,255,.16)} /* brand illustrations */ .illus{display:block; width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow); object-fit:cover; background:var(--green-soft)} /* ============================================================ HEADER ============================================================ */ .site-header{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:blur(12px) saturate(1.1); border-bottom:1px solid transparent; transition:border-color .2s, background .2s; } .site-header.scrolled{border-bottom-color:var(--line); background:color-mix(in srgb, var(--paper) 94%, transparent)} .nav{ max-width:var(--maxw); margin:0 auto; padding:14px var(--pad); display:flex; align-items:center; gap:26px; } .brand{display:flex; align-items:center; gap:10px; margin-right:6px; flex:none} .brand img{height:54px; width:auto; max-width:none; flex:none} .nav-links{display:flex; align-items:center; gap:4px; margin-left:6px} .nav-links a{ padding:8px 13px; border-radius:9px; font-weight:600; font-size:.95rem; white-space:nowrap; color:var(--ink-2); transition:background .15s, color .15s; } .nav-links a:hover{background:var(--surface); color:var(--ink)} .nav-spacer{flex:1} .nav-tel{ display:inline-flex; align-items:center; gap:.5em; font-weight:800; color:var(--ink); padding:8px 12px; border-radius:9px; font-size:.98rem; white-space:nowrap; } .nav-tel i{color:var(--green)} .nav-tel:hover{background:var(--green-soft)} .nav-cta{display:inline-flex} .menu-btn{display:none; margin-left:auto; background:var(--surface); border:1px solid var(--line); width:44px; height:44px; border-radius:11px; align-items:center; justify-content:center; font-size:1.4rem} /* ============================================================ HERO ============================================================ */ .hero{position:relative; overflow:hidden; padding-top:clamp(40px,5vw,72px); padding-bottom:clamp(44px,6vw,84px)} .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,68px); align-items:center; } .hero-eyebrow{margin-bottom:22px} .hero h1{ font-size:clamp(2.5rem, 5.4vw, 4.3rem); line-height:1.06; } [data-theme="earthy"] .hero h1{line-height:1.12} .hero h1 .accent{color:var(--green-deep)} .hero-sub{margin-top:24px; font-size:clamp(1.08rem,1.5vw,1.28rem); color:var(--ink-2); max-width:44ch} .hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px} .hero-trust{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:34px} .hero-trust li{display:inline-flex; align-items:center; gap:.5em; font-weight:700; font-size:.92rem; color:var(--ink-2)} .hero-trust i{color:var(--green); font-size:1.1em} .hero-media{position:relative} .hero-photo{aspect-ratio:4/5; width:100%; min-height:380px} .hero-card{ position:absolute; left:-26px; bottom:26px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:16px 18px; display:flex; align-items:center; gap:13px; max-width:260px; } .hero-card .hc-mark{width:44px; height:44px; border-radius:12px; background:var(--green-soft); display:flex; align-items:center; justify-content:center; color:var(--green-deep); font-size:1.5rem; flex:none} .hero-card b{display:block; font-family:var(--font-head); font-size:1.05rem} .hero-card small{color:var(--ink-soft); font-weight:700; font-size:.8rem} .hero-blob{position:absolute; z-index:-1; border-radius:50%; filter:blur(46px); opacity:.5} .hero-blob.b1{width:380px;height:380px; background:var(--green-soft); top:-90px; right:-90px} /* willows hero whisper */ .hero-whisper{ margin-top:26px; padding-left:16px; border-left:3px solid var(--green); font-style:italic; color:var(--ink-2); max-width:40ch; font-size:1.02rem; } [data-theme="earthy"] .hero-whisper{font-family:var(--font-head)} /* ============================================================ CARRIER / LOGO STRIP ============================================================ */ .strip{padding-block:clamp(34px,4vw,52px); border-block:1px solid var(--line); background:var(--surface-2)} .strip-head{text-align:center; color:var(--ink-soft); font-weight:800; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:26px} .carriers{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 40px} .carriers span{ font-family:var(--font-head); font-weight:700; font-size:1.18rem; color:var(--ink-soft); opacity:.78; letter-spacing:-.01em; } /* ============================================================ COVERAGE CARDS ============================================================ */ .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px} .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); position:relative; transition:transform .18s ease, box-shadow .2s ease, border-color .2s; display:flex; flex-direction:column; min-height:218px; } .card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--green) 36%, var(--line))} .card-ic{ width:52px; height:52px; border-radius:14px; background:var(--green-soft); color:var(--green-deep); display:flex; align-items:center; justify-content:center; font-size:1.7rem; margin-bottom:18px; } .card h3{font-size:1.28rem; margin-bottom:8px} .card p{color:var(--ink-soft); font-size:.97rem; line-height:1.5} .card-link{margin-top:auto; padding-top:16px; color:var(--green-deep); font-weight:800; font-size:.92rem; display:inline-flex; align-items:center; gap:.4em} .card:hover .card-link i{transform:translateX(3px)} .card-link i{transition:transform .15s} /* ============================================================ HOW IT WORKS ============================================================ */ .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:50px; position:relative} .step{position:relative; padding:30px 26px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm)} .step-n{font-family:var(--font-head); font-size:.9rem; font-weight:800; color:#fff; background:var(--green); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:18px} .step h3{font-size:1.22rem; margin-bottom:9px} .step p{color:var(--ink-soft); font-size:.97rem} /* ============================================================ WHY US (split) ============================================================ */ .split{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(34px,5vw,72px); align-items:center} .why-list{display:grid; gap:14px; margin-top:30px} .why-item{display:flex; gap:15px; align-items:flex-start; padding:18px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm)} .why-item .wi-ic{width:42px;height:42px;border-radius:11px;background:var(--green-soft);color:var(--green-deep); display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex:none} .why-item b{font-family:var(--font-head); font-size:1.06rem; display:block; margin-bottom:3px} .why-item p{color:var(--ink-soft); font-size:.95rem; line-height:1.45} .why-media{position:relative} .why-photo{aspect-ratio:3/4; min-height:420px} .why-badge{position:absolute; right:-20px; top:24px; background:var(--ink); color:var(--paper); border-radius:var(--radius); padding:16px 20px; box-shadow:var(--shadow-lg); max-width:200px} .why-badge b{font-family:var(--font-head); font-size:1.7rem; display:block; color:#fff} .why-badge small{font-size:.82rem; color:var(--on-dark-soft); font-weight:700} /* ============================================================ HARD CASES BAND (dark) ============================================================ */ .band{background:var(--dark); color:var(--on-dark); position:relative; overflow:hidden} .band .eyebrow{color:#8fd49a} .band .eyebrow::before{background:#8fd49a} .band h2{color:#fff} .band .lead{color:var(--on-dark-soft)} .band-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,68px); align-items:center} .hard-list{display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:30px} .hard-list li{display:flex; align-items:center; gap:.6em; font-weight:700; color:var(--on-dark); font-size:.98rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); padding:13px 15px; border-radius:11px} .hard-list i{color:#8fd49a; font-size:1.2em; flex:none} .band-cta{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap} /* ============================================================ STATS ============================================================ */ .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px} .stat{text-align:center; padding:18px} .stat b{font-family:var(--font-head); font-size:clamp(2.1rem,4vw,3rem); color:var(--green-deep); display:block; line-height:1} .stat span{color:var(--ink-soft); font-weight:700; font-size:.92rem; margin-top:8px; display:block} /* ============================================================ REVIEWS ============================================================ */ .reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:46px} .review{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:14px} .stars{color:#E2A900; font-size:1.05rem; letter-spacing:.08em} .review p{font-size:1.02rem; line-height:1.55; color:var(--ink)} .review-by{display:flex; align-items:center; gap:11px; margin-top:auto} .review-av{width:42px;height:42px;border-radius:50%;background:var(--green-soft);color:var(--green-deep); display:flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--font-head)} .review-by b{font-size:.97rem; display:block} .review-by small{color:var(--ink-soft); font-size:.84rem} /* ============================================================ STORY / WILLOWS ============================================================ */ .story{background:var(--surface-2); border-block:1px solid var(--line)} .story-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:center} .story-media{position:relative} .story-photo{aspect-ratio:1/1; min-height:360px} .av{display:none} [data-willows="off"] .av.off{display:block} [data-willows="subtle"] .av.subtle{display:block} [data-willows="playful"] .av.playful{display:block} .willows-tag{display:none} [data-willows="subtle"] .willows-tag,[data-willows="playful"] .willows-tag{display:inline-flex} .hero-whisper{display:none} [data-willows="subtle"] .hero-whisper,[data-willows="playful"] .hero-whisper{display:block} .pull{font-family:var(--font-head); font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.25; color:var(--ink); margin:22px 0; text-wrap:pretty} [data-theme="earthy"] .pull{font-style:italic} .story p+p{margin-top:16px} .story .lead{margin-top:14px} .toad-note{margin-top:22px; display:flex; gap:14px; align-items:flex-start; padding:18px 20px; background:var(--green-soft); border-radius:var(--radius); border:1px solid color-mix(in srgb,var(--green) 22%,var(--line))} .toad-note i{font-size:1.5rem; color:var(--green-deep); flex:none} .toad-note b{font-family:var(--font-head)} .toad-note p{font-size:.96rem; color:var(--ink-2); margin-top:2px} /* ============================================================ CONTACT / QUOTE ============================================================ */ .contact{background:var(--dark); color:var(--on-dark)} .contact .eyebrow{color:#8fd49a} .contact .eyebrow::before{background:#8fd49a} .contact h2{color:#fff} .contact .lead{color:var(--on-dark-soft)} .contact-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(34px,5vw,64px); align-items:start} .contact-methods{display:grid; gap:13px; margin-top:30px} .cm{display:flex; align-items:center; gap:15px; padding:16px 18px; border-radius:var(--radius); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); transition:background .15s, border-color .15s} .cm:hover{background:rgba(255,255,255,.09); border-color:rgba(143,212,154,.5)} .cm-ic{width:46px;height:46px;border-radius:12px;background:rgba(143,212,154,.16);color:#8fd49a; display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex:none} .cm b{display:block; color:#fff; font-family:var(--font-head); font-size:1.04rem} .cm small{color:var(--on-dark-soft); font-size:.86rem} .cm-tag{margin-left:auto; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8fd49a; background:rgba(143,212,154,.14); padding:5px 9px; border-radius:999px; flex:none} .quote-card{background:var(--surface); border-radius:var(--radius-lg); padding:clamp(24px,3vw,36px); box-shadow:var(--shadow-lg); color:var(--ink)} .quote-card h3{font-size:1.4rem; margin-bottom:5px} .quote-card .qsub{color:var(--ink-soft); font-size:.96rem; margin-bottom:22px} .field{margin-bottom:15px} .field label{display:block; font-weight:800; font-size:.82rem; margin-bottom:7px; color:var(--ink-2)} .field input,.field select,.field textarea{ width:100%; padding:.82em .9em; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); font:inherit; color:var(--ink); transition:border-color .15s, box-shadow .15s; } .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 4px var(--green-soft)} .field-row{display:grid; grid-template-columns:1fr 1fr; gap:13px} .qprivacy{font-size:.8rem; color:var(--ink-soft); margin-top:14px; text-align:center} /* ============================================================ FOOTER ============================================================ */ .footer{background:var(--dark-2); color:var(--on-dark); padding-block:clamp(48px,6vw,80px) 28px} .footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px} .f-brand{max-width:30ch} .f-brand .f-mark{display:flex; align-items:center; gap:11px; margin-bottom:16px} .f-brand .f-mark img{height:42px} .f-brand .f-name{font-family:var(--font-head); font-weight:700; font-size:1.2rem; color:#fff; line-height:1} .f-brand .f-name .g{color:#8fd49a} .f-brand p{color:var(--on-dark-soft); font-size:.92rem} .f-social{display:flex; gap:10px; margin-top:18px} .f-social a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); display:flex;align-items:center;justify-content:center; color:var(--on-dark); font-size:1.15rem; transition:background .15s,color .15s} .f-social a:hover{background:#8fd49a; color:var(--dark)} .f-col h4{font-family:var(--font-body); font-weight:800; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-soft); margin-bottom:16px} .f-col li{margin-bottom:11px} .f-col a{color:var(--on-dark); font-size:.95rem; opacity:.86} .f-col a:hover{opacity:1; color:#8fd49a} .f-hours{color:var(--on-dark-soft); font-size:.92rem; line-height:1.7} .f-hours b{color:#fff; display:block; font-family:var(--font-head); font-weight:600} .footer-bottom{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; margin-top:46px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); color:var(--on-dark-soft); font-size:.86rem} .footer-bottom nav{display:flex; gap:20px; flex-wrap:wrap} .footer-bottom a:hover{color:#8fd49a} /* ============================================================ FLOATING LIVE CHAT (future placeholder) ============================================================ */ .chat-fab{position:fixed; right:22px; bottom:22px; z-index:60; display:flex; align-items:center; gap:11px; background:var(--green); color:#fff; border:none; padding:13px 19px 13px 14px; border-radius:999px; box-shadow:var(--shadow-lg); font-weight:800; font-size:.96rem; transition:transform .16s, background .2s} .chat-fab:hover{transform:translateY(-2px); background:var(--green-deep)} .chat-fab i{font-size:1.5rem} .chat-fab .pulse{position:absolute; top:8px; left:8px; width:12px; height:12px; border-radius:50%; background:#8fd49a; border:2px solid var(--green); box-shadow:0 0 0 0 rgba(143,212,154,.7); animation:pulse 2.2s infinite; z-index:2} .chat-fab .fab-badger{width:36px; height:36px; border-radius:50%; display:block; flex:none} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(143,212,154,.6)}70%{box-shadow:0 0 0 9px rgba(143,212,154,0)}100%{box-shadow:0 0 0 0 rgba(143,212,154,0)}} .chat-panel{position:fixed; right:22px; bottom:84px; z-index:61; width:330px; max-width:calc(100vw - 36px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; transform:translateY(14px) scale(.97); opacity:0; pointer-events:none; transition:transform .2s ease, opacity .2s ease; transform-origin:bottom right} .chat-panel.open{transform:none; opacity:1; pointer-events:auto} .chat-hd{background:var(--dark); color:#fff; padding:18px 20px; display:flex; align-items:center; gap:12px} .chat-hd .ch-av{width:44px;height:44px;border-radius:50%;background:transparent;overflow:hidden; display:flex;align-items:center;justify-content:center;flex:none} .chat-hd .ch-av img{width:100%;height:100%;object-fit:cover;display:block} .chat-hd b{font-family:var(--font-head); display:block; font-size:1.02rem} .chat-hd small{color:var(--on-dark-soft); font-size:.82rem; display:flex; align-items:center; gap:.4em} .chat-hd small::before{content:""; width:8px;height:8px;border-radius:50%;background:#8fd49a; display:inline-block} .chat-body{padding:20px} .chat-bub{background:var(--green-soft); border-radius:14px 14px 14px 4px; padding:13px 15px; font-size:.94rem; color:var(--ink); max-width:90%} .chat-soon{margin-top:14px; font-size:.8rem; color:var(--ink-soft); text-align:center} .chat-foot{display:flex; gap:8px; padding:14px 16px; border-top:1px solid var(--line)} .chat-foot input{flex:1; border:1.5px solid var(--line); border-radius:999px; padding:.6em .9em; font:inherit; background:var(--surface-2)} .chat-foot button{width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;border:none; display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex:none} .chat-close{margin-left:auto; background:transparent; border:none; color:var(--on-dark-soft); font-size:1.3rem} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1000px){ .hero-grid{grid-template-columns:1fr; gap:40px} .hero-media{max-width:480px} .hero-card{left:8px} .cards,.reviews{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr} .split,.band-grid,.story-grid,.contact-grid{grid-template-columns:1fr; gap:40px} .why-media,.story-media{max-width:520px} .why-badge{right:8px} .stats{grid-template-columns:1fr 1fr} .footer-top{grid-template-columns:1fr 1fr; gap:30px} .f-brand{grid-column:1 / -1} .nav-links{display:none} .menu-btn{display:flex} .nav-tel span{display:none} } @media (max-width:560px){ .cards,.reviews,.hard-list,.field-row{grid-template-columns:1fr} .footer-top{grid-template-columns:1fr} .hero-card{display:none} .nav-cta{display:none} } /* mobile menu drawer */ .m-drawer{display:none; flex-direction:column; gap:4px; padding:10px var(--pad) 18px; background:var(--paper); border-bottom:1px solid var(--line)} .m-drawer.open{display:flex} .m-drawer a{padding:12px 14px; border-radius:10px; font-weight:700; color:var(--ink-2)} .m-drawer a:hover{background:var(--surface)} .m-drawer .btn{margin-top:8px} @media (min-width:1001px){ .m-drawer{display:none !important} }