/* KMT Engineering: page styles (extracted from the static build's per-page <style> block) */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fff;color:#0F1216;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#0B57A4;text-decoration:none}
a:hover{color:#08447F}
h1,h2,h3,h4,h5,p{margin:0}
.wrap{width:1440px;padding:0 100px;margin:0 auto}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.num{font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;background:var(--o);color:#fff;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:0;cursor:pointer}
.btn:hover{background:#0B57A4;color:#fff}
.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.30);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.btn-line:hover{border-color:var(--o);color:#fff}
.card{border:1px solid #E4E7EA;background:#fff}
.card:hover{border-color:#BFC5CC}
.ph{position:relative;overflow:hidden;background:#1A1F25}
.ph::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,color-mix(in srgb, var(--o) 14%, transparent) 0 8px,transparent 8px 22px)}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 20% 8%,rgba(255,255,255,.10),rgba(0,0,0,.40) 72%)}
.ph i{position:absolute;left:16px;bottom:13px;z-index:2;font-style:normal;font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.ph:has(img)::before,.ph:has(img)::after{display:none}
.card{overflow:hidden}
.card:hover .ph>img{transform:scale(1.05)}
.nav a{color:#98A1AB;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.nav a:hover{color:#fff}
.nav a.on{color:#fff}
.more{display:inline-flex;align-items:center;gap:8px;color:var(--o);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.more:hover{color:#08447F}
.fl a{color:#98A1AB;font-size:13px;font-weight:400;letter-spacing:.01em}
.fl a:hover{color:#fff}
.crumb a{color:#8E97A1;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.crumb a:hover{color:#fff}
.fld{width:100%;height:52px;background:#fff;border:1px solid #D8DDE2;padding:0 16px;font-family:inherit;font-size:15px;color:#0F1216}
.fld::placeholder{color:#A6ADB5}
.fld:focus{outline:none;border-color:var(--o)}
  
  /* ---- preview-only responsive layer -------------------------------------
 The artboards are fixed-width 1440px by design. These rules implement the
 breakpoints from the build spec so the preview holds up on a laptop or a
 phone. They lean on !important because the design uses inline styles;
 the real Elementor build sets these per-breakpoint in the UI instead. */
  img, svg { max-width: 100%; }

  @media (max-width: 1439px) {
.wrap { width: 100% !important; }
  }

  @media (max-width: 1199px) {
.wrap { padding: 0 48px !important; }
[style*="padding:110px 0"], [style*="padding:104px 0"] { padding: 72px 0 !important; }
[style*="padding:96px 0"],  [style*="padding:88px 0"]  { padding: 64px 0 !important; }
[style*="repeat(4,minmax(0,1fr))"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
[style*="repeat(6,minmax(0,1fr))"] { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
[style*="repeat(3,minmax(0,1fr))"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
[style*="1.6fr 1fr 1fr 1fr"]       { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
[style*="1fr 40px 1fr 40px 1fr"]   { grid-template-columns: minmax(0,1fr) !important; gap: 18px !important; }
[style*="1.55fr 1fr"], [style*="1.5fr 1fr"], [style*="1fr 1.15fr"], [style*="1.15fr 1fr"] { grid-template-columns: minmax(0,1fr) !important; gap: 40px !important; }
[style*="180px 1fr"]               { grid-template-columns: minmax(0,1fr) !important; gap: 6px !important; }
[style*="font-size:66px"] { font-size: 48px !important; }
[style*="font-size:52px"] { font-size: 40px !important; }
[style*="font-size:42px"] { font-size: 34px !important; }
[style*="font-size:40px"] { font-size: 32px !important; }
[style*="font-size:38px"] { font-size: 30px !important; }
[style*="font-size:36px"] { font-size: 29px !important; }
[style*="font-size:34px"] { font-size: 28px !important; }
[style*="font-size:32px"] { font-size: 26px !important; }
[style*="height:660px"]   { height: 560px !important; }
.nav { gap: 16px !important; }
.nav a { font-size: 11px !important; }
  }

  @media (max-width: 767px) {
.wrap { padding: 0 20px !important; }
[style*="padding:110px 0"], [style*="padding:104px 0"] { padding: 56px 0 !important; }
[style*="padding:96px 0"],  [style*="padding:88px 0"]  { padding: 48px 0 !important; }
[style*="repeat(4,minmax(0,1fr))"],
[style*="repeat(3,minmax(0,1fr))"],
[style*="repeat(2,minmax(0,1fr))"],
[style*="1.6fr 1fr 1fr 1fr"],
[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0,1fr) !important; }
[style*="repeat(6,minmax(0,1fr))"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

/* tag chips and button pairs wrap rather than forcing their track wider */
[style*="display:flex"][style*="gap:8px"],
[style*="display:flex"][style*="gap:14px"] { flex-wrap: wrap !important; }
[style*="font-size:66px"] { font-size: 34px !important; }
[style*="font-size:52px"] { font-size: 30px !important; }
[style*="font-size:42px"] { font-size: 26px !important; }
[style*="font-size:40px"], [style*="font-size:38px"],
[style*="font-size:36px"], [style*="font-size:34px"],
[style*="font-size:32px"] { font-size: 24px !important; }
[style*="font-size:26px"], [style*="font-size:24px"],
[style*="font-size:23px"] { font-size: 20px !important; }
[style*="height:660px"]   { height: auto !important; min-height: 460px !important; }
[style*="height:300px"]   { height: 200px !important; }

/* header stacks instead of collapsing to a burger — the real build gets
   an off-canvas menu, which needs JS this preview deliberately avoids */
header .wrap { height: auto !important; flex-direction: column !important;
               align-items: flex-start !important; gap: 14px !important; padding-top: 18px !important;
               padding-bottom: 18px !important; }
.nav { flex-wrap: wrap !important; gap: 14px 18px !important; }
.nav a { font-size: 11px !important; padding: 6px 0 !important; }

/* vertical hairlines read as rendering faults once columns stack */
[style*="border-right:1px solid rgba(255,255,255,.09)"] { border-right: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important; }
[style*="border-right:1px solid #E4E7EA"] { border-right: 0 !important;
  border-bottom: 1px solid #E4E7EA !important; }

/* the hero's photo-slot label sits at the very bottom, so lift the content
   clear of it once the hero is only as tall as its content */
[style*="padding-bottom:96px"] { padding-bottom: 118px !important; padding-top: 44px !important; }

/* section headers put their "View all" link under the heading, not beside it */
[style*="align-items:flex-end"][style*="justify-content:space-between"] {
  flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; }
[style*="align-items:flex-end"][style*="justify-content:space-between"] .more { padding-bottom: 0 !important; }

/* the trust badges carry asymmetric side padding for their desktop dividers;
   stacked, that reads as a ragged indent */
[style*="display:flex;gap:16px;padding:32px"] { padding: 24px 0 !important; }

/* CTA bands and section headers stop fighting for one line */
[style*="justify-content:space-between"][style*="gap:60px"],
[style*="justify-content:space-between"][style*="gap:40px"] {
  flex-direction: column !important; align-items: flex-start !important; gap: 26px !important; }
  }

/* editor: form textarea uses the same field style */
textarea.fld{height:auto;font-family:inherit}

/* Licences & registrations: "View certificate" button + popup viewer (assets/credentials.js) */
.cert-btn{margin-top:22px;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px;background:#0F1216;color:#fff;border:0;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .15s}
.cert-btn:hover{background:var(--o)}
.cert-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.cert-modal[hidden]{display:none}
.cert-modal-backdrop{position:absolute;inset:0;background:rgba(9,11,14,.82)}
.cert-modal-panel{position:relative;background:#fff;width:min(940px,100%);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.cert-modal-head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid #E4E7EA;flex:none}
.cert-modal-head .cm-title{flex:1;min-width:0;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#0F1216}
.cert-modal-close{flex:none;width:38px;height:38px;border:1px solid #E4E7EA;background:#fff;color:#0F1216;font-size:22px;line-height:1;cursor:pointer}
.cert-modal-close:hover{background:#F4F5F7}
.cert-modal-body{overflow:auto;padding:22px;background:#F4F5F7}
.cert-modal-body img{display:block;width:100%;height:auto;border:1px solid #E4E7EA;background:#fff;margin:0 auto 16px;box-shadow:0 4px 16px -6px rgba(0,0,0,.25)}
.cert-modal-note{color:#7A828B;font-size:12px;line-height:1.6;margin:0 0 16px;text-align:center}
@media (max-width:560px){ .cert-modal{padding:0} .cert-modal-panel{max-height:100vh;height:100vh;width:100%} .cert-modal-head{flex-wrap:wrap} .cert-modal-head .cm-title{flex-basis:100%} }