/*
Theme Name: Arka Communication
Theme URI: https://www.arkacommunication.co
Author: Arka Communication
Description: Bento-grid agency theme for Arka Communication, influencer marketing & content production. Brand red, Archivo type, lead-gen ready.
Version: 1.0
License: Proprietary
Text Domain: arka
*/
/* ARKA COMMUNICATION, Bento Grid design system (2026 US-premium) */
:root{
  --red:#DC2626; --red-d:#B91C1C; --red-lt:#F0655B;
  --gold:#DC2626; --gold-d:#B91C1C; /* legacy aliases */
  --ink:#0F0F12; --ink2:#17171C; --bg:#F6F5F3; --tile:#FFFFFF;
  --muted:#5f5f68; --line:#E8E6E1;
  --maxw:1200px; --r:22px; --r-sm:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:'Archivo',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:16.5px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.d{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.05;text-transform:none}
h1.d{font-size:clamp(2.3rem,4.8vw,3.9rem)}
h2.d{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.025em}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:16px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.lead{font-size:1.1rem;color:#4a4a52;max-width:62ch}
.gold{color:var(--red)}
section{padding:76px 0}
.tight{padding:48px 0}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(246,245,243,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.navbar{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo img{height:36px;width:auto;display:block}
nav.main{display:flex;gap:6px;align-items:center}
nav.main>a,nav.main .has-sub>a{font-size:.9rem;font-weight:600;color:#3c3c44;padding:9px 14px;border-radius:100px;transition:background .18s,color .18s}
nav.main>a:hover,nav.main .has-sub>a:hover,nav.main a[aria-current]{background:#ECEAE6;color:var(--ink)}
nav.main a.btn{margin-left:10px}
.has-sub{position:relative;display:flex;align-items:center;height:72px}
.sub{position:absolute;top:100%;left:0;margin-top:-10px;padding-top:10px;background:transparent;display:none;min-width:300px}
.sub-inner.sub a{background:#fff}
.sub{background:transparent}
.has-sub:hover .sub.has-sub:focus-within .sub{display:block}
.sub a{display:block;padding:11px 16px;border-radius:12px;color:var(--ink)!important;font-size:.9rem;font-weight:500}
.sub a:hover{background:var(--bg);color:var(--red-d)!important}
.sub{filter:none}
.sub>div.sub{border:none}
.sub a:first-child{border-radius:16px 16px 12px 12px}
.sub a:last-child{border-radius:12px 12px 16px 16px}
.sub{padding:10px 0 0}
.sub .sub-box{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(15,15,18,.12);padding:8px}
.btn{display:inline-block;background:var(--ink);color:#fff!important;font-weight:600;padding:11px 22px;border-radius:100px;font-size:.9rem;border:none;cursor:pointer;transition:transform .15s,background .2s,opacity .2s}
.btn:hover{background:#26262e;transform:translateY(-1px)}
.btn.red,.hero .btn:not(.ghost){background:var(--red)}
.btn.red:hover{background:var(--red-d)}
.btn.dark{background:var(--ink)}
.btn.ghost{background:transparent;border:1px solid #c9c7c1;color:var(--ink)!important}
.btn.ghost:hover{border-color:var(--ink);background:#ECEAE6}
.burger{display:none;background:none;border:none;color:var(--ink);font-size:1.7rem;cursor:pointer}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.tile{background:var(--tile);border:1px solid var(--line);border-radius:var(--r);padding:34px 32px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
a.tile:hover,.tile.hov:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(15,15,18,.08)}
.tile.t-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.tile.t-dark .lead,.tile.t-dark p{color:#b9b9c2}
.tile.t-red{background:var(--red);color:#fff;border-color:var(--red)}
.tile.t-red p{color:#fde5e5}
.tile.t-soft{background:#EFEDE9}
.sp12{grid-column:span 12}.sp8{grid-column:span 8}.sp7{grid-column:span 7}.sp6{grid-column:span 6}
.sp5{grid-column:span 5}.sp4{grid-column:span 4}.sp3{grid-column:span 3}
.tile .big{font-weight:800;letter-spacing:-.03em;font-size:clamp(2.2rem,3.4vw,3rem);line-height:1}
.tile .kpi-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;opacity:.75;margin-top:10px}
.tile .arrow{position:absolute;right:24px;bottom:20px;font-size:1.25rem;font-weight:700;color:var(--red);transition:transform .2s}
a.tile:hover .arrow{transform:translate(4px,-4px)}
.tile h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.tile p{color:var(--muted);font-size:.95rem}
.hero-bento{padding:44px 0 30px}
.hero-tile{padding:52px 48px;display:flex;flex-direction:column;justify-content:center;min-height:460px}
.hero-tile .eyebrow{color:#a9a9b2}
.hero-tile h1 em{font-style:normal;color:var(--red-lt)}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero-tile .btn:not(.ghost),.tile.t-dark .btn:not(.ghost){background:var(--red)}
.hero-tile .btn:not(.ghost):hover{background:var(--red-d)}
.hero-tile .btn.ghost{border-color:#3a3a42;color:#fff!important}
.hero-tile .btn.ghost:hover{background:#26262e}
/* logo marquee inside a tile */
.tile-marquee{display:flex;align-items:center;padding:0;min-height:88px}
.mq-mask{overflow:hidden;width:100%;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:44px;white-space:nowrap;animation:mq 30s linear infinite;font-weight:700;font-size:.95rem;color:#6a6a72;align-items:center}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
.marquee{background:transparent;overflow:hidden;padding:0}

/* ---------- legacy blocks restyled (inner pages) ---------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--tile);border:1px solid var(--line);border-radius:var(--r);padding:32px 28px;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(15,15,18,.08)}
.card h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.card p{color:var(--muted);font-size:.95rem}
.card .more{display:inline-block;margin-top:16px;color:var(--red-d);font-weight:700;font-size:.9rem}
.num{font-weight:800;color:var(--red);font-size:1.3rem;margin-bottom:12px;letter-spacing:-.02em}
.dark-sec{background:transparent;color:var(--ink)}
.dark-sec .card{background:var(--ink);border-color:var(--ink);color:#fff}
.dark-sec .card h3{color:#fff}
.dark-sec .card p{color:#a7a7b1}
.dark-sec .lead{color:#4a4a52}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.checks{list-style:none;margin-top:22px}
.checks li{padding-left:30px;position:relative;margin-bottom:12px}
.checks li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%;background:var(--red)}
.quote{background:var(--tile);border:1px solid var(--line);border-radius:var(--r);padding:28px 30px}
.quote p{font-size:1rem;font-weight:500}
.quote footer{margin-top:14px;font-size:.84rem;color:var(--muted);font-weight:700}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.stat-row>div{background:var(--tile);border:1px solid var(--line);border-radius:var(--r);padding:24px 10px}
.stat-row b{font-weight:800;font-size:2.3rem;color:var(--red);display:block;letter-spacing:-.03em}
.stat-row span{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.logo-strip{display:flex;flex-wrap:wrap;gap:12px}
.logo-strip li{list-style:none;border:1px solid var(--line);background:var(--tile);border-radius:100px;padding:9px 20px;font-weight:600;font-size:.9rem;color:#4a4a52}
.faq details{background:var(--tile);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;font-weight:700;padding:18px 22px;list-style:none;position:relative}
.faq summary::after{content:"+";position:absolute;right:22px;color:var(--red);font-size:1.3rem}
.faq details[open] summary::after{content:", "}
.faq details p{padding:0 22px 20px;color:var(--muted);font-size:.95rem}
.cta-band{background:var(--ink);color:#fff;border-radius:var(--r);padding:56px 52px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta-band h2{margin-bottom:8px}
.cta-band p{color:#b9b9c2}
.cta-band .btn{background:var(--red)}
.cta-band .btn:hover{background:var(--red-d)}
form.lead-form{display:grid;gap:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{font-size:.83rem;font-weight:700;display:block;margin-bottom:6px}
input,select,textarea{width:100%;padding:13px 15px;border:1px solid #d8d6d0;border-radius:12px;font:inherit;font-size:.95rem;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(220,38,38,.13)}
.form-note{font-size:.82rem;color:var(--muted)}
.form-ok{display:none;background:#eef7ee;border:1px solid #bfe0bf;color:#245c24;padding:14px 18px;border-radius:12px;font-weight:600}
.page-head{background:transparent;color:var(--ink);padding:72px 0 20px}
.page-head .lead{color:#4a4a52}
.page-head .eyebrow{color:var(--muted)}
.crumbs{font-size:.82rem;color:#8b8b90;margin-bottom:20px}
.crumbs a{color:#6a6a72}
.crumbs a:hover{color:var(--red-d)}
.page-head+section.page-head+*{padding-top:44px}
.svc-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--tile);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.svc-table th{background:var(--ink);color:#fff;text-align:left;padding:14px 18px;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase}
.svc-table td{padding:14px 18px;border-bottom:1px solid var(--line);font-size:.95rem}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#b9b9c2;padding:64px 0 32px;font-size:.92rem;border-radius:28px 28px 0 0;margin-top:40px}
footer.site .logo img{height:40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px;margin-bottom:44px}
footer.site h4{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;margin-bottom:18px}
footer.site a{display:block;margin-bottom:10px;color:#b9b9c2}
footer.site a:hover{color:var(--red-lt)}
.foot-bottom{border-top:1px solid #26262e;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:#7d7d87}
.socials a{display:inline-block;margin-right:16px}
.wa{position:fixed;right:22px;bottom:22px;z-index:70;background:#25D366;color:#fff;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 10px 28px rgba(0,0,0,.22);transition:transform .15s}
.wa:hover{transform:scale(1.06)}
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s,transform .55s}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.mob-cta{display:none}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .sp8,.sp7{grid-column:span 12}
  .sp6{grid-column:span 6}
  .sp5,.sp4{grid-column:span 6}
  .sp3{grid-column:span 6}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:36px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .hero-tile{min-height:0}
}
@media(max-width:720px){
  nav.main{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:16px 20px;gap:4px;border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.1)}
  nav.main.open{display:flex}
  nav.main>a,nav.main .has-sub>a{padding:11px 12px;border-radius:12px}
  nav.main a.btn{margin:8px 0 0}
  .has-sub{height:auto;display:block}
  .sub{position:static;display:block;margin:0;padding:0 0 0 12px;min-width:0}
  .sub .sub-box{background:transparent;border:none;box-shadow:none;padding:0}
  .sub a{color:var(--muted)!important;padding:8px 12px}
  .burger{display:block}
  .logo img{height:30px}
  .sp6,.sp5,.sp4,.sp3{grid-column:span 12}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  .tile{padding:28px 24px}
  .hero-tile{padding:36px 26px}
  .cta-band{padding:40px 26px}
  section{padding:56px 0}
  .mob-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:65;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px}
  .mob-cta .btn{flex:1;text-align:center;padding:12px 10px;font-size:.9rem}
  .mob-cta .btn:first-child{background:var(--red)}
  .wa{bottom:84px}
  body{padding-bottom:70px}
  footer.site{border-radius:0}
}
@media(max-width:480px){
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .svc-table{display:block;overflow-x:auto}
  .svc-table th,.svc-table td{white-space:nowrap}
}

/* footer SEO links */
.seo-links{border-top:1px solid #26262e;padding:26px 0 6px;margin-top:8px}
.seo-links h4{margin-bottom:12px}
.seo-links p{font-size:.8rem;line-height:2;color:#8b8b93}
footer.site .seo-links a{display:inline;margin:0 2px 0 0;color:#8b8b93}
footer.site .seo-links a:hover{color:var(--red-lt)}

footer.site .btn.ghost{color:#fff!important;border-color:#4a4a52}
footer.site .btn.ghost:hover{background:#26262e;border-color:#fff}

/* client logo wall */
.logo-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.logo-wall .logo-chip{border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px 18px;display:flex;align-items:center;justify-content:center;height:84px;width:100%}
.logo-wall .logo-chip img{max-height:42px;max-width:118px;width:auto;height:auto;object-fit:contain}
.logo-wall .logo-chip img{filter:grayscale(1);opacity:.75;transition:filter .25s,opacity .25s;max-width:150px;object-fit:contain}
.logo-wall .logo-chip:hover img{filter:none;opacity:1}
.tile-marquee .marquee-track{gap:52px}
.tile-marquee .marquee-track img{filter:grayscale(1);opacity:.7;transition:filter .25s,opacity .25s}
.tile-marquee:hover .marquee-track img{filter:none;opacity:1}

.logo-text{font-weight:800;letter-spacing:-.01em;color:#6a6a72;white-space:nowrap}
.logo-wall .logo-chip:hover .logo-text{color:var(--ink)}

/* blog post body */
.post-body{font-size:1.05rem;color:#33333a}
.post-body p{margin-bottom:18px}
.post-body h2{font-weight:800;letter-spacing:-.02em;font-size:1.5rem;margin:34px 0 12px}
.post-body img{border-radius:18px;border:1px solid var(--line);margin:26px 0;max-width:100%}
.post-cover{border-radius:22px;border:1px solid var(--line);margin-bottom:34px;width:100%}
.post-card-cover{width:100%;height:170px;object-fit:cover;border-radius:12px;margin-bottom:16px;border:1px solid var(--line)}

/* WordPress menu adapter */
nav.main ul{list-style:none;display:flex;gap:6px;align-items:center;margin:0;padding:0}
nav.main li{position:relative;display:flex;align-items:center;height:72px}
nav.main li a{font-size:.9rem;font-weight:600;color:#3c3c44;padding:9px 14px;border-radius:100px;transition:background .18s,color .18s}
nav.main li a:hover,nav.main li.current-menu-item>a{background:#ECEAE6;color:var(--ink)}
nav.main ul ul{display:none;position:absolute;top:100%;left:0;margin-top:-10px;padding:10px 0 0;background:transparent;min-width:300px;z-index:70}
nav.main ul ul li{height:auto;display:block}
nav.main li:hover>ul,nav.main li:focus-within>ul{display:block}
nav.main ul ul .sub-box-auto{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(15,15,18,.12);padding:8px}
nav.main ul ul a{display:block;padding:11px 16px;border-radius:12px;font-weight:500;background:#fff}
nav.main ul ul li:first-child a{border-radius:16px 16px 12px 12px}
nav.main ul ul li:last-child a{border-radius:12px 12px 16px 16px}
nav.main ul ul a:hover{background:var(--bg);color:var(--red-d)}
nav.main .btn-item a{background:var(--ink);color:#fff!important;font-weight:600;padding:11px 22px;border-radius:100px;margin-left:10px}
nav.main .btn-item a:hover{background:#26262e}
.wp-post-image.post-cover{width:100%}
@media(max-width:720px){
  nav.main ul{flex-direction:column;align-items:stretch;width:100%}
  nav.main li{height:auto;display:block}
  nav.main ul ul{position:static;display:block;margin:0;padding:0 0 0 12px;min-width:0;box-shadow:none}
  nav.main ul ul .sub-box-auto{border:none;box-shadow:none;background:transparent;padding:0}
  nav.main ul ul a{background:transparent;color:var(--muted)}
}

/* imported content: disable reveal-hidden state */
.rv{opacity:1;transform:none}