/*
Theme Name: Maruf
Theme URI: https://marufism.com
Author: Maruful Islam
Author URI: https://linkedin.com/in/maruful-islam
Description: A bold, multi-page consulting theme for a paid-media specialist. Big grotesque typography, one strong accent colour, a working contact form, blog, and Home/About/Services/Case-Studies/Contact pages — all editable from Appearance → Customize. No page builder required.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maruf
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root{
  --accent: #d1461f;          /* overridden inline by Customizer */
  --ink: #141414;
  --ink-soft: #4a4a4a;
  --muted: #8a8a8a;
  --line: #ececec;
  --bg: #ffffff;
  --bg-alt: #faf7f4;
  --radius: 999px;
  --wrap: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  --font-head: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ============================================================
   Reset / base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:800; line-height:0.98; letter-spacing:-0.02em; margin:0; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.accent{ color:var(--accent); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-head); font-weight:700; font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.95em 1.7em; border-radius:var(--radius);
  border:2px solid var(--accent); background:var(--accent); color:#fff;
  transition:transform .15s ease, background .2s ease, color .2s ease;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-2px); background:#b93a17; border-color:#b93a17; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:#fff; }

/* Eyebrow label */
.eyebrow{
  font-family:var(--font-head); font-weight:700; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  display:inline-block; margin-bottom:1rem;
}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.site-header.is-scrolled{ border-bottom-color:var(--line); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{
  font-family:var(--font-head); font-weight:900; font-size:1.6rem;
  letter-spacing:-0.04em; color:var(--ink);
}
.brand .dot{ color:var(--accent); }
.nav-cta{ font-size:.72rem; padding:.7em 1.4em; }

/* ============================================================
   Hero
   ============================================================ */
.hero{ padding:clamp(48px,9vw,120px) 0 clamp(40px,6vw,80px); position:relative; overflow:hidden; }
.hero__headline{
  font-size:clamp(3.2rem, 13vw, 11rem);
  font-weight:800; color:var(--accent);
  letter-spacing:-0.03em; line-height:0.92;
  text-transform:none;
}
.hero__headline span{ display:block; }
.hero__grid{
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(24px,5vw,72px);
  margin-top:clamp(32px,5vw,64px); align-items:start;
}
.hero__left{ border-top:2px solid var(--ink); padding-top:1.2rem; }
.hero__kicker{
  font-family:var(--font-head); font-weight:800; font-size:clamp(1.3rem,2.4vw,2rem);
  line-height:1.05; letter-spacing:-0.02em;
}
.hero__right{ border-top:2px solid var(--line); padding-top:1.2rem; }
.hero__lead{ color:var(--ink-soft); font-size:1.08rem; max-width:46ch; }
.hero__lead strong{ color:var(--ink); }
.hero__badge{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-head); font-weight:700; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  background:var(--bg-alt); border:1px solid var(--line);
  padding:.6em 1.1em; border-radius:var(--radius); margin-bottom:1.4rem;
}
.hero__badge .pulse{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 var(--accent); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(209,70,31,.5);} 70%{ box-shadow:0 0 0 10px rgba(209,70,31,0);} 100%{ box-shadow:0 0 0 0 rgba(209,70,31,0);} }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }

/* ============================================================
   Metrics strip
   ============================================================ */
.metrics{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(20px,3vw,32px) 0; }
.metrics__track{ display:flex; flex-wrap:wrap; gap:.7rem 1rem; align-items:center; }
.metric{
  font-family:var(--font-head); font-weight:700; font-size:.9rem;
  letter-spacing:.02em; color:var(--ink);
  background:var(--bg-alt); border:1px solid var(--line);
  padding:.55em 1.1em; border-radius:var(--radius); white-space:nowrap;
}
.metric b{ color:var(--accent); }

/* ============================================================
   Feature sections
   ============================================================ */
