/*
Theme Name: Harshal Bhoje Marketing
Theme URI: https://harshalbhoje.in/
Author: Harshal Bhoje
Description: Dark and mustard-yellow one-page theme for digital marketing services. Drag-and-drop header and footer menus, service page support, fully responsive.
Version: 1.0
Text Domain: hbmarketing
*/
:root{--ink:#14130f;--panel:#1d1b15;--line:#383429;--text:#f4f0e4;--mute:#b9b29f;--y:#c99a0a;--y2:#e0b324;--on-y:#14130f;color-scheme:dark}
html{scroll-behavior:smooth;scroll-padding-top:80px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--text);font:400 17px/1.65 'Figtree',system-ui,sans-serif;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom,0)}
h1,h2,h3,h4{font-family:'Bricolage Grotesque','Figtree',system-ui,sans-serif;line-height:1.1;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,7vw,5.2rem);font-weight:800}
h2{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:800;max-width:22ch}
h3{font-size:1.28rem;font-weight:700}
p{margin:0 0 1em;max-width:64ch}
a{color:inherit}img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--y2);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:var(--y);color:var(--on-y);padding:8px 14px;z-index:99}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
section{padding:clamp(60px,9vw,96px) 0}
.lead{color:var(--mute);font-size:1.12rem;max-width:58ch}
.btn{display:inline-block;background:var(--y);color:var(--on-y);font-weight:600;padding:14px 26px;border-radius:999px;text-decoration:none;border:2px solid var(--y);cursor:pointer;font:600 1rem 'Figtree',sans-serif;transition:background .2s,transform .2s}
.btn:hover{background:var(--y2);border-color:var(--y2);transform:translateY(-2px);color:var(--on-y)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--y);color:var(--y2);background:transparent}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(20,19,15,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0)}
.bar-row{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:16px}
.logo{font:800 1.25rem 'Bricolage Grotesque',sans-serif;text-decoration:none;display:flex;align-items:center}
.logo i{width:12px;height:12px;background:var(--y);border-radius:50%;margin-right:9px}
.logo img{max-height:46px;width:auto}
.primary-nav{display:flex;align-items:center;gap:26px}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px;align-items:center}
.primary-nav li{position:relative}
.primary-nav li>a{display:block;padding:10px 12px;color:var(--mute);text-decoration:none;font-size:.97rem}
.primary-nav li>a:hover,.primary-nav .current-menu-item>a{color:var(--y2)}
.primary-nav .menu-item-has-children>a::after{content:"▾";margin-left:6px;font-size:.75em}
.primary-nav .sub-menu{display:none;position:absolute;left:0;top:100%;min-width:250px;flex-direction:column;align-items:stretch;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.primary-nav li:hover>.sub-menu,.primary-nav li:focus-within>.sub-menu{display:flex}
.primary-nav .sub-menu a{border-radius:9px}
.primary-nav .sub-menu a:hover{background:rgba(201,154,10,.14)}
.menu-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);padding:9px 16px;border-radius:999px;font:600 .95rem 'Figtree',sans-serif;cursor:pointer}
@media(max-width:960px){
.menu-toggle{display:block}
.primary-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:12px 20px 24px;max-height:80vh;overflow:auto}
.primary-nav.open{display:flex}
.primary-nav ul{flex-direction:column;align-items:stretch}
.primary-nav .sub-menu{display:flex;position:static;border:0;box-shadow:none;background:none;padding:0 0 6px 16px}
.primary-nav .btn{text-align:center}}
/* hero */
.hero{position:relative;overflow:hidden;padding-top:clamp(50px,8vw,88px)}
.hero::before{content:"";position:absolute;right:-160px;top:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(201,154,10,.22),transparent 68%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:52px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr}}
.hero h1{margin-bottom:24px}.hero .lead{margin-bottom:32px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.trust{margin-top:34px;display:flex;gap:8px 24px;flex-wrap:wrap;color:var(--mute);font-size:.95rem}
.trust span::before{content:"✓";color:var(--y2);margin-right:8px;font-weight:700}
.funnel{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:24px;position:relative}
.funnel h3{font-size:1rem;color:var(--mute);font-weight:500;margin-bottom:16px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 auto 10px;padding:13px 16px;border-radius:12px;font:700 1rem 'Bricolage Grotesque',sans-serif;color:var(--on-y);background:var(--y)}
.bar small{font:500 .8rem 'Figtree',sans-serif;opacity:.8}
.bar:nth-of-type(1){width:100%}.bar:nth-of-type(2){width:88%;background:#b98d09}.bar:nth-of-type(3){width:76%;background:#a87f08}.bar:nth-of-type(4){width:64%;background:#977207}.bar:nth-of-type(5){width:52%;background:#f4f0e4}
.funnel p{font-size:.92rem;color:var(--mute);margin:14px 0 0}
.marquee{border-block:1px solid var(--line);background:var(--panel);overflow:hidden;padding:16px 0}
.marquee div{display:flex;gap:44px;width:max-content;animation:slide 40s linear infinite;color:var(--mute);font:700 1.1rem 'Bricolage Grotesque',sans-serif}
.marquee b{color:var(--y)}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee div{animation:none}html{scroll-behavior:auto}.btn{transition:none}}
.head{margin-bottom:46px}.head h2{margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column}
.card:hover{border-color:var(--y)}
.card p,.card li{color:var(--mute);font-size:1rem}
.card ul,.cols ul{margin:6px 0 16px;padding:0;list-style:none}
.card li,.cols li{padding:6px 0 6px 24px;position:relative;border-top:1px solid var(--line);font-size:.97rem}
.card li::before,.cols li::before{content:"";position:absolute;left:2px;top:15px;width:9px;height:9px;background:var(--y);border-radius:2px}
.ico{width:46px;height:46px;border-radius:12px;background:rgba(201,154,10,.16);display:grid;place-items:center;font-size:1.4rem;margin-bottom:16px}
.more{margin-top:auto;font-weight:600;color:var(--y2);text-decoration:none}.more:hover{text-decoration:underline}
.card.hot{background:var(--y);border-color:var(--y);color:var(--on-y)}
.card.hot p,.card.hot li{color:#2a2208;border-color:rgba(20,19,15,.25)}.card.hot li::before{background:#14130f}.card.hot .ico{background:rgba(20,19,15,.14)}.card.hot .more{color:#14130f}
.alt{background:var(--panel);border-block:1px solid var(--line)}.alt .card{background:var(--ink)}
/* deep dives */
.dive{border:1px solid var(--line);border-radius:22px;padding:clamp(24px,4vw,40px);margin-bottom:22px;background:var(--panel)}
.dive>p{color:var(--mute);font-size:1.05rem}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:22px}
@media(max-width:860px){.cols{grid-template-columns:1fr;gap:6px}}
.cols h4{font-size:1rem;color:var(--y2);margin-bottom:6px}
.cols p{color:var(--mute);font-size:.97rem}
.about{display:grid;grid-template-columns:1fr 1.2fr;gap:52px;align-items:start}
@media(max-width:900px){.about{grid-template-columns:1fr}}
.pillars{display:grid;gap:16px}
.pillar{border-left:4px solid var(--y);padding:2px 0 2px 20px}.pillar h3{font-size:1.12rem;margin-bottom:4px}.pillar p{margin:0;color:var(--mute)}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:22px}
.step{counter-increment:s;border-top:3px solid var(--y);padding-top:20px}
.step::before{content:counter(s);font:800 3rem 'Bricolage Grotesque',sans-serif;color:var(--y2);display:block;line-height:1;margin-bottom:10px}
.step p{color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chips span{border:1px solid var(--line);border-radius:999px;padding:8px 18px;color:var(--mute);font-size:.95rem;background:var(--ink)}
details{border-bottom:1px solid var(--line);padding:20px 0;max-width:820px}
summary{cursor:pointer;font:700 1.15rem 'Bricolage Grotesque',sans-serif;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--y2);font-size:1.6rem;line-height:1;transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--mute);margin:12px 0 0}
.contact{background:var(--y);color:var(--on-y);border-radius:26px;padding:clamp(26px,5vw,60px);display:grid;grid-template-columns:1fr 1fr;gap:44px}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
.contact h2{max-width:14ch}.contact p{color:#2a2208}.contact ul{padding:0;list-style:none;margin:20px 0 0;font-weight:600}.contact li{padding:4px 0}
form{display:grid;gap:14px}label{font-weight:600;font-size:.95rem;display:grid;gap:6px}
input,select,textarea{font:inherit;padding:13px 15px;border-radius:12px;border:2px solid #14130f;background:#f7ecc7;color:#14130f;width:100%}
textarea{min-height:110px;resize:vertical}
.contact .btn{background:#14130f;color:var(--y2);border-color:#14130f;width:100%}.contact .btn:hover{background:#2a261a;color:var(--y2)}
.note{font-size:.85rem;margin:0}
/* page + posts */
.page-hero{padding:clamp(50px,8vw,84px) 0 clamp(30px,5vw,50px);border-bottom:1px solid var(--line);background:radial-gradient(circle at 90% 0,rgba(201,154,10,.18),transparent 55%)}
.entry{padding:clamp(40px,6vw,70px) 0;max-width:820px}
.entry h2,.entry h3{margin-top:1.6em}.entry li{margin:.4em 0}.entry a{color:var(--y2)}
.entry ul{padding-left:1.2em}
.cta-band{background:var(--y);color:var(--on-y);border-radius:24px;padding:clamp(26px,5vw,48px);display:flex;gap:24px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:70px}
.cta-band h2{margin:0;max-width:20ch}.cta-band .btn{background:#14130f;color:var(--y2);border-color:#14130f}
/* footer */
.site-footer{background:var(--panel);border-top:1px solid var(--line);padding:64px 0 0}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
@media(max-width:900px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}
.site-footer h4{font-size:1rem;color:var(--y2);margin-bottom:14px}
.site-footer p,.site-footer li,.site-footer a{color:var(--mute);font-size:.96rem}
.site-footer ul{list-style:none;margin:0;padding:0}.site-footer li{padding:5px 0}
.site-footer a{text-decoration:none}.site-footer a:hover{color:var(--y2)}
.f-bottom{margin-top:48px;padding:22px 0 calc(22px + env(safe-area-inset-bottom,0));border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.9rem;color:var(--mute)}
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0));z-index:40;background:var(--y);color:var(--on-y);font-weight:700;padding:12px 20px;border-radius:999px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.55)}