/*
 Theme Name:   GeneratePress Child — Kawartha ICF
 Theme URI:    https://kawarthaicf.ca
 Description:  Child theme for Kawartha ICF and Contracting Inc.
 Author:        Kawartha ICF and Contracting Inc.
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  generatepress-child
*/

/* ============================================================
   TABLE OF CONTENTS
   1.  CSS Variables
   2.  GeneratePress Overrides
   3.  Top Bar
   4.  Header & Navigation
   5.  Hero Section
   6.  Feature Strip
   7.  Shared Utilities
   8.  ICF Specialist Section
   9.  Services Section
   10. Suppliers Section
   11. Service Area Section
   12. Testimonial Section
   13. CTA Band
   14. Page Hero (inner pages)
   15. Contact / Quote Form
   16. Projects Index
   17. Project Detail Pages
   18. About Page
   19. Footer
   20. Responsive — Tablet (max 1024px)
   21. Responsive — Mobile (max 768px)
   22. Responsive — Small Mobile (max 480px)
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES
   ============================================================ */

:root {
  --ink:        #1A1F1E;
  --navy:       #1E3A6E;
  --navy-dark:  #162d55;
  --sage:       #8BAB6E;
  --paper:      #F6F3EE;
  --warm:       #EDE8DF;
  --stone:      #C2BDB3;
  --gold:       #C9952A;
  --gold-light: #E8B84B;
  --white:      #FFFFFE;
}


/* ============================================================
   2. GENERATEPRESS OVERRIDES
   ============================================================ */

.inside-article,
.entry-content,
.entry-header,
.entry-footer {
  padding: 0 !important;
  margin: 0 !important;
}
.site-main { margin: 0 !important; }
.page .inside-article,
.page .entry-content { max-width: 100% !important; width: 100% !important; }
.page .grid-container { max-width: 100% !important; padding: 0 !important; }
.page .entry-header { display: none !important; }
.site-header { box-shadow: none !important; }
.wp-block-button__link,
button { border-radius: 0 !important; }
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus { background: transparent !important; }
.generate-section .inside-section { padding: 0 !important; }
.site-content { padding: 0 !important; }
.content-area { padding: 0 !important; }
.page .entry-content > p:empty,
.page .entry-content > br { display: none !important; }


/* ============================================================
   3. TOP BAR
   ============================================================ */

.ki-top-bar {
  background: var(--navy) !important;
  padding: 8px 52px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ki-top-bar-left {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.5px;
}
.ki-top-bar-right {
  display: flex;
  gap: 20px;
  align-items: center;
}
.ki-top-bar-right a {
  font-size: 11px !important;
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
  transition: color 0.2s;
}
.ki-top-bar-right a:hover { color: var(--gold-light) !important; }
.ki-top-bar-sep {
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,0.2);
}


/* ============================================================
   4. HEADER & NAVIGATION
   ============================================================ */

.site-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--stone) !important;
  box-shadow: none !important;
  padding: 16px 52px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.site-header .site-logo,
.site-header .custom-logo-link {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
}
.site-header .custom-logo,
.site-header .site-logo img {
  height: 108px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
}
.main-navigation {
  width: 100% !important;
  border-top: 1px solid var(--stone) !important;
  background: transparent !important;
}
.main-navigation .main-nav ul {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
}
.main-navigation .main-nav ul li { margin: 0 !important; padding: 0 !important; }
.main-navigation .main-nav ul li a {
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(26,31,30,0.6) !important;
  padding: 13px 30px !important;
  display: flex !important;
  align-items: center !important;
  transition: color 0.2s !important;
  border-right: 1px solid var(--stone) !important;
  white-space: nowrap !important;
  background: transparent !important;
  text-decoration: none !important;
}
.main-navigation .main-nav ul li:first-child > a {
  border-left: 1px solid var(--stone) !important;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--navy) !important;
  background: transparent !important;
}
.main-navigation .main-nav ul li.nav-cta > a {
  background: var(--gold) !important;
  color: white !important;
  border-right-color: transparent !important;
  border-left-color: transparent !important;
}
.main-navigation .main-nav ul li.nav-cta > a:hover {
  background: var(--gold-light) !important;
  color: var(--ink) !important;
}