.feature{ padding:clamp(56px,9vw,120px) 0; border-bottom:1px solid var(--line); }
.feature__grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(24px,5vw,64px); align-items:start; }
.feature--flip .feature__grid{ direction:rtl; }
.feature--flip .feature__grid > *{ direction:ltr; }
.feature__title{ font-size:clamp(2.1rem,5vw,3.6rem); letter-spacing:-0.03em; }
.feature__body{ color:var(--ink-soft); font-size:1.06rem; max-width:52ch; margin-bottom:1.6rem; }
.feature__list{ display:grid; gap:.85rem; }
.feature__list li{
  display:flex; gap:.9rem; align-items:flex-start;
  font-size:1.02rem; padding-bottom:.85rem; border-bottom:1px solid var(--line);
}
.feature__list li::before{
  content:""; flex:0 0 auto; margin-top:.55em;
  width:9px; height:9px; border-radius:50%; background:var(--accent);
}

/* ============================================================
   Results cards
   ============================================================ */
.results{ padding:clamp(56px,9vw,120px) 0; background:var(--bg-alt); border-bottom:1px solid var(--line); }
.results__head{ max-width:60ch; margin-bottom:clamp(28px,4vw,48px); }
.results__head h2{ font-size:clamp(2.1rem,5vw,3.4rem); }
.results__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.1rem; }
.result-card{
  background:var(--bg); border:1px solid var(--line); border-radius:20px;
  padding:1.8rem 1.6rem; transition:transform .18s ease, box-shadow .18s ease;
}
.result-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -24px rgba(0,0,0,.25); }
.result-card h3{ font-size:1.9rem; color:var(--accent); margin-bottom:.4rem; }
.result-card p{ color:var(--ink-soft); font-size:.98rem; margin:0; }

/* ============================================================
   CTA band
   ============================================================ */
.cta{ padding:clamp(64px,10vw,140px) 0; text-align:center; }
.cta__eyebrow{ color:var(--accent); }
.cta h2{ font-size:clamp(2.6rem,8vw,6rem); letter-spacing:-0.03em; margin:.4rem 0 1.2rem; }
.cta p{ color:var(--ink-soft); max-width:52ch; margin:0 auto 2rem; font-size:1.1rem; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ border-top:2px solid var(--ink); padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,40px); }
.footer__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; align-items:flex-end; }
.footer__brand{ font-family:var(--font-head); font-weight:900; font-size:clamp(2.4rem,7vw,5rem); letter-spacing:-0.04em; line-height:.9; }
.footer__links{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.footer__links a{
  font-family:var(--font-head); font-weight:700; font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  border-bottom:2px solid transparent; padding-bottom:2px; transition:border-color .2s ease, color .2s ease;
}
.footer__links a:hover{ color:var(--accent); border-color:var(--accent); }
.footer__bottom{ margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .hero__badge .pulse{ animation:none; }
}

/* ============================================================
   Primary navigation (multi-page)
   ============================================================ */
.site-header .wrap{ gap:2rem; }
.primary-nav{ display:flex; align-items:center; gap:1.6rem; margin-left:auto; }
.primary-nav ul{ display:flex; align-items:center; gap:1.5rem; }
.primary-nav a{
  font-family:var(--font-head); font-weight:600; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
  padding:.3em 0; border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a{ color:var(--accent); border-color:var(--accent); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.4em; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:transform .25s, opacity .2s; }
.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   Page hero (interior pages)
   ============================================================ */
.page-hero{ padding:clamp(56px,9vw,120px) 0 clamp(32px,5vw,64px); border-bottom:1px solid var(--line); }
.page-hero .eyebrow{ margin-bottom:1.2rem; }
.page-hero h1{ font-size:clamp(2.8rem,8vw,6rem); color:var(--accent); letter-spacing:-0.03em; }
.page-hero__lead{ color:var(--ink-soft); font-size:1.15rem; max-width:56ch; margin-top:1.4rem; }

/* Generic page content (WP editor output) */
.page-content{ padding:clamp(48px,7vw,96px) 0; }
.page-content .prose{ max-width:70ch; }
.prose h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin:2rem 0 1rem; }
.prose h3{ font-size:clamp(1.4rem,3vw,1.9rem); margin:1.6rem 0 .8rem; }
.prose p{ color:var(--ink-soft); }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.prose ul{ list-style:disc; padding-left:1.3em; margin:1rem 0; color:var(--ink-soft); }
.prose img{ border-radius:16px; margin:1.5rem 0; }

/* ============================================================
   Services
   ============================================================ */
.services{ padding:clamp(48px,7vw,96px) 0; }
.services__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.2rem; }
.service-card{
  border:1px solid var(--line); border-radius:22px; padding:2rem 1.9rem;
  background:var(--bg); display:flex; flex-direction:column; gap:1rem;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:0 20px 44px -26px rgba(0,0,0,.28); border-color:var(--accent); }
