/* ==========================================================================
   Kutchina / Gita Enterprise - landing page design system
   Managed by Novamira. Paired with kmodu-design.php.
   ========================================================================== */

:root{
  --km-brand:#1B5D7F;
  --km-brand-dark:#12455F;
  --km-brand-soft:#EAF2F6;
  --km-accent:#DC7000;
  --km-accent-dark:#B85D00;
  --km-ink:#16232B;
  --km-muted:#55666F;
  --km-line:#E3EAEE;
  --km-radius:14px;
  --km-shadow:0 1px 2px rgba(16,35,45,.05), 0 8px 24px rgba(16,35,45,.06);
  --km-hero:url("https://kutchinamodularskitchen.com/wp-content/uploads/2024/12/modern-kitchen-design-interior-1-scaled.jpg");
  --km-scrim:linear-gradient(100deg, rgba(8,38,54,.90) 0%, rgba(8,38,54,.70) 52%, rgba(8,38,54,.44) 100%);
}

/* --------------------------------------------------------------------------
   1. Hero banner
   -------------------------------------------------------------------------- */
.kmodu-hero{
  background-image:var(--km-scrim), var(--km-hero);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  padding:74px 24px 70px !important;
}
.kmodu-hero .kmodu-hero-inner{
  max-width:1140px;
  margin:0 auto;
  color:#fff;
}
.kmodu-hero .km-eyebrow{
  display:inline-block;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.30);
  padding:6px 15px;
  border-radius:999px;
  margin:0 0 18px;
  color:#fff;
}
.kmodu-hero h1{
  color:#fff !important;
  font-size:clamp(28px, 4vw, 46px);
  line-height:1.15;
  font-weight:700;
  margin:0 0 16px;
  max-width:22ch;
  letter-spacing:-.01em;
}
.kmodu-hero .km-lead{
  color:rgba(255,255,255,.93) !important;
  font-size:clamp(15px, 1.35vw, 18px);
  line-height:1.65;
  max-width:64ch;
  margin:0 0 26px;
}
.kmodu-hero .km-lead strong{ color:#fff; font-weight:600; }

.km-btns{ display:flex; flex-wrap:wrap; gap:12px; }
.km-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 26px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  line-height:1;
  text-decoration:none !important;
  transition:transform .16s ease, background .16s ease, color .16s ease;
  border:1.5px solid transparent;
}
.km-btn-primary{
  background:var(--km-accent);
  color:#fff !important;
  box-shadow:0 6px 18px rgba(220,112,0,.30);
}
.km-btn-primary:hover{ background:var(--km-accent-dark); color:#fff !important; transform:translateY(-1px); }
.km-btn-ghost{
  background:rgba(255,255,255,.10);
  color:#fff !important;
  border-color:rgba(255,255,255,.55);
}
.km-btn-ghost:hover{ background:#fff; color:var(--km-brand) !important; transform:translateY(-1px); }

.km-trust{
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  margin-top:26px;
  color:rgba(255,255,255,.86);
  font-size:14px;
}
.km-trust span{ display:inline-flex; align-items:center; gap:8px; }
.km-trust span::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--km-accent);
  flex:0 0 auto;
}

/* compact variant for utility pages - banner only, no CTAs */
.kmodu-hero-compact{ padding:52px 24px 48px !important; }
.kmodu-hero-compact h1{ margin-bottom:12px; }
.kmodu-hero-compact .km-lead{ margin-bottom:0; }

