/*
Theme Name: Haraj Kuwait - El Messiri
Description: Custom child theme for harajkuwt.com — "Light Horizon" design system built on top of Divi (keeps Divi's builder engine available for legacy content while replacing header/footer/page templates with a custom design).
Template: Divi
Version: 1.0.3
Text Domain: haraj-elmessiri
*/

/* ===================== Fonts ===================== */
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/tajawal-400-ar.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/tajawal-400-lat.woff2') format('woff2');unicode-range:U+0000-00FF, U+2000-206F, U+2122, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/tajawal-500-ar.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/tajawal-500-lat.woff2') format('woff2');unicode-range:U+0000-00FF, U+2000-206F, U+2122, U+FEFF, U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/tajawal-700-ar.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/tajawal-700-lat.woff2') format('woff2');unicode-range:U+0000-00FF, U+2000-206F, U+2122, U+FEFF, U+FFFD;}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/elmessiri-700-ar.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/elmessiri-700-lat.woff2') format('woff2');unicode-range:U+0000-00FF, U+2000-206F, U+2122, U+FEFF, U+FFFD;}

/* ===================== Tokens ===================== */
:root{
  --bg:#EFF3F4; --surface:#FFFFFF; --surface-2:#E4ECEE;
  --text:#223339; --text-muted:#5C7078; --line:#C9DCE1;
  --brand:#3C6E84; --brand-deep:#28505F;
  --amber:#B8791C;
  --btn-bg:#3C6E84; --btn-text:#FFFFFF;
  --shadow:0 16px 36px -22px rgba(34,51,57,.35);
  --wa:#25D366;
}

/* ===================== Reset / base ===================== */
.hk *,.hk *::before,.hk *::after{box-sizing:border-box;}
.hk{background:var(--bg); color:var(--text); font-family:'Tajawal',system-ui,sans-serif; font-size:16px; line-height:1.7;}
.hk h1,.hk h2,.hk h3{font-family:'El Messiri','Tajawal',sans-serif; font-weight:700; margin:0; text-wrap:balance;}
.hk p{margin:0;}
.hk a{color:inherit; text-decoration:none;}
.hk button,.hk label{font:inherit; color:inherit;}
.hk ul{margin:0; padding:0; list-style:none;}
.hk .tabular{font-variant-numeric:tabular-nums;}
.hk img,.hk svg{display:block; max-width:100%;}
body.hk-body{background:var(--bg);}
#wpadminbar{position:fixed;}

/* ===================== header ===================== */
.hk .site-header{position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 5vw; background:var(--surface); color:var(--text); border-bottom:1px solid var(--line); flex-wrap:wrap;}
.hk .wordmark{display:flex; align-items:center; gap:.6rem; cursor:pointer; flex:none;}
.hk .wordmark img{height:44px; width:auto; display:block;}
.hk .wordmark .tag{display:block; font-size:.7rem; color:var(--text-muted); font-weight:500; margin-top:.1rem;}
.hk .site-nav{display:flex; gap:.85rem; flex-wrap:wrap; font-size:.88rem; font-weight:500;}
.hk .site-nav a{color:var(--text-muted); padding:.25rem 0; border-bottom:2px solid transparent;}
.hk .site-nav a:hover, .hk .site-nav a.current{color:var(--text); border-color:var(--amber);}
.hk .nav-toggle{position:absolute; opacity:0; pointer-events:none;}
.hk .nav-toggle-label{display:none; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9px; border:1px solid var(--line); cursor:pointer; flex:none;}
.hk .nav-toggle-label svg{width:18px;height:18px;stroke:var(--text);fill:none;stroke-width:1.8;}
@media (max-width:640px){
  .hk .site-header{flex-wrap:nowrap; padding:1rem;}
  .hk .wordmark{flex:none;}
  .hk .wordmark .tag{display:none;}
  .hk .nav-toggle-label{display:flex; flex:none;}
  .hk .site-nav{
    display:none; position:absolute; inset-inline:0; top:100%; margin-top:1px;
    background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    flex-direction:column; align-items:flex-start; padding:1rem 1.5rem; gap:.9rem; z-index:10;
  }
  .hk .nav-toggle:checked ~ .hk .site-nav, .hk .nav-toggle:checked ~ .site-nav{ display:flex; }
}