.service-card__num{ font-family:var(--font-head); font-weight:800; font-size:.9rem; color:var(--accent); letter-spacing:.1em; }
.service-card h3{ font-size:1.55rem; letter-spacing:-0.02em; }
.service-card__desc{ color:var(--ink-soft); font-size:1rem; margin:0; }
.service-card__list{ display:grid; gap:.6rem; margin-top:.2rem; }
.service-card__list li{ display:flex; gap:.6rem; font-size:.95rem; color:var(--ink); }
.service-card__list li::before{ content:"→"; color:var(--accent); font-weight:700; }
.service-card__tag{
  margin-top:auto; align-self:flex-start; font-family:var(--font-head); font-weight:700;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  background:var(--bg-alt); border:1px solid var(--line); padding:.45em 1em; border-radius:var(--radius);
}

/* ============================================================
   About
   ============================================================ */
.about-lead{ padding:clamp(48px,7vw,90px) 0; }
.about-lead__grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(28px,5vw,64px); align-items:start; }
.about-lead__grid p{ color:var(--ink-soft); font-size:1.12rem; }
.about-lead__grid p strong{ color:var(--ink); }
.about-facts{ border-left:2px solid var(--accent); padding-left:1.4rem; display:grid; gap:1.2rem; }
.about-fact b{ display:block; font-family:var(--font-head); font-size:2rem; color:var(--accent); line-height:1; }
.about-fact span{ color:var(--ink-soft); font-size:.95rem; }

.timeline{ padding:clamp(48px,7vw,90px) 0; border-top:1px solid var(--line); }
.timeline__item{ display:grid; grid-template-columns:200px 1fr; gap:clamp(16px,3vw,40px); padding:1.6rem 0; border-bottom:1px solid var(--line); }
.timeline__when{ font-family:var(--font-head); font-weight:700; color:var(--accent); font-size:.9rem; letter-spacing:.04em; }
.timeline__role{ font-family:var(--font-head); font-weight:800; font-size:1.3rem; letter-spacing:-0.02em; }
.timeline__org{ color:var(--muted); font-size:.95rem; margin:.2rem 0 .8rem; }
.timeline__desc{ color:var(--ink-soft); }
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.chip{ font-family:var(--font-head); font-weight:600; font-size:.8rem; color:var(--ink); background:var(--bg-alt); border:1px solid var(--line); padding:.45em 1em; border-radius:var(--radius); }

/* ============================================================
   Contact form
   ============================================================ */
