/* ===========================================================
   کلید سازان — Landing Page Styles (RTL)
   Handoff stylesheet — drop into Laravel public/assets/css
   Color system, typography and every section live here.
   =========================================================== */

/* ---- Tokens ---- */
:root{
  --amber:        #F5A623;   /* primary brand */
  --amber-dark:   #E0931A;
  --amber-soft:   #FFF4DD;   /* tinted backgrounds */
  --amber-pale:   #FEF8EE;
  --ink:          #2E2E2E;   /* near-black headings / footer */
  --ink-2:        #3A3A3A;
  --text:         #4A4A4A;
  --muted:        #9A9A9A;
  --line:         #ECECEC;
  --bg:           #FFFFFF;
  --bg-gray:      #F6F6F7;
  --card:         #FFFFFF;
  --star:         #F5A623;
  --shadow-sm:    0 6px 18px rgba(0,0,0,.05);
  --shadow-md:    0 14px 40px rgba(0,0,0,.07);
  --radius:       16px;
  --radius-lg:    24px;
  --maxw:         1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Vazirmatn', sans-serif;
  background:var(--bg);
  color:var(--text);
  direction:rtl;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  font-size:15px;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }

/* image placeholder used everywhere a real photo belongs */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(45deg,#eee 0 10px,#f4f4f4 10px 20px);
  border:1px dashed #cfcfcf;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#9a9a9a; font-size:11px; font-family:'Vazirmatn',monospace;
  text-align:center; padding:6px;
}

/* ===========================================================
   HEADER
   =========================================================== */