/* ===================== section rhythm ===================== */
.hk section{padding:3.2rem 5vw;}
.hk .section-inner{max-width:1120px; margin:0 auto;}
.hk .eyebrow{display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; font-weight:700; color:var(--brand); letter-spacing:.03em; margin-bottom:.9rem;}
.hk .eyebrow::before{content:""; width:7px;height:7px;border-radius:2px; background:var(--amber); display:block;}
.hk .btn{display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.4rem; border-radius:11px; font-weight:700; font-size:.92rem; cursor:pointer;}
.hk .btn-primary{background:var(--btn-bg); color:var(--btn-text);}
.hk .btn-outline{border:1.5px solid var(--line); color:var(--text);}
.hk .btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;}

/* ===================== hero ===================== */
.hk .hero{padding-top:3rem;}
.hk .hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:center;}
.hk .hero h1{font-size:clamp(1.8rem,1.3rem + 2.2vw,2.7rem); line-height:1.32;}
.hk .hero .lede{margin-top:1rem; font-size:1.03rem; color:var(--text-muted); max-width:50ch;}
.hk .hero-cta{display:flex; gap:.8rem; margin-top:1.6rem; flex-wrap:wrap;}
.hk .trust-row{display:flex; gap:1.1rem; margin-top:2rem; flex-wrap:wrap;}
.hk .trust-row li{display:flex; align-items:center; gap:.45rem; font-size:.82rem; color:var(--text-muted); font-weight:500;}
.hk .trust-row svg{width:16px;height:16px;stroke:var(--brand);fill:none;stroke-width:2;flex:none;}
.hk .hero-art{aspect-ratio:4/3.1; border-radius:16px; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
.hk .hero-art svg{width:64%;}

/* ===================== how it works ===================== */
.hk .how{background:var(--surface-2);}
.hk .how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.8rem;}
.hk .how-step{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.3rem;}
.hk .how-step .num{width:32px;height:32px;border-radius:9px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'El Messiri'; font-weight:700; margin-bottom:.8rem;}
.hk .how-step h3{font-size:1rem; margin-bottom:.4rem;}
.hk .how-step p{font-size:.85rem; color:var(--text-muted);}

/* ===================== category clusters + cards ===================== */
.hk .cluster{margin-top:2.2rem;}
.hk .cluster:first-child{margin-top:1.8rem;}
.hk .cluster-title{font-size:.85rem; font-weight:700; color:var(--text-muted); margin-bottom:.9rem; display:flex; align-items:center; gap:.5rem;}
.hk .cluster-title::before{content:""; width:16px; height:2px; background:var(--amber); display:block;}
.hk .cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;}
.hk .cat-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.1rem; display:flex; flex-direction:column; gap:.6rem; box-shadow:var(--shadow);}
.hk .cat-card .icon{width:56px;height:56px;border-radius:14px; background:var(--bg); display:flex;align-items:center;justify-content:center; border:1px solid var(--line);}
.hk .cat-card .icon svg{width:32px;height:32px;stroke:var(--amber);fill:none;stroke-width:1.5;}
.hk .cat-card h3{font-size:.94rem; line-height:1.4;}
.hk .cat-card .count{font-size:.72rem; color:var(--text-muted);}