/* Current page highlighting for regular nav items */
.main-navigation .main-nav ul li.current-menu-item:not(.nav-cta) > a,
.main-navigation .main-nav ul li.current-menu-ancestor:not(.nav-cta) > a,
.main-navigation .main-nav ul li.current-page-ancestor:not(.nav-cta) > a {
  color: var(--navy) !important;
  font-weight: 500 !important;
  background: transparent !important;
}

/* ============================================================
   5. HERO SECTION
   ============================================================ */

.ki-hero {
  position: relative !important;
  min-height: 82vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background-size: cover !important;
  background-position: center 30% !important;
  background-repeat: no-repeat !important;
}
.ki-hero-overlay {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(to top, rgba(26,31,30,0.85) 0%, rgba(26,31,30,0.3) 55%, rgba(26,31,30,0.05) 100%) !important;
}
.ki-hero-inner {
  position: relative !important;
  z-index: 2 !important;
  padding: 0 72px 64px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 48px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ki-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 18px;
  font-family: 'IBM Plex Sans', sans-serif;
}
.ki-hero-tag::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--sage);
}
.ki-hero-h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(42px, 5.5vw, 78px) !important;
  line-height: 1.05 !important;
  color: white !important;
  margin-bottom: 18px !important;
  margin-top: 0 !important;
}
.ki-hero-h1 em { font-style: italic !important; color: #A8D48A !important; }
.ki-hero-desc {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.65);
  max-width: 440px;
  font-weight: 300;
  margin-bottom: 30px;
  font-family: 'IBM Plex Sans', sans-serif;
}
.ki-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.ki-btn-navy {
  display: inline-block !important;
  background: var(--navy) !important;
  color: white !important;
  padding: 14px 30px !important;
  font-size: 13px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  border: none !important;
  transition: background 0.2s !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border-radius: 0 !important;
}
.ki-btn-navy:hover { background: var(--navy-dark) !important; color: white !important; }
.ki-btn-outline {
  display: inline-block !important;
  background: transparent !important;
  color: white !important;
  padding: 14px 30px !important;
  font-size: 13px !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
  border-radius: 0 !important;
}
.ki-btn-outline:hover { background: rgba(255,255,255,0.1) !important; color: white !important; }
.ki-hero-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  min-width: 270px !important;
  flex-shrink: 0 !important;
}
.ki-stat {
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  padding: 15px 18px !important;
}
.ki-stat-num {
  font-family: 'Playfair Display', serif !important;
  font-size: 28px !important;
  color: white !important;
  line-height: 1 !important;
}
.ki-stat-num sup { font-size: 15px !important; }
.ki-stat-label {
  font-size: 10px !important;
  color: rgba(255,255,255,0.5) !important;
  margin-top: 4px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}
/* Hero stat boxes — larger on desktop */
.ki-stat {
  padding: 20px 24px !important;
}
.ki-stat-num {
  font-size: 36px !important;
}
.ki-stat-label {
  font-size: 12px !important;
  margin-top: 6px !important;
}
.ki-hero-stats {
  min-width: 320px !important;
  gap: 12px !important;
}


/* ============================================================
   6. FEATURE STRIP
   ============================================================ */