/* breadcrumb sitting inside the hero */
.kmodu-hero .kmodu-breadcrumb{
  color:rgba(255,255,255,.72) !important;
  margin:0 0 16px !important;
}
.kmodu-hero .kmodu-breadcrumb a{ color:rgba(255,255,255,.82) !important; text-decoration:none; }
.kmodu-hero .kmodu-breadcrumb a:hover{ color:#fff !important; text-decoration:underline; }
.kmodu-hero .kmodu-breadcrumb span{ color:rgba(255,255,255,.5) !important; }

/* --------------------------------------------------------------------------
   2. Body content
   -------------------------------------------------------------------------- */
.kmodu-body{ padding:52px 24px 10px !important; }

.kmodu-rich,
.klb-page .klb-post{
  max-width:1140px;
  margin:0 auto;
  color:var(--km-ink);
  font-size:17px;
  line-height:1.75;
}
.kmodu-rich > p{ margin:0 0 18px; }

.kmodu-rich h2,
.klb-page .klb-post h2{
  font-size:clamp(22px, 2.4vw, 30px);
  line-height:1.25;
  font-weight:700;
  color:var(--km-brand-dark);
  margin:46px 0 16px;
  padding-top:24px;
  border-top:1px solid var(--km-line);
  position:relative;
}
.kmodu-rich h2::after,
.klb-page .klb-post h2::after{
  content:"";
  position:absolute;
  top:-2px; left:0;
  width:56px; height:3px;
  background:var(--km-accent);
  border-radius:2px;
}
.kmodu-rich h3{
  font-size:19px;
  font-weight:600;
  color:var(--km-brand-dark);
  margin:28px 0 10px;
  line-height:1.4;
}

.kmodu-rich ul, .kmodu-rich ol{ margin:0 0 22px; padding-left:0; list-style:none; }
.kmodu-rich ul > li{ position:relative; padding-left:26px; margin-bottom:11px; }
.kmodu-rich ul > li::before{
  content:"";
  position:absolute; left:4px; top:11px;
  width:7px; height:7px;
  background:var(--km-accent);
  transform:rotate(45deg);
  border-radius:2px;
}
.kmodu-rich ol{ counter-reset:km-ol; }
.kmodu-rich ol > li{ position:relative; padding-left:40px; margin-bottom:14px; counter-increment:km-ol; }
.kmodu-rich ol > li::before{
  content:counter(km-ol);
  position:absolute; left:0; top:1px;
  width:27px; height:27px;
  border-radius:50%;
  background:var(--km-brand-soft);
  color:var(--km-brand);
  font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

.kmodu-rich a{
  color:var(--km-brand);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.kmodu-rich a:hover{ color:var(--km-accent); }

/* --------------------------------------------------------------------------
   3. Tables
   -------------------------------------------------------------------------- */
.kmodu-tw{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:24px 0 28px;
  background:#fff;
  border:1px solid var(--km-line);
  border-radius:var(--km-radius);
  box-shadow:var(--km-shadow);
}
.kmodu-tw table{
  width:100%;
  min-width:580px;
  border-collapse:collapse;
  font-size:15.5px;
  margin:0;
}
.kmodu-tw thead th{
  background:var(--km-brand);
  color:#fff;
  text-align:left;
  font-weight:600;
  padding:14px 16px;
  border:0;
  line-height:1.35;
}
.kmodu-tw tbody td{
  padding:13px 16px;
  border:0;
  border-top:1px solid var(--km-line);
  vertical-align:top;
  line-height:1.6;
}
.kmodu-tw tbody tr:nth-child(even){ background:#FAFCFD; }
.kmodu-tw tbody tr:hover{ background:var(--km-brand-soft); }
.kmodu-tw tbody td:first-child{ font-weight:600; color:var(--km-brand-dark); }
.kmodu-tw::-webkit-scrollbar{ height:8px; }
.kmodu-tw::-webkit-scrollbar-thumb{ background:#C9D8E0; border-radius:99px; }

/* --------------------------------------------------------------------------
   4. FAQ cards
   -------------------------------------------------------------------------- */
.kmodu-faq{ display:grid; gap:12px; margin:20px 0 8px; }
.kmodu-faq-item{
  background:#fff;
  border:1px solid var(--km-line);
  border-radius:var(--km-radius);
  padding:20px 22px;
  box-shadow:var(--km-shadow);
}
.kmodu-faq-item h3{
  margin:0 0 8px;
  font-size:17px;
  line-height:1.4;
  color:var(--km-brand-dark);
  padding-left:30px;
  position:relative;
}
.kmodu-faq-item h3::before{
  content:"?";
  position:absolute; left:0; top:1px;
  width:21px; height:21px;
  border-radius:50%;
  background:var(--km-brand);
  color:#fff;
  font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.kmodu-faq-item p{
  margin:0;
  color:#4E606B;
  font-size:15.5px;
  line-height:1.72;
}

/* --------------------------------------------------------------------------
   5. Closing CTA band
   -------------------------------------------------------------------------- */
.kmodu-ctaband{
  background:var(--km-brand) !important;
  padding:48px 24px !important;
  margin-top:56px;
}
.kmodu-ctaband .kmodu-ctaband-inner{
  max-width:840px;
  margin:0 auto;
  color:#fff;
  text-align:center;
}
.kmodu-ctaband h2{
  color:#fff !important;
  font-size:clamp(21px, 2.2vw, 29px);
  line-height:1.25;
  font-weight:700;
  margin:0 0 12px;
  border:0;
  padding:0;
}
.kmodu-ctaband h2::after{ display:none; }
.kmodu-ctaband p{
  color:rgba(255,255,255,.86) !important;
  margin:0 0 24px;
  font-size:16px;
  line-height:1.7;
}
.kmodu-ctaband a:not(.km-btn){ color:#fff !important; text-decoration:underline; }
.kmodu-ctaband .km-btns{ justify-content:center; }

/* --------------------------------------------------------------------------
   6. Page banner for ordinary (non-Elementor) pages
   -------------------------------------------------------------------------- */
.klb-page .klb-page-title{
  background-image:var(--km-scrim), var(--km-hero);
  background-size:cover;
  background-position:center center;
  border-radius:var(--km-radius);
  color:#fff;
  padding:58px 32px;
  margin:0 0 30px;
  font-size:clamp(24px, 3vw, 36px);
  line-height:1.2;
  font-weight:700;
  text-align:center;
  box-shadow:var(--km-shadow);
}
.klb-page .klb-post > .kmodu-breadcrumb{ margin-bottom:22px !important; }
.klb-page .klb-post table{
  width:100%;
  border-collapse:collapse;
  margin:22px 0;
  font-size:15.5px;
}
.klb-page .klb-post thead th{
  background:var(--km-brand);
  color:#fff;
  text-align:left;
  padding:13px 15px;
}
.klb-page .klb-post tbody td{ padding:12px 15px; border-top:1px solid var(--km-line); }

/* --------------------------------------------------------------------------
   6b. Section bands, card grids and link grids (homepage)
   -------------------------------------------------------------------------- */
.kmodu-band{ padding:54px 24px !important; }
.kmodu-band-soft{ background:#F5F9FB !important; }
.kmodu-band-line{ border-top:1px solid var(--km-line); }
.kmodu-band .kmodu-rich{ max-width:1140px; }

.km-sec-head{ max-width:1140px; margin:0 auto 26px; }
.km-sec-head h2{
  font-size:clamp(22px, 2.4vw, 30px);
  line-height:1.25;
  font-weight:700;
  color:var(--km-brand-dark);
  margin:0 0 10px;
  padding:0;
  border:0;
}
.km-sec-head h2::after{ display:none; }
.km-sec-head p{ margin:0; color:#4E606B; font-size:16.5px; line-height:1.7; max-width:70ch; }

.km-grid{
  max-width:1140px;
  margin:0 auto;
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(255px, 1fr));
}
.km-grid-4{ grid-template-columns:repeat(auto-fit, minmax(215px, 1fr)); }
.km-card{
  background:#fff;
  border:1px solid var(--km-line);
  border-radius:var(--km-radius);
  padding:24px 22px;
  box-shadow:var(--km-shadow);
  display:flex;
  flex-direction:column;
}
.km-card h3{
  margin:0 0 8px;
  font-size:17.5px;
  font-weight:650;
  color:var(--km-brand-dark);
  line-height:1.35;
}
.km-card p{ margin:0; color:#4E606B; font-size:15.5px; line-height:1.68; }
.km-card p + p{ margin-top:10px; }
.km-card a{ color:var(--km-brand); font-weight:600; text-decoration:none; }
.km-card a:hover{ color:var(--km-accent); text-decoration:underline; }
.km-card .km-num{
  width:34px; height:34px;
  border-radius:10px;
  background:var(--km-brand-soft);
  color:var(--km-brand);
  font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.km-card .km-stat{
  font-size:28px; font-weight:700; color:var(--km-brand);
  line-height:1.1; margin:0 0 6px;
}

.km-linkgrid{
  max-width:1140px;
  margin:0 auto;
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  list-style:none;
  padding:0;
}
.km-linkgrid li{ margin:0; padding:0; }
.km-linkgrid li::before{ display:none !important; }
.km-linkgrid a{
  display:block;
  background:#fff;
  border:1px solid var(--km-line);
  border-left:3px solid var(--km-accent);
  border-radius:10px;
  padding:14px 16px;
  text-decoration:none !important;
  color:var(--km-brand-dark) !important;
  font-weight:600;
  font-size:15.5px;
  transition:.16s ease;
}
.km-linkgrid a span{ display:block; font-weight:400; font-size:14px; color:#5E7079; margin-top:3px; }
.km-linkgrid a:hover{ border-color:var(--km-brand); box-shadow:var(--km-shadow); transform:translateY(-1px); }

/* --------------------------------------------------------------------------
   6c. Map embeds and enquiry form
   -------------------------------------------------------------------------- */
.km-maps{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  margin:22px 0 8px;
}
.km-map{
  background:#fff;
  border:1px solid var(--km-line);
  border-radius:var(--km-radius);
  overflow:hidden;
  box-shadow:var(--km-shadow);
}
.km-map h3{ margin:0; padding:14px 18px; font-size:16px; color:var(--km-brand-dark); border-bottom:1px solid var(--km-line); }
.km-map iframe{ display:block; width:100%; border:0; }

.km-formwrap{
  background:#fff;
  border:1px solid var(--km-line);
  border-radius:var(--km-radius);
  box-shadow:var(--km-shadow);
  padding:26px 24px;
  margin:20px 0 10px;
}
.km-formwrap .wpcf7-form p{ margin:0 0 14px; }
.km-formwrap label{ display:block; font-weight:600; font-size:14.5px; color:var(--km-brand-dark); margin-bottom:6px; }
.km-formwrap input[type=text],
.km-formwrap input[type=email],
.km-formwrap input[type=tel],
.km-formwrap input[type=url],
.km-formwrap input[type=number],
.km-formwrap select,
.km-formwrap textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid #D6E0E6;
  border-radius:10px;
  font-size:15.5px;
  font-family:inherit;
  color:var(--km-ink);
  background:#FCFDFE;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.km-formwrap textarea{ min-height:130px; resize:vertical; }
.km-formwrap input:focus,
.km-formwrap select:focus,
.km-formwrap textarea:focus{
  outline:none;
  border-color:var(--km-brand);
  box-shadow:0 0 0 3px rgba(27,93,127,.14);
  background:#fff;
}
.km-formwrap input[type=submit],
.km-formwrap .wpcf7-submit{
  width:auto;
  background:var(--km-accent);
  color:#fff;
  border:0;
  border-radius:999px;
  padding:14px 30px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(220,112,0,.28);
  transition:.16s ease;
}
.km-formwrap input[type=submit]:hover,
.km-formwrap .wpcf7-submit:hover{ background:var(--km-accent-dark); transform:translateY(-1px); }
.km-formwrap .wpcf7-not-valid-tip{ color:#C0392B; font-size:13.5px; margin-top:5px; }
.km-formwrap .wpcf7-response-output{
  border-radius:10px;
  border-width:1px !important;
  padding:12px 15px !important;
  margin:14px 0 0 !important;
  font-size:14.5px;
}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .kmodu-hero{ padding:58px 22px 54px !important; }
  .kmodu-body{ padding:42px 22px 8px !important; }
}
@media (max-width:782px){
  .kmodu-hero{ padding:46px 18px 44px !important; background-position:60% center; }
  .kmodu-hero h1{ max-width:none; }
  .kmodu-hero .km-lead{ margin-bottom:22px; }
  .km-btn{ padding:13px 20px; font-size:14.5px; flex:1 1 auto; }
  .km-trust{ gap:8px 18px; font-size:13px; }
  .kmodu-body{ padding:34px 18px 6px !important; }
  .kmodu-rich, .klb-page .klb-post{ font-size:16px; }
  .kmodu-rich h2, .klb-page .klb-post h2{ margin-top:36px; }
  .kmodu-tw table{ min-width:520px; font-size:14.5px; }
  .kmodu-faq-item{ padding:17px 18px; }
  .kmodu-ctaband{ padding:38px 18px !important; margin-top:42px; }
  .klb-page .klb-page-title{ padding:40px 22px; }
  .kmodu-band{ padding:38px 18px !important; }
  .km-card{ padding:20px 18px; }
  .km-grid, .km-linkgrid{ gap:12px; }
}