/* ===================== ad slot card (the money component) ===================== */
.hk .ad-slot-label{display:flex; align-items:center; gap:.4rem; font-size:.68rem; font-weight:700; color:var(--text-muted);}
.hk .ad-slot-label svg{width:12px;height:12px;stroke:var(--brand);fill:none;stroke-width:2;}
.hk .ad-card{background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:.9rem 1rem; display:flex; flex-direction:column; gap:.6rem;}
.hk .ad-card .row1{display:flex; align-items:center; justify-content:space-between; gap:.5rem;}
.hk .ad-card .who{display:flex; align-items:center; gap:.5rem;}
.hk .ad-card .avatar{width:32px;height:32px;border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'El Messiri'; font-weight:700; font-size:.8rem; flex:none;}
.hk .ad-card .name{font-weight:700; font-size:.85rem;}
.hk .ad-card .badge{font-size:.62rem; font-weight:700; padding:.16rem .5rem; border-radius:999px; background:#F3D9AE; color:#6B4A0E; white-space:nowrap;}
.hk .ad-card .phone{font-size:.82rem; color:var(--text-muted);}
.hk .ad-card .btns{display:flex; gap:.45rem;}
.hk .ad-card .btns a{flex:1; text-align:center; padding:.5rem; border-radius:8px; font-size:.76rem; font-weight:700;}
.hk .ad-card .btns a.call{background:var(--brand); color:#fff;}
.hk .ad-card .btns a.wa{background:var(--wa); color:#fff;}
.hk .ad-card.lg{padding:1.1rem 1.2rem; gap:.8rem;}
.hk .ad-card.lg .avatar{width:44px;height:44px;font-size:1rem;}
.hk .ad-card.lg .name{font-size:.98rem;}
.hk .ad-card.lg .phone{font-size:.95rem;}
.hk .ad-card.lg .btns a{padding:.65rem;font-size:.85rem;}
.hk .ad-card.empty{opacity:.6;}

/* ===================== seo band ===================== */
.hk .seo-band{background:var(--surface-2);}
.hk .seo-band .eyebrow::before{background:var(--brand);}
.hk .seo-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:1.8rem;}
.hk .seo-item{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1.1rem; box-shadow:var(--shadow);}
.hk .seo-item .icon{width:32px;height:32px;border-radius:9px; background:var(--bg); border:1px solid var(--line); display:flex;align-items:center;justify-content:center; margin-bottom:.7rem;}
.hk .seo-item .icon svg{width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:1.8;}
.hk .seo-item h3{font-size:.92rem; color:var(--text); margin-bottom:.3rem;}
.hk .seo-item p{font-size:.78rem; color:var(--text-muted);}

/* ===================== breadcrumb + single service page ===================== */
.hk .breadcrumb{display:flex; gap:.4rem; align-items:center; font-size:.78rem; color:var(--text-muted); flex-wrap:wrap;}
.hk .breadcrumb a{color:var(--text-muted);}
.hk .breadcrumb a:hover{color:var(--brand);}
.hk .breadcrumb .sep{opacity:.5;}
.hk .article-hero{background:var(--surface-2); padding-top:2.2rem;}
.hk .article-hero .section-inner{max-width:900px;}
.hk .article-hero h1{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.2rem); margin-top:1rem;}
.hk .article-hero .lede{margin-top:.8rem; color:var(--text-muted); font-size:.98rem; max-width:70ch;}
.hk .article-wrap{max-width:1040px; margin:0 auto; padding:2.4rem 5vw;}
.hk .article-full{min-width:0;}
.hk .article-featured-img{border-radius:16px; overflow:hidden; margin-bottom:1.6rem; box-shadow:var(--shadow); aspect-ratio:16/8;}
.hk .article-featured-img img{width:100%; height:100%; object-fit:cover;}
.hk .article-body{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.8rem; box-shadow:var(--shadow); min-width:0; overflow-x:auto;}
.hk .article-legacy{font-family:'Tajawal',sans-serif; color:var(--text); min-width:0;}
.hk .article-legacy, .hk .article-legacy *{max-width:100% !important; width:auto !important; box-sizing:border-box !important;}
.hk .article-legacy h1,.hk .article-legacy h2,.hk .article-legacy h3,.hk .article-legacy h4{font-family:'El Messiri','Tajawal',sans-serif !important; color:var(--text) !important; text-align:start !important;}
.hk .article-legacy p,.hk .article-legacy li,.hk .article-legacy span,.hk .article-legacy div{color:var(--text) !important; font-family:'Tajawal',sans-serif !important; text-align:start !important; background:none !important;}
.hk .article-legacy a{color:var(--brand) !important;}
.hk .article-legacy img{border-radius:10px; height:auto !important;}
.hk .article-legacy .et_pb_section{padding:0 !important; background:none !important;}
.hk .article-legacy .et_pb_row{padding:0 !important; width:100% !important; max-width:100% !important;}
.hk .sidebar-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.2rem; box-shadow:var(--shadow); margin-bottom:1.2rem;}
.hk .sidebar-card h3{font-size:.85rem; color:var(--text-muted); margin-bottom:.8rem; font-weight:700;}
.hk .related-grid{display:grid; grid-template-columns:1fr; gap:.6rem; margin-top:.8rem;}
.hk .related-card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:.7rem .8rem; font-size:.82rem; font-weight:500;}
.hk .related-card:hover{border-color:var(--brand);}
.hk .sticky-cta{position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--line); padding:.8rem 5vw; display:none; gap:.6rem; box-shadow:0 -10px 24px -18px rgba(0,0,0,.25); z-index:5;}
.hk .sticky-cta a{flex:1; text-align:center;}