.site-header{
  background:var(--bg);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:84px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .logo-mark{
  width:70px; height:70px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:var(--amber);
}
.brand .logo-text{ text-align:right; }
.brand .logo-text b{ display:block; font-size:21px; font-weight:800; color:var(--ink); }
.brand .logo-text span{ font-size:11px; color:var(--muted); font-weight:500; }

.main-nav ul{ display:flex; align-items:center; gap:30px; }
.main-nav a{
  font-size:15px; font-weight:600; color:#5a5a5a; position:relative;
  padding-bottom:6px; transition:color .2s; white-space:nowrap;
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a.active{ color:var(--ink); }
.main-nav a.active::after{
  content:""; position:absolute; bottom:-2px; right:0; left:0;
  height:3px; border-radius:3px; background:var(--amber);
}

.phone-btn{
  display:flex; align-items:center; gap:10px;
  background:var(--amber); color:#fff; font-weight:700; font-size:15px;
  padding:12px 18px; border-radius:12px; box-shadow:0 8px 20px rgba(245,166,35,.35);
  direction:ltr; white-space:nowrap;
}
.phone-btn .ic{ display:flex; }
.phone-btn:hover{ background:var(--amber-dark); }

/* ===========================================================
   HERO
   =========================================================== */
.hero{ position:relative; overflow:hidden; background:var(--bg); }
.hero-blob{
  position:absolute; top:-185px; right:-90px; width:330px; height:300px;
  background:var(--amber); z-index:0; opacity:.9;
  border-radius:46% 54% 60% 40% / 62% 50% 50% 38%;
}
.hero-dots{
  position:absolute; left:41%; top:150px; width:104px; height:104px; z-index:1;
  background-image:radial-gradient(var(--amber) 2px, transparent 2px);
  background-size:16px 16px; opacity:.4;
}
.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr 1fr; align-items:center;
  gap:30px; padding:64px 0 56px;
}
.hero-inner > *{ min-width:0; }
.hero-copy{ text-align:center; }
.hero-copy h1{
  font-size:42px; font-weight:800; line-height:1.4; color:var(--ink);
  margin-bottom:20px;
}
.hero-copy h1 .accent{ color:var(--amber); }
.hero-copy .lead{ font-size:16px; color:#6a6a6a; max-width:440px; margin-bottom:28px; }
.hero-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.hero-badges .badge{
  display:flex; align-items:center; gap:8px; flex-direction:row-reverse;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  border-radius:12px; padding:9px 12px; font-size:12px; font-weight:600; color:#444;
}
.hero-badges .badge .ic{ color:var(--amber); display:flex; }

.hero-art{ position:relative; z-index:2; }
.hero-art .ph{ height:360px; }

/* ===========================================================
   SECTION HEADINGS
   =========================================================== */
.section{ padding:60px 0; }
.section.gray{ background:var(--bg-gray); }
.sec-head{ text-align:center; margin-bottom:42px; }
.sec-head.right{ text-align:right; }
.sec-head h2{ font-size:30px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.sec-head p{ color:var(--muted); font-size:14px; }
.sec-head .bar{ width:54px; height:4px; background:var(--amber); border-radius:4px; margin:14px auto 0; }
.sec-head.right .bar{ margin-inline:0; }

/* ===========================================================
   SERVICES
   =========================================================== */
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.service-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:26px 22px 24px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  transition:transform .25s, box-shadow .25s;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.service-card .thumb{ width:130px; height:120px; }
.service-card h3{ font-size:18px; font-weight:800; color:var(--ink); }
.service-card p{ font-size:13px; color:#8a8a8a; min-height:60px; }
.card-arrow{
  width:42px; height:42px; border-radius:11px; background:var(--amber); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(245,166,35,.35);
}
.service-card:hover .card-arrow{ background:var(--amber-dark); }

/* ===========================================================
   BENEFITS
   =========================================================== */
.benefits-wrap{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:40px 20px;
}
.benefits-grid{ display:grid; grid-template-columns:repeat(5,1fr); }
.benefit{
  text-align:center; padding:6px 18px; display:flex; flex-direction:column;
  align-items:center; gap:12px; position:relative;
}
.benefit + .benefit::before{
  content:""; position:absolute; right:0; top:12px; bottom:12px; width:1px; background:var(--line);
}
.benefit .b-ic{ color:var(--amber); display:flex; }
.benefit h4{ font-size:16px; font-weight:800; color:var(--ink); }
.benefit p{ font-size:12.5px; color:#9a9a9a; }

/* ===========================================================
   PROCESS
   =========================================================== */
.process-wrap{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:48px 30px 40px; position:relative;
}
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative; }
.process-line{
  position:absolute; top:24px; right:12%; left:12%; height:2px;
  border-top:2px dashed var(--amber); opacity:.55; z-index:0;
}
.step{ text-align:center; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px; }
.step .num{
  width:48px; height:48px; border-radius:50%; background:#fff; border:2px solid var(--amber);
  color:var(--amber); font-weight:800; font-size:18px;
  display:flex; align-items:center; justify-content:center;
}
.step .s-ic{
  width:64px; height:64px; border-radius:50%; background:var(--amber-soft);
  color:var(--amber); display:flex; align-items:center; justify-content:center;
}
.step h4{ font-size:17px; font-weight:800; color:var(--ink); }
.step p{ font-size:12.5px; color:#9a9a9a; max-width:200px; }

/* ===========================================================
   TESTIMONIALS
   =========================================================== */
.testi-layout{ display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:stretch; }
.testi-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.testi-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:24px 22px; display:flex; flex-direction:column; gap:14px;
}
.testi-card .quote{ color:var(--amber); font-size:34px; line-height:1; font-weight:800; }
.testi-card .body{ font-size:13.5px; color:#666; flex:1; }
.testi-person{ display:flex; align-items:center; gap:12px; flex-direction:row-reverse; }
.testi-person .avatar{ width:46px; height:46px; border-radius:50%; overflow:hidden; flex:none; }
.testi-person .meta{ text-align:right; }
.testi-person .meta b{ display:block; font-size:14px; color:var(--ink); font-weight:700; }
.testi-person .meta span{ font-size:12px; color:var(--muted); }
.stars{ display:flex; gap:3px; color:var(--star); }

.testi-feature{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:340px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.testi-feature.has-human-bg{
  background:
    linear-gradient(180deg, rgba(46,46,46,.12) 0%, rgba(46,46,46,.78) 100%),
    url("/images/keymaster-new/human.png") center top / cover no-repeat;
  box-shadow:var(--shadow-md);
}
.testi-feature .ph{ position:absolute; inset:0; border-radius:var(--radius-lg); height:auto; }
.testi-feature .cta{
  position:relative; z-index:2; margin:18px; background:var(--ink);
  border-radius:14px; padding:18px; text-align:center; color:#fff;
}
.testi-feature.has-human-bg .cta{
  background:rgba(46,46,46,.90);
  backdrop-filter:blur(6px);
}
.testi-feature .cta b{ display:block; font-size:15px; margin-bottom:12px; }
.btn-amber{
  display:inline-flex; align-items:center; gap:8px; flex-direction:row-reverse;
  background:var(--amber); color:#fff; font-weight:700; font-size:13.5px;
  padding:11px 18px; border-radius:11px;
}
.btn-amber:hover{ background:var(--amber-dark); }

/* ===========================================================
   BLOG + CONSULT
   =========================================================== */
.blog-consult{ display:grid; grid-template-columns:340px 1fr; gap:24px; align-items:stretch; }

.blog-box{
  background:var(--bg-gray); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px;
}
.blog-box .b-head{ text-align:right; margin-bottom:18px; }
.blog-box .b-head h3{ font-size:20px; font-weight:800; color:var(--ink); }
.blog-box .b-head span{ font-size:12.5px; color:var(--muted); }
.blog-item{
  display:flex; gap:12px; flex-direction:row-reverse; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px;
  margin-bottom:12px;
}
.blog-item .b-thumb{ width:64px; height:60px; flex:none; }
.blog-item .b-meta{ text-align:right; flex:1; }
.blog-item .b-meta h4{ font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.7; }
.blog-item .b-meta time{ font-size:11.5px; color:var(--muted); direction:ltr; display:inline-block; }
.blog-box .more-btn{
  width:100%; background:var(--amber); color:#fff; font-weight:700; font-size:13.5px;
  padding:12px; border-radius:12px; margin-top:4px;
}
.blog-box .more-btn:hover{ background:var(--amber-dark); }

.consult-box{
  background:var(--amber); border-radius:var(--radius-lg); padding:34px;
  position:relative; overflow:hidden; color:#fff;
}
.consult-grid{ display:grid; grid-template-columns:1fr 220px; gap:20px; align-items:center; }
.consult-form .c-head{ text-align:right; margin-bottom:20px; }
.consult-form .c-head h3{ font-size:24px; font-weight:800; }
.consult-form .c-head p{ font-size:13px; opacity:.92; }
.consult-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.field{
  width:100%; background:#fff; border:none; border-radius:12px; padding:14px 16px;
  font-family:inherit; font-size:13.5px; color:#444; text-align:right;
}
.field::placeholder{ color:#aaa; }
select.field{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 16px center;
}
textarea.field{ resize:none; min-height:96px; }
.submit-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-direction:row-reverse;
  width:100%; background:var(--ink); color:#fff; font-weight:700; font-size:14.5px;
  padding:15px; border-radius:12px; margin-top:4px;
}
.submit-btn:hover{ background:#1f1f1f; }
.consult-art{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:230px;
}
.consult-art .ph{ height:200px; background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); color:#fff; }
.consult-art .consult-image{
  width:min(100%, 220px);
  height:auto;
  max-height:300px;
  object-fit:contain;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.16));
}

/* ===========================================================
   FAQ
   =========================================================== */
.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; }
.faq-item{
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  flex-direction:row-reverse; gap:12px; padding:16px 20px; text-align:right;
  font-size:14.5px; font-weight:700; color:var(--ink);
}
.faq-q .chev{ color:var(--amber); display:flex; transition:transform .25s; flex:none; }
.faq-item.open .faq-q .chev{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p{ padding:0 20px 18px; font-size:13px; color:#777; }
.faq-item.open .faq-a{ max-height:240px; }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer{ background:var(--ink); color:#cfcfcf; padding:54px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1fr 1fr 1fr 1.4fr; gap:30px; }
.footer-col h4{ font-size:16px; font-weight:800; color:#fff; margin-bottom:20px; }
.footer-col ul li{ margin-bottom:13px; }
.footer-col ul a{ font-size:13.5px; color:#b6b6b6; transition:color .2s; }
.footer-col ul a:hover{ color:var(--amber); }
.contact-li{ display:flex; align-items:center; gap:10px; flex-direction:row-reverse; justify-content:flex-end; font-size:13.5px; color:#b6b6b6; margin-bottom:14px; }
.contact-li .c-ic{ color:var(--amber); display:flex; flex:none; }
.contact-li span[dir]{ direction:ltr; }

.footer-brand{ text-align:right; }
.footer-brand .brand{ justify-content:flex-end; margin-bottom:16px; }
.footer-brand .logo-text b{ color:#fff; }
.footer-brand p{ font-size:13px; color:#a8a8a8; line-height:2; margin-bottom:18px; }
.socials{ display:flex; gap:10px; justify-content:flex-end; }
.socials a{
  width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:#cfcfcf; transition:.2s;
}
.socials a:hover{ background:var(--amber); color:#fff; }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08); margin-top:46px;
}
.footer-bottom .wrap{
  display:flex; align-items:center; justify-content:space-between; height:62px;
  font-size:12.5px; color:#9a9a9a;
}
.footer-bottom a{ color:var(--amber); }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1024px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .benefits-grid{ grid-template-columns:repeat(3,1fr); gap:24px 0; }
  .benefit:nth-child(3n)+.benefit::before,
  .benefit + .benefit::before{ display:none; }
  .process-grid{ grid-template-columns:repeat(2,1fr); gap:30px; }
  .process-line{ display:none; }
  .testi-layout{ grid-template-columns:1fr; }
  .testi-cards{ grid-template-columns:repeat(3,1fr); }
  .blog-consult{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .header-inner{ height:auto; padding:14px 0; flex-wrap:wrap; gap:14px; }
  .main-nav{ order:3; width:100%; }
  .main-nav ul{ flex-wrap:wrap; gap:16px; justify-content:center; }
  .hero-inner{ grid-template-columns:1fr; gap:30px; padding:40px 0; }
  .hero-art{ order:-1; }
  .hero-copy h1{ font-size:34px; }
  .consult-grid{ grid-template-columns:1fr; }
  .consult-art{ display:none; }
}
@media (max-width:560px){
  .services-grid{ grid-template-columns:1fr; }
  .testi-cards{ grid-template-columns:1fr; }
  .faq-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .consult-form .row{ grid-template-columns:1fr; }
  .hero-copy h1{ font-size:28px; }
}

/* Laravel integration: dynamic images, section ordering and existing mobile menu */
.keymaster-new-home{
  display:flex;
  flex-direction:column;
  position:relative;
  isolation:isolate;
  background:var(--bg);
}
.keymaster-new-home::before{
  content:"";
  position:absolute;
  top:-66px;
  right:-58px;
  width:210px;
  height:145px;
  z-index:0;
  border-radius:0 0 48% 58% / 0 0 62% 54%;
  background:linear-gradient(135deg,#ffc44f 0%,#f5a623 100%);
  box-shadow:0 18px 44px rgba(245,166,35,.16);
  pointer-events:none;
}
.keymaster-new-home > *{
  position:relative;
  z-index:1;
}
.hero-photo,
.service-card .thumb,
.blog-item .b-thumb,
.testi-feature .ph,
.consult-art .ph{
  object-fit:cover;
  object-position:center;
}
.hero-art .hero-photo{
  width:100%;
  height:360px;
  padding:0;
  border-style:solid;
  border-color:var(--line);
  
}
.service-card .thumb{
  border-radius:14px;
  background:var(--amber-pale);
}
.testi-person .avatar{
  object-fit:cover;
}
.blog-box .more-btn{
  display:flex;
  align-items:center;
  justify-content:center;
}
.consult-form .row.single-row{
  grid-template-columns:1fr;
}
.consult-art .ph,
.testi-feature .ph{
  width:100%;
  height:100%;
  padding:0;
  border:0;
}
.logo-mark .brand-image{
  width:46px;
  height:46px;
  object-fit:contain;
  border-radius:12px;
}
.theme-btn.offcanvas-trigger{
  display:none;
}
.smart-contact{
  z-index:80;
}
@media (max-width:820px){
  .phone-btn{ display:none; }
  .main-nav{ display:none; }
  .theme-btn.offcanvas-trigger{
    display:inline-flex;
    width:46px;
    height:46px;
    margin-right:20px;
    border-radius:12px;
    background:#fff;
    border:1px solid var(--line);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    box-shadow:var(--shadow-sm);
  }
  .theme-btn.offcanvas-trigger span{
    width:20px;
    height:2px;
    border-radius:2px;
    background:var(--ink);
  }
}
@media (max-width:560px){
  .wrap{ padding-inline:16px; }
  .hero-art .hero-photo{ height:210px; }
  .benefits-grid{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:1fr; }
}
@media (max-width: 560px) {
    
.hero-art .hero-photo {
        height: 210px !important;
    }
}

/* Final specificity layer over the previous KeyMaster skin */
body.keymaster-layout .site-header{
  background:var(--bg) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:none !important;
  padding:0 !important;
}
body.keymaster-layout .site-header .header-inner{
  height:84px !important;
  width:100% !important;
  padding:0 !important;
}
body.keymaster-layout .site-header .brand{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
body.keymaster-layout .site-header .main-nav ul{
  display:flex !important;
  align-items:center !important;
  gap:30px !important;
}
body.keymaster-layout .site-header .main-nav a{
  color:#5a5a5a !important;
  font-size:15px !important;
  font-weight:600 !important;
}
body.keymaster-layout .site-header .main-nav a.active,
body.keymaster-layout .site-header .main-nav a:hover{
  color:var(--ink) !important;
}
body.keymaster-layout .keymaster-new-home .section{
  padding:30px 0 !important;
  margin:0 !important;
  width:100% !important;
  max-width:none !important;
  border:0 !important;
  box-shadow:none !important;
}
body.keymaster-layout .keymaster-new-home .section.gray{
  background:var(--bg-gray) !important;
}
body.keymaster-layout .keymaster-new-home .wrap,
body.keymaster-layout .site-footer .wrap,
body.keymaster-layout .site-header .wrap{
  max-width:var(--maxw) !important;
  width:100% !important;
  margin-inline:auto !important;
  padding-inline:24px !important;
}
body.keymaster-layout .keymaster-new-home :is(.services-grid,.benefits-grid,.process-grid,.testi-cards,.blog-consult,.faq-grid,.consult-grid,.footer-grid){
  direction:rtl !important;
}
body.keymaster-layout .keymaster-new-home .services-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:24px !important;
}

body.keymaster-layout .keymaster-new-home .service-card,
body.keymaster-layout .keymaster-new-home .benefits-wrap,
body.keymaster-layout .keymaster-new-home .process-wrap,
body.keymaster-layout .keymaster-new-home .testi-card,
body.keymaster-layout .keymaster-new-home .blog-box,
body.keymaster-layout .keymaster-new-home .faq-item{
  background:#fff !important;
  border:1px solid #ececec !important;
  box-shadow:0 14px 38px rgba(0,0,0,.07) !important;
}

body.keymaster-layout .keymaster-new-home .service-card:hover,
body.keymaster-layout .keymaster-new-home .testi-card:hover,
body.keymaster-layout .keymaster-new-home .faq-item:hover{
  box-shadow:0 18px 44px rgba(0,0,0,.10) !important;
  border-color:#e2e2e2 !important;
}

body.keymaster-layout .keymaster-new-home .service-card .card-arrow{
  box-shadow:0 10px 22px rgba(0,0,0,.12) !important;
}

body.keymaster-layout .keymaster-new-home .service-card .thumb{
  box-shadow:none !important;
  border:0 !important;
}

body.keymaster-layout .keymaster-new-home .service-card::before,
body.keymaster-layout .keymaster-new-home .service-card::after{
  display:none !important;
}

body.keymaster-layout .keymaster-new-home .benefits-grid{
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
}
body.keymaster-layout .keymaster-new-home .process-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
}
body.keymaster-layout .keymaster-new-home .testi-cards{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
}
body.keymaster-layout .keymaster-new-home .faq-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
}
body.keymaster-layout .site-footer{
  background:var(--ink) !important;
  color:#cfcfcf !important;
  padding:54px 0 0 !important;
}
body.keymaster-layout .site-footer .footer-grid{
  display:grid !important;
  direction:rtl !important;
  grid-template-columns:1fr 1fr 1fr 1.4fr !important;
  gap:30px !important;
}
@media (max-width:1024px){
  body.keymaster-layout .keymaster-new-home .services-grid{ grid-template-columns:repeat(2,1fr) !important; }
  body.keymaster-layout .keymaster-new-home .benefits-grid{ grid-template-columns:repeat(3,1fr) !important; gap:24px 0 !important; }
  body.keymaster-layout .keymaster-new-home .process-grid{ grid-template-columns:repeat(2,1fr) !important; gap:30px !important; }
  body.keymaster-layout .site-footer .footer-grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:820px){
  body.keymaster-layout .site-header .header-inner{
    height:auto !important;
    padding:14px 0 !important;
    flex-wrap:wrap !important;
  }
  body.keymaster-layout .site-header .main-nav{
    display:none !important;
  }
  body.keymaster-layout .site-header .main-nav ul{
    display:none !important;
  }
  body.keymaster-layout .keymaster-new-home .hero-inner{
    grid-template-columns:1fr !important;
  }
}
@media (max-width:560px){
  body.keymaster-layout .keymaster-new-home .services-grid,
  body.keymaster-layout .keymaster-new-home .testi-cards,
  body.keymaster-layout .keymaster-new-home .faq-grid,
  body.keymaster-layout .site-footer .footer-grid,
  body.keymaster-layout .keymaster-new-home .consult-form .row{
    grid-template-columns:1fr !important;
  }
  body.keymaster-layout .keymaster-new-home .benefits-grid,
  body.keymaster-layout .keymaster-new-home .process-grid{
    grid-template-columns:1fr !important;
  }
}

/* Simple hero blob restored */
body.keymaster-layout .keymaster-new-home .hero{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  background:#ffffff00 !important;
}

body.keymaster-layout .keymaster-new-home .hero::before{
  display:none !important;
}

body.keymaster-layout .keymaster-new-home .hero::after{
  display:none !important;
}

body.keymaster-layout .keymaster-new-home .hero .hero-blob{
  display:none !important;
}

body.keymaster-layout .keymaster-new-home .hero .hero-dots,
body.keymaster-layout .keymaster-new-home .hero .hero-inner{
  position:relative !important;
  z-index:2 !important;
}

body.keymaster-layout .keymaster-new-home .hero .hero-dots{
  right:auto !important;
  left:18vw !important;
  opacity:.32 !important;
}

body.keymaster-layout .keymaster-new-home .hero .hero-inner{
  grid-template-columns:1fr 1.05fr !important;
  gap:10px !important;
}

body.keymaster-layout .keymaster-new-home .hero .hero-copy{
  max-width:540px !important;
}

body.keymaster-layout .keymaster-new-home .hero .hero-art .hero-photo{
  height:330px;
  border-radius:0px !important;
  box-shadow:0 !important;
 
  border:0 !important;
  padding:0 !important;
}

body.keymaster-layout .keymaster-new-home .hero .hero-inner{
  padding:28px 0 24px !important;
  min-height:0 !important;
}

body.keymaster-layout .keymaster-new-home .hero{
  min-height:0 !important;
}

body.keymaster-layout .keymaster-new-home .hero + .section{
  padding-top:18px !important;
}

body.keymaster-layout .keymaster-new-home .hero + .section .sec-head{
  margin-bottom:26px !important;
}

@media (max-width:820px){
  .keymaster-new-home::before{
    top:-48px;
    right:-54px;
    width:160px;
    height:108px;
  }

  body.keymaster-layout .keymaster-new-home .hero::after{
    display:none !important;
  }

  body.keymaster-layout .keymaster-new-home .hero .hero-inner{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
}

/* Final spacing trim: services should sit right after hero */
body.keymaster-layout .keymaster-new-home .hero{
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
      margin-top: -90px !important;
}

body.keymaster-layout .keymaster-new-home .hero .hero-inner{
  min-height:0 !important;
  padding-top:10px !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

body.keymaster-layout .keymaster-new-home .hero .hero-badges{
  margin-bottom:0 !important;
}

body.keymaster-layout .keymaster-new-home .hero + .section{
  padding-top:0 !important;
  margin-top:0 !important;
  
}

body.keymaster-layout .keymaster-new-home .hero + .section .sec-head{
  margin-top:0 !important;
  margin-bottom:16px !important;
}

/* Keep mobile offcanvas completely hidden until the hamburger opens it */
body.keymaster-layout .site-offcanvas[aria-hidden="true"],
body.keymaster-layout .site-offcanvas:not(.is-open):not([aria-hidden="false"]){
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(110%) !important;
  right:0 !important;
}

body.keymaster-layout.offcanvas-open .site-offcanvas,
body.keymaster-layout .site-offcanvas.is-open,
body.keymaster-layout .site-offcanvas[aria-hidden="false"]{
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* Mobile: keep the offcanvas brand/content fully hidden until the menu is opened. */
@media (max-width: 820px){
  body.keymaster-layout .site-offcanvas[aria-hidden="true"]{
    width:0 !important;
    height:0 !important;
    max-width:0 !important;
    max-height:0 !important;
    overflow:hidden !important;
    clip-path:inset(50%) !important;
    inset:auto 0 auto auto !important;
    transform:translateX(120%) !important;
  }

  body.keymaster-layout .site-offcanvas[aria-hidden="true"] .offcanvas-scroll,
  body.keymaster-layout .site-offcanvas[aria-hidden="true"] .offcanvas-brand,
  body.keymaster-layout .site-offcanvas[aria-hidden="true"] .offcanvas-cta{
    display:none !important;
  }

  body.keymaster-layout .site-offcanvas[aria-hidden="false"],
  body.keymaster-layout .site-offcanvas.is-open,
  body.keymaster-layout.offcanvas-open .site-offcanvas{
    width:min(86vw, 360px) !important;
    height:100dvh !important;
    max-width:min(86vw, 360px) !important;
    max-height:100dvh !important;
    overflow:visible !important;
    clip-path:none !important;
    transform:translateX(0) !important;
  }

  body.keymaster-layout .site-offcanvas[aria-hidden="false"] .offcanvas-scroll,
  body.keymaster-layout .site-offcanvas[aria-hidden="false"] .offcanvas-brand,
  body.keymaster-layout .site-offcanvas[aria-hidden="false"] .offcanvas-cta,
  body.keymaster-layout .site-offcanvas.is-open .offcanvas-scroll,
  body.keymaster-layout .site-offcanvas.is-open .offcanvas-brand,
  body.keymaster-layout .site-offcanvas.is-open .offcanvas-cta{
    display:flex !important;
  }

  body.keymaster-layout .site-offcanvas[aria-hidden="false"] .offcanvas-scroll,
  body.keymaster-layout .site-offcanvas.is-open .offcanvas-scroll{
    flex-direction:column !important;
  }
}

/* Compact process section */
body.keymaster-layout .keymaster-new-home .process-wrap{
  padding:28px 24px 26px !important;
  border-radius:18px !important;
}

body.keymaster-layout .keymaster-new-home .process-grid{
  gap:12px !important;
}

body.keymaster-layout .keymaster-new-home .process-line{
  top:18px !important;
  right:14% !important;
  left:14% !important;
  border-top-width:1px !important;
}

body.keymaster-layout .keymaster-new-home .step{
  gap:9px !important;
}

body.keymaster-layout .keymaster-new-home .step .num{
  width:38px !important;
  height:38px !important;
  border-width:1.5px !important;
  font-size:15px !important;
}

body.keymaster-layout .keymaster-new-home .step .s-ic{
  width:48px !important;
  height:48px !important;
}

body.keymaster-layout .keymaster-new-home .step .s-ic svg{
  width:27px !important;
  height:27px !important;
}

body.keymaster-layout .keymaster-new-home .step h4{
  font-size:15px !important;
  line-height:1.6 !important;
}

body.keymaster-layout .keymaster-new-home .step p{
  max-width:180px !important;
  font-size:11.5px !important;
  line-height:1.9 !important;
}

@media (max-width: 1024px){
  body.keymaster-layout .keymaster-new-home .process-wrap{
    padding:24px 18px !important;
  }
}

@media (max-width: 560px){
  body.keymaster-layout .keymaster-new-home .process-wrap{
    padding:20px 16px !important;
  }

  body.keymaster-layout .keymaster-new-home .step{
    gap:7px !important;
  }
}

/* Hard stop for the duplicate mobile logo leaking from the offcanvas menu. */
@media (max-width: 820px){
  body.keymaster-layout:not(.offcanvas-open) .site-offcanvas,
  body.keymaster-layout .site-offcanvas[aria-hidden="true"]:not(.is-open){
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    width:0 !important;
    height:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }

  body.keymaster-layout.offcanvas-open .site-offcanvas,
  body.keymaster-layout .site-offcanvas.is-open,
  body.keymaster-layout .site-offcanvas[aria-hidden="false"]{
    display:flex !important;
  }
}

/* Mobile header logo must stay inside the header, not leak over the hero. */
@media (max-width: 820px){
  body.keymaster-layout .site-header .header-inner{
    position:relative !important;
    display:grid !important;
    grid-template-columns:64px minmax(0, 1fr) 64px !important;
    align-items:center !important;
    justify-items:center !important;
    min-height:74px !important;
    height:74px !important;
    padding:0 14px !important;
    overflow:hidden !important;
  }

  body.keymaster-layout .site-header .brand{
    position:static !important;
    inset:auto !important;
    transform:none !important;
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:center !important;
    align-self:center !important;
    width:auto !important;
    max-width:190px !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    z-index:2 !important;
  }

  body.keymaster-layout .site-header .theme-btn.offcanvas-trigger,
  body.keymaster-layout .site-header .offcanvas-trigger{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:end !important;
    margin:0 20px 0 0 !important;
  }

  body.keymaster-layout .keymaster-new-home .hero .brand,
  body.keymaster-layout .keymaster-new-home .hero .logo-mark,
  body.keymaster-layout .keymaster-new-home .hero .logo-text{
    display:none !important;
  }
}