Portfolio \u2014 Hasan Abrar<\/title>\r\n<meta name=\"description\" content=\"Selected work from Hasan Abrar \u2014 Facebook Ads management, e-commerce landing pages, an automated ad-monitoring system, and website builds.\">\r\n<link rel=\"icon\" href=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%230B3B2E'\/%3E%3Ccircle cx='16' cy='16' r='6' fill='%232FE1AE'\/%3E%3C\/svg%3E\">\r\n<style>\r\n\/* =========================================================\r\n Hasan Abrar \u2014 Personal Portfolio\r\n Design tokens: deep forest green + mint + brass\r\n Type: Space Grotesk (display) \/ IBM Plex Sans (body)\r\n ========================================================= *\/\r\n\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=Hind+Siliguri:wght@500;600&display=swap');\r\n\r\n:root{\r\n --forest: #0B3B2E;\r\n --forest-deep: #06251C;\r\n --forest-line: #163F32;\r\n --mint: #2FE1AE;\r\n --mint-dim: #1FAE87;\r\n --brass: #C9A227;\r\n --brass-deep: #9C7C1C;\r\n --paper: #F5F7F1;\r\n --paper-alt: #EAEDE4;\r\n --ink: #121810;\r\n --ink-soft: #4B564C;\r\n --line: rgba(18,24,16,0.13);\r\n --line-invert: rgba(245,247,241,0.16);\r\n\r\n --font-display: 'Space Grotesk', 'Hind Siliguri', sans-serif;\r\n --font-body: 'IBM Plex Sans', 'Hind Siliguri', sans-serif;\r\n\r\n --max: 1160px;\r\n --radius: 6px;\r\n}\r\n\r\n*,*::before,*::after{ box-sizing:border-box; }\r\nhtml{ scroll-behavior:smooth; }\r\nbody{\r\n margin:0;\r\n background:var(--paper);\r\n color:var(--ink);\r\n font-family:var(--font-body);\r\n font-size:16px;\r\n line-height:1.6;\r\n -webkit-font-smoothing:antialiased;\r\n}\r\nimg{ max-width:100%; display:block; }\r\na{ color:inherit; text-decoration:none; }\r\nul{ margin:0; padding:0; list-style:none; }\r\nh1,h2,h3,h4{\r\n font-family:var(--font-display);\r\n font-weight:600;\r\n line-height:1.15;\r\n margin:0 0 .5em;\r\n letter-spacing:-0.01em;\r\n}\r\np{ margin:0 0 1em; color:var(--ink-soft); max-width:62ch; }\r\n.container{\r\n max-width:var(--max);\r\n margin:0 auto;\r\n padding:0 28px;\r\n}\r\nsection{ padding:96px 0; }\r\n@media (max-width:760px){ section{ padding:64px 0; } }\r\n\r\n:focus-visible{\r\n outline:2px solid var(--mint-dim);\r\n outline-offset:3px;\r\n}\r\n@media (prefers-reduced-motion: reduce){\r\n *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }\r\n}\r\n\r\n\/* ---------- node tick: small recurring signature mark ---------- *\/\r\n.tick{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n font-family:var(--font-body);\r\n font-weight:600;\r\n font-size:0.8rem;\r\n color:var(--mint-dim);\r\n margin-bottom:14px;\r\n}\r\n.tick::before{\r\n content:\"\";\r\n width:18px; height:2px;\r\n background:var(--brass);\r\n display:inline-block;\r\n}\r\n.tick.on-dark{ color:var(--mint); }\r\n\r\n\/* ---------- buttons ---------- *\/\r\n.btn{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n padding:13px 26px;\r\n border-radius:var(--radius);\r\n font-family:var(--font-body);\r\n font-weight:600;\r\n font-size:0.96rem;\r\n border:1px solid transparent;\r\n cursor:pointer;\r\n transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;\r\n}\r\n.btn:hover{ transform:translateY(-1px); }\r\n.btn-primary{ background:var(--mint); color:var(--forest-deep); }\r\n.btn-primary:hover{ background:#4CF0C2; }\r\n.btn-outline{ background:transparent; border-color:var(--line); color:var(--ink); }\r\n.btn-outline:hover{ border-color:var(--ink); }\r\n.btn-outline.on-dark{ border-color:var(--line-invert); color:var(--paper); }\r\n.btn-outline.on-dark:hover{ border-color:var(--paper); }\r\n.btn-brass{ background:var(--brass); color:var(--forest-deep); }\r\n.btn-brass:hover{ background:#DDB53A; }\r\n\r\n\/* ---------- nav ---------- *\/\r\n.site-header{\r\n position:sticky; top:0; z-index:50;\r\n background:rgba(245,247,241,0.92);\r\n backdrop-filter:blur(8px);\r\n border-bottom:1px solid var(--line);\r\n}\r\n.nav-row{\r\n display:flex; align-items:center; justify-content:space-between;\r\n padding:18px 28px;\r\n max-width:var(--max); margin:0 auto;\r\n}\r\n.logo{\r\n font-family:var(--font-display);\r\n font-weight:700;\r\n font-size:1.15rem;\r\n color:var(--forest-deep);\r\n display:flex; align-items:center; gap:9px;\r\n}\r\n.logo .dot{ width:9px; height:9px; border-radius:50%; background:var(--mint-dim); display:inline-block; }\r\n.nav-links{\r\n display:flex; gap:34px;\r\n font-weight:500; font-size:0.95rem;\r\n}\r\n.nav-links a{\r\n position:relative;\r\n padding:4px 0;\r\n color:var(--ink-soft);\r\n}\r\n.nav-links a:hover{ color:var(--ink); }\r\n.nav-links a.active{ color:var(--ink); }\r\n.nav-links a.active::after{\r\n content:\"\";\r\n position:absolute; left:0; right:0; bottom:-6px;\r\n height:2px; background:var(--brass);\r\n}\r\n.nav-cta{ display:flex; align-items:center; gap:18px; }\r\n.nav-toggle{\r\n display:none;\r\n width:34px; height:34px;\r\n border:1px solid var(--line);\r\n border-radius:var(--radius);\r\n background:none;\r\n align-items:center; justify-content:center;\r\n cursor:pointer;\r\n}\r\n.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{\r\n content:\"\"; display:block; width:16px; height:2px; background:var(--ink);\r\n position:relative; transition:transform .2s ease, opacity .2s ease;\r\n}\r\n.nav-toggle span::before{ position:absolute; top:-5px; }\r\n.nav-toggle span::after{ position:absolute; top:5px; }\r\n.nav-toggle.open span{ background:transparent; }\r\n.nav-toggle.open span::before{ transform:translateY(5px) rotate(45deg); }\r\n.nav-toggle.open span::after{ transform:translateY(-5px) rotate(-45deg); }\r\n\r\n\/* tablet: tighten spacing before collapsing to the mobile menu *\/\r\n@media (max-width:1160px) and (min-width:1025px){\r\n .nav-links{ gap:20px; font-size:0.88rem; }\r\n .nav-row{ padding:16px 20px; }\r\n .btn{ padding:11px 18px; font-size:0.88rem; }\r\n}\r\n\r\n@media (max-width:1024px){\r\n .nav-links{\r\n position:fixed; inset:66px 0 auto 0;\r\n background:var(--paper);\r\n flex-direction:column; gap:0;\r\n max-height:0; overflow:hidden;\r\n border-bottom:1px solid var(--line);\r\n transition:max-height .25s ease;\r\n }\r\n .nav-links.open{ max-height:420px; }\r\n .nav-links a{ padding:16px 28px; border-top:1px solid var(--line); width:100%; }\r\n .nav-links a.active::after{ display:none; }\r\n .nav-cta .btn-outline{ display:none; }\r\n .nav-toggle{ display:flex; }\r\n}\r\n\r\n\/* ---------- hero ---------- *\/\r\n.hero{\r\n background:var(--forest-deep);\r\n color:var(--paper);\r\n overflow:hidden;\r\n position:relative;\r\n}\r\n.hero-bg{\r\n position:absolute; inset:0; z-index:0;\r\n overflow:hidden; pointer-events:none;\r\n}\r\n.hero-bg .blob{\r\n position:absolute;\r\n border-radius:50%;\r\n filter:blur(70px);\r\n opacity:0.32;\r\n}\r\n.hero-bg .blob-mint{\r\n width:420px; height:420px;\r\n background:var(--mint);\r\n top:-140px; left:-100px;\r\n animation:blobFloat1 22s ease-in-out infinite alternate;\r\n}\r\n.hero-bg .blob-brass{\r\n width:380px; height:380px;\r\n background:var(--brass);\r\n bottom:-160px; right:-90px;\r\n animation:blobFloat2 26s ease-in-out infinite alternate;\r\n}\r\n@keyframes blobFloat1{\r\n 0%{ transform:translate(0,0) scale(1); }\r\n 100%{ transform:translate(70px,50px) scale(1.15); }\r\n}\r\n@keyframes blobFloat2{\r\n 0%{ transform:translate(0,0) scale(1); }\r\n 100%{ transform:translate(-60px,-40px) scale(1.1); }\r\n}\r\n.hero .container{\r\n position:relative; z-index:1;\r\n display:grid; grid-template-columns:1.05fr 0.95fr;\r\n gap:56px; align-items:center;\r\n padding-top:84px; padding-bottom:84px;\r\n}\r\n@media (max-width:900px){\r\n .hero .container{ grid-template-columns:1fr; padding-top:56px; padding-bottom:56px; }\r\n}\r\n.hero h1{\r\n color:var(--paper);\r\n font-size:clamp(2.25rem, 4.2vw, 3.4rem);\r\n max-width:14ch;\r\n}\r\n.hero .lede{\r\n color:#C9D3C7; font-size:1.08rem; max-width:46ch;\r\n}\r\n.hero .bangla{\r\n font-family:'Hind Siliguri', var(--font-body);\r\n color:var(--brass);\r\n font-size:1.02rem;\r\n margin-top:-6px;\r\n}\r\n.hero-actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }\r\n.trust-strip{\r\n margin-top:44px;\r\n padding-top:22px;\r\n border-top:1px solid var(--line-invert);\r\n font-size:0.85rem;\r\n color:#9FB0A5;\r\n}\r\n.trust-strip strong{ color:var(--paper); font-weight:600; }\r\n\r\n\/* flow graphic *\/\r\n.flow-wrap{ position:relative; }\r\n.flow-wrap svg{ width:100%; height:auto; }\r\n.flow-dash{ stroke-dasharray:6 8; animation:dashmove 6s linear infinite; }\r\n@keyframes dashmove{ to{ stroke-dashoffset:-140; } }\r\n.flow-pulse{ animation:pulse 2.8s ease-in-out infinite; transform-origin:center; }\r\n@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }\r\n\r\n\/* ---------- section headers ---------- *\/\r\n.section-head{ max-width:640px; margin-bottom:52px; }\r\n.section-head h2{ font-size:clamp(1.6rem,2.6vw,2.1rem); }\r\n.section-head.on-dark p{ color:#B9C6BC; }\r\n.section-head.on-dark h2{ color:var(--paper); }\r\n.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }\r\n.section-head.center .tick{ justify-content:center; }\r\n\r\n\/* ---------- alt background sections ---------- *\/\r\n.bg-alt{ background:var(--paper-alt); }\r\n.bg-forest{ background:var(--forest-deep); color:var(--paper); }\r\n.bg-forest p{ color:#B9C6BC; }\r\n\r\n\/* ---------- grids & cards ---------- *\/\r\n.grid{ display:grid; gap:26px; }\r\n.grid-3{ grid-template-columns:repeat(3,1fr); }\r\n.grid-2{ grid-template-columns:repeat(2,1fr); }\r\n.grid-4{ grid-template-columns:repeat(4,1fr); }\r\n@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }\r\n@media (max-width:620px){\r\n .grid-2{ grid-template-columns:1fr; }\r\n}\r\n@media (max-width:480px){\r\n .grid{ gap:14px; }\r\n .card{ padding:20px 16px; }\r\n .card h3{ font-size:0.98rem; }\r\n .card p{ font-size:0.86rem; }\r\n}\r\n\r\n.card{\r\n background:#fff;\r\n border:1px solid var(--line);\r\n border-radius:var(--radius);\r\n padding:30px 26px;\r\n border-left:3px solid var(--mint-dim);\r\n transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;\r\n}\r\n.card.brass{ border-left-color:var(--brass); }\r\n.card h3{ font-size:1.08rem; margin-bottom:10px; transition:color .2s ease; }\r\n.card svg.svc-icon{ width:34px; height:34px; margin-bottom:14px; color:var(--mint-dim); display:block; }\r\n.card.brass svg.svc-icon{ color:var(--brass-deep); }\r\n.card p{ font-size:0.95rem; margin-bottom:0; }\r\n.card .tag-row{ margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; }\r\n\r\n\/* clickable service cards: hover lift + color, active press *\/\r\na.card, a.card:link, a.card:visited, a.card:hover, a.card:active,\r\na.card *, a.card:hover *{\r\n text-decoration:none !important;\r\n}\r\na.card{ color:inherit; cursor:pointer; }\r\na.card:hover{\r\n transform:translateY(-5px);\r\n box-shadow:0 14px 28px rgba(6,37,28,0.14);\r\n border-color:var(--mint-dim);\r\n background:#FBFEFC;\r\n}\r\na.card.brass:hover{\r\n border-color:var(--brass);\r\n box-shadow:0 14px 28px rgba(156,124,28,0.16);\r\n}\r\na.card:hover h3{ color:var(--mint-dim); }\r\na.card.brass:hover h3{ color:var(--brass-deep); }\r\na.card:active{\r\n transform:translateY(-1px) scale(0.98);\r\n box-shadow:0 6px 14px rgba(6,37,28,0.12);\r\n}\r\n\r\n\/* scroll-triggered reveal for service cards \u2014 visible by default (no-JS safe);\r\n JS adds .js-armed right before observing, so content never gets stuck hidden\r\n if the <script> tag is stripped (common when pasting into WordPress\/CMS). *\/\r\n.reveal-on-scroll.js-armed{\r\n opacity:0;\r\n transform:translateY(26px);\r\n transition:opacity .55s ease, transform .55s ease;\r\n}\r\n.reveal-on-scroll.in-view{ opacity:1; transform:none; }\r\n.grid .reveal-on-scroll:nth-child(1){ transition-delay:0ms; }\r\n.grid .reveal-on-scroll:nth-child(2){ transition-delay:70ms; }\r\n.grid .reveal-on-scroll:nth-child(3){ transition-delay:140ms; }\r\n.grid .reveal-on-scroll:nth-child(4){ transition-delay:210ms; }\r\n.grid .reveal-on-scroll:nth-child(5){ transition-delay:280ms; }\r\n.grid .reveal-on-scroll:nth-child(6){ transition-delay:350ms; }\r\n.grid .reveal-on-scroll:nth-child(7){ transition-delay:420ms; }\r\n.grid .reveal-on-scroll:nth-child(8){ transition-delay:490ms; }\r\n\r\n.tag{\r\n font-size:0.74rem; font-weight:600;\r\n padding:4px 10px; border-radius:100px;\r\n background:var(--paper-alt); color:var(--ink-soft);\r\n}\r\n\r\n\/* stat strip *\/\r\n.stats{ display:flex; gap:0; border-top:1px solid var(--line-invert); }\r\n.stat{ flex:1; padding:26px 0 0; }\r\n.stat .num{ font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--mint); }\r\n.stat .label{ font-size:0.85rem; color:#9FB0A5; margin-top:4px; }\r\n\r\n\/* process steps *\/\r\n.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; counter-reset:step; }\r\n@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }\r\n@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }\r\n.step{ position:relative; padding-top:44px; border-top:2px solid var(--line); }\r\n.step::before{\r\n counter-increment:step;\r\n content:counter(step, decimal-leading-zero);\r\n position:absolute; top:-14px; left:0;\r\n font-family:var(--font-display); font-weight:700;\r\n font-size:0.85rem; color:var(--forest-deep);\r\n background:var(--paper); padding-right:10px;\r\n}\r\n.step h4{ font-size:1.02rem; }\r\n.step p{ font-size:0.92rem; }\r\n\r\n\/* placeholder callout (used for portfolio\/testimonial slots needing real data) *\/\r\n.placeholder-note{\r\n border:1px dashed var(--brass-deep);\r\n background:#FBF6E6;\r\n color:var(--brass-deep);\r\n font-size:0.82rem;\r\n font-weight:500;\r\n padding:10px 14px;\r\n border-radius:var(--radius);\r\n margin-top:16px;\r\n}\r\n\r\n.quote-card{\r\n border:1px dashed var(--line);\r\n border-radius:var(--radius);\r\n padding:28px 26px;\r\n background:var(--paper-alt);\r\n}\r\n.quote-card p{ font-style:italic; font-size:1rem; margin-bottom:14px; }\r\n.quote-card .who{ font-style:normal; font-size:0.85rem; font-weight:600; color:var(--ink-soft); }\r\n\r\n\/* skill groups: Skills & Tools section *\/\r\n.skill-group{\r\n background:#fff;\r\n border:1px solid var(--line);\r\n border-radius:var(--radius);\r\n padding:24px 22px;\r\n}\r\n.skill-group h4{\r\n font-family:var(--font-display);\r\n font-size:0.98rem;\r\n margin-bottom:14px;\r\n color:var(--forest-deep);\r\n}\r\n.skill-group .pill-list{ gap:8px; }\r\n.skill-group .pill{ font-size:0.78rem; padding:6px 12px; }\r\n\r\n\/* pull-quote inside About *\/\r\n.pull-quote{\r\n border-left:3px solid var(--brass);\r\n padding-left:20px;\r\n font-family:var(--font-display);\r\n font-weight:500;\r\n font-size:1.12rem;\r\n color:var(--ink);\r\n margin:24px 0;\r\n max-width:52ch;\r\n}\r\n\r\n\/* capability panels: What I Do *\/\r\n.capability-panel{\r\n background:#fff;\r\n border:1px solid var(--line);\r\n border-top:3px solid var(--mint-dim);\r\n border-radius:var(--radius);\r\n padding:34px 30px;\r\n}\r\n.capability-panel.brass{ border-top-color:var(--brass); }\r\n.capability-panel h3{ font-size:1.15rem; margin-bottom:8px; }\r\n.capability-panel > p{ font-size:0.92rem; margin-bottom:22px; }\r\n.pill-list{ display:flex; flex-wrap:wrap; gap:10px; }\r\n.pill{\r\n font-size:0.82rem; font-weight:500;\r\n padding:7px 14px; border-radius:100px;\r\n background:var(--paper-alt); color:var(--ink-soft);\r\n border:1px solid var(--line);\r\n}\r\n\r\n\/* statement band *\/\r\n.statement-band{ padding:70px 0; text-align:center; }\r\n.statement-band .container{ max-width:720px; }\r\n.statement-band h2{ font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.4; margin-top:14px; }\r\n\r\n\/* approach timeline (on dark bg) *\/\r\n.timeline{ position:relative; padding-left:50px; max-width:620px; margin-top:44px; }\r\n.timeline::before{\r\n content:\"\"; position:absolute; left:16px; top:4px; bottom:4px;\r\n width:2px; background:var(--line-invert);\r\n}\r\n.timeline-item{ position:relative; padding-bottom:38px; }\r\n.timeline-item:last-child{ padding-bottom:0; }\r\n.timeline-marker{\r\n position:absolute; left:-50px; top:0;\r\n width:34px; height:34px; border-radius:50%;\r\n background:var(--forest);\r\n border:2px solid var(--mint);\r\n color:var(--mint);\r\n display:flex; align-items:center; justify-content:center;\r\n font-family:var(--font-display); font-weight:700; font-size:0.82rem;\r\n}\r\n.timeline-item.brass .timeline-marker{ border-color:var(--brass); color:var(--brass); }\r\n.timeline-item h4{ color:var(--paper); font-size:1.06rem; margin-bottom:6px; }\r\n.timeline-item p{ color:#B9C6BC; margin-bottom:0; font-size:0.94rem; max-width:50ch; }\r\n\r\n\/* approach section: two-col layout with rotating visual *\/\r\n.approach-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; }\r\n@media (max-width:900px){ .approach-grid{ grid-template-columns:1fr; } }\r\n\r\n.approach-visual{\r\n position:relative;\r\n background:var(--forest);\r\n border:1px solid var(--forest-line);\r\n border-radius:10px;\r\n min-height:340px;\r\n overflow:hidden;\r\n}\r\n.approach-slide{\r\n position:absolute; inset:0;\r\n display:flex; flex-direction:column; align-items:center; justify-content:center;\r\n text-align:center; padding:40px;\r\n opacity:0;\r\n animation:approachCycle 18s infinite;\r\n}\r\n.approach-slide svg{ width:52px; height:52px; margin-bottom:20px; }\r\n.approach-slide:not(.brass) svg{ color:var(--mint); }\r\n.approach-slide.brass svg{ color:var(--brass); }\r\n.approach-slide .slide-num{\r\n font-family:var(--font-display); font-weight:700; font-size:0.78rem;\r\n letter-spacing:0.02em; margin-bottom:10px; color:var(--mint);\r\n}\r\n.approach-slide.brass .slide-num{ color:var(--brass); }\r\n.approach-slide h5{ color:var(--paper); font-family:var(--font-display); font-size:1.1rem; margin:0 0 8px; }\r\n.approach-slide p{ color:#9FB0A5; font-size:0.88rem; margin:0; max-width:34ch; }\r\n\r\n.approach-slide:nth-child(1){ animation-delay:0s; }\r\n.approach-slide:nth-child(2){ animation-delay:-3s; }\r\n.approach-slide:nth-child(3){ animation-delay:-6s; }\r\n.approach-slide:nth-child(4){ animation-delay:-9s; }\r\n.approach-slide:nth-child(5){ animation-delay:-12s; }\r\n.approach-slide:nth-child(6){ animation-delay:-15s; }\r\n\r\n@keyframes approachCycle{\r\n 0%{ opacity:0; }\r\n 4%{ opacity:1; }\r\n 13%{ opacity:1; }\r\n 17%{ opacity:0; }\r\n 100%{ opacity:0; }\r\n}\r\n\r\n.approach-dots{ position:absolute; bottom:20px; left:0; right:0; display:flex; justify-content:center; gap:8px; }\r\n.approach-dots span{\r\n width:6px; height:6px; border-radius:50%;\r\n background:var(--line-invert);\r\n animation:approachDot 18s infinite;\r\n}\r\n.approach-dots span:nth-child(1){ animation-delay:0s; }\r\n.approach-dots span:nth-child(2){ animation-delay:-3s; }\r\n.approach-dots span:nth-child(3){ animation-delay:-6s; }\r\n.approach-dots span:nth-child(4){ animation-delay:-9s; }\r\n.approach-dots span:nth-child(5){ animation-delay:-12s; }\r\n.approach-dots span:nth-child(6){ animation-delay:-15s; }\r\n@keyframes approachDot{\r\n 0%,100%{ background:var(--line-invert); }\r\n 4%,13%{ background:var(--mint); }\r\n}\r\n\r\n\/* FAQ accordion *\/\r\n.faq-list{ max-width:760px; }\r\n.faq-item{ border-bottom:1px solid var(--line); padding:20px 0; }\r\n.faq-item summary{\r\n cursor:pointer;\r\n list-style:none;\r\n display:flex; justify-content:space-between; align-items:center; gap:20px;\r\n font-family:var(--font-display); font-weight:600; font-size:1.02rem;\r\n color:var(--ink);\r\n}\r\n.faq-item summary::-webkit-details-marker{ display:none; }\r\n.faq-item summary::after{\r\n content:\"+\"; font-size:1.4rem; font-weight:400; color:var(--brass-deep); flex-shrink:0;\r\n}\r\n.faq-item[open] summary::after{ content:\"\u2013\"; }\r\n.faq-item p{ margin-top:14px; margin-bottom:0; font-size:0.95rem; max-width:65ch; }\r\n\r\n\/* pricing tier cards (Basic\/Standard\/Advanced) *\/\r\n.pricing-grid{\r\n display:grid; grid-template-columns:repeat(3,1fr); gap:24px;\r\n}\r\n@media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; } }\r\n.pricing-card{\r\n background:#fff;\r\n border:1px solid var(--line);\r\n border-radius:10px;\r\n padding:32px 26px;\r\n display:flex; flex-direction:column;\r\n position:relative;\r\n}\r\n.pricing-card.featured{\r\n border:2px solid var(--brass);\r\n box-shadow:0 16px 34px rgba(11,59,46,0.10);\r\n}\r\n.pricing-card .featured-badge{\r\n position:absolute; top:-13px; left:50%; transform:translateX(-50%);\r\n background:var(--brass); color:var(--forest-deep);\r\n font-size:0.72rem; font-weight:700; letter-spacing:0.02em;\r\n padding:5px 14px; border-radius:100px; white-space:nowrap;\r\n}\r\n.pricing-card .tier-name{\r\n font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--forest-deep);\r\n}\r\n.pricing-card .price{\r\n font-family:var(--font-display); font-weight:700; font-size:1.9rem; color:var(--ink);\r\n margin:10px 0 2px;\r\n}\r\n.pricing-card .price .period{ font-size:0.85rem; font-weight:500; color:var(--ink-soft); }\r\n.pricing-card .setup-note{ font-size:0.82rem; color:var(--ink-soft); margin-bottom:6px; }\r\n.pricing-card ul{ margin:18px 0 24px; flex-grow:1; }\r\n.pricing-card li{\r\n font-size:0.88rem; color:var(--ink-soft);\r\n padding:5px 0; display:flex; gap:8px; align-items:flex-start;\r\n}\r\n.pricing-card li::before{ content:\"\u2713\"; color:var(--mint-dim); font-weight:700; flex-shrink:0; }\r\n.pricing-card .btn{ margin-top:auto; width:100%; justify-content:center; }\r\n.pricing-subhead{ margin:56px 0 22px; }\r\n.pricing-subhead:first-child{ margin-top:0; }\r\n.pricing-subhead h3{ font-size:1.15rem; margin-bottom:4px; }\r\n.pricing-subhead p{ font-size:0.88rem; margin-bottom:0; }\r\n.pricing-note{\r\n font-size:0.85rem; color:var(--ink-soft);\r\n margin-top:18px; padding:12px 16px;\r\n background:var(--paper-alt); border-radius:var(--radius);\r\n}\r\n.onetime-table{ display:grid; gap:0; border-top:1px solid var(--line); }\r\n.onetime-row{\r\n display:flex; justify-content:space-between; gap:20px;\r\n padding:16px 0; border-bottom:1px solid var(--line);\r\n font-size:0.95rem;\r\n}\r\n.onetime-row .svc{ font-weight:600; }\r\n.onetime-row .price{ color:var(--brass-deep); font-weight:600; white-space:nowrap; }\r\n.terms-list li{ font-size:0.92rem; color:var(--ink-soft); padding:8px 0 8px 22px; position:relative; }\r\n.terms-list li::before{ content:\"\u2014\"; position:absolute; left:0; color:var(--brass); }\r\n\r\n\/* =========================================================\r\n BLOG POST LISTING \u2014 styles the automatic WordPress post\r\n loop to match the site theme. Two blocks below: one for a\r\n native WordPress \"Posts page\" (core class names), one for\r\n the Essential Addons \"Post Grid\" Elementor widget (eael-\r\n prefixed classes). Only one will actually apply depending\r\n on which approach is used \u2014 inspect the real rendered HTML\r\n once posts are live and adjust selectors if they don't match,\r\n since exact markup varies by theme\/plugin version.\r\n ========================================================= *\/\r\n\r\n\/* --- A) native WordPress archive\/loop (core class names) --- *\/\r\n.blog-loop, #main, .site-main{ padding:20px 0; }\r\narticle.post, article.hentry{\r\n background:#fff; border:1px solid var(--line); border-left:3px solid var(--mint-dim);\r\n border-radius:var(--radius); padding:26px 24px; margin-bottom:24px;\r\n}\r\narticle.post .entry-title, article.hentry .entry-title{\r\n font-family:var(--font-display); font-size:1.15rem; margin-bottom:8px;\r\n}\r\narticle.post .entry-title a, article.hentry .entry-title a{ color:var(--ink); text-decoration:none; }\r\narticle.post .entry-title a:hover, article.hentry .entry-title a:hover{ color:var(--mint-dim); }\r\narticle.post .entry-meta, article.hentry .entry-meta{ font-size:0.8rem; color:var(--ink-soft); margin-bottom:10px; }\r\narticle.post .entry-summary, article.post .entry-content,\r\narticle.hentry .entry-summary, article.hentry .entry-content{ font-size:0.95rem; color:var(--ink-soft); }\r\n.nav-links, .page-numbers{ display:flex; gap:10px; margin-top:20px; }\r\n.page-numbers{ padding:8px 14px; border:1px solid var(--line); border-radius:var(--radius); color:var(--ink-soft); text-decoration:none; }\r\n.page-numbers.current{ background:var(--forest-deep); color:var(--paper); border-color:var(--forest-deep); }\r\n\r\n\/* --- B) Essential Addons \"Post Grid\" widget (free, Elementor) --- *\/\r\n.eael-post-grid{ gap:24px; }\r\n.eael-grid-post{\r\n background:#fff; border:1px solid var(--line); border-left:3px solid var(--mint-dim);\r\n border-radius:var(--radius); transition:transform .2s ease, box-shadow .2s ease;\r\n}\r\n.eael-grid-post:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(6,37,28,0.10); }\r\n.eael-grid-post:nth-child(even){ border-left-color:var(--brass); }\r\n.eael-entry-title, .eael-post-elements-title{ font-family:var(--font-display); }\r\n.eael-entry-title a, .eael-post-elements-title a{ color:var(--ink); text-decoration:none; }\r\n.eael-entry-title a:hover, .eael-post-elements-title a:hover{ color:var(--mint-dim); }\r\n.eael-entry-meta, .eael-post-elements-meta-wrapper{ color:var(--ink-soft); font-size:0.8rem; }\r\n.eael-entry-content, .eael-post-elements-excerpt{ color:var(--ink-soft); font-size:0.92rem; }\r\n.eael-post-elements-readmore-button, .eael-grid-post .eael-btn{\r\n display:inline-flex; align-items:center; gap:8px;\r\n background:var(--mint); color:var(--forest-deep) !important;\r\n padding:9px 18px; border-radius:var(--radius); font-weight:600; font-size:0.85rem;\r\n text-decoration:none !important;\r\n}\r\n\r\n\/* ---------- footer ---------- *\/\r\n.site-footer{ background:var(--forest-deep); color:#B9C6BC; padding:64px 0 28px; }\r\n.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }\r\n@media (max-width:700px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }\r\n.site-footer h4{ color:var(--paper); font-size:0.95rem; margin-bottom:16px; }\r\n.site-footer .logo{ color:var(--paper); }\r\n.site-footer p{ color:#9FB0A5; font-size:0.92rem; }\r\n.site-footer a{ color:#B9C6BC; }\r\n.site-footer a:hover{ color:var(--mint); }\r\n.foot-links li{ margin-bottom:10px; font-size:0.92rem; }\r\n.foot-bottom{\r\n margin-top:48px; padding-top:22px; border-top:1px solid var(--line-invert);\r\n display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;\r\n font-size:0.82rem; color:#7E9187;\r\n}\r\n\r\n\/* ---------- page hero (inner pages, smaller) ---------- *\/\r\n.page-hero{ background:var(--forest-deep); color:var(--paper); padding:64px 0 56px; position:relative; overflow:hidden; }\r\n.page-hero .container{ position:relative; z-index:1; }\r\n.page-hero h1{ color:var(--paper); font-size:clamp(2rem,3.6vw,2.7rem); max-width:20ch; }\r\n.page-hero p{ color:#C9D3C7; max-width:56ch; }\r\n\r\n\/* ---------- forms ---------- *\/\r\n.form-grid{ display:grid; gap:18px; }\r\nlabel{ font-size:0.85rem; font-weight:600; display:block; margin-bottom:6px; }\r\n.bg-forest label{ color:var(--paper); }\r\n.bg-forest .form-note{ color:#C9D3C7; }\r\ninput, textarea, select{\r\n width:100%; padding:12px 14px;\r\n border:1px solid var(--line);\r\n border-radius:var(--radius);\r\n font-family:var(--font-body); font-size:0.95rem;\r\n background:#fff; color:var(--ink);\r\n}\r\ntextarea{ resize:vertical; min-height:130px; }\r\ninput:focus, textarea:focus, select:focus{ border-color:var(--mint-dim); }\r\n.form-note{ font-size:0.82rem; color:var(--ink-soft); margin-top:10px; }\r\n\r\n\/* ---------- misc ---------- *\/\r\n.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }\r\n.two-col.v-center{ align-items:center; }\r\n@media (max-width:820px){ .two-col{ grid-template-columns:1fr; } }\r\n.badge-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }\r\n.badge{\r\n font-size:0.82rem; font-weight:600; padding:8px 14px;\r\n border:1px solid var(--line); border-radius:100px; color:var(--ink-soft);\r\n transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;\r\n}\r\n.badge:nth-child(odd):hover{ background:var(--mint); border-color:var(--mint); color:var(--forest-deep); transform:translateY(-2px); }\r\n.badge:nth-child(even):hover{ background:var(--brass); border-color:var(--brass); color:var(--forest-deep); transform:translateY(-2px); }\r\n.badge-row .reveal-on-scroll:nth-child(1){ transition-delay:0ms; }\r\n.badge-row .reveal-on-scroll:nth-child(2){ transition-delay:25ms; }\r\n.badge-row .reveal-on-scroll:nth-child(3){ transition-delay:50ms; }\r\n.badge-row .reveal-on-scroll:nth-child(4){ transition-delay:75ms; }\r\n.badge-row .reveal-on-scroll:nth-child(5){ transition-delay:100ms; }\r\n.badge-row .reveal-on-scroll:nth-child(6){ transition-delay:125ms; }\r\n.badge-row .reveal-on-scroll:nth-child(7){ transition-delay:150ms; }\r\n.badge-row .reveal-on-scroll:nth-child(8){ transition-delay:175ms; }\r\n.badge-row .reveal-on-scroll:nth-child(9){ transition-delay:200ms; }\r\n.badge-row .reveal-on-scroll:nth-child(10){ transition-delay:225ms; }\r\n.badge-row .reveal-on-scroll:nth-child(11){ transition-delay:250ms; }\r\n.badge-row .reveal-on-scroll:nth-child(12){ transition-delay:275ms; }\r\n.badge-row .reveal-on-scroll:nth-child(13){ transition-delay:300ms; }\r\n.badge-row .reveal-on-scroll:nth-child(14){ transition-delay:325ms; }\r\n.badge-row .reveal-on-scroll:nth-child(15){ transition-delay:350ms; }\r\n.badge-row .reveal-on-scroll:nth-child(16){ transition-delay:375ms; }\r\n.badge-row .reveal-on-scroll:nth-child(17){ transition-delay:400ms; }\r\n.badge-row .reveal-on-scroll:nth-child(18){ transition-delay:425ms; }\r\n.badge-row .reveal-on-scroll:nth-child(19){ transition-delay:450ms; }\r\n.badge-row .reveal-on-scroll:nth-child(20){ transition-delay:475ms; }\r\n.badge-row .reveal-on-scroll:nth-child(21){ transition-delay:500ms; }\r\n.badge-row .reveal-on-scroll:nth-child(22){ transition-delay:525ms; }\r\n.badge-row .reveal-on-scroll:nth-child(23){ transition-delay:550ms; }\r\n.badge-row .reveal-on-scroll:nth-child(24){ transition-delay:575ms; }\r\n.badge-row .reveal-on-scroll:nth-child(25){ transition-delay:600ms; }\r\n.about-photo-wrap{ position:relative; }\r\n.about-photo-wrap::before{\r\n content:\"\";\r\n position:absolute;\r\n top:20px; left:20px; right:-20px; bottom:-20px;\r\n background:var(--brass);\r\n border-radius:10px;\r\n z-index:0;\r\n}\r\n.about-photo-wrap img{\r\n position:relative; z-index:1;\r\n border-radius:10px;\r\n width:100%;\r\n display:block;\r\n object-fit:cover;\r\n}\r\n@media (max-width:820px){\r\n .about-photo-wrap::before{ top:14px; left:14px; right:-14px; bottom:-14px; }\r\n}\r\n.divider-tick{ display:flex; align-items:center; gap:10px; margin:6px 0 26px; }\r\n.divider-tick span{ width:22px; height:2px; background:var(--brass); display:block; }\r\n\r\n\/* hero flow-diagram svg *\/\r\n.svg-node-bg{ fill:#0F4436; }\r\n.svg-node-border{ fill:none; stroke:var(--forest-line); stroke-width:1.5; }\r\n.svg-line{ fill:none; stroke:var(--mint-dim); stroke-width:1.5; opacity:.8; }\r\n.svg-line-brass{ fill:none; stroke:var(--brass); stroke-width:1.5; opacity:.7; }\r\n.svg-dot{ fill:var(--mint); }\r\n.svg-dot-brass{ fill:var(--brass); }\r\n.svg-label{ font-family:'IBM Plex Sans',sans-serif; font-size:12px; font-weight:600; fill:#D7E3DA; }\r\n.svg-sublabel{ font-family:'IBM Plex Sans',sans-serif; font-size:10px; fill:#8FA599; }\r\n\r\n\/* reveal-on-load hero animation (single orchestrated moment) *\/\r\n.reveal{ opacity:0; transform:translateY(14px); animation:revealUp .7s ease forwards; }\r\n.reveal.d1{ animation-delay:.05s; }\r\n.reveal.d2{ animation-delay:.15s; }\r\n.reveal.d3{ animation-delay:.25s; }\r\n.reveal.d4{ animation-delay:.35s; }\r\n@keyframes revealUp{ to{ opacity:1; transform:none; } }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n\r\n<section class=\"page-hero\">\r\n <div class=\"hero-bg\" aria-hidden=\"true\">\r\n <span class=\"blob blob-mint\"><\/span>\r\n <span class=\"blob blob-brass\"><\/span>\r\n <\/div>\r\n <div class=\"container\">\r\n <div class=\"tick on-dark\">Portfolio<\/div>\r\n <h1>Selected work, not a highlight reel.<\/h1>\r\n <p>A mix of client marketing work and the internal systems built to support it \u2014 chosen because each one solved a real, specific problem.<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<section>\r\n <div class=\"container\">\r\n <div class=\"section-head\">\r\n <div class=\"tick\">Portfolio<\/div>\r\n <h2>A look at recent work<\/h2>\r\n <p>Four projects, spanning paid ads management, e-commerce launches, internal automation, and web builds.<\/p>\r\n <\/div>\r\n <div class=\"grid grid-2\">\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27d%20like%20something%20like%20your%20work%20for%20One%20Stop%20Galaxy.\" class=\"card reveal-on-scroll\" target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"svc-icon\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 16v8h5l14 8V8L11 16H6z\"\/><path d=\"M25 17a4 4 0 0 1 0 6\"\/><path d=\"M11 24v6a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-4\"\/><\/svg>\r\n <h3>One Stop Galaxy<\/h3>\r\n <div class=\"tag-row\"><span class=\"tag\">Facebook Ads<\/span><span class=\"tag\">Creative & Video<\/span><span class=\"tag\">Landing Pages<\/span><\/div>\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27d%20like%20something%20like%20your%20work%20for%20Zero%20%26amp%3B%20Kinelio.\" class=\"card brass reveal-on-scroll\" target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"svc-icon\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"8\" width=\"30\" height=\"22\" rx=\"3\"\/><path d=\"M12 33h16\"\/><path d=\"M11 16h18M11 22h18\"\/><\/svg>\r\n <h3>Zero & Kinelio \u2014 Product Launch<\/h3>\r\n <div class=\"tag-row\"><span class=\"tag\">Landing Pages<\/span><span class=\"tag\">Campaign Support<\/span><span class=\"tag\">E-commerce<\/span><\/div>\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27m%20interested%20in%20an%20automation%20system%20like%20the%20Agentic%20Ads%20Monitoring%20one.\" class=\"card brass reveal-on-scroll\" target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"svc-icon\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"20\" cy=\"20\" r=\"6\"\/><path d=\"M20 5v5M20 30v5M35 20h-5M10 20H5M30.3 9.7l-3.5 3.5M13.2 26.8l-3.5 3.5M30.3 30.3l-3.5-3.5M13.2 13.2L9.7 9.7\"\/><\/svg>\r\n <h3>Agentic Ads Monitoring System<\/h3>\r\n <div class=\"tag-row\"><span class=\"tag\">Automation<\/span><span class=\"tag\">Internal Tooling<\/span><span class=\"tag\">Reporting<\/span><\/div>\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27d%20like%20a%20website%20build%20like%20the%20growthwithhasan.com%20project.\" class=\"card reveal-on-scroll\" target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"svc-icon\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"8\" width=\"30\" height=\"24\" rx=\"3\"\/><path d=\"M5 15h30\"\/><circle cx=\"10\" cy=\"11.5\" r=\"0.9\" fill=\"currentColor\" stroke=\"none\"\/><circle cx=\"13.5\" cy=\"11.5\" r=\"0.9\" fill=\"currentColor\" stroke=\"none\"\/><path d=\"M11 21h10M11 26h16\"\/><\/svg>\r\n <h3>growthwithhasan.com Website Build<\/h3>\r\n <div class=\"tag-row\"><span class=\"tag\">Web Design<\/span><span class=\"tag\">Elementor \/ WordPress<\/span><span class=\"tag\">Brand Consistency<\/span><\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"bg-alt\">\r\n <div class=\"container\">\r\n <div class=\"section-head\">\r\n <div class=\"tick\">Case study<\/div>\r\n <h2>How each one actually went<\/h2>\r\n <p>These reflect real engagements \u2014 add verified performance numbers, screenshots, and client sign-off before publishing any specific results.<\/p>\r\n <\/div>\r\n <div class=\"grid grid-2\">\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27d%20like%20something%20like%20your%20work%20for%20One%20Stop%20Galaxy.\" class=\"card reveal-on-scroll\" target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"svc-icon\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 16v8h5l14 8V8L11 16H6z\"\/><path d=\"M25 17a4 4 0 0 1 0 6\"\/><path d=\"M11 24v6a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-4\"\/><\/svg>\r\n <h3>One Stop Galaxy<\/h3>\r\n <p><strong>Challenge:<\/strong> Ads, creative, and landing pages were split across different people with no single owner.<\/p>\r\n <p><strong>Solution:<\/strong> Took over Facebook Ads, creative\/video, and landing page fixes end-to-end, under one recurring reporting cycle.<\/p>\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27d%20like%20something%20like%20your%20work%20for%20Zero%20%26amp%3B%20Kinelio.\" class=\"card brass reveal-on-scroll\" target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"svc-icon\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"8\" width=\"30\" height=\"22\" rx=\"3\"\/><path d=\"M12 33h16\"\/><path d=\"M11 16h18M11 22h18\"\/><\/svg>\r\n <h3>Zero & Kinelio \u2014 Product Launch<\/h3>\r\n <p><strong>Challenge:<\/strong> Two brands launching the same seasonal product needed pages that didn't look like copies of each other.<\/p>\r\n <p><strong>Solution:<\/strong> Built dedicated landing pages tailored to each store's own funnel and branding.<\/p>\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27m%20interested%20in%20an%20automation%20system%20like%20the%20Agentic%20Ads%20Monitoring%20one.\" class=\"card brass reveal-on-scroll\" target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"svc-icon\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"20\" cy=\"20\" r=\"6\"\/><path d=\"M20 5v5M20 30v5M35 20h-5M10 20H5M30.3 9.7l-3.5 3.5M13.2 26.8l-3.5 3.5M30.3 30.3l-3.5-3.5M13.2 13.2L9.7 9.7\"\/><\/svg>\r\n <h3>Agentic Ads Monitoring System<\/h3>\r\n <p><strong>Challenge:<\/strong> Ad accounts were checked manually, all day, so problems got caught late.<\/p>\r\n <p><strong>Solution:<\/strong> Built a rule-based system flagging CPA, ROAS, CTR, frequency and pixel issues daily \u2014 down to a fixed 20-minute review.<\/p>\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27d%20like%20a%20website%20build%20like%20the%20growthwithhasan.com%20project.\" class=\"card reveal-on-scroll\" target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"svc-icon\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"8\" width=\"30\" height=\"24\" rx=\"3\"\/><path d=\"M5 15h30\"\/><circle cx=\"10\" cy=\"11.5\" r=\"0.9\" fill=\"currentColor\" stroke=\"none\"\/><circle cx=\"13.5\" cy=\"11.5\" r=\"0.9\" fill=\"currentColor\" stroke=\"none\"\/><path d=\"M11 21h10M11 26h16\"\/><\/svg>\r\n <h3>growthwithhasan.com Website Build<\/h3>\r\n <p><strong>Challenge:<\/strong> An existing site needed new pages that matched its brand exactly, built fast enough to reuse later.<\/p>\r\n <p><strong>Solution:<\/strong> Built standalone About, Services, and Thank You pages matching the site's navy-blue brand, packaged as reusable Elementor Pro JSON templates.<\/p>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section>\r\n <div class=\"container\">\r\n <div class=\"section-head\">\r\n <div class=\"tick\">Testimonials<\/div>\r\n <h2>Client words \u2014 coming soon<\/h2>\r\n <p>Real quotes will replace these placeholders once clients have signed off on being featured.<\/p>\r\n <\/div>\r\n <div class=\"grid grid-2\">\r\n <div class=\"quote-card reveal-on-scroll\">\r\n <p>\"Add a real client quote here once you have permission to publish it.\"<\/p>\r\n <div class=\"who\">\u2014 Client name & role (placeholder)<\/div>\r\n <\/div>\r\n <div class=\"quote-card reveal-on-scroll\">\r\n <p>\"A second testimonial slot \u2014 swap in an actual review from One Stop Galaxy, Zero, or Kinelio.\"<\/p>\r\n <div class=\"who\">\u2014 Client name & role (placeholder)<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"bg-forest\">\r\n <div class=\"container\" style=\"text-align:center;\">\r\n <div class=\"section-head center on-dark\">\r\n <h2>Want something like this for your brand?<\/h2>\r\n <p>Let's talk about what's slowing your growth down.<\/p>\r\n <\/div>\r\n <div class=\"hero-actions\" style=\"justify-content:center;\">\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27d%20like%20to%20start%20a%20project.\" class=\"btn btn-primary\" target=\"_blank\" rel=\"noopener\">Start a project<\/a>\r\n <a href=\"\/services\/\" class=\"btn btn-outline on-dark\">See services<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n\/\/ Mobile nav toggle\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n var toggle = document.querySelector('.nav-toggle');\r\n var links = document.querySelector('.nav-links');\r\n if (toggle && links) {\r\n toggle.addEventListener('click', function () {\r\n toggle.classList.toggle('open');\r\n links.classList.toggle('open');\r\n });\r\n links.querySelectorAll('a').forEach(function (a) {\r\n a.addEventListener('click', function () {\r\n toggle.classList.remove('open');\r\n links.classList.remove('open');\r\n });\r\n });\r\n }\r\n\r\n \/\/ Scroll-triggered reveal for service cards\r\n var revealEls = document.querySelectorAll('.reveal-on-scroll');\r\n if (revealEls.length && 'IntersectionObserver' in window) {\r\n revealEls.forEach(function (el) { el.classList.add('js-armed'); });\r\n var io = new IntersectionObserver(function (entries) {\r\n entries.forEach(function (entry) {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('in-view');\r\n io.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.15 });\r\n revealEls.forEach(function (el) { io.observe(el); });\r\n }\r\n\r\n \/\/ Contact form \u2014 submits to a Google Apps Script Web App, which\r\n \/\/ appends the row to the Google Sheet and sends the auto-reply email.\r\n \/\/ PASTE YOUR DEPLOYED WEB APP URL BELOW before this goes live.\r\n var CONTACT_FORM_ENDPOINT = \"https:\/\/script.google.com\/macros\/s\/AKfycbyghg9Px8EGFi2OYUvy8TrPY6qJykBGrenzUFqVyFJzx-CVdR5KW6fhvQvi4nACCjUG\/exec\";\r\n\r\n var form = document.querySelector('#contact-form');\r\n if (form) {\r\n form.addEventListener('submit', function (e) {\r\n e.preventDefault();\r\n var note = document.querySelector('#form-status');\r\n var submitBtn = form.querySelector('button[type=\"submit\"]');\r\n\r\n if (!CONTACT_FORM_ENDPOINT || CONTACT_FORM_ENDPOINT.indexOf('PASTE_YOUR') === 0) {\r\n if (note) {\r\n note.textContent = 'Form endpoint not set up yet \u2014 see the setup guide to connect Google Sheets.';\r\n }\r\n return;\r\n }\r\n\r\n var formData = new FormData(form);\r\n if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Sending...'; }\r\n if (note) { note.textContent = ''; }\r\n\r\n fetch(CONTACT_FORM_ENDPOINT, {\r\n method: 'POST',\r\n mode: 'no-cors',\r\n body: formData\r\n }).then(function () {\r\n if (note) {\r\n note.textContent = \"Thanks \u2014 your message is in. Check your email for a quick confirmation, and I'll personally follow up within 24\u201348 hours.\";\r\n }\r\n form.reset();\r\n }).catch(function () {\r\n if (note) {\r\n note.textContent = \"Something went wrong sending that \u2014 please message me on WhatsApp instead.\";\r\n }\r\n }).finally(function () {\r\n if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Send message'; }\r\n });\r\n });\r\n }\r\n});\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Portfolio \u2014 Hasan Abrar \/* ========================================================= Hasan Abrar \u2014 Personal Portfolio Design tokens: deep forest green + mint + brass […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hasanabrar.com\/bn\/wp-json\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasanabrar.com\/bn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hasanabrar.com\/bn\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hasanabrar.com\/bn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hasanabrar.com\/bn\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":4,"href":"https:\/\/hasanabrar.com\/bn\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":87,"href":"https:\/\/hasanabrar.com\/bn\/wp-json\/wp\/v2\/pages\/16\/revisions\/87"}],"wp:attachment":[{"href":"https:\/\/hasanabrar.com\/bn\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nPortfolio \u2014 Hasan Abrar<\/title>\r\n<meta name=\"description\" content=\"Selected work from Hasan Abrar \u2014 Facebook Ads management, e-commerce landing pages, an automated ad-monitoring system, and website builds.\">\r\n<link rel=\"icon\" href=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%230B3B2E'\/%3E%3Ccircle cx='16' cy='16' r='6' fill='%232FE1AE'\/%3E%3C\/svg%3E\">\r\n<style>\r\n\/* =========================================================\r\n Hasan Abrar \u2014 Personal Portfolio\r\n Design tokens: deep forest green + mint + brass\r\n Type: Space Grotesk (display) \/ IBM Plex Sans (body)\r\n ========================================================= *\/\r\n\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=Hind+Siliguri:wght@500;600&display=swap');\r\n\r\n:root{\r\n --forest: #0B3B2E;\r\n --forest-deep: #06251C;\r\n --forest-line: #163F32;\r\n --mint: #2FE1AE;\r\n --mint-dim: #1FAE87;\r\n --brass: #C9A227;\r\n --brass-deep: #9C7C1C;\r\n --paper: #F5F7F1;\r\n --paper-alt: #EAEDE4;\r\n --ink: #121810;\r\n --ink-soft: #4B564C;\r\n --line: rgba(18,24,16,0.13);\r\n --line-invert: rgba(245,247,241,0.16);\r\n\r\n --font-display: 'Space Grotesk', 'Hind Siliguri', sans-serif;\r\n --font-body: 'IBM Plex Sans', 'Hind Siliguri', sans-serif;\r\n\r\n --max: 1160px;\r\n --radius: 6px;\r\n}\r\n\r\n*,*::before,*::after{ box-sizing:border-box; }\r\nhtml{ scroll-behavior:smooth; }\r\nbody{\r\n margin:0;\r\n background:var(--paper);\r\n color:var(--ink);\r\n font-family:var(--font-body);\r\n font-size:16px;\r\n line-height:1.6;\r\n -webkit-font-smoothing:antialiased;\r\n}\r\nimg{ max-width:100%; display:block; }\r\na{ color:inherit; text-decoration:none; }\r\nul{ margin:0; padding:0; list-style:none; }\r\nh1,h2,h3,h4{\r\n font-family:var(--font-display);\r\n font-weight:600;\r\n line-height:1.15;\r\n margin:0 0 .5em;\r\n letter-spacing:-0.01em;\r\n}\r\np{ margin:0 0 1em; color:var(--ink-soft); max-width:62ch; }\r\n.container{\r\n max-width:var(--max);\r\n margin:0 auto;\r\n padding:0 28px;\r\n}\r\nsection{ padding:96px 0; }\r\n@media (max-width:760px){ section{ padding:64px 0; } }\r\n\r\n:focus-visible{\r\n outline:2px solid var(--mint-dim);\r\n outline-offset:3px;\r\n}\r\n@media (prefers-reduced-motion: reduce){\r\n *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }\r\n}\r\n\r\n\/* ---------- node tick: small recurring signature mark ---------- *\/\r\n.tick{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n font-family:var(--font-body);\r\n font-weight:600;\r\n font-size:0.8rem;\r\n color:var(--mint-dim);\r\n margin-bottom:14px;\r\n}\r\n.tick::before{\r\n content:\"\";\r\n width:18px; height:2px;\r\n background:var(--brass);\r\n display:inline-block;\r\n}\r\n.tick.on-dark{ color:var(--mint); }\r\n\r\n\/* ---------- buttons ---------- *\/\r\n.btn{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n padding:13px 26px;\r\n border-radius:var(--radius);\r\n font-family:var(--font-body);\r\n font-weight:600;\r\n font-size:0.96rem;\r\n border:1px solid transparent;\r\n cursor:pointer;\r\n transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;\r\n}\r\n.btn:hover{ transform:translateY(-1px); }\r\n.btn-primary{ background:var(--mint); color:var(--forest-deep); }\r\n.btn-primary:hover{ background:#4CF0C2; }\r\n.btn-outline{ background:transparent; border-color:var(--line); color:var(--ink); }\r\n.btn-outline:hover{ border-color:var(--ink); }\r\n.btn-outline.on-dark{ border-color:var(--line-invert); color:var(--paper); }\r\n.btn-outline.on-dark:hover{ border-color:var(--paper); }\r\n.btn-brass{ background:var(--brass); color:var(--forest-deep); }\r\n.btn-brass:hover{ background:#DDB53A; }\r\n\r\n\/* ---------- nav ---------- *\/\r\n.site-header{\r\n position:sticky; top:0; z-index:50;\r\n background:rgba(245,247,241,0.92);\r\n backdrop-filter:blur(8px);\r\n border-bottom:1px solid var(--line);\r\n}\r\n.nav-row{\r\n display:flex; align-items:center; justify-content:space-between;\r\n padding:18px 28px;\r\n max-width:var(--max); margin:0 auto;\r\n}\r\n.logo{\r\n font-family:var(--font-display);\r\n font-weight:700;\r\n font-size:1.15rem;\r\n color:var(--forest-deep);\r\n display:flex; align-items:center; gap:9px;\r\n}\r\n.logo .dot{ width:9px; height:9px; border-radius:50%; background:var(--mint-dim); display:inline-block; }\r\n.nav-links{\r\n display:flex; gap:34px;\r\n font-weight:500; font-size:0.95rem;\r\n}\r\n.nav-links a{\r\n position:relative;\r\n padding:4px 0;\r\n color:var(--ink-soft);\r\n}\r\n.nav-links a:hover{ color:var(--ink); }\r\n.nav-links a.active{ color:var(--ink); }\r\n.nav-links a.active::after{\r\n content:\"\";\r\n position:absolute; left:0; right:0; bottom:-6px;\r\n height:2px; background:var(--brass);\r\n}\r\n.nav-cta{ display:flex; align-items:center; gap:18px; }\r\n.nav-toggle{\r\n display:none;\r\n width:34px; height:34px;\r\n border:1px solid var(--line);\r\n border-radius:var(--radius);\r\n background:none;\r\n align-items:center; justify-content:center;\r\n cursor:pointer;\r\n}\r\n.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{\r\n content:\"\"; display:block; width:16px; height:2px; background:var(--ink);\r\n position:relative; transition:transform .2s ease, opacity .2s ease;\r\n}\r\n.nav-toggle span::before{ position:absolute; top:-5px; }\r\n.nav-toggle span::after{ position:absolute; top:5px; }\r\n.nav-toggle.open span{ background:transparent; }\r\n.nav-toggle.open span::before{ transform:translateY(5px) rotate(45deg); }\r\n.nav-toggle.open span::after{ transform:translateY(-5px) rotate(-45deg); }\r\n\r\n\/* tablet: tighten spacing before collapsing to the mobile menu *\/\r\n@media (max-width:1160px) and (min-width:1025px){\r\n .nav-links{ gap:20px; font-size:0.88rem; }\r\n .nav-row{ padding:16px 20px; }\r\n .btn{ padding:11px 18px; font-size:0.88rem; }\r\n}\r\n\r\n@media (max-width:1024px){\r\n .nav-links{\r\n position:fixed; inset:66px 0 auto 0;\r\n background:var(--paper);\r\n flex-direction:column; gap:0;\r\n max-height:0; overflow:hidden;\r\n border-bottom:1px solid var(--line);\r\n transition:max-height .25s ease;\r\n }\r\n .nav-links.open{ max-height:420px; }\r\n .nav-links a{ padding:16px 28px; border-top:1px solid var(--line); width:100%; }\r\n .nav-links a.active::after{ display:none; }\r\n .nav-cta .btn-outline{ display:none; }\r\n .nav-toggle{ display:flex; }\r\n}\r\n\r\n\/* ---------- hero ---------- *\/\r\n.hero{\r\n background:var(--forest-deep);\r\n color:var(--paper);\r\n overflow:hidden;\r\n position:relative;\r\n}\r\n.hero-bg{\r\n position:absolute; inset:0; z-index:0;\r\n overflow:hidden; pointer-events:none;\r\n}\r\n.hero-bg .blob{\r\n position:absolute;\r\n border-radius:50%;\r\n filter:blur(70px);\r\n opacity:0.32;\r\n}\r\n.hero-bg .blob-mint{\r\n width:420px; height:420px;\r\n background:var(--mint);\r\n top:-140px; left:-100px;\r\n animation:blobFloat1 22s ease-in-out infinite alternate;\r\n}\r\n.hero-bg .blob-brass{\r\n width:380px; height:380px;\r\n background:var(--brass);\r\n bottom:-160px; right:-90px;\r\n animation:blobFloat2 26s ease-in-out infinite alternate;\r\n}\r\n@keyframes blobFloat1{\r\n 0%{ transform:translate(0,0) scale(1); }\r\n 100%{ transform:translate(70px,50px) scale(1.15); }\r\n}\r\n@keyframes blobFloat2{\r\n 0%{ transform:translate(0,0) scale(1); }\r\n 100%{ transform:translate(-60px,-40px) scale(1.1); }\r\n}\r\n.hero .container{\r\n position:relative; z-index:1;\r\n display:grid; grid-template-columns:1.05fr 0.95fr;\r\n gap:56px; align-items:center;\r\n padding-top:84px; padding-bottom:84px;\r\n}\r\n@media (max-width:900px){\r\n .hero .container{ grid-template-columns:1fr; padding-top:56px; padding-bottom:56px; }\r\n}\r\n.hero h1{\r\n color:var(--paper);\r\n font-size:clamp(2.25rem, 4.2vw, 3.4rem);\r\n max-width:14ch;\r\n}\r\n.hero .lede{\r\n color:#C9D3C7; font-size:1.08rem; max-width:46ch;\r\n}\r\n.hero .bangla{\r\n font-family:'Hind Siliguri', var(--font-body);\r\n color:var(--brass);\r\n font-size:1.02rem;\r\n margin-top:-6px;\r\n}\r\n.hero-actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }\r\n.trust-strip{\r\n margin-top:44px;\r\n padding-top:22px;\r\n border-top:1px solid var(--line-invert);\r\n font-size:0.85rem;\r\n color:#9FB0A5;\r\n}\r\n.trust-strip strong{ color:var(--paper); font-weight:600; }\r\n\r\n\/* flow graphic *\/\r\n.flow-wrap{ position:relative; }\r\n.flow-wrap svg{ width:100%; height:auto; }\r\n.flow-dash{ stroke-dasharray:6 8; animation:dashmove 6s linear infinite; }\r\n@keyframes dashmove{ to{ stroke-dashoffset:-140; } }\r\n.flow-pulse{ animation:pulse 2.8s ease-in-out infinite; transform-origin:center; }\r\n@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }\r\n\r\n\/* ---------- section headers ---------- *\/\r\n.section-head{ max-width:640px; margin-bottom:52px; }\r\n.section-head h2{ font-size:clamp(1.6rem,2.6vw,2.1rem); }\r\n.section-head.on-dark p{ color:#B9C6BC; }\r\n.section-head.on-dark h2{ color:var(--paper); }\r\n.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }\r\n.section-head.center .tick{ justify-content:center; }\r\n\r\n\/* ---------- alt background sections ---------- *\/\r\n.bg-alt{ background:var(--paper-alt); }\r\n.bg-forest{ background:var(--forest-deep); color:var(--paper); }\r\n.bg-forest p{ color:#B9C6BC; }\r\n\r\n\/* ---------- grids & cards ---------- *\/\r\n.grid{ display:grid; gap:26px; }\r\n.grid-3{ grid-template-columns:repeat(3,1fr); }\r\n.grid-2{ grid-template-columns:repeat(2,1fr); }\r\n.grid-4{ grid-template-columns:repeat(4,1fr); }\r\n@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }\r\n@media (max-width:620px){\r\n .grid-2{ grid-template-columns:1fr; }\r\n}\r\n@media (max-width:480px){\r\n .grid{ gap:14px; }\r\n .card{ padding:20px 16px; }\r\n .card h3{ font-size:0.98rem; }\r\n .card p{ font-size:0.86rem; }\r\n}\r\n\r\n.card{\r\n background:#fff;\r\n border:1px solid var(--line);\r\n border-radius:var(--radius);\r\n padding:30px 26px;\r\n border-left:3px solid var(--mint-dim);\r\n transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;\r\n}\r\n.card.brass{ border-left-color:var(--brass); }\r\n.card h3{ font-size:1.08rem; margin-bottom:10px; transition:color .2s ease; }\r\n.card svg.svc-icon{ width:34px; height:34px; margin-bottom:14px; color:var(--mint-dim); display:block; }\r\n.card.brass svg.svc-icon{ color:var(--brass-deep); }\r\n.card p{ font-size:0.95rem; margin-bottom:0; }\r\n.card .tag-row{ margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; }\r\n\r\n\/* clickable service cards: hover lift + color, active press *\/\r\na.card, a.card:link, a.card:visited, a.card:hover, a.card:active,\r\na.card *, a.card:hover *{\r\n text-decoration:none !important;\r\n}\r\na.card{ color:inherit; cursor:pointer; }\r\na.card:hover{\r\n transform:translateY(-5px);\r\n box-shadow:0 14px 28px rgba(6,37,28,0.14);\r\n border-color:var(--mint-dim);\r\n background:#FBFEFC;\r\n}\r\na.card.brass:hover{\r\n border-color:var(--brass);\r\n box-shadow:0 14px 28px rgba(156,124,28,0.16);\r\n}\r\na.card:hover h3{ color:var(--mint-dim); }\r\na.card.brass:hover h3{ color:var(--brass-deep); }\r\na.card:active{\r\n transform:translateY(-1px) scale(0.98);\r\n box-shadow:0 6px 14px rgba(6,37,28,0.12);\r\n}\r\n\r\n\/* scroll-triggered reveal for service cards \u2014 visible by default (no-JS safe);\r\n JS adds .js-armed right before observing, so content never gets stuck hidden\r\n if the <script> tag is stripped (common when pasting into WordPress\/CMS). *\/\r\n.reveal-on-scroll.js-armed{\r\n opacity:0;\r\n transform:translateY(26px);\r\n transition:opacity .55s ease, transform .55s ease;\r\n}\r\n.reveal-on-scroll.in-view{ opacity:1; transform:none; }\r\n.grid .reveal-on-scroll:nth-child(1){ transition-delay:0ms; }\r\n.grid .reveal-on-scroll:nth-child(2){ transition-delay:70ms; }\r\n.grid .reveal-on-scroll:nth-child(3){ transition-delay:140ms; }\r\n.grid .reveal-on-scroll:nth-child(4){ transition-delay:210ms; }\r\n.grid .reveal-on-scroll:nth-child(5){ transition-delay:280ms; }\r\n.grid .reveal-on-scroll:nth-child(6){ transition-delay:350ms; }\r\n.grid .reveal-on-scroll:nth-child(7){ transition-delay:420ms; }\r\n.grid .reveal-on-scroll:nth-child(8){ transition-delay:490ms; }\r\n\r\n.tag{\r\n font-size:0.74rem; font-weight:600;\r\n padding:4px 10px; border-radius:100px;\r\n background:var(--paper-alt); color:var(--ink-soft);\r\n}\r\n\r\n\/* stat strip *\/\r\n.stats{ display:flex; gap:0; border-top:1px solid var(--line-invert); }\r\n.stat{ flex:1; padding:26px 0 0; }\r\n.stat .num{ font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--mint); }\r\n.stat .label{ font-size:0.85rem; color:#9FB0A5; margin-top:4px; }\r\n\r\n\/* process steps *\/\r\n.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; counter-reset:step; }\r\n@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }\r\n@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }\r\n.step{ position:relative; padding-top:44px; border-top:2px solid var(--line); }\r\n.step::before{\r\n counter-increment:step;\r\n content:counter(step, decimal-leading-zero);\r\n position:absolute; top:-14px; left:0;\r\n font-family:var(--font-display); font-weight:700;\r\n font-size:0.85rem; color:var(--forest-deep);\r\n background:var(--paper); padding-right:10px;\r\n}\r\n.step h4{ font-size:1.02rem; }\r\n.step p{ font-size:0.92rem; }\r\n\r\n\/* placeholder callout (used for portfolio\/testimonial slots needing real data) *\/\r\n.placeholder-note{\r\n border:1px dashed var(--brass-deep);\r\n background:#FBF6E6;\r\n color:var(--brass-deep);\r\n font-size:0.82rem;\r\n font-weight:500;\r\n padding:10px 14px;\r\n border-radius:var(--radius);\r\n margin-top:16px;\r\n}\r\n\r\n.quote-card{\r\n border:1px dashed var(--line);\r\n border-radius:var(--radius);\r\n padding:28px 26px;\r\n background:var(--paper-alt);\r\n}\r\n.quote-card p{ font-style:italic; font-size:1rem; margin-bottom:14px; }\r\n.quote-card .who{ font-style:normal; font-size:0.85rem; font-weight:600; color:var(--ink-soft); }\r\n\r\n\/* skill groups: Skills & Tools section *\/\r\n.skill-group{\r\n background:#fff;\r\n border:1px solid var(--line);\r\n border-radius:var(--radius);\r\n padding:24px 22px;\r\n}\r\n.skill-group h4{\r\n font-family:var(--font-display);\r\n font-size:0.98rem;\r\n margin-bottom:14px;\r\n color:var(--forest-deep);\r\n}\r\n.skill-group .pill-list{ gap:8px; }\r\n.skill-group .pill{ font-size:0.78rem; padding:6px 12px; }\r\n\r\n\/* pull-quote inside About *\/\r\n.pull-quote{\r\n border-left:3px solid var(--brass);\r\n padding-left:20px;\r\n font-family:var(--font-display);\r\n font-weight:500;\r\n font-size:1.12rem;\r\n color:var(--ink);\r\n margin:24px 0;\r\n max-width:52ch;\r\n}\r\n\r\n\/* capability panels: What I Do *\/\r\n.capability-panel{\r\n background:#fff;\r\n border:1px solid var(--line);\r\n border-top:3px solid var(--mint-dim);\r\n border-radius:var(--radius);\r\n padding:34px 30px;\r\n}\r\n.capability-panel.brass{ border-top-color:var(--brass); }\r\n.capability-panel h3{ font-size:1.15rem; margin-bottom:8px; }\r\n.capability-panel > p{ font-size:0.92rem; margin-bottom:22px; }\r\n.pill-list{ display:flex; flex-wrap:wrap; gap:10px; }\r\n.pill{\r\n font-size:0.82rem; font-weight:500;\r\n padding:7px 14px; border-radius:100px;\r\n background:var(--paper-alt); color:var(--ink-soft);\r\n border:1px solid var(--line);\r\n}\r\n\r\n\/* statement band *\/\r\n.statement-band{ padding:70px 0; text-align:center; }\r\n.statement-band .container{ max-width:720px; }\r\n.statement-band h2{ font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.4; margin-top:14px; }\r\n\r\n\/* approach timeline (on dark bg) *\/\r\n.timeline{ position:relative; padding-left:50px; max-width:620px; margin-top:44px; }\r\n.timeline::before{\r\n content:\"\"; position:absolute; left:16px; top:4px; bottom:4px;\r\n width:2px; background:var(--line-invert);\r\n}\r\n.timeline-item{ position:relative; padding-bottom:38px; }\r\n.timeline-item:last-child{ padding-bottom:0; }\r\n.timeline-marker{\r\n position:absolute; left:-50px; top:0;\r\n width:34px; height:34px; border-radius:50%;\r\n background:var(--forest);\r\n border:2px solid var(--mint);\r\n color:var(--mint);\r\n display:flex; align-items:center; justify-content:center;\r\n font-family:var(--font-display); font-weight:700; font-size:0.82rem;\r\n}\r\n.timeline-item.brass .timeline-marker{ border-color:var(--brass); color:var(--brass); }\r\n.timeline-item h4{ color:var(--paper); font-size:1.06rem; margin-bottom:6px; }\r\n.timeline-item p{ color:#B9C6BC; margin-bottom:0; font-size:0.94rem; max-width:50ch; }\r\n\r\n\/* approach section: two-col layout with rotating visual *\/\r\n.approach-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; }\r\n@media (max-width:900px){ .approach-grid{ grid-template-columns:1fr; } }\r\n\r\n.approach-visual{\r\n position:relative;\r\n background:var(--forest);\r\n border:1px solid var(--forest-line);\r\n border-radius:10px;\r\n min-height:340px;\r\n overflow:hidden;\r\n}\r\n.approach-slide{\r\n position:absolute; inset:0;\r\n display:flex; flex-direction:column; align-items:center; justify-content:center;\r\n text-align:center; padding:40px;\r\n opacity:0;\r\n animation:approachCycle 18s infinite;\r\n}\r\n.approach-slide svg{ width:52px; height:52px; margin-bottom:20px; }\r\n.approach-slide:not(.brass) svg{ color:var(--mint); }\r\n.approach-slide.brass svg{ color:var(--brass); }\r\n.approach-slide .slide-num{\r\n font-family:var(--font-display); font-weight:700; font-size:0.78rem;\r\n letter-spacing:0.02em; margin-bottom:10px; color:var(--mint);\r\n}\r\n.approach-slide.brass .slide-num{ color:var(--brass); }\r\n.approach-slide h5{ color:var(--paper); font-family:var(--font-display); font-size:1.1rem; margin:0 0 8px; }\r\n.approach-slide p{ color:#9FB0A5; font-size:0.88rem; margin:0; max-width:34ch; }\r\n\r\n.approach-slide:nth-child(1){ animation-delay:0s; }\r\n.approach-slide:nth-child(2){ animation-delay:-3s; }\r\n.approach-slide:nth-child(3){ animation-delay:-6s; }\r\n.approach-slide:nth-child(4){ animation-delay:-9s; }\r\n.approach-slide:nth-child(5){ animation-delay:-12s; }\r\n.approach-slide:nth-child(6){ animation-delay:-15s; }\r\n\r\n@keyframes approachCycle{\r\n 0%{ opacity:0; }\r\n 4%{ opacity:1; }\r\n 13%{ opacity:1; }\r\n 17%{ opacity:0; }\r\n 100%{ opacity:0; }\r\n}\r\n\r\n.approach-dots{ position:absolute; bottom:20px; left:0; right:0; display:flex; justify-content:center; gap:8px; }\r\n.approach-dots span{\r\n width:6px; height:6px; border-radius:50%;\r\n background:var(--line-invert);\r\n animation:approachDot 18s infinite;\r\n}\r\n.approach-dots span:nth-child(1){ animation-delay:0s; }\r\n.approach-dots span:nth-child(2){ animation-delay:-3s; }\r\n.approach-dots span:nth-child(3){ animation-delay:-6s; }\r\n.approach-dots span:nth-child(4){ animation-delay:-9s; }\r\n.approach-dots span:nth-child(5){ animation-delay:-12s; }\r\n.approach-dots span:nth-child(6){ animation-delay:-15s; }\r\n@keyframes approachDot{\r\n 0%,100%{ background:var(--line-invert); }\r\n 4%,13%{ background:var(--mint); }\r\n}\r\n\r\n\/* FAQ accordion *\/\r\n.faq-list{ max-width:760px; }\r\n.faq-item{ border-bottom:1px solid var(--line); padding:20px 0; }\r\n.faq-item summary{\r\n cursor:pointer;\r\n list-style:none;\r\n display:flex; justify-content:space-between; align-items:center; gap:20px;\r\n font-family:var(--font-display); font-weight:600; font-size:1.02rem;\r\n color:var(--ink);\r\n}\r\n.faq-item summary::-webkit-details-marker{ display:none; }\r\n.faq-item summary::after{\r\n content:\"+\"; font-size:1.4rem; font-weight:400; color:var(--brass-deep); flex-shrink:0;\r\n}\r\n.faq-item[open] summary::after{ content:\"\u2013\"; }\r\n.faq-item p{ margin-top:14px; margin-bottom:0; font-size:0.95rem; max-width:65ch; }\r\n\r\n\/* pricing tier cards (Basic\/Standard\/Advanced) *\/\r\n.pricing-grid{\r\n display:grid; grid-template-columns:repeat(3,1fr); gap:24px;\r\n}\r\n@media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; } }\r\n.pricing-card{\r\n background:#fff;\r\n border:1px solid var(--line);\r\n border-radius:10px;\r\n padding:32px 26px;\r\n display:flex; flex-direction:column;\r\n position:relative;\r\n}\r\n.pricing-card.featured{\r\n border:2px solid var(--brass);\r\n box-shadow:0 16px 34px rgba(11,59,46,0.10);\r\n}\r\n.pricing-card .featured-badge{\r\n position:absolute; top:-13px; left:50%; transform:translateX(-50%);\r\n background:var(--brass); color:var(--forest-deep);\r\n font-size:0.72rem; font-weight:700; letter-spacing:0.02em;\r\n padding:5px 14px; border-radius:100px; white-space:nowrap;\r\n}\r\n.pricing-card .tier-name{\r\n font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--forest-deep);\r\n}\r\n.pricing-card .price{\r\n font-family:var(--font-display); font-weight:700; font-size:1.9rem; color:var(--ink);\r\n margin:10px 0 2px;\r\n}\r\n.pricing-card .price .period{ font-size:0.85rem; font-weight:500; color:var(--ink-soft); }\r\n.pricing-card .setup-note{ font-size:0.82rem; color:var(--ink-soft); margin-bottom:6px; }\r\n.pricing-card ul{ margin:18px 0 24px; flex-grow:1; }\r\n.pricing-card li{\r\n font-size:0.88rem; color:var(--ink-soft);\r\n padding:5px 0; display:flex; gap:8px; align-items:flex-start;\r\n}\r\n.pricing-card li::before{ content:\"\u2713\"; color:var(--mint-dim); font-weight:700; flex-shrink:0; }\r\n.pricing-card .btn{ margin-top:auto; width:100%; justify-content:center; }\r\n.pricing-subhead{ margin:56px 0 22px; }\r\n.pricing-subhead:first-child{ margin-top:0; }\r\n.pricing-subhead h3{ font-size:1.15rem; margin-bottom:4px; }\r\n.pricing-subhead p{ font-size:0.88rem; margin-bottom:0; }\r\n.pricing-note{\r\n font-size:0.85rem; color:var(--ink-soft);\r\n margin-top:18px; padding:12px 16px;\r\n background:var(--paper-alt); border-radius:var(--radius);\r\n}\r\n.onetime-table{ display:grid; gap:0; border-top:1px solid var(--line); }\r\n.onetime-row{\r\n display:flex; justify-content:space-between; gap:20px;\r\n padding:16px 0; border-bottom:1px solid var(--line);\r\n font-size:0.95rem;\r\n}\r\n.onetime-row .svc{ font-weight:600; }\r\n.onetime-row .price{ color:var(--brass-deep); font-weight:600; white-space:nowrap; }\r\n.terms-list li{ font-size:0.92rem; color:var(--ink-soft); padding:8px 0 8px 22px; position:relative; }\r\n.terms-list li::before{ content:\"\u2014\"; position:absolute; left:0; color:var(--brass); }\r\n\r\n\/* =========================================================\r\n BLOG POST LISTING \u2014 styles the automatic WordPress post\r\n loop to match the site theme. Two blocks below: one for a\r\n native WordPress \"Posts page\" (core class names), one for\r\n the Essential Addons \"Post Grid\" Elementor widget (eael-\r\n prefixed classes). Only one will actually apply depending\r\n on which approach is used \u2014 inspect the real rendered HTML\r\n once posts are live and adjust selectors if they don't match,\r\n since exact markup varies by theme\/plugin version.\r\n ========================================================= *\/\r\n\r\n\/* --- A) native WordPress archive\/loop (core class names) --- *\/\r\n.blog-loop, #main, .site-main{ padding:20px 0; }\r\narticle.post, article.hentry{\r\n background:#fff; border:1px solid var(--line); border-left:3px solid var(--mint-dim);\r\n border-radius:var(--radius); padding:26px 24px; margin-bottom:24px;\r\n}\r\narticle.post .entry-title, article.hentry .entry-title{\r\n font-family:var(--font-display); font-size:1.15rem; margin-bottom:8px;\r\n}\r\narticle.post .entry-title a, article.hentry .entry-title a{ color:var(--ink); text-decoration:none; }\r\narticle.post .entry-title a:hover, article.hentry .entry-title a:hover{ color:var(--mint-dim); }\r\narticle.post .entry-meta, article.hentry .entry-meta{ font-size:0.8rem; color:var(--ink-soft); margin-bottom:10px; }\r\narticle.post .entry-summary, article.post .entry-content,\r\narticle.hentry .entry-summary, article.hentry .entry-content{ font-size:0.95rem; color:var(--ink-soft); }\r\n.nav-links, .page-numbers{ display:flex; gap:10px; margin-top:20px; }\r\n.page-numbers{ padding:8px 14px; border:1px solid var(--line); border-radius:var(--radius); color:var(--ink-soft); text-decoration:none; }\r\n.page-numbers.current{ background:var(--forest-deep); color:var(--paper); border-color:var(--forest-deep); }\r\n\r\n\/* --- B) Essential Addons \"Post Grid\" widget (free, Elementor) --- *\/\r\n.eael-post-grid{ gap:24px; }\r\n.eael-grid-post{\r\n background:#fff; border:1px solid var(--line); border-left:3px solid var(--mint-dim);\r\n border-radius:var(--radius); transition:transform .2s ease, box-shadow .2s ease;\r\n}\r\n.eael-grid-post:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(6,37,28,0.10); }\r\n.eael-grid-post:nth-child(even){ border-left-color:var(--brass); }\r\n.eael-entry-title, .eael-post-elements-title{ font-family:var(--font-display); }\r\n.eael-entry-title a, .eael-post-elements-title a{ color:var(--ink); text-decoration:none; }\r\n.eael-entry-title a:hover, .eael-post-elements-title a:hover{ color:var(--mint-dim); }\r\n.eael-entry-meta, .eael-post-elements-meta-wrapper{ color:var(--ink-soft); font-size:0.8rem; }\r\n.eael-entry-content, .eael-post-elements-excerpt{ color:var(--ink-soft); font-size:0.92rem; }\r\n.eael-post-elements-readmore-button, .eael-grid-post .eael-btn{\r\n display:inline-flex; align-items:center; gap:8px;\r\n background:var(--mint); color:var(--forest-deep) !important;\r\n padding:9px 18px; border-radius:var(--radius); font-weight:600; font-size:0.85rem;\r\n text-decoration:none !important;\r\n}\r\n\r\n\/* ---------- footer ---------- *\/\r\n.site-footer{ background:var(--forest-deep); color:#B9C6BC; padding:64px 0 28px; }\r\n.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }\r\n@media (max-width:700px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }\r\n.site-footer h4{ color:var(--paper); font-size:0.95rem; margin-bottom:16px; }\r\n.site-footer .logo{ color:var(--paper); }\r\n.site-footer p{ color:#9FB0A5; font-size:0.92rem; }\r\n.site-footer a{ color:#B9C6BC; }\r\n.site-footer a:hover{ color:var(--mint); }\r\n.foot-links li{ margin-bottom:10px; font-size:0.92rem; }\r\n.foot-bottom{\r\n margin-top:48px; padding-top:22px; border-top:1px solid var(--line-invert);\r\n display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;\r\n font-size:0.82rem; color:#7E9187;\r\n}\r\n\r\n\/* ---------- page hero (inner pages, smaller) ---------- *\/\r\n.page-hero{ background:var(--forest-deep); color:var(--paper); padding:64px 0 56px; position:relative; overflow:hidden; }\r\n.page-hero .container{ position:relative; z-index:1; }\r\n.page-hero h1{ color:var(--paper); font-size:clamp(2rem,3.6vw,2.7rem); max-width:20ch; }\r\n.page-hero p{ color:#C9D3C7; max-width:56ch; }\r\n\r\n\/* ---------- forms ---------- *\/\r\n.form-grid{ display:grid; gap:18px; }\r\nlabel{ font-size:0.85rem; font-weight:600; display:block; margin-bottom:6px; }\r\n.bg-forest label{ color:var(--paper); }\r\n.bg-forest .form-note{ color:#C9D3C7; }\r\ninput, textarea, select{\r\n width:100%; padding:12px 14px;\r\n border:1px solid var(--line);\r\n border-radius:var(--radius);\r\n font-family:var(--font-body); font-size:0.95rem;\r\n background:#fff; color:var(--ink);\r\n}\r\ntextarea{ resize:vertical; min-height:130px; }\r\ninput:focus, textarea:focus, select:focus{ border-color:var(--mint-dim); }\r\n.form-note{ font-size:0.82rem; color:var(--ink-soft); margin-top:10px; }\r\n\r\n\/* ---------- misc ---------- *\/\r\n.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }\r\n.two-col.v-center{ align-items:center; }\r\n@media (max-width:820px){ .two-col{ grid-template-columns:1fr; } }\r\n.badge-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }\r\n.badge{\r\n font-size:0.82rem; font-weight:600; padding:8px 14px;\r\n border:1px solid var(--line); border-radius:100px; color:var(--ink-soft);\r\n transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;\r\n}\r\n.badge:nth-child(odd):hover{ background:var(--mint); border-color:var(--mint); color:var(--forest-deep); transform:translateY(-2px); }\r\n.badge:nth-child(even):hover{ background:var(--brass); border-color:var(--brass); color:var(--forest-deep); transform:translateY(-2px); }\r\n.badge-row .reveal-on-scroll:nth-child(1){ transition-delay:0ms; }\r\n.badge-row .reveal-on-scroll:nth-child(2){ transition-delay:25ms; }\r\n.badge-row .reveal-on-scroll:nth-child(3){ transition-delay:50ms; }\r\n.badge-row .reveal-on-scroll:nth-child(4){ transition-delay:75ms; }\r\n.badge-row .reveal-on-scroll:nth-child(5){ transition-delay:100ms; }\r\n.badge-row .reveal-on-scroll:nth-child(6){ transition-delay:125ms; }\r\n.badge-row .reveal-on-scroll:nth-child(7){ transition-delay:150ms; }\r\n.badge-row .reveal-on-scroll:nth-child(8){ transition-delay:175ms; }\r\n.badge-row .reveal-on-scroll:nth-child(9){ transition-delay:200ms; }\r\n.badge-row .reveal-on-scroll:nth-child(10){ transition-delay:225ms; }\r\n.badge-row .reveal-on-scroll:nth-child(11){ transition-delay:250ms; }\r\n.badge-row .reveal-on-scroll:nth-child(12){ transition-delay:275ms; }\r\n.badge-row .reveal-on-scroll:nth-child(13){ transition-delay:300ms; }\r\n.badge-row .reveal-on-scroll:nth-child(14){ transition-delay:325ms; }\r\n.badge-row .reveal-on-scroll:nth-child(15){ transition-delay:350ms; }\r\n.badge-row .reveal-on-scroll:nth-child(16){ transition-delay:375ms; }\r\n.badge-row .reveal-on-scroll:nth-child(17){ transition-delay:400ms; }\r\n.badge-row .reveal-on-scroll:nth-child(18){ transition-delay:425ms; }\r\n.badge-row .reveal-on-scroll:nth-child(19){ transition-delay:450ms; }\r\n.badge-row .reveal-on-scroll:nth-child(20){ transition-delay:475ms; }\r\n.badge-row .reveal-on-scroll:nth-child(21){ transition-delay:500ms; }\r\n.badge-row .reveal-on-scroll:nth-child(22){ transition-delay:525ms; }\r\n.badge-row .reveal-on-scroll:nth-child(23){ transition-delay:550ms; }\r\n.badge-row .reveal-on-scroll:nth-child(24){ transition-delay:575ms; }\r\n.badge-row .reveal-on-scroll:nth-child(25){ transition-delay:600ms; }\r\n.about-photo-wrap{ position:relative; }\r\n.about-photo-wrap::before{\r\n content:\"\";\r\n position:absolute;\r\n top:20px; left:20px; right:-20px; bottom:-20px;\r\n background:var(--brass);\r\n border-radius:10px;\r\n z-index:0;\r\n}\r\n.about-photo-wrap img{\r\n position:relative; z-index:1;\r\n border-radius:10px;\r\n width:100%;\r\n display:block;\r\n object-fit:cover;\r\n}\r\n@media (max-width:820px){\r\n .about-photo-wrap::before{ top:14px; left:14px; right:-14px; bottom:-14px; }\r\n}\r\n.divider-tick{ display:flex; align-items:center; gap:10px; margin:6px 0 26px; }\r\n.divider-tick span{ width:22px; height:2px; background:var(--brass); display:block; }\r\n\r\n\/* hero flow-diagram svg *\/\r\n.svg-node-bg{ fill:#0F4436; }\r\n.svg-node-border{ fill:none; stroke:var(--forest-line); stroke-width:1.5; }\r\n.svg-line{ fill:none; stroke:var(--mint-dim); stroke-width:1.5; opacity:.8; }\r\n.svg-line-brass{ fill:none; stroke:var(--brass); stroke-width:1.5; opacity:.7; }\r\n.svg-dot{ fill:var(--mint); }\r\n.svg-dot-brass{ fill:var(--brass); }\r\n.svg-label{ font-family:'IBM Plex Sans',sans-serif; font-size:12px; font-weight:600; fill:#D7E3DA; }\r\n.svg-sublabel{ font-family:'IBM Plex Sans',sans-serif; font-size:10px; fill:#8FA599; }\r\n\r\n\/* reveal-on-load hero animation (single orchestrated moment) *\/\r\n.reveal{ opacity:0; transform:translateY(14px); animation:revealUp .7s ease forwards; }\r\n.reveal.d1{ animation-delay:.05s; }\r\n.reveal.d2{ animation-delay:.15s; }\r\n.reveal.d3{ animation-delay:.25s; }\r\n.reveal.d4{ animation-delay:.35s; }\r\n@keyframes revealUp{ to{ opacity:1; transform:none; } }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n\r\n<section class=\"page-hero\">\r\n <div class=\"hero-bg\" aria-hidden=\"true\">\r\n <span class=\"blob blob-mint\"><\/span>\r\n <span class=\"blob blob-brass\"><\/span>\r\n <\/div>\r\n <div class=\"container\">\r\n <div class=\"tick on-dark\">Portfolio<\/div>\r\n <h1>Selected work, not a highlight reel.<\/h1>\r\n <p>A mix of client marketing work and the internal systems built to support it \u2014 chosen because each one solved a real, specific problem.<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<section>\r\n <div class=\"container\">\r\n <div class=\"section-head\">\r\n <div class=\"tick\">Portfolio<\/div>\r\n <h2>A look at recent work<\/h2>\r\n <p>Four projects, spanning paid ads management, e-commerce launches, internal automation, and web builds.<\/p>\r\n <\/div>\r\n <div class=\"grid grid-2\">\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27d%20like%20something%20like%20your%20work%20for%20One%20Stop%20Galaxy.\" class=\"card reveal-on-scroll\" target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"svc-icon\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 16v8h5l14 8V8L11 16H6z\"\/><path d=\"M25 17a4 4 0 0 1 0 6\"\/><path d=\"M11 24v6a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-4\"\/><\/svg>\r\n <h3>One Stop Galaxy<\/h3>\r\n <div class=\"tag-row\"><span class=\"tag\">Facebook Ads<\/span><span class=\"tag\">Creative & Video<\/span><span class=\"tag\">Landing Pages<\/span><\/div>\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27d%20like%20something%20like%20your%20work%20for%20Zero%20%26amp%3B%20Kinelio.\" class=\"card brass reveal-on-scroll\" target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"svc-icon\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"8\" width=\"30\" height=\"22\" rx=\"3\"\/><path d=\"M12 33h16\"\/><path d=\"M11 16h18M11 22h18\"\/><\/svg>\r\n <h3>Zero & Kinelio \u2014 Product Launch<\/h3>\r\n <div class=\"tag-row\"><span class=\"tag\">Landing Pages<\/span><span class=\"tag\">Campaign Support<\/span><span class=\"tag\">E-commerce<\/span><\/div>\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27m%20interested%20in%20an%20automation%20system%20like%20the%20Agentic%20Ads%20Monitoring%20one.\" class=\"card brass reveal-on-scroll\" target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"svc-icon\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"20\" cy=\"20\" r=\"6\"\/><path d=\"M20 5v5M20 30v5M35 20h-5M10 20H5M30.3 9.7l-3.5 3.5M13.2 26.8l-3.5 3.5M30.3 30.3l-3.5-3.5M13.2 13.2L9.7 9.7\"\/><\/svg>\r\n <h3>Agentic Ads Monitoring System<\/h3>\r\n <div class=\"tag-row\"><span class=\"tag\">Automation<\/span><span class=\"tag\">Internal Tooling<\/span><span class=\"tag\">Reporting<\/span><\/div>\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27d%20like%20a%20website%20build%20like%20the%20growthwithhasan.com%20project.\" class=\"card reveal-on-scroll\" target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"svc-icon\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"8\" width=\"30\" height=\"24\" rx=\"3\"\/><path d=\"M5 15h30\"\/><circle cx=\"10\" cy=\"11.5\" r=\"0.9\" fill=\"currentColor\" stroke=\"none\"\/><circle cx=\"13.5\" cy=\"11.5\" r=\"0.9\" fill=\"currentColor\" stroke=\"none\"\/><path d=\"M11 21h10M11 26h16\"\/><\/svg>\r\n <h3>growthwithhasan.com Website Build<\/h3>\r\n <div class=\"tag-row\"><span class=\"tag\">Web Design<\/span><span class=\"tag\">Elementor \/ WordPress<\/span><span class=\"tag\">Brand Consistency<\/span><\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"bg-alt\">\r\n <div class=\"container\">\r\n <div class=\"section-head\">\r\n <div class=\"tick\">Case study<\/div>\r\n <h2>How each one actually went<\/h2>\r\n <p>These reflect real engagements \u2014 add verified performance numbers, screenshots, and client sign-off before publishing any specific results.<\/p>\r\n <\/div>\r\n <div class=\"grid grid-2\">\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27d%20like%20something%20like%20your%20work%20for%20One%20Stop%20Galaxy.\" class=\"card reveal-on-scroll\" target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"svc-icon\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 16v8h5l14 8V8L11 16H6z\"\/><path d=\"M25 17a4 4 0 0 1 0 6\"\/><path d=\"M11 24v6a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-4\"\/><\/svg>\r\n <h3>One Stop Galaxy<\/h3>\r\n <p><strong>Challenge:<\/strong> Ads, creative, and landing pages were split across different people with no single owner.<\/p>\r\n <p><strong>Solution:<\/strong> Took over Facebook Ads, creative\/video, and landing page fixes end-to-end, under one recurring reporting cycle.<\/p>\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27d%20like%20something%20like%20your%20work%20for%20Zero%20%26amp%3B%20Kinelio.\" class=\"card brass reveal-on-scroll\" target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"svc-icon\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"8\" width=\"30\" height=\"22\" rx=\"3\"\/><path d=\"M12 33h16\"\/><path d=\"M11 16h18M11 22h18\"\/><\/svg>\r\n <h3>Zero & Kinelio \u2014 Product Launch<\/h3>\r\n <p><strong>Challenge:<\/strong> Two brands launching the same seasonal product needed pages that didn't look like copies of each other.<\/p>\r\n <p><strong>Solution:<\/strong> Built dedicated landing pages tailored to each store's own funnel and branding.<\/p>\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27m%20interested%20in%20an%20automation%20system%20like%20the%20Agentic%20Ads%20Monitoring%20one.\" class=\"card brass reveal-on-scroll\" target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"svc-icon\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"20\" cy=\"20\" r=\"6\"\/><path d=\"M20 5v5M20 30v5M35 20h-5M10 20H5M30.3 9.7l-3.5 3.5M13.2 26.8l-3.5 3.5M30.3 30.3l-3.5-3.5M13.2 13.2L9.7 9.7\"\/><\/svg>\r\n <h3>Agentic Ads Monitoring System<\/h3>\r\n <p><strong>Challenge:<\/strong> Ad accounts were checked manually, all day, so problems got caught late.<\/p>\r\n <p><strong>Solution:<\/strong> Built a rule-based system flagging CPA, ROAS, CTR, frequency and pixel issues daily \u2014 down to a fixed 20-minute review.<\/p>\r\n <\/a>\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27d%20like%20a%20website%20build%20like%20the%20growthwithhasan.com%20project.\" class=\"card reveal-on-scroll\" target=\"_blank\" rel=\"noopener\">\r\n <svg class=\"svc-icon\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"8\" width=\"30\" height=\"24\" rx=\"3\"\/><path d=\"M5 15h30\"\/><circle cx=\"10\" cy=\"11.5\" r=\"0.9\" fill=\"currentColor\" stroke=\"none\"\/><circle cx=\"13.5\" cy=\"11.5\" r=\"0.9\" fill=\"currentColor\" stroke=\"none\"\/><path d=\"M11 21h10M11 26h16\"\/><\/svg>\r\n <h3>growthwithhasan.com Website Build<\/h3>\r\n <p><strong>Challenge:<\/strong> An existing site needed new pages that matched its brand exactly, built fast enough to reuse later.<\/p>\r\n <p><strong>Solution:<\/strong> Built standalone About, Services, and Thank You pages matching the site's navy-blue brand, packaged as reusable Elementor Pro JSON templates.<\/p>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section>\r\n <div class=\"container\">\r\n <div class=\"section-head\">\r\n <div class=\"tick\">Testimonials<\/div>\r\n <h2>Client words \u2014 coming soon<\/h2>\r\n <p>Real quotes will replace these placeholders once clients have signed off on being featured.<\/p>\r\n <\/div>\r\n <div class=\"grid grid-2\">\r\n <div class=\"quote-card reveal-on-scroll\">\r\n <p>\"Add a real client quote here once you have permission to publish it.\"<\/p>\r\n <div class=\"who\">\u2014 Client name & role (placeholder)<\/div>\r\n <\/div>\r\n <div class=\"quote-card reveal-on-scroll\">\r\n <p>\"A second testimonial slot \u2014 swap in an actual review from One Stop Galaxy, Zero, or Kinelio.\"<\/p>\r\n <div class=\"who\">\u2014 Client name & role (placeholder)<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"bg-forest\">\r\n <div class=\"container\" style=\"text-align:center;\">\r\n <div class=\"section-head center on-dark\">\r\n <h2>Want something like this for your brand?<\/h2>\r\n <p>Let's talk about what's slowing your growth down.<\/p>\r\n <\/div>\r\n <div class=\"hero-actions\" style=\"justify-content:center;\">\r\n <a href=\"https:\/\/wa.me\/8801401687624?text=Hi%20Hasan%2C%20I%27d%20like%20to%20start%20a%20project.\" class=\"btn btn-primary\" target=\"_blank\" rel=\"noopener\">Start a project<\/a>\r\n <a href=\"\/services\/\" class=\"btn btn-outline on-dark\">See services<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n\/\/ Mobile nav toggle\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n var toggle = document.querySelector('.nav-toggle');\r\n var links = document.querySelector('.nav-links');\r\n if (toggle && links) {\r\n toggle.addEventListener('click', function () {\r\n toggle.classList.toggle('open');\r\n links.classList.toggle('open');\r\n });\r\n links.querySelectorAll('a').forEach(function (a) {\r\n a.addEventListener('click', function () {\r\n toggle.classList.remove('open');\r\n links.classList.remove('open');\r\n });\r\n });\r\n }\r\n\r\n \/\/ Scroll-triggered reveal for service cards\r\n var revealEls = document.querySelectorAll('.reveal-on-scroll');\r\n if (revealEls.length && 'IntersectionObserver' in window) {\r\n revealEls.forEach(function (el) { el.classList.add('js-armed'); });\r\n var io = new IntersectionObserver(function (entries) {\r\n entries.forEach(function (entry) {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('in-view');\r\n io.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.15 });\r\n revealEls.forEach(function (el) { io.observe(el); });\r\n }\r\n\r\n \/\/ Contact form \u2014 submits to a Google Apps Script Web App, which\r\n \/\/ appends the row to the Google Sheet and sends the auto-reply email.\r\n \/\/ PASTE YOUR DEPLOYED WEB APP URL BELOW before this goes live.\r\n var CONTACT_FORM_ENDPOINT = \"https:\/\/script.google.com\/macros\/s\/AKfycbyghg9Px8EGFi2OYUvy8TrPY6qJykBGrenzUFqVyFJzx-CVdR5KW6fhvQvi4nACCjUG\/exec\";\r\n\r\n var form = document.querySelector('#contact-form');\r\n if (form) {\r\n form.addEventListener('submit', function (e) {\r\n e.preventDefault();\r\n var note = document.querySelector('#form-status');\r\n var submitBtn = form.querySelector('button[type=\"submit\"]');\r\n\r\n if (!CONTACT_FORM_ENDPOINT || CONTACT_FORM_ENDPOINT.indexOf('PASTE_YOUR') === 0) {\r\n if (note) {\r\n note.textContent = 'Form endpoint not set up yet \u2014 see the setup guide to connect Google Sheets.';\r\n }\r\n return;\r\n }\r\n\r\n var formData = new FormData(form);\r\n if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Sending...'; }\r\n if (note) { note.textContent = ''; }\r\n\r\n fetch(CONTACT_FORM_ENDPOINT, {\r\n method: 'POST',\r\n mode: 'no-cors',\r\n body: formData\r\n }).then(function () {\r\n if (note) {\r\n note.textContent = \"Thanks \u2014 your message is in. Check your email for a quick confirmation, and I'll personally follow up within 24\u201348 hours.\";\r\n }\r\n form.reset();\r\n }).catch(function () {\r\n if (note) {\r\n note.textContent = \"Something went wrong sending that \u2014 please message me on WhatsApp instead.\";\r\n }\r\n }).finally(function () {\r\n if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Send message'; }\r\n });\r\n });\r\n }\r\n});\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Portfolio \u2014 Hasan Abrar \/* ========================================================= Hasan Abrar \u2014 Personal Portfolio Design tokens: deep forest green + mint + brass […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hasanabrar.com\/bn\/wp-json\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasanabrar.com\/bn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hasanabrar.com\/bn\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hasanabrar.com\/bn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hasanabrar.com\/bn\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":4,"href":"https:\/\/hasanabrar.com\/bn\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":87,"href":"https:\/\/hasanabrar.com\/bn\/wp-json\/wp\/v2\/pages\/16\/revisions\/87"}],"wp:attachment":[{"href":"https:\/\/hasanabrar.com\/bn\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}