/* ===================== category archive ===================== */
.hk .cat-archive-hero{background:var(--surface-2);}
.hk .cat-archive-hero .section-inner{max-width:820px;}
.hk .post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.8rem;}
.hk .post-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; gap:.7rem; box-shadow:var(--shadow);}
.hk .post-card .thumb{aspect-ratio:16/10; background:var(--bg); overflow:hidden;}
.hk .post-card .thumb img{width:100%; height:100%; object-fit:cover;}
.hk .post-card .card-body{padding:0 1.2rem 1.2rem; display:flex; flex-direction:column; gap:.7rem; flex:1;}
.hk .post-card h3{font-size:.96rem; line-height:1.4;}
.hk .post-card .excerpt{font-size:.82rem; color:var(--text-muted); flex:1;}
.hk .archive-pager{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:2.2rem; flex-wrap:wrap;}
.hk .archive-pager .page-numbers{display:flex; gap:.4rem; flex-wrap:wrap;}
.hk .archive-pager .page-numbers li{list-style:none;}
.hk .archive-pager a.page-numbers, .hk .archive-pager span.page-numbers{display:flex; align-items:center; justify-content:center; min-width:2.2rem; height:2.2rem; padding:0 .5rem; border-radius:8px; border:1px solid var(--line); background:var(--surface); font-size:.85rem; font-weight:700; color:var(--text-muted);}
.hk .archive-pager span.page-numbers.current{background:var(--brand); color:#fff; border-color:var(--brand);}
.hk .archive-pager a.page-numbers:hover{border-color:var(--brand); color:var(--brand);}

.hk .post-nav{display:flex; gap:1rem; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line);}
.hk .post-nav > div{flex:1; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:1rem;}
.hk .post-nav .dir{font-size:.7rem; font-weight:700; color:var(--brand); margin-bottom:.35rem; display:block;}
.hk .post-nav a{font-size:.88rem; font-weight:600; color:var(--text);}
.hk .post-nav a:hover{color:var(--brand);}

/* ===================== FAQ ===================== */
.hk .faq-wrap{max-width:800px; margin:0 auto; padding:0 5vw;}
.hk .faq-item{border:1px solid var(--line); border-radius:12px; background:var(--surface); margin-bottom:.7rem; overflow:hidden;}
.hk .faq-item summary{padding:1rem 1.2rem; cursor:pointer; font-weight:700; font-size:.95rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;}
.hk .faq-item summary::-webkit-details-marker{display:none;}
.hk .faq-item summary::after{content:"+"; font-size:1.3rem; color:var(--brand); flex:none;}
.hk .faq-item[open] summary::after{content:"−";}
.hk .faq-item .a{padding:0 1.2rem 1.1rem; color:var(--text-muted); font-size:.9rem;}

/* ===================== about ===================== */
.hk .about-values{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.8rem;}
.hk .value-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.3rem; text-align:center; box-shadow:var(--shadow);}
.hk .value-card .icon{width:44px;height:44px;border-radius:11px; background:var(--bg); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin:0 auto .8rem;}
.hk .value-card .icon svg{width:22px;height:22px;stroke:var(--brand);fill:none;stroke-width:1.7;}
.hk .value-card h3{font-size:.95rem; margin-bottom:.4rem;}
.hk .value-card p{font-size:.83rem; color:var(--text-muted);}

