/* KBH Construction — design system (ported from the approved v4 preview). Everything is scoped to .kbh so Elementor/theme styles cannot clash. */

/* Structure follows havelockone.com (client reference); pages follow the KBH brief sitemap. */
:root {
  --navy: #06152B; --navy-2: #06152B; --blue: #1F5FA0; --sky: #4DA3E0; --ice: #EDF3F8; --mist: #F5F8FB;
  --sand: #C9A464; --ink: #0F1E33; --muted: #5A6B80; --line: #DCE4EE; --paper: #FFFFFF; --wa: #25D366;
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --f-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --wrap: 1280px; --r: 10px;
  color-scheme: light;
}
.kbh, .kbh * { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.65 var(--f-body); -webkit-font-smoothing: antialiased; }
[dir="rtl"] .kbh, [dir="rtl"] .kbh h1, [dir="rtl"] .kbh h2, [dir="rtl"] .kbh h3, [dir="rtl"] .kbh .eyebrow, [dir="rtl"] .kbh .btn, [dir="rtl"] .kbh .stat b, [dir="rtl"] .kbh nav.main a, [dir="rtl"] .kbh nav.main button { font-family: var(--f-ar); letter-spacing: 0; }
.kbh a { color: inherit; text-decoration: none; }
.kbh h1, .kbh h2, .kbh h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; line-height: 1.12; font-weight: 600; }
.kbh p { margin: 0; }
.kbh img { display: block; max-width: 100%; }
.kbh .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 32px; }
.kbh .eyebrow { font: 600 12px/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.kbh .eyebrow.light { color: rgba(255,255,255,.75); }
.kbh h2.big { font-size: clamp(28px, 3vw, 40px); color: var(--navy); margin-top: 14px; }
.kbh .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 4px; font: 600 13px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.kbh .btn:focus-visible, .kbh button:focus-visible, .kbh a:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.kbh .btn-solid { background: #fff; color: var(--navy); }
.kbh .btn-solid:hover { background: var(--sand); color: #fff; }
.kbh .btn-line { border-color: var(--navy); color: var(--navy); background: transparent; }
.kbh .btn-line:hover { background: var(--navy); color: #fff; }
.kbh .btn-line.light { border-color: rgba(255,255,255,.7); color: #fff; }
.kbh .btn-line.light:hover { background: #fff; color: var(--navy); }
.kbh .btn-navy { background: var(--navy); color: #fff; }
.kbh .btn-navy:hover { background: var(--blue); }
.kbh .arr { transition: transform .25s; }
.kbh a:hover .arr, .kbh .btn:hover .arr { transform: translateX(4px); }
[dir="rtl"] .kbh .arr { transform: scaleX(-1); }
[dir="rtl"] .kbh a:hover .arr, [dir="rtl"] .kbh .btn:hover .arr { transform: scaleX(-1) translateX(4px); }
.kbh section.block { padding-block: 110px; }
.kbh section.tint { background: var(--mist); }
.kbh .proto-flag { background: var(--ink); color: #C9D6E5; font-size: 12px; text-align: center; padding: 6px 16px; position: relative; z-index: 70; }
.kbh .proto-flag b { color: #fff; }

/* Reveal on scroll: content is visible by default; JS only pre-hides what is below the fold. */
.kbh .reveal.pre { opacity: 0; transform: translateY(26px); }
.kbh .reveal.in { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }

/* Header: transparent over the hero, solid navy once scrolled or on inner pages without a dark hero. */
.kbh header.top { position: fixed; inset-inline: 0; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--line); transition: box-shadow .35s; }
.kbh header.top.solid { box-shadow: 0 8px 30px rgba(6,21,43,.10); }
.kbh header.top.solid { top: 0; }
.kbh .top .wrap { display: flex; align-items: center; gap: 26px; height: 84px; }
.kbh .logo img { height: 50px; width: auto; }
.kbh footer .logo { display: inline-block; background: #fff; padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; }
.kbh footer .logo img { height: 46px; margin: 0; }
.kbh nav.main { display: flex; gap: 2px; margin-inline-start: auto; }
.kbh nav.main > div { position: relative; }
.kbh nav.main a, .kbh nav.main button { display: block; padding: 10px 14px; font: 500 14px/1 var(--f-body); color: var(--navy); background: none; border: 0; cursor: pointer; opacity: .9; }
.kbh nav.main a:hover, .kbh nav.main button:hover, .kbh nav.main a.on { opacity: 1; color: var(--blue); }
.kbh .drop { position: absolute; top: 100%; inset-inline-start: 0; width: 330px; background: #fff; border-radius: 6px; box-shadow: 0 24px 50px rgba(6,21,43,.22); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .22s; }
.kbh nav.main > div:hover .drop, .kbh nav.main > div:focus-within .drop { opacity: 1; visibility: visible; transform: none; }
.kbh nav.main .drop a { color: var(--ink); padding: 12px 14px; border-radius: 4px; opacity: 1; font-size: 14.5px; }
.kbh nav.main .drop a:hover { background: var(--ice); color: var(--navy); opacity: 1; }
.kbh .lang { border: 1px solid var(--line); background: #fff; color: var(--navy); padding: 9px 14px; border-radius: 99px; cursor: pointer; font: 600 13.5px/1 var(--f-ar); }
.kbh .burger { display: none; }

/* Hero */
.kbh .hero { position: relative; min-height: max(100svh, 760px); color: #fff; overflow: hidden; background: var(--navy); display: flex; align-items: flex-end; }
.kbh .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kbh .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,21,43,.82) 0%, rgba(6,21,43,.25) 45%, rgba(6,21,43,.35) 100%), linear-gradient(90deg, rgba(6,21,43,.55), rgba(6,21,43,0) 60%); }
[dir="rtl"] .kbh .hero::after { background: linear-gradient(0deg, rgba(6,21,43,.82) 0%, rgba(6,21,43,.25) 45%, rgba(6,21,43,.35) 100%), linear-gradient(270deg, rgba(6,21,43,.55), rgba(6,21,43,0) 60%); }
.kbh .hero .wrap { position: relative; z-index: 2; width: 100%; padding-top: 180px; padding-bottom: 96px; }
.kbh .hero h1 { font-size: clamp(40px, 5.4vw, 76px); font-weight: 600; max-width: 14ch; letter-spacing: -.015em; }
.kbh .hero .alt { display: block; font: 500 clamp(20px, 2.1vw, 28px)/1.4 var(--f-ar); color: var(--sand); margin-top: 14px; text-align: left; }
[dir="rtl"] .kbh .hero .alt { font-family: var(--f-display); direction: ltr; text-align: right; }
.kbh .hero .sub { max-width: 560px; margin-top: 22px; font-size: 17px; color: #D5E0EC; }
.kbh .hero .ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.kbh .scroll-cue { position: absolute; inset-inline-end: 32px; bottom: 40px; z-index: 2; width: 1px; height: 64px; background: rgba(255,255,255,.3); overflow: hidden; }
.kbh .scroll-cue::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: cue 2s ease-in-out infinite; }
@keyframes cue { to { top: 100%; } }

/* Services ticker (brief: services scrolling left to right) */
.kbh .ticker { background: var(--navy); color: #fff; overflow: hidden; padding-block: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.kbh .ticker .track { display: flex; gap: 0; width: max-content; animation: ltr 60s linear infinite; }
.kbh .ticker span { font: 500 14px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; }
[dir="rtl"] .kbh .ticker span { font-family: var(--f-ar); letter-spacing: 0; }
.kbh .ticker span::after { content: ""; width: 7px; height: 7px; background: var(--sand); transform: rotate(45deg); margin-inline: 30px; }
@keyframes ltr { from { transform: translateX(-50%); } to { transform: translateX(0); } }
[dir="rtl"] .kbh .ticker .track { animation-name: rtl; }
@keyframes rtl { from { transform: translateX(50%); } to { transform: translateX(0); } }

/* Intro + stats */
.kbh .intro { display: grid; grid-template-columns: 1fr 1.25fr; gap: 80px; align-items: center; }
.kbh .intro p { color: var(--muted); font-size: 17px; margin-top: 20px; }
.kbh .intro .link { display: inline-flex; gap: 10px; align-items: center; margin-top: 26px; font: 600 13px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.kbh .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); }
.kbh .stat { display: flex; gap: 18px; align-items: flex-start; padding: 30px 8px; border-bottom: 1px solid var(--line); }
.kbh .stat:nth-child(odd) { border-inline-end: 1px solid var(--line); }
.kbh .stat svg { flex: none; color: var(--sand); margin-top: 6px; }
.kbh .stat b { display: block; font: 600 44px/1 var(--f-display); color: var(--navy); font-variant-numeric: tabular-nums; }
.kbh .stat b sup { font-size: 24px; color: var(--sand); }
.kbh .stat span { color: var(--muted); font-size: 14.5px; }

/* Services */
.kbh .svc-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 44px; }
.kbh .svc-head h2 { max-width: 22ch; }
.kbh .core { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.kbh .more2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-top: 4px; }
.kbh .tile { position: relative; display: block; overflow: hidden; color: #fff; background: var(--navy); }
.kbh .core .tile { aspect-ratio: 4 / 3.6; }
.kbh .more2 .tile { aspect-ratio: 16 / 6; }
.kbh .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.kbh .tile:hover img { transform: scale(1.06); }
.kbh .tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,21,43,.9) 0%, rgba(6,21,43,.15) 55%, rgba(6,21,43,0) 100%); transition: background .5s; }
.kbh .tile:hover::after { background: linear-gradient(0deg, rgba(6,21,43,.94) 0%, rgba(6,21,43,.55) 70%, rgba(6,21,43,.25) 100%); }
.kbh .tile .tx { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 32px; }
.kbh .tile h3 { font-size: 24px; font-weight: 600; }
.kbh .more2 .tile h3 { font-size: 21px; }
.kbh .tile .tag { position: absolute; z-index: 2; top: 22px; inset-inline-start: 22px; font: 600 11px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; background: var(--sand); color: #fff; padding: 8px 11px; border-radius: 3px; }
.kbh .tile .reveal-tx { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s ease, opacity .5s ease, margin .5s; }
.kbh .tile:hover .reveal-tx, .kbh .tile:focus-visible .reveal-tx { max-height: 160px; opacity: 1; margin-top: 12px; }
.kbh .tile .reveal-tx p { color: #D5E0EC; font-size: 15px; }
.kbh .tile .reveal-tx span { display: inline-flex; gap: 8px; margin-top: 14px; font: 600 12px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }

/* Key sectors */
.kbh .center-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.kbh .sectors { position: relative; height: 600px; overflow: hidden; color: #fff; background: var(--navy); }
.kbh .sectors .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 1s ease, transform 6s ease; }
.kbh .sectors .bg.on { opacity: 1; transform: scale(1); }
.kbh .sectors::after { content: ""; position: absolute; inset: 0; background: rgba(6,21,43,.45); }
.kbh .sectors .body { position: absolute; z-index: 2; inset: 0 0 90px; display: grid; place-items: center; text-align: center; padding: 24px; }
.kbh .sectors h3 { font-size: clamp(34px, 4vw, 54px); font-weight: 600; }
.kbh .sectors .body p { max-width: 620px; margin: 16px auto 26px; color: #E3EBF4; }
.kbh .sectors .tabs { position: absolute; z-index: 3; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; background: rgba(6,21,43,.82); backdrop-filter: blur(8px); border-radius: 8px 8px 0 0; max-width: calc(100% - 32px); overflow-x: auto; }
.kbh .sectors .tabs button { background: none; border: 0; color: #fff; padding: 22px 28px; font: 500 15px/1 var(--f-body); cursor: pointer; white-space: nowrap; position: relative; opacity: .75; }
[dir="rtl"] .kbh .sectors .tabs button { font-family: var(--f-ar); }
.kbh .sectors .tabs button.on { opacity: 1; }
.kbh .sectors .tabs button.on::after { content: ""; position: absolute; inset-inline: 28px; bottom: 12px; height: 2px; background: var(--sand); }

/* Featured projects carousel */
.kbh .carousel-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 36px; }
.kbh .ctrl { display: flex; gap: 10px; }
.kbh .ctrl button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; display: grid; place-items: center; transition: .25s; }
.kbh .ctrl button:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
[dir="rtl"] .kbh .ctrl svg { transform: scaleX(-1); }
.kbh .rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.kbh .rail::-webkit-scrollbar { display: none; }
.kbh .pcard { scroll-snap-align: start; display: block; }
.kbh .pcard .ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy); border-radius: 4px; }
.kbh .pcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.kbh .pcard:hover img { transform: scale(1.05); }
.kbh .pcard .cat { display: block; margin-top: 18px; font: 600 11.5px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); }
.kbh .pcard h3 { font-size: 19px; margin-top: 10px; color: var(--navy); }
.kbh .pcard .meta { font-size: 14px; color: var(--muted); margin-top: 6px; display: block; }

/* Testimonial */
.kbh .quote { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.kbh .quote .ph { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; }
.kbh .quote .ph img { width: 100%; height: 100%; object-fit: cover; }
.kbh .quote blockquote { margin: 0; font: 400 21px/1.6 var(--f-body); color: var(--ink); }
.kbh .quote .mark { font: 700 64px/1 Georgia, serif; color: var(--sand); }
.kbh .quote cite { display: block; margin-top: 24px; font: 600 18px/1.3 var(--f-display); font-style: normal; color: var(--navy); }
.kbh .quote cite span { display: block; font: 500 12px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.kbh .pill { display: inline-block; font: 600 11px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; background: #FFF4DD; color: #8A6516; padding: 7px 10px; border-radius: 99px; margin-bottom: 18px; }

/* CTA box */
.kbh .cta-box { background: var(--navy); color: #fff; border-radius: 14px; padding: 60px 64px; display: flex; justify-content: space-between; align-items: center; gap: 40px; position: relative; overflow: hidden; }
.kbh .cta-box::before { content: ""; position: absolute; inset-inline-end: -40px; top: -40px; width: 300px; height: 300px; border: 1px solid rgba(201,164,100,.35); transform: rotate(45deg); }
.kbh .cta-box h2 { font-size: clamp(26px, 2.8vw, 36px); position: relative; }
.kbh .cta-box p { color: #C9D6E5; margin-top: 12px; max-width: 620px; position: relative; }

/* Full-bleed band (Vision 2030) */
.kbh .band { position: relative; min-height: 520px; display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; }
.kbh .band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kbh .band::after { content: ""; position: absolute; inset: 0; background: rgba(6,21,43,.55); }
.kbh .band .in { position: relative; z-index: 2; max-width: 680px; padding: 24px; }
.kbh .band h2 { font-size: clamp(28px, 3vw, 42px); margin: 16px 0; }
.kbh .band p { color: #E3EBF4; margin-bottom: 28px; }

/* Accreditations + clients */
.kbh .trust { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.kbh .trust h3 { font-size: 28px; color: var(--navy); margin-bottom: 26px; }
.kbh .docs { display: grid; gap: 14px; }
.kbh .doc { display: flex; gap: 18px; align-items: center; padding: 20px 22px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.kbh .doc svg { color: var(--sand); flex: none; }
.kbh .doc b { display: block; color: var(--navy); font: 600 16px/1.3 var(--f-display); }
[dir="rtl"] .kbh .doc b { font-family: var(--f-ar); }
.kbh .doc span { color: var(--muted); font-size: 14px; }
.kbh .logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kbh .logos div { aspect-ratio: 3 / 2; background: #fff; border: 1px solid var(--line); border-radius: 6px; display: grid; place-items: center; padding: 14px; }
.kbh .logos img { max-height: 54px; width: auto; filter: grayscale(1); opacity: .8; transition: .3s; }
.kbh .logos div:hover img { filter: none; opacity: 1; }

/* Clients marquee */
.kbh .clients { padding-block: 34px; border-block: 1px solid var(--line); overflow: hidden; background: #fff; }
.kbh .clients p { text-align: center; font: 600 12px/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.kbh .clients .track { display: flex; gap: 70px; width: max-content; animation: ltr 45s linear infinite; align-items: center; }
.kbh .clients img { height: 50px; width: auto; filter: grayscale(1); opacity: .75; }

/* Inner page hero */
.kbh .phero { position: relative; min-height: 470px; display: flex; align-items: flex-end; color: #fff; background: var(--navy); overflow: hidden; }
.kbh .phero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kbh .phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,21,43,.88), rgba(6,21,43,.35)); }
.kbh .phero .wrap { position: relative; z-index: 2; width: 100%; padding-block: 140px 64px; }
.kbh .crumb { font-size: 13.5px; color: #C9D6E5; margin-bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.kbh .crumb a:hover { color: #fff; }
.kbh .phero h1 { font-size: clamp(34px, 4.4vw, 58px); max-width: 20ch; }
.kbh .phero p { max-width: 720px; margin-top: 18px; color: #D5E0EC; font-size: 17px; }

/* Inner page blocks */
.kbh .two { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.kbh .lead { font-size: 18px; color: var(--muted); margin-top: 18px; }
.kbh .cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kbh .card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 32px; }
.kbh .card h3 { font-size: 20px; color: var(--navy); }
.kbh .card p { color: var(--muted); margin-top: 10px; font-size: 15.5px; }
.kbh .card .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--ice); color: var(--blue); display: grid; place-items: center; margin-bottom: 20px; }
.kbh .mv { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.kbh .mv .card { border-top: 3px solid var(--sand); }
.kbh .leaders { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 44px; }
.kbh .leader .ph { aspect-ratio: 4 / 5; background: linear-gradient(180deg, var(--ice), #DDE7F1); border-radius: 6px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.kbh .leader .ph img { width: 92%; height: auto; }
.kbh .leader h3 { font-size: 17px; color: var(--navy); margin-top: 16px; }
.kbh .leader span { color: var(--muted); font-size: 14px; }
.kbh .filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.kbh .filter button { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 99px; padding: 11px 20px; font: 500 14px/1 var(--f-body); cursor: pointer; transition: .2s; }
[dir="rtl"] .kbh .filter button { font-family: var(--f-ar); }
.kbh .filter button.on, .kbh .filter button:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.kbh .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 20px; }
.kbh .detail { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: start; }
.kbh .detail .main-ph { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; }
.kbh .detail .main-ph img { width: 100%; height: 100%; object-fit: cover; }
.kbh .facts { border-top: 1px solid var(--line); }
.kbh .facts div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.kbh .facts dt { font: 600 11.5px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.kbh .facts dd { margin: 8px 0 0; color: var(--navy); font-weight: 500; }
.kbh .partners3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.kbh .plogo { aspect-ratio: 16 / 9; border: 1px dashed #B9C7D6; border-radius: 6px; display: grid; place-items: center; text-align: center; color: var(--navy); font: 600 18px/1.3 var(--f-display); padding: 20px; background: #fff; }
.kbh .plogo small { display: block; font: 500 12px/1.4 var(--f-body); color: var(--muted); margin-top: 8px; }
.kbh .certs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.kbh .cert { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.kbh .cert img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line); }
.kbh .cert div { padding: 18px 20px; }
.kbh .cert b { color: var(--navy); display: block; }
.kbh .cert span { color: var(--muted); font-size: 14px; }
.kbh .incl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); margin-top: 30px; }
.kbh .incl div { padding: 26px 4px; border-bottom: 1px solid var(--line); display: flex; gap: 16px; }
.kbh .incl div:nth-child(odd) { border-inline-end: 1px solid var(--line); padding-inline-end: 26px; }
.kbh .incl div:nth-child(even) { padding-inline-start: 26px; }
.kbh .incl svg { color: var(--sand); flex: none; margin-top: 4px; }
.kbh .incl h3 { font-size: 18px; color: var(--navy); }
.kbh .incl p { color: var(--muted); font-size: 15px; margin-top: 6px; }
.kbh .strip { overflow: hidden; margin-top: 30px; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.kbh .strip .track { display: flex; gap: 18px; width: max-content; animation: ltr 38s linear infinite; }
.kbh .strip:hover .track { animation-play-state: paused; }
[dir="rtl"] .kbh .strip .track { animation-name: rtl; }
.kbh .scard { width: 290px; flex: none; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 26px; border-top: 3px solid var(--sand); }
.kbh .scard .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--ice); color: var(--blue); display: grid; place-items: center; margin-bottom: 18px; }
.kbh .scard h3 { font-size: 18px; color: var(--navy); }
.kbh .scard p { color: var(--muted); font-size: 14.5px; margin-top: 8px; }
.kbh .hub-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--line); }
.kbh .hub-list h3 { font-size: 16px; color: var(--navy); margin-bottom: 14px; }
.kbh .hub-list h3 a:hover { color: var(--blue); }
.kbh .hub-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.kbh .hub-list li { position: relative; padding-inline-start: 18px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.kbh .hub-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .5em; width: 7px; height: 7px; background: var(--sand); transform: rotate(45deg); }
@media (max-width: 1180px) { .kbh .hub-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .kbh .hub-list { grid-template-columns: 1fr; } .kbh .scard { width: 250px; } }
.kbh .form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kbh .form label { display: grid; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--navy); }
.kbh .form .full { grid-column: 1 / -1; }
.kbh .form input, .kbh .form select, .kbh .form textarea { font: inherit; padding: 13px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.kbh .form textarea { min-height: 130px; resize: vertical; }
.kbh .contact-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.kbh .contact-list div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.kbh .contact-list dt { font: 600 11.5px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.kbh .contact-list dd { margin: 8px 0 0; color: var(--navy); font-size: 17px; font-weight: 500; }
.kbh .mapbox { margin-top: 26px; aspect-ratio: 16 / 10; border-radius: 8px; background: var(--navy) linear-gradient(135deg, rgba(77,163,224,.18), rgba(6,21,43,0)); display: grid; place-items: center; color: #fff; text-align: center; padding: 20px; }
.kbh .ok { grid-column: 1 / -1; background: #E9F7EF; color: #17663A; padding: 14px 16px; border-radius: 6px; }

/* Footer */
.kbh .najdi { height: 14px; background-color: var(--navy); background-repeat: repeat-x; background-size: 48px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14'%3E%3Cpolygon points='0,14 12,3 24,14' fill='%23C9A464'/%3E%3Cpolygon points='24,14 36,3 48,14' fill='none' stroke='%23C9A464' stroke-width='1.4'/%3E%3C/svg%3E"); }
.kbh footer { background: var(--navy); color: #AFC0D3; font-size: 14.5px; }
.kbh footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr 1.2fr; gap: 50px; padding-block: 80px 60px; }
.kbh footer h4 { color: #fff; font: 600 13px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 22px; }
[dir="rtl"] .kbh footer h4 { font-family: var(--f-ar); letter-spacing: 0; }
.kbh footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.kbh footer a:hover { color: #fff; }
.kbh footer bdi { direction: ltr; unicode-bidi: isolate; }
.kbh .legal { border-top: 1px solid rgba(255,255,255,.1); }
.kbh .legal .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 24px; font-size: 13px; }
.kbh .flag { display: inline-block; height: 1em; width: auto; vertical-align: -0.12em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.kbh .band img.flag { position: static; inset: auto; width: auto; height: 26px; margin: 0 auto 16px; display: block; }
.kbh .wa { position: fixed; inset-block-end: calc(24px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 24px; z-index: 55; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(37,211,102,.45); }

@media (prefers-reduced-motion: reduce) { .kbh, .kbh *, .kbh *::before, .kbh *::after { animation: none !important; transition: none !important; } .kbh .reveal.pre { opacity: 1; transform: none; } }
@media (max-width: 1180px) {
  .kbh nav.main, .kbh .top .hide-m { display: none; }
  .kbh .burger { display: inline-flex; margin-inline-start: auto; border: 1px solid var(--line); background: #fff; color: var(--navy); border-radius: 4px; padding: 10px 13px; cursor: pointer; }
  .kbh .mnav { background: var(--navy); max-height: calc(100svh - 84px); overflow-y: auto; }
  .kbh .mnav a { display: block; padding: 15px 32px; border-top: 1px solid rgba(255,255,255,.08); color: #fff; }
  .kbh .mnav .sub a { padding-inline-start: 52px; color: #AFC0D3; font-size: 14.5px; }
  .kbh .leaders { grid-template-columns: repeat(3, 1fr); }
  .kbh .grid4, .kbh .rail { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
  .kbh .grid4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .kbh section.block { padding-block: 80px; }
  .kbh .intro, .kbh .quote, .kbh .trust, .kbh .two, .kbh .detail { grid-template-columns: 1fr; gap: 44px; }
  .kbh .core { grid-template-columns: 1fr; }
  .kbh .core .tile { aspect-ratio: 4 / 3; }
  .kbh .more2 { grid-template-columns: 1fr; }
  .kbh .more2 .tile { aspect-ratio: 4 / 3; }
  .kbh .tile .reveal-tx { max-height: none; opacity: 1; margin-top: 10px; }
  .kbh .svc-head, .kbh .carousel-head { flex-direction: column; align-items: flex-start; }
  .kbh .cta-box { flex-direction: column; align-items: flex-start; padding: 44px 32px; }
  .kbh .cards3, .kbh .certs, .kbh .partners3 { grid-template-columns: 1fr 1fr; }
  .kbh .rail { grid-auto-columns: 70%; }
  .kbh .grid4 { grid-template-columns: repeat(2, 1fr); }
  .kbh footer .cols { grid-template-columns: 1fr 1fr; }
  .kbh .sectors { height: 560px; }
}
@media (max-width: 600px) {
  .kbh .wrap { padding-inline: 16px; }
  .kbh .stats, .kbh .incl, .kbh .mv, .kbh .cards3, .kbh .certs, .kbh .partners3, .kbh .form, .kbh footer .cols { grid-template-columns: 1fr; }
  .kbh .stat:nth-child(odd) { border-inline-end: 0; }
  .kbh .incl div:nth-child(n) { border-inline-end: 0; padding-inline: 0; }
  .kbh .leaders { grid-template-columns: repeat(2, 1fr); }
  .kbh .logos { grid-template-columns: repeat(2, 1fr); }
  .kbh .rail { grid-auto-columns: 82%; }
  .kbh .grid4 { grid-template-columns: 1fr; }
  .kbh .sectors .tabs button { padding: 18px 16px; font-size: 14px; }
  .kbh .sectors .tabs button.on::after { inset-inline: 16px; }
  .kbh .hero .wrap { padding-bottom: 72px; }
  .kbh .scroll-cue { display: none; }
}

/* ===================== WordPress additions ===================== */
body { margin: 0; }
.admin-bar .kbh header.top { top: 32px; }
@media (max-width: 782px) { .admin-bar .kbh header.top { top: 46px; } }
.kbh img { height: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; background: #fff; padding: 10px 14px; }
/* Elementor: KBH sections run edge to edge; each widget sets its own inner width. */
.elementor-widget[class*="elementor-widget-kbh-"] { width: 100%; }
.e-con:has(> .e-con-inner > .elementor-widget[class*="elementor-widget-kbh-"]), .e-con:has(> .elementor-widget[class*="elementor-widget-kbh-"]) { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; }

/* Header menu (WordPress menu markup) */
.kbh nav.main ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.kbh nav.main li { position: relative; }
.kbh nav.main .menu-item-has-children > a::after { content: " \25BE"; font-size: .8em; }
.kbh nav.main .sub-menu { position: absolute; top: 100%; inset-inline-start: 0; width: 330px; display: block; background: #fff; border-radius: 6px; box-shadow: 0 24px 50px rgba(6,21,43,.22); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .22s; z-index: 5; }
.kbh nav.main li:hover > .sub-menu, .kbh nav.main li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.kbh nav.main .sub-menu a { color: var(--ink); padding: 12px 14px; border-radius: 4px; opacity: 1; font-size: 14.5px; }
.kbh nav.main .sub-menu a:hover { background: var(--ice); color: var(--navy); }
.kbh nav.main .current-menu-item > a, .kbh nav.main .current-menu-ancestor > a { color: var(--blue); }
.kbh .lang { display: inline-block; text-decoration: none; }
.kbh .mnav ul { list-style: none; margin: 0; padding: 0; }
.kbh .mnav .sub-menu a { padding-inline-start: 52px; color: #AFC0D3; font-size: 14.5px; }
.kbh .mnav[hidden] { display: none; }
footer .menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

/* Hero: poster fallback + synced service captions */
.kbh .hero .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kbh .hero-caps { position: absolute; z-index: 3; inset-inline-end: 32px; bottom: 96px; display: grid; gap: 10px; width: 300px; }
.kbh .hero-caps .cap { --p: 0; display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 12px; color: rgba(255,255,255,.55); font: 500 13.5px/1.3 var(--f-display); letter-spacing: .04em; transition: color .4s; }
[dir="rtl"] .kbh .hero-caps .cap { font-family: var(--f-ar); letter-spacing: 0; }
.kbh .hero-caps .cap i { height: 2px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; }
.kbh .hero-caps .cap i::after { content: ""; position: absolute; inset: 0; background: var(--sand); transform-origin: left; transform: scaleX(var(--p)); }
[dir="rtl"] .kbh .hero-caps .cap i::after { transform-origin: right; }
.kbh .hero-caps .cap.on { color: #fff; font-weight: 600; }
.kbh .hero-caps .cap:hover { color: #fff; }
@media (max-width: 900px) { .kbh .hero-caps { display: none; } }

.kbh .sectors .body[hidden] { display: none; }
.kbh .plogo.has-logo img { max-height: 90px; width: auto; margin: 0 auto 10px; }
.kbh .lead-text { font-size: 18px; color: var(--muted); }
.kbh .lead-text p + p { margin-top: 16px; }
.kbh .hub-list.single { grid-template-columns: 1fr; margin-top: 20px; padding-top: 0; border-top: 0; }
.kbh .hub-list.single li { font-size: 17px; color: var(--navy); }
.kbh section.block.tight { padding-block: 0 110px; }
.kbh .pcard[hidden] { display: none; }
.kbh .map-title { font-size: 18px; color: var(--navy); margin: 30px 0 14px; }
.kbh iframe.map { width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: 8px; }
.kbh .facts dd a { color: var(--blue); }
.kbh .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; }
.kbh .gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
@media (max-width: 600px) { .kbh .gallery { grid-template-columns: 1fr 1fr; } }

/* Quotation form */
.kbh-form { width: 100%; }
.kbh-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kbh-form label { display: grid; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--navy); }
.kbh-form label.is-wide { grid-column: 1 / -1; }
.kbh-form input[type=text], .kbh-form input[type=email], .kbh-form input[type=tel], .kbh-form select, .kbh-form textarea { font: inherit; padding: 13px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); width: 100%; }
.kbh-form textarea { min-height: 130px; resize: vertical; }
.kbh-form input:focus, .kbh-form select:focus, .kbh-form textarea:focus { outline: 2px solid var(--sky); outline-offset: 1px; }
.kbh-form .kbh-form__consent { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; color: var(--muted); }
.kbh-form .kbh-form__consent input { margin-top: 4px; accent-color: var(--blue); }
.kbh-form .kbh-form__submit { margin-top: 24px; cursor: pointer; border: 0; background: var(--navy); color: #fff; padding: 16px 30px; border-radius: 4px; font: 600 13px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; }
[dir="rtl"] .kbh-form .kbh-form__submit { font-family: var(--f-ar); letter-spacing: 0; }
.kbh-form .kbh-form__submit:hover { background: var(--blue); }
.kbh-form__notice { padding: 14px 18px; margin-bottom: 20px; border-inline-start: 3px solid; border-radius: 4px; }
.kbh-form__notice.is-ok { background: #e9f7ef; border-color: #1e8e4e; color: #145c33; }
.kbh-form__notice.is-err { background: #fdecec; border-color: #c62828; color: #8e1c1c; }
.kbh-hp { position: absolute; left: -9999px; }
@media (max-width: 600px) { .kbh-form__grid { grid-template-columns: 1fr; } }

/* Floating WhatsApp (two routes) */
.kbh-wa { position: fixed; z-index: 55; inset-block-end: 24px; inset-inline-end: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: var(--f-body); }
[dir="rtl"] .kbh-wa { align-items: flex-start; font-family: var(--f-ar); }
.kbh-wa__btn { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--wa); color: #fff; box-shadow: 0 10px 28px rgba(37,211,102,.45); animation: kbh-pulse 2.6s ease-out infinite; }
.kbh-wa.is-open .kbh-wa__btn { animation: none; }
.kbh-wa__menu { background: #fff; border-radius: 14px; padding: 16px; width: 270px; box-shadow: 0 20px 50px rgba(6,21,43,.2); }
.kbh-wa__menu[hidden] { display: none; }
.kbh-wa__title { margin: 0 0 10px; font-weight: 600; color: var(--navy); }
.kbh-wa__item { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; color: var(--navy); text-decoration: none; }
.kbh-wa__item:hover { background: var(--ice); }
.kbh-wa__item span { font-size: 13px; opacity: .7; }
@keyframes kbh-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@media (prefers-reduced-motion: reduce) { .kbh-wa__btn { animation: none; } }

/* Our production (product groups) */
.kbh .prod { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kbh .pgroup { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.kbh .pgroup .ph { aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); }
.kbh .pgroup .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.kbh .pgroup:hover .ph img { transform: scale(1.05); }
.kbh .pgroup .tx { padding: 24px 26px 28px; border-top: 3px solid var(--sand); }
.kbh .pgroup h3 { font-size: 19px; color: var(--navy); margin-bottom: 14px; }
.kbh .pgroup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kbh .pgroup li { position: relative; padding-inline-start: 18px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.kbh .pgroup li::before { content: ""; position: absolute; inset-inline-start: 0; top: .5em; width: 7px; height: 7px; background: var(--sand); transform: rotate(45deg); }
@media (max-width: 900px) { .kbh .prod { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .kbh .prod { grid-template-columns: 1fr; } }

/* ===================== Refinements (client feedback, 7 Oct) ===================== */
/* Buttons: rounded rectangles everywhere */
.kbh .btn, .kbh .filter button, .kbh .lang, .kbh .ctrl button, .kbh .burger, .kbh-form .kbh-form__submit { border-radius: 10px; }

/* Glass header */
.kbh header.top { background: rgba(255,255,255,.72); -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px); border-bottom: 1px solid rgba(255,255,255,.55); box-shadow: 0 1px 0 rgba(6,21,43,.06); }
.kbh header.top.solid { background: rgba(255,255,255,.82); box-shadow: 0 10px 30px rgba(6,21,43,.10); }
.kbh nav.main .sub-menu { background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.7); }

/* Glass accents on dark sections */
.kbh .btn-line.light { background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255,255,255,.45); }
.kbh .hero-caps { background: rgba(6,21,43,.30); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 18px 20px; }
.kbh .sectors .body > div { background: rgba(6,21,43,.32); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 32px 40px; max-width: 720px; }
.kbh .sectors .tabs { border: 1px solid rgba(255,255,255,.14); border-bottom: 0; }
.kbh .phero .crumb { display: inline-flex; padding: 8px 14px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.kbh .cta-box { background: linear-gradient(135deg, rgba(31,95,160,.35), rgba(6,21,43,0) 55%), var(--navy); }
.kbh-wa__menu { background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.7); }

/* Page header: animated blueprint (same on every page) */
.kbh .phero.bp { min-height: 520px; background-color: var(--navy);
  background-image: linear-gradient(rgba(77,163,224,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(77,163,224,.13) 1px, transparent 1px),
                    linear-gradient(rgba(77,163,224,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(77,163,224,.05) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; animation: bp-drift 40s linear infinite; }
.kbh .phero.bp::after { background: radial-gradient(ellipse at 75% 40%, rgba(77,163,224,.16), rgba(6,21,43,0) 60%), linear-gradient(90deg, rgba(6,21,43,.85) 0%, rgba(6,21,43,.35) 55%, rgba(6,21,43,.1) 100%); }
[dir="rtl"] .kbh .phero.bp::after { background: radial-gradient(ellipse at 25% 40%, rgba(77,163,224,.16), rgba(6,21,43,0) 60%), linear-gradient(270deg, rgba(6,21,43,.85) 0%, rgba(6,21,43,.35) 55%, rgba(6,21,43,.1) 100%); }
.kbh .phero.bp::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: 30%; left: -40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.06), transparent); animation: bp-sweep 9s ease-in-out 1.5s infinite; }
.kbh .bp-art { position: absolute; inset: 70px 0 0 auto; width: min(62%, 900px); z-index: 1; opacity: .95; }
[dir="rtl"] .kbh .bp-art { inset: 70px auto 0 0; transform: scaleX(-1); }
[dir="rtl"] .kbh .bp-art text { display: none; }
.kbh .bp-art svg { width: 100%; height: 100%; }
.kbh .bp-art path { fill: none; stroke: #4DA3E0; stroke-width: 1.4; stroke-linecap: round; }
.kbh .bp-art path.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bp-draw 2.6s cubic-bezier(.4,0,.2,1) forwards; }
.kbh .bp-art path.core { stroke: rgba(201,164,100,.75); }
.kbh .bp-art path.dim { stroke: var(--sand); stroke-width: 1; }
.kbh .bp-art .lbl { fill: rgba(201,164,100,.85); font: 600 11px var(--f-display); letter-spacing: .12em; animation: bp-fade 1s ease 2.2s both; }
@keyframes bp-draw { to { stroke-dashoffset: 0; } }
@keyframes bp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bp-drift { to { background-position: 120px 120px, 120px 120px, 24px 24px, 24px 24px; } }
@keyframes bp-sweep { 0% { left: -40%; } 60%, 100% { left: 110%; } }
@media (max-width: 900px) { .kbh .bp-art { width: 100%; opacity: .35; inset: 90px 0 0 0; } }
@media (prefers-reduced-motion: reduce) { .kbh .bp-art path.draw { stroke-dashoffset: 0; } .kbh .phero.bp { animation: none; } }

/* Leadership: normalised portraits, all on one line */
.kbh .leader .ph { aspect-ratio: 560 / 620; background: linear-gradient(180deg, var(--ice), #D6E2EE); }
.kbh .leader .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

/* Contact: more air, cards, soft glass */
.kbh section.contact-sec { position: relative; overflow: hidden; background: var(--mist); }
.kbh section.contact-sec::before { content: ""; position: absolute; width: 620px; height: 620px; right: -160px; top: -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(77,163,224,.22), rgba(77,163,224,0)); }
.kbh section.contact-sec::after { content: ""; position: absolute; width: 520px; height: 520px; left: -180px; bottom: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(201,164,100,.18), rgba(201,164,100,0)); }
.kbh .contact-grid { position: relative; z-index: 1; gap: 48px; grid-template-columns: 1.25fr 1fr; }
.kbh .ccard { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 48px; box-shadow: 0 20px 50px rgba(6,21,43,.06); }
.kbh .ccard.glass { background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.75); }
.kbh .ccard .contact-list div { padding: 22px 0; }
.kbh .ccard .contact-list div:first-child { padding-top: 0; }
.kbh-form__grid { gap: 22px 20px; }
.kbh-form label { gap: 9px; }
@media (max-width: 900px) { .kbh .contact-grid { grid-template-columns: 1fr; } .kbh .ccard { padding: 28px 22px; } }

/* polish */
.kbh .phero .crumb { display: flex; width: max-content; max-width: 100%; margin-bottom: 22px; flex-wrap: wrap; }
.kbh header.top { background: rgba(255,255,255,.86); }
.kbh header.top.solid { background: rgba(255,255,255,.92); }

.kbh .plogo.has-logo img { max-height: 110px; border-radius: 8px; }

/* Blueprint variants + no-overlap layout (client feedback) */
.kbh .phero.bp .wrap { padding-top: 150px; }
.kbh .phero.bp h1, .kbh .phero.bp .wrap > p { max-width: min(46%, 620px); }
.kbh .bp-art { inset: 96px 0 24px auto; width: min(50%, 820px); }
[dir="rtl"] .kbh .bp-art { inset: 96px auto 24px 0; }
.kbh .bp-art path.thin, .kbh .bp-art circle.thin { stroke-width: .9; stroke: rgba(77,163,224,.7); }
.kbh .bp-art .gold { stroke: var(--sand); }
.kbh .bp-art .dim { stroke: rgba(201,164,100,.7); stroke-width: .9; }
.kbh .bp-art circle { fill: none; stroke: #4DA3E0; stroke-width: 1.4; }
.kbh .bp-art circle.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bp-draw 2.6s cubic-bezier(.4,0,.2,1) forwards; }
.kbh .bp-art path.dash { stroke-dasharray: .012 .012 !important; stroke-dashoffset: 0 !important; animation: bp-fade 1s ease 1.2s both !important; }
.kbh .bp-art path.flow { animation: bp-draw 2s cubic-bezier(.4,0,.2,1) forwards, bp-flow 2.4s linear 2.2s infinite !important; }
@keyframes bp-flow { from { stroke-dasharray: .03 .015; stroke-dashoffset: 0; } to { stroke-dasharray: .03 .015; stroke-dashoffset: -.09; } }
.kbh .bp-art circle.pulse { fill: var(--sand); stroke: none; animation: bp-fade .6s ease both; }
.kbh .bp-art circle.ring { fill: none; stroke: var(--sand); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: bp-ring 2.4s ease-out infinite; }
@keyframes bp-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(5); opacity: 0; } }
@media (max-width: 1180px) { .kbh .phero.bp h1, .kbh .phero.bp .wrap > p { max-width: 60%; } .kbh .bp-art { opacity: .55; } }
@media (max-width: 900px) { .kbh .phero.bp h1, .kbh .phero.bp .wrap > p { max-width: 100%; } .kbh .bp-art { width: 100%; inset: 96px 0 0 0; opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .kbh .bp-art .flow, .kbh .bp-art .ring { animation: none !important; } }

/* Calm headers: draw in once, then still (no looping motion). */
.kbh .phero.bp { animation: none; }
.kbh .phero.bp::before { display: none; }
.kbh .bp-art path.flow { animation: bp-draw 2s cubic-bezier(.4,0,.2,1) forwards !important; }
.kbh .bp-art circle.ring { display: none; }


/* Subtle blue across the site (less stark white) */
.kbh section.block { background: #F5F9FD; }
.kbh section.block.tint { background: #E8F1FA; }
.kbh section.contact-sec { background: #E8F1FA; }
.kbh .clients { background: #F5F9FD; border-color: #DCE7F3; }
.kbh .card, .kbh .pgroup, .kbh .doc, .kbh .logos div, .kbh .cert, .kbh .plogo { box-shadow: 0 10px 30px rgba(6,21,43,.05); }
.kbh .eyebrow { color: var(--blue); }
.kbh .eyebrow.light { color: rgba(255,255,255,.78); }
.kbh .stat b sup, .kbh .stat svg { color: var(--blue); }

/* Contact: quotation fields glow while selected */
.kbh-form input:focus, .kbh-form select:focus, .kbh-form textarea:focus { border-color: var(--sky); outline: none; animation: s-fieldglow 1.8s ease-in-out infinite; }
@keyframes s-fieldglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(77,163,224,.0), 0 0 0 1px rgba(77,163,224,.6); } 50% { box-shadow: 0 0 0 5px rgba(77,163,224,.18), 0 0 14px rgba(77,163,224,.35); } }
[dir="rtl"] .kbh .bp-art { transform: none; }
[dir="rtl"] .kbh .bp-art text { display: inline; }

/* ===== Round 4: floating glass header, big partner strip, production tiles, projects strip ===== */
.kbh header.top { top: 14px; inset-inline: 18px; border-radius: 18px; background: rgba(255,255,255,.52); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255,255,255,.6); box-shadow: 0 12px 40px rgba(6,21,43,.18); }
.kbh header.top.solid { top: 10px; background: rgba(255,255,255,.72); }
.admin-bar .kbh header.top { top: 46px; }
.kbh .top .wrap { height: 74px; padding-inline: 22px; }
.kbh .mnav { border-radius: 0 0 18px 18px; }
/* Partners / clients: large logo cards, continuous strip */
.kbh .clients { padding-block: 64px; }
.kbh .clients p { font-size: 13px; margin-bottom: 30px; color: var(--navy); }
.kbh .clients .track { gap: 22px; animation-duration: 70s; }
.kbh .clients .track img { height: 110px; width: 230px; object-fit: contain; padding: 18px 22px; background: #fff; border: 1px solid #DCE7F3; border-radius: 14px; filter: none; opacity: 1; box-shadow: 0 10px 26px rgba(6,21,43,.06); }
.kbh .clients:hover .track { animation-play-state: paused; }
/* Our production: alternating navy / white tiles with translucent photo overlays */
.kbh .ptiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kbh .ptile { position: relative; overflow: hidden; border-radius: 14px; min-height: 200px; background: #fff; border: 1px solid #DCE7F3; }
.kbh .ptile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .14; transition: opacity .6s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.kbh .ptile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.92) 20%, rgba(232,241,250,.72)); transition: opacity .6s; }
.kbh .ptile .tx { position: relative; z-index: 2; padding: 30px 28px; }
.kbh .ptile h3 { font-size: 19px; color: var(--navy); margin-bottom: 10px; }
.kbh .ptile p { color: var(--muted); font-size: 14.5px; }
.kbh .ptile.dark { background: var(--navy); border-color: rgba(255,255,255,.08); }
.kbh .ptile.dark img { opacity: .32; }
.kbh .ptile.dark::after { background: linear-gradient(160deg, rgba(6,21,43,.9) 20%, rgba(6,21,43,.55)); }
.kbh .ptile.dark h3 { color: #fff; }
.kbh .ptile.dark p { color: #C9D6E5; }
.kbh .ptile:hover img { opacity: .5; transform: scale(1.06); }
.kbh .ptile:hover::after { opacity: .82; }
.kbh .ptile.dark:hover img { opacity: .6; }
@media (max-width: 900px) { .kbh .ptiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .kbh .ptiles { grid-template-columns: 1fr; } }
/* Projects: auto-scrolling strip (pauses on hover) */
.kbh .pstrip { overflow: hidden; padding-bottom: 6px; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.kbh .pstrip .track { display: flex; gap: 22px; width: max-content; animation: ltr 80s linear infinite; }
[dir="rtl"] .kbh .pstrip .track { animation-name: rtl; }
.kbh .pstrip:hover .track { animation-play-state: paused; }
.kbh .pstrip .pcard { width: 320px; flex: none; }
@media (max-width: 600px) { .kbh .pstrip .pcard { width: 250px; } }

/* Production: grouped under headings, slider */
.kbh .pslider { overflow: hidden; }
.kbh .ptabs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 26px; }
.kbh .ptabs button[role=tab] { border: 1px solid #DCE7F3; background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--navy); border-radius: 10px; padding: 11px 18px; font: 600 13.5px/1 var(--f-display); cursor: pointer; transition: .25s; }
[dir="rtl"] .kbh .ptabs button[role=tab] { font-family: var(--f-ar); }
.kbh .ptabs button[role=tab].on, .kbh .ptabs button[role=tab]:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.kbh .ptabs .ctrl { margin-inline-start: auto; display: flex; gap: 10px; }
.kbh .ppanels { display: flex; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.kbh .ppanel { flex: 0 0 100%; }

/* ===== Page-header wireframes (client rule): white + muted corporate-blue CAD linework only — no glow, no fills ===== */
.kbh .bp-art svg.wf path { fill: none !important; filter: none !important; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: wf-draw 1.3s cubic-bezier(.4,0,.2,1) var(--t) forwards; }
.kbh .bp-art svg.wf .w-m { stroke: #F2F6FA; stroke-width: 1.1; }
.kbh .bp-art svg.wf .w-s { stroke: #A3BFDC; stroke-width: .85; }
.kbh .bp-art svg.wf .w-f { stroke: rgba(160,190,220,.78); stroke-width: .6; }
.kbh .bp-art svg.wf .w-d { stroke: rgba(242,246,250,.72); stroke-width: .6; }
.kbh .bp-art svg.wf .w-g, .kbh .bp-art svg.wf .w-h { stroke-dasharray: 4 4; stroke-dashoffset: 0; opacity: 0; animation: wf-fade 1.2s ease var(--t) forwards; }
.kbh .bp-art svg.wf .w-g { stroke: rgba(143,175,208,.3); stroke-width: .5; }
.kbh .bp-art svg.wf .w-h { stroke: rgba(143,175,208,.55); stroke-width: .55; stroke-dasharray: 3 3; }
@keyframes wf-draw { to { stroke-dashoffset: 0; } }
@keyframes wf-fade { to { opacity: 1; } }
.kbh .bp-art svg.wf text { fill: #F2F6FA; font: 600 10px var(--f-display); letter-spacing: .06em; text-anchor: end; opacity: 0; animation: wf-fade .8s ease var(--t) forwards; }
[dir="rtl"] .kbh .bp-art svg.wf text { font-family: var(--f-ar); letter-spacing: 0; }
/* Services hub: the block separates into five layers; hover one, the others recede */
.kbh .bp-axo { pointer-events: auto; }
.kbh .wf.services .tier { transition: transform .35s ease, opacity .35s ease; animation: s-apart 1.3s cubic-bezier(.2,.8,.2,1) .7s both; }
.kbh .wf.services .tier-0 { --i: 0; } .kbh .wf.services .tier-1 { --i: 1; } .kbh .wf.services .tier-2 { --i: 2; } .kbh .wf.services .tier-3 { --i: 3; } .kbh .wf.services .tier-4 { --i: 4; }
@keyframes s-apart { from { translate: 0 calc(var(--i) * 52px); } to { translate: 0 0; } }
.kbh .wf.services:hover .tier { opacity: .3; }
.kbh .wf.services .tier:hover { opacity: 1; transform: translate(-10px, -6px); }
.kbh .wf.services .tier:hover .w-s, .kbh .wf.services .tier:hover .w-f { stroke: #F2F6FA; }
@media (prefers-reduced-motion: reduce) { .kbh .bp-art svg.wf *, .kbh .wf.services .tier { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; translate: none !important; } }

/* ===== Section 1: everything editable in Elementor ===== */
/* Brand colours & fonts follow Elementor → Site Settings (Global colours / fonts); the values after the comma are the KBH defaults. */
body {
  --navy: var(--e-global-color-kbhnavy, #06152B); --navy-2: var(--e-global-color-kbhnavy2, #06152B); --blue: var(--e-global-color-kbhblue, #1F5FA0);
  --sky: var(--e-global-color-kbhsky, #4DA3E0); --ice: var(--e-global-color-kbhice, #EDF3F8); --mist: var(--e-global-color-kbhmist, #F5F8FB);
  --sand: var(--e-global-color-kbhsand, #C9A464); --ink: var(--e-global-color-kbhink, #0F1E33); --muted: var(--e-global-color-kbhmuted, #5A6B80);
  --line: var(--e-global-color-kbhline, #DCE4EE); --paper: var(--e-global-color-kbhpaper, #FFFFFF);
  --f-display: var(--e-global-typography-kbhdisplay-font-family, "Archivo"), "Helvetica Neue", Arial, sans-serif;
  --f-body: var(--e-global-typography-kbhbody-font-family, "Inter"), "Segoe UI", Roboto, Arial, sans-serif;
  --f-ar: var(--e-global-typography-kbharabic-font-family, "IBM Plex Sans Arabic"), "Segoe UI", Tahoma, sans-serif;
}
/* Animation switches (Elementor → section → Animation) */
.kbh-reveal-no .reveal.pre { opacity: 1 !important; transform: none !important; }
.kbh-hoverpause-yes .ticker:hover .track { animation-play-state: paused; }
.kbh-hoverpause-no .clients:hover .track, .kbh-hoverpause-no .strip:hover .track, .kbh-hoverpause-no .pstrip:hover .track { animation-play-state: running; }
.kbh-move-no .track { animation: none !important; width: auto !important; flex-wrap: wrap; justify-content: center; }
.kbh-move-no .track > .dup, .kbh-move-no .track > [data-dup], .kbh-move-no .track > [aria-hidden="true"] { display: none !important; }
.kbh-tiletext-always .tile .reveal-tx { max-height: none; opacity: 1; margin-top: 12px; }
.kbh-zoom-no .tile:hover img, .kbh-zoom-no .pcard:hover img, .kbh-zoom-no .ptile:hover img { transform: none; }
.kbh-bpdraw-no .bp-art svg.wf path, .kbh-bpdraw-no .bp-art svg.wf text, .kbh-bpdraw-no .wf.services .tier { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; translate: none !important; }
.kbh-glow-no .kbh-form input:focus, .kbh-glow-no .kbh-form select:focus, .kbh-glow-no .kbh-form textarea:focus { animation: none; }
.kbh-caps-no .hero-caps { display: none; }
/* Editor-only hint for a section with nothing to show */
.kbh .kbh-empty { margin: 16px; padding: 28px 24px; border: 2px dashed #9FB3C8; border-radius: 10px; background: #F5F8FB; color: #5A6B80; font: 14px/1.5 "Segoe UI", Arial, sans-serif; text-align: center; }
/* Header switches */
.kbh-float-no .kbh header.top, .kbh-float-no .kbh header.top.solid { top: 0; inset-inline: 0; border-radius: 0; border-width: 0 0 1px; }
.admin-bar .kbh-float-no .kbh header.top { top: 32px; }
.kbh-float-no .kbh .mnav { border-radius: 0; }
.kbh-sticky-no .kbh header.top { position: absolute; }

/* Careers application form */
.kbh-form input[type=file] { font: inherit; padding: 11px 12px; border: 1px dashed var(--line); border-radius: 6px; background: #fff; color: var(--ink); width: 100%; cursor: pointer; }
.kbh-form input[type=file]::file-selector-button { font: 600 12px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; border: 0; border-radius: 6px; background: var(--navy); color: #fff; padding: 10px 14px; margin-inline-end: 12px; cursor: pointer; }
[dir="rtl"] .kbh-form input[type=file]::file-selector-button { font-family: var(--f-ar); letter-spacing: 0; }
.kbh .steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 24px; }
.kbh .steps li { display: flex; gap: 16px; align-items: flex-start; }
.kbh .steps b { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: 600 15px/1 var(--f-display); }
.kbh .steps h3 { font-size: 17px; margin: 6px 0 6px; color: var(--navy); }
.kbh .steps p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.kbh .mail-line { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.kbh .mail-line a { color: var(--navy); font-weight: 600; }

/* Circular leadership portraits */
.kbh .leader .ph { aspect-ratio: 1; border-radius: 50%; }
.kbh .leader .ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .35s ease; }
.kbh .leader:hover .ph img, .kbh .leader:focus-within .ph img { filter: grayscale(0); }
.kbh .leader .ph img[src*="maazin-tariq"] { object-position: center 25%; }
@media (prefers-reduced-motion: reduce) { .kbh .leader .ph img { transition: none; } }

/* Align the visible crown of every portrait at 8% of its circular frame. */
.kbh .leader .ph { position: relative; }
.kbh .leader .ph img { position: absolute; left: 0; width: 100%; height: auto; max-height: none; object-fit: initial; top: var(--portrait-top, 0.335%); }
.kbh .leader .ph img[src*="leader-hashmi"] { --portrait-top: -6.464%; }
.kbh .leader .ph img[src*="leader-saleem"] { --portrait-top: -17.893%; }
.kbh .leader .ph img[src*="leader-umer"] { --portrait-top: -15.036%; }
.kbh .leader .ph img[src*="leader-toor"] { --portrait-top: -17.179%; }
/* Keep the existing cutouts filling the lower edge after crown alignment. */
.kbh .leader .ph img[src*="leader-"] { width: 110%; left: -5%; }
.kbh .leader .ph img[src*="leader-hashmi"] { --portrait-top: -7.911%; }
.kbh .leader .ph img[src*="leader-saleem"] { --portrait-top: -20.482%; }
.kbh .leader .ph img[src*="leader-umer"] { --portrait-top: -17.339%; }
.kbh .leader .ph img[src*="leader-toor"] { --portrait-top: -19.696%; }
.kbh .leader .ph img[src*="leader-"] { max-width: none; }

/* Design team: same portrait size and hover effect as Leadership. */
.kbh-design-team .leaders { grid-template-columns: repeat(3, minmax(0, 224px)); justify-content: center; }
.kbh-design-team .leader .ph img { top: var(--design-portrait-top, 0); width: 100%; left: 0; }
@media (max-width: 767px) { .kbh-design-team .leaders { grid-template-columns: repeat(2, minmax(0, 224px)); } }
@media (max-width: 420px) { .kbh-design-team .leaders { grid-template-columns: minmax(0, 224px); } }
.kbh-design-team img[src*="subhan-nabi"] { --design-portrait-top: 4.332%; }
.kbh-design-team img[src*="maila-iqbal"] { --design-portrait-top: 1.461%; }
.kbh-design-team img[src*="ameer-hamza"] { --design-portrait-top: 1.541%; }

/* Fill the lower circle while retaining the shared 8% crown line. */
.kbh .leader .ph img[src*="leader-saleem"],
.kbh .leader .ph img[src*="leader-umer"],
.kbh .leader .ph img[src*="leader-toor"] { width: 112%; max-width: none; left: -6%; }
.kbh .leader .ph img[src*="leader-saleem"] { --portrait-top: -21%; }
.kbh .leader .ph img[src*="leader-umer"] { --portrait-top: -17.8%; }
.kbh .leader .ph img[src*="leader-toor"] { --portrait-top: -20.2%; }

/* Centre portrait captions and the design-team heading. */
.kbh .leader { text-align: center; }
.kbh .leader .ph { margin-inline: auto; }
.kbh .leader h3 { text-align: center; line-height: 1.35; margin: 16px 0 4px; }
.kbh .leader > span { display: block; text-align: center; line-height: 1.5; }
.kbh-design-team .wrap > .reveal { margin-inline: auto; text-align: center; }
.kbh-design-team .big { text-align: center; }

/* About: a compact story, purpose and people sequence. */
.kbh-about-story .kbh section.block { padding-block: 72px 24px; }
.kbh-about-story .two { gap: 56px; }
.kbh-about-story .lead-text { max-width: 65ch; }
.kbh-about-purpose .kbh section.block { padding-block: 0 72px; }
.kbh-about-purpose .mv { margin-top: 12px; }
.kbh-about-leadership .kbh section.block { padding-block: 72px 28px; }
.kbh-about-leadership .wrap > .reveal { margin-inline: auto; text-align: center; }
.kbh-about-leadership .lead { max-width: 64ch; margin-inline: auto; }
.kbh-about-design .kbh section.block { padding-block: 28px 72px; }
.kbh-about-design .wrap { border-top: 1px solid var(--line); padding-top: 32px; }
.kbh-about-design .big { margin-top: 0; }
.kbh-about-design .leaders { margin-top: 28px; }
.kbh-about-enquiry .kbh section.block { padding-block: 72px; }
@media (max-width: 767px) {
 .kbh-about-story .kbh section.block { padding-block: 48px 20px; }
 .kbh-about-story .two { gap: 24px; }
 .kbh-about-purpose .kbh section.block { padding-bottom: 48px; }
 .kbh-about-leadership .kbh section.block { padding-block: 48px 20px; }
 .kbh-about-design .kbh section.block { padding-block: 20px 48px; }
 .kbh-about-design .wrap { padding-top: 24px; }
 .kbh-about-enquiry .kbh section.block { padding-block: 48px; }
 .kbh .leader h3 { font-size: 17px; }
}

/* Keep the skyline credit readable without competing with the message. */
.kbh .band-credit { position:absolute; bottom:12px; inset-inline:24px; z-index:2; color:#fff; font-size:11px; text-align:end; }
.kbh .band-credit a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.kbh .band:has(.band-credit) { position:relative; }

/* Saudi flag: prominent, with a restrained breeze animation. */
.kbh .band img.flag {
 width: 96px; height: 64px; object-fit: contain; margin: 0 auto 22px;
 border-radius: 2px; transform-origin: left center;
 box-shadow: 0 3px 12px rgba(0,0,0,.18);
 animation: kbh-flag-breeze 4.8s ease-in-out infinite;
}
@keyframes kbh-flag-breeze {
 0%,100% { transform: perspective(420px) rotateY(-7deg) rotateZ(-1deg); }
 50% { transform: perspective(420px) rotateY(9deg) rotateZ(1deg); }
}
@media (max-width:767px) { .kbh .band img.flag { width:78px; height:52px; } }
@media (prefers-reduced-motion:reduce) { .kbh .band img.flag { animation:none; transform:none; } }

/* Shared self-hosted Cairo typography for English and Arabic. */
body { --f-display:var(--e-global-typography-kbhdisplay-font-family,'Cairo'),sans-serif; --f-body:var(--e-global-typography-kbhbody-font-family,'Cairo'),sans-serif; --f-ar:var(--e-global-typography-kbharabic-font-family,'Cairo'),sans-serif; }

/* Premium 3D CAD: original blueprint grid, projected geometry, staged assembly. */
.kbh .phero.bp { background-color:var(--navy); background-image:linear-gradient(rgba(77,163,224,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(77,163,224,.11) 1px,transparent 1px),linear-gradient(rgba(77,163,224,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(77,163,224,.035) 1px,transparent 1px); background-size:120px 120px,120px 120px,24px 24px,24px 24px; }
.kbh .bp-art svg.premium3d path { animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:1;vector-effect:non-scaling-stroke; }
.kbh .bp-art svg.premium3d .w-m { stroke-width:1.05; }
.kbh .bp-art svg.premium3d .w-s { stroke-width:.75;opacity:.78; }
.kbh .bp-art svg.premium3d .w-f { stroke-width:.5;opacity:.48; }
.kbh .bp-art svg.premium3d .w-d { stroke-width:.65;opacity:.5; }
.kbh .bp-art svg.premium3d .w-g { stroke-width:.45;opacity:.22; }
.kbh .bp-art svg.premium3d .cad-phase { transform-box:fill-box;transform-origin:center;animation:cad-assemble 1.1s cubic-bezier(.23,1,.32,1) calc(var(--phase)*.16s) both; }
@keyframes cad-assemble { from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:translateY(0)} }
.kbh-bpdraw-no .kbh .bp-art svg.premium3d .cad-phase { animation:none; }
.kbh .phero h1 { font-size:clamp(32px,4vw,52px);line-height:1.2; }
.kbh .phero.bp .wrap>p { font-size:17px;line-height:1.8; }
.kbh .phero .crumb { font-size:12px; }
.kbh .eyebrow { letter-spacing:.11em; }
.kbh h1,.kbh h2,.kbh h3 { scroll-margin-top:140px; }
.kbh button,.kbh a,.kbh input,.kbh select { touch-action:manipulation; }
.kbh .ppanels { transition:transform 240ms cubic-bezier(.23,1,.32,1); }
.kbh-form input:focus,.kbh-form textarea:focus,.kbh-form select:focus { animation:none;outline:2px solid var(--blue);outline-offset:2px; }
.kbh .stat b { font-variant-numeric:tabular-nums; }
.kbh .ptabs button[role=tab] { transition:background-color 180ms,color 180ms,border-color 180ms; }
[dir=rtl] .kbh .eyebrow { letter-spacing:0; }
@media(max-width:900px) {
 .kbh .phero.bp { min-height:650px; }
 .kbh .phero.bp .wrap { padding-bottom:255px; }
 .kbh .phero.bp .bp-art,[dir=rtl] .kbh .phero.bp .bp-art { inset:auto 10% 12px;width:80%;height:240px;opacity:.78;transform:none; }
 .kbh .phero.bp h1,.kbh .phero.bp .wrap>p { max-width:100%; }
}
@media(hover:none) { .kbh .ptile:hover img,.kbh .pcard:hover img,.kbh .pgroup:hover .ph img {transform:none;} }
@media(prefers-reduced-motion:reduce) { .kbh .bp-art svg.premium3d .cad-phase { animation:none;opacity:1;transform:none; }html{scroll-behavior:auto;} }

.kbh-motion-toggle { position:fixed;bottom:24px;inset-inline-start:20px;z-index:65;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--navy);cursor:pointer;font:600 16px/1 var(--f-body);box-shadow:0 2px 8px #0a1e3c12; }
.kbh-motion-toggle:focus-visible { outline:2px solid var(--blue);outline-offset:3px; }
.kbh-motion-paused .kbh *, .kbh-motion-paused .kbh *::before,.kbh-motion-paused .kbh *::after { animation-play-state:paused!important; }
.kbh .pstrip:focus-within .track,.kbh .strip:focus-within .track,.kbh .clients:focus-within .track,.kbh .ticker:focus-within .track { animation-play-state:paused; }

/* Trace the visible 3D edges; no fade-in or assembly translation. */
.kbh .bp-art svg.premium3d .cad-phase { animation:none;opacity:1;transform:none; }
.kbh .bp-art svg.premium3d path { stroke-dasharray:1;stroke-dashoffset:1;animation:cad-trace 1.4s cubic-bezier(.4,0,.2,1) calc(var(--phase)*.28s + var(--trace,0s)) both; }
.kbh .bp-art svg.premium3d .cad-phase-0 path { animation:none;stroke-dasharray:none;stroke-dashoffset:0; }
@keyframes cad-trace { from{stroke-dashoffset:1}to{stroke-dashoffset:0} }
.kbh .bp-art svg.premium3d .w-m {stroke-width:1.2;}
.kbh .bp-art svg.premium3d .w-s {stroke-width:.85;opacity:.85;}
.kbh .bp-art svg.premium3d .w-f {stroke-width:.6;opacity:.6;}
.kbh-bpdraw-no .kbh .bp-art svg.premium3d path {animation:none;stroke-dashoffset:0;}
@media(prefers-reduced-motion:reduce){.kbh .bp-art svg.premium3d path {animation:none!important;stroke-dashoffset:0!important;}}

/* About flyover keeps the original blue architectural grid. */
.kbh .bp-roshan-vision{opacity:1;}
.bp-roshan-vision canvas{display:block;width:100%;height:100%;}

/* Shared deeper navy and stronger bilingual typography. */
body{--f-display:Montserrat,sans-serif;--f-body:Montserrat,sans-serif;--f-ar:Cairo,sans-serif;font-weight:450;}
[dir=rtl] body{--f-display:Cairo,sans-serif;--f-body:Cairo,sans-serif;font-weight:500;}
.kbh h1,.kbh h2,.kbh h3{font-weight:650;}
[dir=rtl] .kbh p,[dir=rtl] .kbh li,[dir=rtl] .kbh small{font-weight:500;}
[dir=rtl] .kbh nav.main a,[dir=rtl] .kbh .btn,[dir=rtl] .kbh .eyebrow{font-weight:650;}
/* Consistent inner-page headers; homepage hero is a separate component. */
.kbh .phero,.kbh .phero.bp{height:480px;min-height:480px;max-height:480px;overflow:hidden;}
.kbh .phero .wrap,.kbh .phero.bp .wrap{padding-top:125px;padding-bottom:42px;}
.kbh .phero h1,.kbh .phero.bp h1{font-size:clamp(28px,3.2vw,44px);line-height:1.16;}
.kbh .phero .wrap>p{font-size:16px;line-height:1.65;}
.kbh .phero .bp-art{top:95px;bottom:25px;height:auto;}
@media(max-width:900px){
 .kbh .phero,.kbh .phero.bp{height:540px;min-height:540px;max-height:540px;}
 .kbh .phero .wrap,.kbh .phero.bp .wrap{padding-top:110px;padding-bottom:145px;}
 .kbh .phero h1,.kbh .phero.bp h1{font-size:30px;line-height:1.15;}
 .kbh .phero .wrap>p{font-size:15px;line-height:1.6;}
 .kbh .phero .bp-art,.kbh .phero.bp .bp-art,[dir=rtl] .kbh .phero.bp .bp-art{inset:auto 10% 4px;width:80%;height:155px;opacity:.7;}
}

.kbh .phero .bp-image img{object-fit:contain;object-position:center;}.kbh .phero .bp-image{opacity:1;}

/* Projects page filters (tags + type / city / department) */
.kbh .pfilters { margin-bottom: 36px; }
.kbh .pfilters .filter { margin-bottom: 14px; }
.kbh .psels { display: flex; flex-wrap: wrap; gap: 10px; }
.kbh .psel select { font: 500 14px/1 var(--f-body); color: var(--ink); background: #fff no-repeat right 14px center; border: 1px solid var(--line); border-radius: 10px; padding: 11px 38px 11px 16px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230A1E3C' stroke-width='1.6'/%3E%3C/svg%3E"); }
[dir="rtl"] .kbh .psel select { font-family: var(--f-ar); padding: 11px 16px 11px 38px; background-position: left 14px center; }
.kbh .psel select:focus { outline: 2px solid var(--sky); outline-offset: 1px; }
.kbh .pnone { padding: 40px 0; color: var(--muted); text-align: center; }
.kbh .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 600px) {
  .kbh .pfilters .filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .kbh .pfilters .filter button { flex: none; }
  .kbh .psel { flex: 1 1 100%; } .kbh .psel select { width: 100%; }
}

/* Miro review (Oct 2026): service tiles bigger, titles larger and bolder (homepage + Services page). Style-tab values still override. */
.kbh .core, .kbh .more2 { gap: 8px; }
.kbh .more2 { margin-top: 8px; }
.kbh .core .tile { aspect-ratio: 4 / 4.6; }
.kbh .more2 .tile { aspect-ratio: 16 / 7.5; }
.kbh .tile .tx { padding: 40px; }
.kbh .tile h3 { font-size: clamp(26px, 2.4vw, 36px); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; text-shadow: 0 2px 18px rgba(5,14,31,.35); }
.kbh .more2 .tile h3 { font-size: clamp(25px, 2.2vw, 33px); }
.kbh .tile .reveal-tx p { font-size: 16.5px; }
@media (max-width: 900px) { .kbh .core .tile, .kbh .more2 .tile { aspect-ratio: 4 / 3.4; } .kbh .tile .tx { padding: 28px; } }
/* Gold header drawings: sand-gold accent lines (w-y) alongside the white CAD lines. Editable per header in the Style tab. */
.kbh .bp-art svg.wf .w-y { stroke: var(--sand, #C9A464); stroke-width: 1.3; }

/* Final audit (12 Oct): page headers grow with their text instead of a fixed height (long service intros were pushed under the menu / clipped on phones). */
.kbh .phero, .kbh .phero.bp { height: auto; max-height: none; min-height: 480px; }
@media (max-width: 900px) { .kbh .phero, .kbh .phero.bp { min-height: 540px; } }
/* Production tabs: panels align to the top; the slider height follows the visible tab (set in kbh.js). */
.kbh .ppanels { align-items: flex-start; transition: transform 240ms cubic-bezier(.23,1,.32,1), height 300ms ease; }
/* Card rows that follow a section ("tight") use the shared 72 / 48px rhythm too. */
.kbh section.block.tight { padding-bottom: 72px; }
@media (max-width: 900px) { .kbh section.block.tight { padding-bottom: 48px; } }
/* Breadcrumb + heading start at the same height on every page (top-aligned, fixed distance below the menu). */
.kbh .phero, .kbh .phero.bp { align-items: flex-start; }
.kbh .phero .wrap, .kbh .phero.bp .wrap { padding-top: 140px; }
@media (max-width: 900px) { .kbh .phero .wrap, .kbh .phero.bp .wrap { padding-top: 120px; } }
/* Phones: Design Team uses the same 2-per-row grid as Leadership (was 1 per row = very long section). */
@media (max-width: 420px) { .kbh-design-team .leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Client review 12 Oct ===== */
/* Still header images: no animation; the artwork's black background blends into the navy header. */
.kbh .bp-art.bp-still { opacity: 1; display: flex; align-items: center; justify-content: flex-end; }
.kbh .bp-art.bp-still img { position: static; width: auto; height: 100%; max-width: 100%; object-fit: contain; mix-blend-mode: screen; }
[dir="rtl"] .kbh .bp-art.bp-still { justify-content: flex-start; }
@media (max-width: 900px) { .kbh .bp-art.bp-still { justify-content: center; } }
/* Footer: white logo straight on navy (no white box). */
.kbh footer .logo { background: none; padding: 0; border-radius: 0; }
.kbh footer .logo img { height: 52px; width: auto; }
/* Contact: each mobile / WhatsApp number on its own line, never split. */
.kbh .contact-list .numlist { display: grid; gap: 6px; }
.kbh .contact-list .numlist a { white-space: nowrap; color: inherit; }
/* Card rows on their own band (e.g. Careers): same space above and below, so they sit centred in the band. */
.kbh section.block.tight.tint { padding-top: 72px; }
@media (max-width: 900px) { .kbh section.block.tight.tint { padding-top: 48px; } }
/* Projects filters: tag buttons and the dropdowns share one tidy bar. */
.kbh .pfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.kbh .pfilters .filter { flex: 1 1 520px; margin: 0; }
.kbh .pfilters .psels { flex: 0 0 auto; margin-inline-start: auto; }
.kbh .psel select { min-width: 210px; }
@media (max-width: 900px) { .kbh .pfilters { padding: 12px; } .kbh .pfilters .filter, .kbh .pfilters .psels { flex: 1 1 100%; } .kbh .psel { flex: 1 1 0; } .kbh .psel select { min-width: 0; width: 100%; } }
.kbh a.cert { display: block; color: inherit; text-decoration: none; }
/* 12 Oct (client): headers are still blueprint line drawings, no draw-in animation. */
.kbh .bp-art svg *, .kbh .bp-art svg { animation: none !important; transition: none !important; opacity: 1; }
.kbh .bp-art svg path, .kbh .bp-art svg circle { stroke-dashoffset: 0 !important; }
.kbh .bp-art svg .cad-phase { transform: none !important; }

/* ===== Client review 12 Oct (2) ===== */
/* Hero video is framed with clear sky above the building (v8), so it runs full-bleed behind the floating menu. */
/* Projects filters, redesigned: category tabs on one underlined row, then the three dropdowns in an even row. */
.kbh .pfilters { display: grid; gap: 22px; padding: 0; border: 0; border-radius: 0; background: none; }
.kbh .pfilters .filter { display: flex; flex-wrap: nowrap; gap: 24px; margin: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.kbh .pfilters .filter::-webkit-scrollbar { display: none; }
.kbh .pfilters .filter button { flex: none; background: none; border: 0; border-radius: 0; padding: 0 0 16px; color: var(--muted); font-weight: 500; font-size: 14px; box-shadow: inset 0 -2px 0 transparent; transition: color .2s, box-shadow .2s; }
.kbh .pfilters .filter button:hover { background: none; color: var(--navy); }
.kbh .pfilters .filter button.on { background: none; color: var(--navy); font-weight: 600; box-shadow: inset 0 -2px 0 var(--sand); }
.kbh .pfilters .psels { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0; }
.kbh .pfilters .psel select { width: 100%; min-width: 0; height: 50px; padding-block: 0; border-radius: 10px; background-color: #fff; }
@media (max-width: 600px) { .kbh .pfilters .filter { gap: 22px; } .kbh .pfilters .psels { grid-template-columns: 1fr; } }