.ki-strip {
  background: var(--navy) !important;
  padding: 18px 52px !important;
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.ki-strip-item {
  flex: 1;
  text-align: center;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  padding: 0 16px;
  border-right: 1px solid rgba(255,255,255,0.15);
  font-family: 'IBM Plex Sans', sans-serif;
}
.ki-strip-item:last-child { border-right: none; }
.ki-strip-item strong {
  display: block;
  font-size: 13px;
  color: white;
  margin-bottom: 2px;
  font-weight: 500;
}


/* ============================================================
   7. SHARED UTILITIES
   ============================================================ */
/* Eyebrow */
.ki-eyebrow {
  font-size: 11px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}
.ki-eyebrow::before {
  content: "" !important;
  display: inline-block !important;
  width: 24px !important;
  height: 2px !important;
  background: var(--gold) !important;
  flex-shrink: 0 !important;
}

.ki-btn-gold {
  display: inline-block !important;
  background: var(--gold) !important;
  color: white !important;
  padding: 16px 40px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
  border-radius: 0 !important;
  border: none !important;
  cursor: pointer !important;
}
.ki-btn-gold:hover { background: var(--gold-light) !important; color: var(--ink) !important; }


/* ============================================================
   8. ICF SPECIALIST SECTION
   ============================================================ */

.ki-icf-wrap {
  padding: 96px 72px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 72px !important;
  align-items: center !important;
  border-bottom: 1px solid var(--stone) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.ki-icf-wrap h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  color: var(--ink) !important;
  margin-bottom: 24px !important;
  margin-top: 0 !important;
}
.ki-icf-wrap p {
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: rgba(26,31,30,0.6) !important;
  margin-bottom: 16px !important;
  font-weight: 300 !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}
.ki-icf-list { margin-top: 24px !important; list-style: none !important; padding: 0 !important; }
.ki-icf-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--stone) !important;
  font-size: 14px !important;
  color: rgba(26,31,30,0.75) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  list-style: none !important;
}
.ki-icf-list li:first-child { border-top: 1px solid var(--stone) !important; }
.ki-check {
  width: 20px !important;
  height: 20px !important;
  background: var(--navy) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 2px !important;
}
.ki-check svg { width: 10px !important; height: 10px !important; }
.ki-icf-photo-wrap { position: relative !important; overflow: hidden !important; }
.ki-icf-photo-wrap img {
  width: 100% !important;
  height: 480px !important;
  object-fit: cover !important;
  object-position: center 40% !important;
  display: block !important;
}
.ki-icf-caption {
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  background: linear-gradient(to top, rgba(26,31,30,0.75) 0%, transparent 100%) !important;
  padding: 32px 24px 20px !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.75) !important;
  font-style: italic !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}


/* ============================================================
   9. SERVICES SECTION
   ============================================================ */

.ki-services-wrap {
  padding: 88px 72px !important;
  background: var(--paper) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ki-services-wrap h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  margin-bottom: 48px !important;
  margin-top: 0 !important;
  color: var(--ink) !important;
}
.ki-services-grid {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 1px !important;
  background: var(--stone) !important;
}
.ki-svc { background: var(--white) !important; padding: 36px 30px !important; transition: background 0.2s !important; }
.ki-svc:hover { background: var(--warm) !important; }
.ki-svc-num { font-family: 'Playfair Display', serif !important; font-size: 13px !important; color: var(--stone) !important; margin-bottom: 20px !important; }
.ki-svc h3 { font-family: 'Playfair Display', serif !important; font-size: 20px !important; margin-bottom: 10px !important; margin-top: 0 !important; color: var(--ink) !important; }
.ki-svc p { font-size: 13px !important; line-height: 1.7 !important; color: rgba(26,31,30,0.55) !important; font-family: 'IBM Plex Sans', sans-serif !important; margin: 0 !important; }
.ki-svc a { font-size: 12px !important; color: var(--navy) !important; margin-top: 20px !important; display: block !important; text-decoration: none !important; }
.ki-svc a:hover { color: var(--navy-dark) !important; }


/* ============================================================
   10. SUPPLIERS SECTION
   ============================================================ */