/* ===================== advertise + contact (merged) ===================== */
.hk .contact-hero{background:linear-gradient(180deg, var(--surface-2), var(--bg)); text-align:center;}
.hk .contact-hero .section-inner{max-width:640px;}
.hk .audience-row{display:flex; gap:.6rem; justify-content:center; margin-top:1.4rem; flex-wrap:wrap;}
.hk .audience-row a{font-size:.82rem; font-weight:700; padding:.5rem 1rem; border-radius:999px; border:1px solid var(--line); color:var(--text-muted);}
.hk .audience-row a:hover{border-color:var(--brand); color:var(--brand);}
.hk .reach-wrap{display:grid; grid-template-columns:.95fr 1.05fr; gap:2rem; margin-top:1.8rem; align-items:center;}
.hk .contact-rows{display:flex; flex-direction:column; gap:.8rem;}
.hk .contact-row{display:flex; align-items:center; gap:.8rem; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem;}
.hk .contact-row .ic{width:38px;height:38px;border-radius:10px; background:var(--bg); border:1px solid var(--line); display:flex;align-items:center;justify-content:center; flex:none;}
.hk .contact-row .ic svg{width:18px;height:18px;stroke:var(--brand);fill:none;stroke-width:1.8;}
.hk .contact-row .lbl{font-size:.72rem; color:var(--text-muted);}
.hk .contact-row .val{font-size:.92rem; font-weight:700;}
.hk .kw-map{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.2rem; box-shadow:var(--shadow);}
.hk .kw-map .cap{font-size:.78rem; color:var(--text-muted); margin-top:.7rem; text-align:center;}
.hk .kw-map svg{width:100%; height:auto;}
.hk .gov-dot{fill:var(--amber); stroke:var(--surface); stroke-width:2;}
.hk .gov-label{font-size:8px; fill:var(--text); font-family:'Tajawal'; font-weight:700;}
.hk .slots-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.8rem;}
.hk .slot-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.2rem; display:flex; flex-direction:column; gap:.6rem; box-shadow:var(--shadow);}
.hk .slot-card h3{font-size:.92rem;}
.hk .status{display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:700; border-radius:999px; padding:.25rem .65rem; align-self:flex-start;}
.hk .status.open{background:#DCEFE6; color:#1B6B4B;}
.hk .status.full{background:#F3E1DC; color:#9C3B22;}
.hk .status i{width:6px;height:6px;border-radius:50%; background:currentColor;}

/* ===================== privacy / legal ===================== */
.hk .legal-hero{background:var(--surface-2);}
.hk .legal-hero .section-inner{max-width:720px;}
.hk .legal{max-width:720px; margin:0 auto; padding:2.2rem 5vw 1rem;}
.hk .legal h2{font-size:1.05rem; margin-top:1.7rem; margin-bottom:.6rem;}
.hk .legal p{color:var(--text-muted); margin-bottom:.85rem; font-size:.92rem;}
.hk .legal ul{display:flex; flex-direction:column; gap:.5rem; margin-bottom:.85rem;}
.hk .legal li{display:flex; gap:.5rem; color:var(--text-muted); font-size:.92rem;}
.hk .legal li::before{content:""; width:6px;height:6px;border-radius:50%; background:var(--amber); margin-top:.6rem; flex:none;}
.hk .legal .updated{font-size:.78rem; color:var(--text-muted); margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line);}

/* ===================== footer ===================== */
.hk footer.site-footer{padding:2rem 5vw 2.4rem; text-align:center; font-size:.78rem; color:var(--text-muted); border-top:1px solid var(--line); margin-top:1rem;}
.hk footer.site-footer .footer-links{margin-bottom:.6rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;}
.hk footer.site-footer .footer-links a{font-weight:700; color:var(--brand);}
.hk footer.site-footer .footer-links a:hover{text-decoration:underline;}

/* ===================== responsive ===================== */
@media (max-width:980px){
  .hk .cat-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:860px){
  .hk .hero-grid{grid-template-columns:1fr;} .hk .hero-art{order:-1;}
  .hk .cat-grid{grid-template-columns:repeat(2,1fr);} .hk .seo-grid{grid-template-columns:repeat(2,1fr);}
  .hk .how-grid{grid-template-columns:1fr;} .hk .slots-grid{grid-template-columns:repeat(2,1fr);}
  .hk .reach-wrap{grid-template-columns:1fr;} .hk .article-grid{grid-template-columns:1fr;}
  .hk .about-values{grid-template-columns:1fr;} .hk .post-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:520px){
  .hk .cat-grid{grid-template-columns:1fr;} .hk .seo-grid{grid-template-columns:1fr;} .hk .slots-grid{grid-template-columns:1fr;}
  .hk .post-grid{grid-template-columns:1fr;}
  .hk section{padding:2.2rem 4vw;}
  .hk .sticky-cta{display:flex;}
}