/*
Theme Name: LOK Tech Divi Child
Description: Corporate presentation customizations for LOK Tech.
Author: LOK Tech
Template: Divi
Version: 0.2.0
Text Domain: lok-divi-child
*/

/* Use Divi 5 global variables and presets for the design system first.
   Add only reviewed, site-wide CSS here. */

/* Home modules remain editable in Divi; these styles define shared presentation. */
body.page { color: #334c5b; background: #fff; }
body.page #main-content h2 { color: #001b2a; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.15; font-weight: 700; letter-spacing: -.035em; padding-bottom: 20px; }
body.page #main-content h3 { color: #062737; font-size: 23px; line-height: 1.25; font-weight: 600; padding-bottom: 14px; }
body.page #main-content p { line-height: 1.75; }
body.page .et_pb_section { padding: 24px 0; }
body.page .et_pb_row { width: 90%; max-width: 1200px; }
body.page .lok-eyebrow { color: #057da3; font-size: 12px; font-weight: 700; letter-spacing: .18em; margin-bottom: 18px; }
body.page .lok-lead { font-size: 18px; line-height: 1.8; max-width: 730px; margin-bottom: 34px; }
.lok-services, .lok-process, .lok-contact { padding: 64px 0 32px; scroll-margin-top: 100px; }
.lok-services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 36px; }
.lok-service-card { padding: 32px; border: 1px solid #dce6ec; border-radius: 16px; background: #f7fafc; }
.lok-service-card:last-child { grid-column: 1 / -1; background: #eef8fb; }
.lok-service-number { color: #087fa5; font-size: 13px; font-weight: 700; letter-spacing: .12em; margin-bottom: 20px; }
.lok-process { border-top: 1px solid #dce6ec; }
.lok-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
.lok-process-grid span { display: block; color: #087fa5; font-size: 11px; font-weight: 700; letter-spacing: .1em; margin-bottom: 18px; }
body.page .lok-process-grid h3 { font-size: 20px; }
.lok-contact { background: #001b2a; color: #c9dce6; padding: 56px; border-radius: 22px; margin: 48px 0; }
body.page .lok-contact h2, body.page .lok-contact h3 { color: #fff !important; }
body.page .lok-contact .lok-eyebrow { color: #69d8e7; }
.lok-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px; padding-top: 26px; border-top: 1px solid #31505e; }
.lok-contact a { color: #82e2ed; overflow-wrap: anywhere; }
.lok-cta { display: inline-block; margin: 12px 0 20px; padding: 13px 22px; color: #001b2a !important; background: #70dfe8; border-radius: 7px; font-weight: 600; }
.lok-cta-secondary { background: transparent; color: #fff !important; border: 1px solid #6b98aa; }
.lok-contact a:focus-visible, .lok-cta:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
body.page #main-footer #footer-widgets, body.page #main-footer .et-social-icons { display: none; }
body.page #main-header { box-shadow: 0 1px 0 #e5edf1; }
body.page #logo { max-height: 64px; }
.lok-page-hero { padding: 64px 0 42px; }
.lok-page-hero h1 { color: #001b2a; font-size: clamp(40px, 5vw, 68px); line-height: 1.08; font-weight: 700; letter-spacing: -.045em; padding-bottom: 24px; }
body.page #main-content .lok-service-card h2 { font-size: 30px; line-height: 1.15; }
body.page #main-content .lok-service-card h3 { font-size: 19px; }
.lok-service-scope { color: #087fa5; margin-top: 16px; font-size: 13px; font-weight: 600; }
.lok-values-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; margin: 40px 0 70px; }
.lok-values-grid > div { border-top: 3px solid #14a5c7; padding: 28px 0; }
.lok-wide-copy { max-width: 840px; font-size: 19px; line-height: 1.85; padding: 28px 0; }
.lok-contact-note { margin: 32px 0; padding: 26px; border-left: 3px solid #14a5c7; background: #f3f8fb; }
.lok-footer-links { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 28px 0; border-top: 1px solid #dce6ec; font-size: 13px; }
@media (max-width: 980px) {
  .lok-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lok-contact { padding: 40px; }
}
@media (max-width: 767px) {
  .lok-services-grid, .lok-process-grid, .lok-contact-grid { grid-template-columns: 1fr; }
  .lok-service-card:last-child { grid-column: auto; }
  .lok-services, .lok-process { padding-top: 40px; }
  .lok-service-card { padding: 24px; }
  .lok-contact { padding: 30px 24px; border-radius: 16px; }
  .lok-contact-grid { gap: 30px; }
  .lok-values-grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 30px; }
}