.contact{ padding:clamp(48px,7vw,96px) 0; }
.contact__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,6vw,72px); align-items:start; }
.contact__aside h3{ font-size:1.4rem; margin-bottom:.6rem; }
.contact__aside p{ color:var(--ink-soft); }
.contact__meta{ display:grid; gap:1rem; margin-top:1.8rem; }
.contact__meta a{ display:flex; align-items:center; gap:.7rem; font-weight:600; color:var(--ink); }
.contact__meta a:hover{ color:var(--accent); }
.contact__meta .k{ font-family:var(--font-head); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:block; }
.form-field{ margin-bottom:1.2rem; }
.form-field label{ display:block; font-family:var(--font-head); font-weight:600; font-size:.82rem; letter-spacing:.04em; margin-bottom:.5rem; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  padding:.9em 1em; border:1.5px solid var(--line); border-radius:12px; background:var(--bg); transition:border-color .2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--accent); }
.form-field textarea{ min-height:150px; resize:vertical; }
.form-hp{ position:absolute; left:-9999px; opacity:0; }
.form-note{ font-size:.85rem; color:var(--muted); margin-top:.6rem; }
.form-alert{ padding:1em 1.2em; border-radius:12px; margin-bottom:1.6rem; font-weight:600; }
.form-alert.ok{ background:#eaf7ee; color:#1a7f37; border:1px solid #b7e4c7; }
.form-alert.err{ background:#fdecea; color:#b42318; border:1px solid #f5c6c0; }

/* ============================================================
   Blog
   ============================================================ */
.blog{ padding:clamp(48px,7vw,96px) 0; }
.post-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.6rem; }
.post-card{ border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--bg); display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s; }
.post-card:hover{ transform:translateY(-4px); box-shadow:0 20px 44px -26px rgba(0,0,0,.28); }
.post-card__thumb{ aspect-ratio:16/9; background:var(--bg-alt); overflow:hidden; }
.post-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.post-card__body{ padding:1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.post-card__meta{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-family:var(--font-head); font-weight:600; }
.post-card h3{ font-size:1.3rem; letter-spacing:-0.02em; line-height:1.15; }
.post-card h3 a:hover{ color:var(--accent); }
.post-card__excerpt{ color:var(--ink-soft); font-size:.95rem; margin:0; }
.post-card__more{ margin-top:auto; font-family:var(--font-head); font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }

.single-post{ padding:clamp(40px,6vw,80px) 0 clamp(48px,7vw,96px); }
.single-post .prose{ max-width:72ch; margin-inline:auto; }
.post-hero{ max-width:72ch; margin:0 auto clamp(24px,4vw,48px); }
.post-hero .meta{ font-family:var(--font-head); font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
.post-hero h1{ font-size:clamp(2.2rem,5.5vw,3.8rem); letter-spacing:-0.03em; line-height:1.02; }
.post-featured{ max-width:1000px; margin:0 auto clamp(24px,4vw,48px); }
.post-featured img{ width:100%; border-radius:20px; }
.pagination{ display:flex; gap:.8rem; justify-content:center; margin-top:3rem; }
.pagination .page-numbers{ font-family:var(--font-head); font-weight:700; padding:.6em 1em; border:1.5px solid var(--line); border-radius:12px; color:var(--ink); }
.pagination .page-numbers.current, .pagination .page-numbers:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* Section intro helper */
.section-head{ max-width:60ch; margin-bottom:clamp(28px,4vw,48px); }
.section-head h2{ font-size:clamp(2rem,5vw,3.4rem); letter-spacing:-0.03em; }
.section-head p{ color:var(--ink-soft); margin-top:1rem; font-size:1.08rem; }
.center{ text-align:center; margin-inline:auto; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px){
  .about-lead__grid{ grid-template-columns:1fr; }
  .contact__grid{ grid-template-columns:1fr; }
}
@media (max-width: 860px){
  .hero__grid{ grid-template-columns:1fr; }
  .feature__grid{ grid-template-columns:1fr; }
  .feature--flip .feature__grid{ direction:ltr; }
  .hero__left{ border-top:none; padding-top:0; }
  .timeline__item{ grid-template-columns:1fr; gap:.4rem; }

  /* Mobile nav */
  .nav-toggle{ display:block; order:3; }
  .primary-nav{
    position:fixed; inset:74px 0 auto 0; margin:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line); padding:1rem var(--pad) 1.6rem;
    transform:translateY(-120%); transition:transform .28s ease; box-shadow:0 24px 40px -30px rgba(0,0,0,.4);
  }
  .nav-open .primary-nav{ transform:translateY(0); }
  .primary-nav ul{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .primary-nav li{ border-bottom:1px solid var(--line); }
  .primary-nav a{ display:block; padding:1em 0; font-size:1rem; }
  .primary-nav .nav-cta{ margin-top:1rem; justify-content:center; }
}
@media (max-width: 560px){
  body{ font-size:16px; }
  .nav-cta{ padding:.65em 1.1em; font-size:.66rem; }
  .brand{ font-size:1.35rem; }
  .footer__top{ align-items:flex-start; }
  .services__grid, .post-grid{ grid-template-columns:1fr; }
}