.ki-suppliers-wrap {
  padding: 72px !important;
  border-top: 1px solid var(--stone) !important;
  border-bottom: 1px solid var(--stone) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ki-suppliers-hdr {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin-bottom: 40px !important;
  gap: 32px !important;
}
.ki-suppliers-hdr h3 { font-family: 'Playfair Display', serif !important; font-size: 28px !important; white-space: nowrap !important; color: var(--ink) !important; margin: 0 !important; }
.ki-suppliers-hdr p { font-size: 13px !important; color: rgba(26,31,30,0.5) !important; max-width: 340px !important; text-align: right !important; line-height: 1.6 !important; margin: 0 !important; }
.ki-suppliers-grid { display: grid !important; grid-template-columns: repeat(5,1fr) !important; gap: 1px !important; background: var(--stone) !important; }
.ki-supplier { background: var(--white) !important; padding: 28px 20px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-height: 110px !important; transition: background 0.2s !important; }
.ki-supplier:hover { background: var(--paper) !important; }
.ki-supplier-dot { width: 32px !important; height: 32px !important; border-radius: 2px !important; }
.ki-supplier-name { font-family: 'Playfair Display', serif !important; font-size: 15px !important; color: var(--ink) !important; text-align: center !important; line-height: 1.3 !important; }
.ki-supplier-name small { font-family: 'IBM Plex Sans', sans-serif !important; font-size: 10px !important; color: var(--stone) !important; letter-spacing: 1px !important; display: block !important; margin-top: 3px !important; }


/* ============================================================
   11. SERVICE AREA SECTION
   ============================================================ */

.ki-area-wrap {
  padding: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 48px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ki-area-wrap h3 { font-family: 'Playfair Display', serif !important; font-size: 32px !important; margin-bottom: 12px !important; margin-top: 0 !important; color: var(--ink) !important; }
.ki-area-wrap > div > p { font-size: 14px !important; color: rgba(26,31,30,0.55) !important; max-width: 360px !important; line-height: 1.7 !important; font-family: 'IBM Plex Sans', sans-serif !important; margin: 0 !important; }
.ki-tags { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; max-width: 380px !important; }
.ki-tag { background: var(--paper) !important; border: 1px solid var(--stone) !important; padding: 7px 14px !important; font-size: 12px !important; color: rgba(26,31,30,0.65) !important; font-family: 'IBM Plex Sans', sans-serif !important; }


/* ============================================================
   12. TESTIMONIAL SECTION
   ============================================================ */

.ki-testimonial-wrap {
  padding: 80px 72px !important;
  background: var(--paper) !important;
  border-top: 1px solid var(--stone) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ki-testimonial-inner { max-width: 660px !important; margin: 0 auto !important; }
.ki-quote-mark { font-family: 'Playfair Display', serif !important; font-size: 72px !important; color: var(--gold) !important; line-height: 0.6 !important; margin-bottom: 20px !important; display: block !important; opacity: 0.6 !important; }
.ki-testimonial-text { font-family: 'Playfair Display', serif !important; font-size: 20px !important; line-height: 1.65 !important; color: rgba(26,31,30,0.8) !important; font-style: italic !important; margin-bottom: 24px !important; }
.ki-testimonial-author { font-size: 12px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--stone) !important; font-family: 'IBM Plex Sans', sans-serif !important; }


/* ============================================================
   13. CTA BAND
   ============================================================ */

.ki-cta-wrap {
  padding: 96px 72px !important;
  background: var(--navy) !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ki-cta-wrap .ki-eyebrow { color: var(--gold) !important; justify-content: center !important; margin-bottom: 16px !important; }
.ki-cta-wrap h2 { font-family: 'Playfair Display', serif !important; color: white !important; margin-bottom: 16px !important; margin-top: 0 !important; font-size: clamp(28px,4vw,48px) !important; }
.ki-cta-wrap > p { font-size: 15px !important; color: rgba(255,255,255,0.65) !important; margin-bottom: 36px !important; font-weight: 300 !important; max-width: 500px !important; margin-left: auto !important; margin-right: auto !important; font-family: 'IBM Plex Sans', sans-serif !important; }
.ki-cta-sub { font-size: 12px !important; color: rgba(255,255,255,0.35) !important; margin-top: 20px !important; font-family: 'IBM Plex Sans', sans-serif !important; }


/* ============================================================
   14. PAGE HERO (INNER PAGES)
   ============================================================ */

.ki-page-hero {
  background: var(--navy) !important;
  padding: 80px 72px 64px !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ki-page-hero .ki-eyebrow { color: var(--gold) !important; justify-content: center !important; margin-bottom: 16px !important; }
.ki-page-hero h1 { font-family: 'Playfair Display', serif !important; color: white !important; margin-bottom: 16px !important; margin-top: 0 !important; font-size: clamp(32px,4vw,54px) !important; }
.ki-page-hero > p { color: rgba(255,255,255,0.65) !important; font-size: 15px !important; font-weight: 300 !important; font-family: 'IBM Plex Sans', sans-serif !important; margin: 0 !important; }


/* ============================================================
   15. CONTACT / QUOTE FORM
   ============================================================ */

.ki-contact-wrap {
  padding: 80px 72px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 72px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ki-contact-info h3 { font-family: 'Playfair Display', serif !important; font-size: 26px !important; margin-bottom: 24px !important; margin-top: 0 !important; color: var(--ink) !important; }
.ki-contact-info > p { font-size: 14px !important; line-height: 1.8 !important; color: rgba(26,31,30,0.6) !important; margin-bottom: 24px !important; font-family: 'IBM Plex Sans', sans-serif !important; }
.ki-contact-row { display: flex !important; align-items: flex-start !important; gap: 12px !important; margin-bottom: 16px !important; font-size: 14px !important; font-family: 'IBM Plex Sans', sans-serif !important; }
.ki-contact-row strong { color: var(--navy) !important; min-width: 64px !important; display: block !important; }
.ki-contact-row a { color: var(--ink) !important; text-decoration: none !important; }
.ki-contact-row a:hover { color: var(--navy) !important; }
.ki-form-box { background: var(--paper) !important; padding: 40px !important; }
.ki-form-box h3 { font-family: 'Playfair Display', serif !important; font-size: 24px !important; margin-bottom: 28px !important; margin-top: 0 !important; color: var(--ink) !important; }
.ki-form-box .wpcf7-form p { margin: 0 !important; }
.ki-form-box .wpcf7-form .ki-fg { margin-bottom: 20px !important; }
.ki-form-box .wpcf7-form .ki-fg label { display: block !important; font-size: 10px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: rgba(26,31,30,0.5) !important; margin-bottom: 6px !important; font-family: 'IBM Plex Sans', sans-serif !important; }
.ki-form-box .wpcf7-form input[type="text"],
.ki-form-box .wpcf7-form input[type="email"],
.ki-form-box .wpcf7-form input[type="tel"],
.ki-form-box .wpcf7-form select,
.ki-form-box .wpcf7-form textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  border: 1px solid var(--stone) !important;
  background: var(--white) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  color: var(--ink) !important;
  outline: none !important;
  border-radius: 0 !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s !important;
  box-sizing: border-box !important;
}
.ki-form-box .wpcf7-form input:focus,
.ki-form-box .wpcf7-form select:focus,
.ki-form-box .wpcf7-form textarea:focus { border-color: var(--navy) !important; }
.ki-form-box .wpcf7-form textarea { resize: vertical !important; min-height: 120px !important; }
.ki-form-box .ki-form-row2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
.ki-form-box .wpcf7-submit,
.ki-form-box .ki-submit {
  width: 100% !important;
  padding: 16px !important;
  background: var(--navy) !important;
  color: white !important;
  border: none !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  margin-top: 8px !important;
  border-radius: 0 !important;
}
.ki-form-box .wpcf7-submit:hover,
.ki-form-box .ki-submit:hover { background: var(--navy-dark) !important; }
.wpcf7-response-output { margin: 16px 0 0 !important; padding: 12px 16px !important; border-radius: 0 !important; font-size: 13px !important; font-family: 'IBM Plex Sans', sans-serif !important; border-width: 1px !important; }


/* ============================================================
   16. PROJECTS INDEX
   ============================================================ */

.ki-proj-wrap {
  padding: 80px 72px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ki-proj-wrap h2 { font-family: 'Playfair Display', serif !important; margin-bottom: 16px !important; margin-top: 0 !important; color: var(--ink) !important; }
.ki-proj-intro { font-size: 15px !important; line-height: 1.8 !important; color: rgba(26,31,30,0.6) !important; margin-bottom: 48px !important; max-width: 640px !important; font-family: 'IBM Plex Sans', sans-serif !important; }
.ki-proj-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 2px !important; }
.ki-proj-card { position: relative !important; overflow: hidden !important; background: var(--ink) !important; aspect-ratio: 4/3 !important; display: block !important; text-decoration: none !important; color: inherit !important; }
.ki-proj-card:hover { text-decoration: none !important; }
.ki-proj-card img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.4s !important; opacity: 0.85 !important; display: block !important; }
.ki-proj-card:hover img { transform: scale(1.04) !important; opacity: 1 !important; }
.ki-proj-info { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding: 24px 20px 20px !important; background: linear-gradient(to top, rgba(26,31,30,0.85) 0%, transparent 100%) !important; }
.ki-proj-info h3 { font-family: 'Playfair Display', serif !important; font-size: 18px !important; color: white !important; margin-bottom: 4px !important; margin-top: 0 !important; }
.ki-proj-info p { font-size: 12px !important; color: rgba(255,255,255,0.6) !important; margin: 0 !important; }
.ki-proj-placeholder { background: var(--paper) !important; border: 2px dashed var(--stone) !important; aspect-ratio: 4/3 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; gap: 12px !important; color: rgba(26,31,30,0.35) !important; font-size: 13px !important; text-align: center !important; padding: 24px !important; font-family: 'IBM Plex Sans', sans-serif !important; }


/* ============================================================
   17. PROJECT DETAIL PAGES
   ============================================================ */

.ki-project-detail {
  padding: 72px !important;
  border-bottom: 1px solid var(--stone) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ki-project-meta-grid {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 1px !important;
  background: var(--stone) !important;
  margin-bottom: 48px !important;
}
.ki-meta-item { background: var(--paper) !important; padding: 24px 28px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.ki-meta-label { font-size: 10px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--stone) !important; font-family: 'IBM Plex Sans', sans-serif !important; }
.ki-meta-value { font-family: 'Playfair Display', serif !important; font-size: 18px !important; color: var(--ink) !important; }
.ki-project-about { max-width: 720px !important; }
.ki-project-about p { font-size: 15px !important; line-height: 1.8 !important; color: rgba(26,31,30,0.6) !important; font-weight: 300 !important; font-family: 'IBM Plex Sans', sans-serif !important; margin-top: 16px !important; }
.ki-project-gallery-wrap { padding: 72px !important; width: 100% !important; box-sizing: border-box !important; }
.ki-project-gallery-wrap h2 { font-family: 'Playfair Display', serif !important; margin-bottom: 32px !important; margin-top: 0 !important; color: var(--ink) !important; }
.ki-project-gallery-wrap .wp-block-gallery { margin: 0 !important; }
.ki-project-gallery-wrap .wp-block-image img { width: 100% !important; height: 300px !important; object-fit: cover !important; }
.ki-project-nav { padding: 32px 72px !important; border-top: 1px solid var(--stone) !important; border-bottom: 1px solid var(--stone) !important; }
.ki-back-link { font-size: 13px !important; color: var(--navy) !important; text-decoration: none !important; font-family: 'IBM Plex Sans', sans-serif !important; transition: color 0.2s !important; }
.ki-back-link:hover { color: var(--navy-dark) !important; }


/* ============================================================
   18. ABOUT PAGE
   ============================================================ */

.ki-about-wrap {
  padding: 80px 72px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 80px !important;
  align-items: start !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ki-about-wrap h2 { font-family: 'Playfair Display', serif !important; margin-bottom: 24px !important; margin-top: 0 !important; color: var(--ink) !important; }
.ki-about-wrap p { font-size: 14px !important; line-height: 1.8 !important; color: rgba(26,31,30,0.6) !important; margin-bottom: 16px !important; font-weight: 300 !important; font-family: 'IBM Plex Sans', sans-serif !important; }
.ki-about-wrap img { width: 100% !important; display: block !important; }
.ki-values { margin-top: 40px !important; padding-top: 40px !important; border-top: 1px solid var(--stone) !important; }
.ki-values h3 { font-family: 'Playfair Display', serif !important; font-size: 24px !important; margin-bottom: 24px !important; margin-top: 0 !important; color: var(--ink) !important; }
.ki-value-item { display: flex !important; align-items: flex-start !important; gap: 16px !important; margin-bottom: 24px !important; }
.ki-value-icon { width: 36px !important; height: 36px !important; background: var(--navy) !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.ki-value-icon svg { width: 16px !important; height: 16px !important; }
.ki-value-item h4 { font-family: 'Playfair Display', serif !important; font-size: 16px !important; margin-bottom: 4px !important; margin-top: 0 !important; color: var(--ink) !important; }
.ki-value-item p { font-size: 13px !important; color: rgba(26,31,30,0.55) !important; line-height: 1.6 !important; margin: 0 !important; }


/* ============================================================
   19. FOOTER
   ============================================================ */

.site-footer,
.footer-bar { background: var(--ink) !important; }
.site-footer .inside-footer,
.site-footer .footer-widget-container {
  padding: 36px 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  max-width: 100% !important;
}
.site-footer .custom-logo,
.site-footer .site-logo img { height: 64px !important; width: auto !important; }
.site-footer,
.site-footer p,
.site-footer a { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: 'IBM Plex Sans', sans-serif !important; }
.site-footer a:hover { color: var(--gold-light) !important; }
.copyright-bar,
.site-info { background: var(--ink) !important; color: rgba(255,255,255,0.25) !important; font-size: 12px !important; text-align: center !important; padding: 16px 72px !important; border-top: 1px solid rgba(255,255,255,0.06) !important; }


/* ============================================================
   20. RESPONSIVE — TABLET (max-width: 1024px)
   ============================================================ */

@media (max-width: 1024px) {
  .ki-icf-wrap,
  .ki-services-wrap,
  .ki-suppliers-wrap,
  .ki-area-wrap,
  .ki-testimonial-wrap,
  .ki-cta-wrap,
  .ki-proj-wrap,
  .ki-contact-wrap,
  .ki-about-wrap,
  .ki-page-hero,
  .ki-project-detail,
  .ki-project-gallery-wrap,
  .ki-project-nav {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .ki-suppliers-grid { grid-template-columns: repeat(3,1fr) !important; }
  .ki-project-meta-grid { grid-template-columns: 1fr 1fr !important; }
}


/* ============================================================
   21. RESPONSIVE — MOBILE (max-width: 768px)
   ============================================================ */

@media (max-width: 768px) {
  .ki-top-bar { padding: 8px 20px !important; flex-direction: column !important; gap: 4px !important; text-align: center !important; }
  .site-header { padding: 12px 20px 0 !important; flex-direction: row !important; justify-content: center !important; }
  .site-header .custom-logo,
  .site-header .site-logo img { height: 72px !important; }
  .ki-hero { min-height: 560px !important; }
  .ki-hero-inner { flex-direction: column !important; padding: 0 20px 36px !important; gap: 24px !important; }
  .ki-hero-h1 { font-size: 36px !important; }
  .ki-hero-desc { font-size: 13px !important; }
  .ki-hero-stats { min-width: unset !important; width: 100% !important; }
  .ki-hero-btns { flex-direction: column !important; }
  .ki-btn-navy, .ki-btn-outline { text-align: center !important; }
  .ki-strip { display: grid !important; grid-template-columns: 1fr 1fr !important; padding: 0 !important; }
  .ki-strip-item { padding: 14px 10px !important; border-right: 1px solid rgba(255,255,255,0.15) !important; border-bottom: 1px solid rgba(255,255,255,0.15) !important; }
  .ki-strip-item:nth-child(2n) { border-right: none !important; }
  .ki-strip-item:nth-last-child(-n+2) { border-bottom: none !important; }
  .ki-icf-wrap { grid-template-columns: 1fr !important; padding: 48px 20px !important; gap: 32px !important; }
  .ki-icf-photo-wrap img { height: 280px !important; }
  .ki-services-wrap { padding: 48px 20px !important; }
  .ki-services-grid { grid-template-columns: 1fr !important; }
  .ki-suppliers-wrap { padding: 48px 20px !important; }
  .ki-suppliers-hdr { flex-direction: column !important; gap: 8px !important; }
  .ki-suppliers-hdr p { text-align: left !important; max-width: 100% !important; }
  .ki-suppliers-grid { grid-template-columns: 1fr 1fr !important; }
  .ki-area-wrap { flex-direction: column !important; padding: 48px 20px !important; }
  .ki-tags { max-width: 100% !important; }
  .ki-testimonial-wrap { padding: 48px 20px !important; }
  .ki-testimonial-text { font-size: 17px !important; }
  .ki-cta-wrap { padding: 56px 20px !important; }
  .ki-btn-gold { width: 100% !important; text-align: center !important; display: block !important; }
  .ki-page-hero { padding: 52px 20px 40px !important; }
  .ki-contact-wrap { grid-template-columns: 1fr !important; padding: 48px 20px !important; gap: 40px !important; }
  .ki-form-box { padding: 28px 20px !important; }
  .ki-form-box .ki-form-row2 { grid-template-columns: 1fr !important; }
  .ki-proj-wrap { padding: 48px 20px !important; }
  .ki-proj-grid { grid-template-columns: 1fr 1fr !important; }
  .ki-about-wrap { grid-template-columns: 1fr !important; padding: 48px 20px !important; }
  .ki-project-detail { padding: 48px 20px !important; }
  .ki-project-meta-grid { grid-template-columns: 1fr 1fr !important; }
  .ki-project-gallery-wrap { padding: 48px 20px !important; }
  .ki-project-nav { padding: 24px 20px !important; }
  .site-footer .inside-footer,
  .site-footer .footer-widget-container { flex-direction: column !important; text-align: center !important; padding: 32px 20px !important; }
  .copyright-bar, .site-info { padding: 16px 20px !important; }
}


/* ============================================================
   22. RESPONSIVE — SMALL MOBILE (max-width: 480px)
   ============================================================ */

@media (max-width: 480px) {
  .ki-proj-grid { grid-template-columns: 1fr !important; }
  .ki-suppliers-grid { grid-template-columns: 1fr 1fr !important; }
  .ki-project-meta-grid { grid-template-columns: 1fr !important; }
}

/* ── GLOBAL FONT SIZE INCREASE ── */
body {
  font-size: 17px !important;
}

/* Nav */
.main-navigation .main-nav ul li a {
  font-size: 12px !important;
}

/* Top bar */
.ki-top-bar-left,
.ki-top-bar-right a {
  font-size: 14px !important;
}

/* Hero */
.ki-hero-desc {
  font-size: 17px !important;
}

/* Section body text */
.ki-icf-wrap p,
.ki-services-wrap p,
.ki-svc p,
.ki-area-wrap > div > p,
.ki-contact-info > p {
  font-size: 15px !important;
}

/* ICF bullet list */
.ki-icf-list li {
  font-size: 15px !important;
}

/* Testimonial */
.ki-testimonial-text {
  font-size: 22px !important;
}

/* CTA */
.ki-cta-wrap > p {
  font-size: 16px !important;
}

/* Service cards */
.ki-svc h3 {
  font-size: 22px !important;
}

/* Supplier names */
.ki-supplier-name {
  font-size: 16px !important;
}

/* Area tags */
.ki-tag {
  font-size: 13px !important;
}

/* Strip items */
.ki-strip-item strong {
  font-size: 14px !important;
}
.ki-strip-item strong {
  font-size: 14px !important;
}

/* Contact form labels */
.ki-form-box .wpcf7-form .ki-fg label {
  font-size: 11px !important;
}
.ki-form-box .wpcf7-form input,
.ki-form-box .wpcf7-form select,
.ki-form-box .wpcf7-form textarea {
  font-size: 15px !important;
}

/* Page hero */
.ki-page-hero > p {
  font-size: 17px !important;
}

/* Project meta */
.ki-meta-value {
  font-size: 20px !important;
}
.ki-meta-label {
  font-size: 11px !important;
}

/* Breadcrumbs */
.ki-breadcrumbs {
  padding: 14px 72px !important;
  background: var(--paper) !important;
  border-bottom: 1px solid var(--stone) !important;
  font-size: 13px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
}
.ki-breadcrumbs .rank-math-breadcrumb p {
  margin: 0 !important;
  font-size: 13px !important;
  color: rgba(26,31,30,0.5) !important;
}
.ki-breadcrumbs .rank-math-breadcrumb a {
  color: var(--navy) !important;
  text-decoration: none !important;
}
.ki-breadcrumbs .rank-math-breadcrumb a:hover {
  color: var(--gold) !important;
}
/* Current page — last breadcrumb item */
.ki-breadcrumbs .rank-math-breadcrumb span:last-child {
  color: var(--ink) !important;
  font-weight: 500 !important;
}

@media (max-width: 768px) {
  .ki-breadcrumbs {
    padding: 12px 20px !important;
    font-size: 12px !important;
  }
}

/* ── MOBILE NAV FIX ── */
@media (max-width: 768px) {
  /* Hide full nav links by default on mobile */
  .main-navigation .main-nav {
    display: none !important;
  }
  
  /* Show nav links when toggled open */
  .mobile-menu-open .main-navigation .main-nav,
  .main-navigation.toggled .main-nav {
    display: block !important;
  }
  
  /* Show GP's menu toggle button */
  .main-navigation .menu-toggle {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 14px !important;
    background: var(--white) !important;
    border: none !important;
    border-top: 1px solid var(--stone) !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    color: var(--ink) !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    cursor: pointer !important;
  }

  /* Stack nav links vertically when open */
  .main-navigation .main-nav ul {
    flex-direction: column !important;
  }
  .main-navigation .main-nav ul li a {
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid var(--stone) !important;
    padding: 16px 20px !important;
    justify-content: center !important;
  }
  .main-navigation .main-nav ul li.nav-cta > a {
    text-align: center !important;
    justify-content: center !important;
  }
}