/* =====================================================================
   WHITELIGHT PROMO  |  framework.css  (2027 restyle)
   Layout language: clean white header + black contact strip, full-width
   hero, centred statement blocks, two-column text/image rows, rounded
   gradient pill buttons, dark CTA banner, navy footer.
   AOS animation styles live in scripts/css/aos.css
   ===================================================================== */

:root {
    --red:        #cd1719;
    --red-dark:   #a51113;
    --red-bright: #e8343a;
    --navy:       #1c3775;
    --navy-deep:  #142a5c;
    --ink:        #1c3775;
    --text:       #3a3a3a;
    --muted:      #6b6f76;
    --line:       #e6e7ea;
    --soft:       #f5f6f8;
    --white:      #ffffff;
    --wrap:       1180px;
    --radius:     25px;
    --font:       "Poppins", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- RESET / BASE ------------------------------------------- */
*, *::before, *::after         { box-sizing: border-box; margin: 0; padding: 0; border: 0; }
html                           { background: var(--white); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body                           { font-family: var(--font); font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--text); background: var(--white); overflow-x: clip; }
img                            { max-width: 100%; height: auto; display: block; }
a                              { color: var(--red); text-decoration: none; transition: color .25s ease; }
a:hover                        { color: var(--red-dark); }
b, strong                      { font-weight: 600; color: var(--ink); }
p                              { margin: 0 0 18px 0; }
.clear, .clearBoth             { clear: both; }
.center                        { text-align: center; }

.accessibilityLinks            { position: absolute; left: -9999px; top: 0; }
.accessibilityLinks a:focus    { position: fixed; left: 10px; top: 10px; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 9999; }

/* ---------- TYPE ---------------------------------------------------- */
h1, h2, h3, h4, h5, h6         { font-family: var(--font); color: var(--ink); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-transform: none; }
h1                             { font-size: clamp(32px, 4.2vw, 52px); margin-bottom: 20px; }
h2                             { font-size: clamp(26px, 2.9vw, 38px); margin-bottom: 22px; }
h3                             { font-size: clamp(19px, 1.7vw, 23px); margin-bottom: 12px; }
h4                             { font-size: 16px; margin-bottom: 14px; }
h2 em, h1 em, h3 em            { font-style: italic; }

/* ---------- BUTTONS ------------------------------------------------- */
.button,
.contactForm .SendButton       { display: inline-block; background: linear-gradient(90deg, var(--red-dark) 0%, var(--red-bright) 100%); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1; padding: 15px 38px; border-radius: var(--radius); margin: 14px 8px 0 0; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; cursor: pointer; }
.button:hover,
.contactForm .SendButton:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(205, 23, 25, .28); filter: brightness(1.05); }
.button.light                  { background: #fff; color: var(--ink); }
.button.light:hover            { color: var(--red); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.button.icon                   { padding: 10px; width: 44px; height: 44px; border-radius: 50%; vertical-align: top; background: #fff; }
.button.icon img               { width: 24px; height: 24px; }

/* ---------- LAYOUT -------------------------------------------------- */
.wrap,
section figure,
section .container             { max-width: var(--wrap); margin: 0 auto; padding: 0 30px; }
section                        { position: relative; display: block; padding: 95px 0; }
section + section.bg1,
section.bg1 + section          { }
.bg1                           { background: var(--white); }
.bg3                           { background: var(--soft); }
.bg2                           { background: var(--navy); color: rgba(255,255,255,.88); }
.bg2 h1, .bg2 h2, .bg2 h3,
.bg2 b, .bg2 strong            { color: #fff; }
.narrow                        { max-width: 860px; }

/* centred statement block (big headline + short copy) */
.statement                     { text-align: center; }
.statement figure              { max-width: 980px; }
.statement h2                  { font-size: clamp(28px, 3.3vw, 44px); margin-bottom: 6px; }
.statement h2 + h2             { font-weight: 500; font-size: clamp(22px, 2.4vw, 32px); margin-bottom: 26px; }
.statement p                   { max-width: 820px; margin-left: auto; margin-right: auto; }

/* two-column rows: text + image */
.split                         { display: grid; grid-template-columns: 1.15fr 1fr; gap: 70px; align-items: center; }
.split.reverse .split-media    { order: -1; }
.split-media img               { width: 100%; border-radius: 6px; object-fit: cover; box-shadow: 0 20px 50px rgba(17,17,17,.10); }
.split-media.plain img         { box-shadow: none; }

/* image band (full-bleed photo with dark overlay) */
.band                          { background-size: cover; background-position: center; color: #fff; padding: 120px 0; }
.band::before                  { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,18,40,.88) 0%, rgba(10,18,40,.65) 55%, rgba(10,18,40,.35) 100%); }
.band figure                   { position: relative; z-index: 1; }
.band .bandInner               { max-width: 640px; }
.band h2                       { color: #fff; }
.band p                        { color: rgba(255,255,255,.9); font-weight: 400; }

/* ---------- MESSAGE BAR (hidden – contact info now lives in the strip) */
.messageBar                    { display: none; }

/* ---------- HEADER -------------------------------------------------- */
header.change                  { position: sticky; top: 0; z-index: 500; background: #fff; transition: box-shadow .3s ease; }
header.darkHeader              { box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.headerInner                   { max-width: var(--wrap); margin: 0 auto; padding: 0 30px; height: 88px; display: flex; align-items: center; justify-content: space-between; transition: height .3s ease; }
header.darkHeader .headerInner { height: 70px; }
.logo img                      { height: 62px; width: auto; transition: height .3s ease; }
header.darkHeader .logo img    { height: 50px; }

header nav ul                  { list-style: none; display: flex; align-items: center; gap: 4px; }
header nav ul li               { position: relative; }
header nav ul li a             { display: block; color: var(--ink); font-size: 13px; font-weight: 400; padding: 10px 12px; position: relative; }
header nav ul li a::after      { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
header nav ul li a:hover       { color: var(--red); }
header nav ul li a:hover::after,
header nav ul li a.current::after { transform: scaleX(1); }
header nav ul li a.current     { color: var(--red); }
header nav ul li.contact a     { background: linear-gradient(90deg, var(--red-dark), var(--red-bright)); color: #fff; border-radius: var(--radius); padding: 10px 24px; margin-left: 10px; font-weight: 600; }
header nav ul li.contact a::after { display: none; }
header nav ul li.contact a:hover { color: #fff; box-shadow: 0 8px 20px rgba(205,23,25,.28); }
header nav .navLogo            { display: none; }

.show_hide                     { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ink); }
.show_hide span,
.show_hide span::before,
.show_hide span::after         { display: block; width: 20px; height: 2px; background: #fff; position: relative; transition: transform .3s ease, background .3s ease; }
.show_hide span::before,
.show_hide span::after         { content: ""; position: absolute; left: 0; }
.show_hide span::before        { top: -6px; }
.show_hide span::after         { top: 6px; }
.navOpen .show_hide span       { background: transparent; }
.navOpen .show_hide span::before { transform: translateY(6px) rotate(45deg); }
.navOpen .show_hide span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- CONTACT STRIP ------------------------------------------- */
.contactStrip                  { background: var(--ink); }
.contactStrip ul               { max-width: var(--wrap); margin: 0 auto; padding: 0 30px; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.contactStrip li               { border-left: 1px solid rgba(255,255,255,.18); }
.contactStrip li:last-child    { border-right: 1px solid rgba(255,255,255,.18); }
.contactStrip a                { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: #fff; line-height: 1.3; transition: background .25s ease;height:100%; }
.contactStrip a:hover          { background: rgba(255,255,255,.06); }
.contactStrip svg              { flex: 0 0 28px; width: 28px; height: 28px; stroke: var(--red-bright); fill: none; stroke-width: 1.6; }
.contactStrip strong           { display: block; color: #fff; font-size: 16px; font-weight: 500; }
.contactStrip small            { display: block; color: var(--red-bright); font-size: 13px; font-weight: 500; }

/* ---------- HOME HERO ----------------------------------------------- */
.hero                          { position: relative; height: calc(100vh - 150px); min-height: 520px; max-height: 820px; overflow: hidden; background: var(--ink) url(../../pix/home1.jpg) center/cover no-repeat; }
.hero video                    { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: zoomPingPong 14s infinite alternate ease-in-out; }
.hero::after                   { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,0) 85%); }
.hero .tag                     { position: absolute; z-index: 2; left: 0; right: 0; bottom: 14%; max-width: var(--wrap); margin: 0 auto; padding: 0 30px; }
.hero .tag > *                 { max-width: 700px; }
.hero .tag h1                  { color: #fff; margin-bottom: 18px; }
.hero .tag h2                  { color: #fff; font-size: clamp(17px, 1.6vw, 22px); font-weight: 400; line-height: 1.5; margin-bottom: 20px; }
.hero .tag .heroButtons        { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero .tag .heroButtons .button { margin: 0; }
@keyframes zoomPingPong        { from { transform: scale(1); } to { transform: scale(1.08); } }

/* ---------- INNER PAGE HERO (pageLoad) ------------------------------- */
section.pageLoad               { padding: 0; min-height: 340px; display: flex; align-items: center; background: var(--ink) center/cover no-repeat; color: #fff; overflow: hidden; }
section.pageLoad::before       { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.1) 100%); }
section.pageLoad figure        { position: relative; z-index: 1; width: 100%; padding-top: 70px; padding-bottom: 70px; }
section.pageLoad h1            { color: #fff; margin: 0; }
section.pageLoad h2            { color: #fff; font-size: 20px; font-weight: 400; margin: 6px 0 0; }
.hero-services                 { background-image: url(../../pix/home1.jpg) !important; }
.hero-projects                 { background-image: url(../../pix/home3.jpg) !important; }
.hero-about                    { background-image: url(../../pix/mainbg.jpg) !important; }
.hero-contact                  { background-image: url(../../pix/home2.jpg) !important; }
.hero-benefits                 { background-image: url(../../pix/home4.jpg) !important; }

/* ---------- SERVICE ROWS (services page) ---------------------------- */
.serviceWrapper                { margin-top: 30px; }
.serviceBox                    { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center; padding: 50px 0; border-top: 1px solid var(--line); }
.serviceBox:nth-child(even) .serviceMedia { }
.serviceBox h3                 { font-size: clamp(20px, 1.9vw, 26px); }
.serviceMedia img              { width: 100%; border-radius: 6px; box-shadow: 0 20px 50px rgba(17,17,17,.10); }

/* ---------- LIST BLOCK (WeLSource) ---------------------------------- */
.innerWrapper                  { display: flex; gap: 50px; margin: 10px 0 18px; }
.inlineList p                  { font-weight: 600; color: var(--ink); line-height: 2.1; border-left: 3px solid var(--red); padding-left: 18px; }

/* ---------- CTA BANNER ---------------------------------------------- */
.ctaBanner                     { padding: 0 0 90px; background: transparent; }
.ctaBanner .ctaInner           { max-width: var(--wrap); margin: 0 auto; background: var(--ink); color: #fff; padding: 55px 60px; display: flex; align-items: center; justify-content: space-between; gap: 40px; position: relative; overflow: hidden; }
.ctaBanner .ctaInner::after    { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(232,52,58,.35), rgba(232,52,58,0) 70%); }
.ctaBanner h2                  { color: #fff; margin-bottom: 8px; }
.ctaBanner p                   { color: rgba(255,255,255,.85); font-size: 18px; font-weight: 400; margin: 0; }
.ctaBanner .button             { position: relative; z-index: 1; flex-shrink: 0; margin: 0; }

/* ---------- FOOTER -------------------------------------------------- */
footer                         { background: var(--navy-deep); color: rgba(255,255,255,.78); padding: 75px 0 55px; }
footer .footerGrid             { max-width: var(--wrap); margin: 0 auto; padding: 0 30px; display: grid; grid-template-columns: 2fr 1fr 1.2fr; gap: 60px; }
footer h4                      { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 18px; }
footer p                       { font-size: 13.5px; line-height: 1.75; margin-bottom: 12px; }
footer a                       { color: #fff; }
footer a:hover                 { color: var(--red-bright); }
footer ul                      { list-style: none; }
footer ul li a                 { display: inline-block; font-size: 13.5px; padding: 4px 0; color: rgba(255,255,255,.85); }
.footerLogo                    { width: 120px; margin-bottom: 26px; }
footer blockquote              { margin-top: 22px; padding-left: 18px; border-left: 3px solid var(--red); font-style: italic; font-size: 13.5px; line-height: 1.75; color: rgba(255,255,255,.85); }
footer blockquote span         { display: none; }
.subFooter                     { background: #0d1c40; padding: 20px 30px; text-align: center; }
.subFooter p                   { margin: 0; color: rgba(255,255,255,.6); font-size: 12.5px; }
.subFooter a                   { color: rgba(255,255,255,.85); }

.topofpage                     { position: fixed; right: 18px; bottom: 18px; z-index: 400; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--red-dark), var(--red-bright)); color: #fff; font-size: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.topofpage::before             { content: ""; width: 10px; height: 10px; border-left: 2px solid #fff; border-top: 2px solid #fff; transform: translateY(2px) rotate(45deg); }
.topofpage:hover               { color: #fff; }

/* ---------- CONTACT PAGE -------------------------------------------- */
.contactSplit                  { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: start; }
.contactDetails img            { border-radius: 6px; margin-bottom: 30px; box-shadow: 0 20px 50px rgba(17,17,17,.10); }
.contactDetails p              { margin-bottom: 10px; }
.contactForm                   { background: var(--soft); padding: 45px 45px 30px; border-radius: 6px; }
.contactForm label             { display: none; }
.contactForm p                 { position: relative; margin-bottom: 14px; font-size: 13.5px; }
.contactForm .input            { width: 100%; font-family: var(--font); font-size: 14px; font-weight: 400; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid #b9bcc2; padding: 12px 34px 10px 2px; transition: border-color .25s ease; }
.contactForm textarea.input    { border: 1px solid #b9bcc2; padding: 12px; border-radius: 4px; background: #fff; resize: vertical; width: calc(100% - 34px); }
.contactForm .input:focus      { outline: none; border-color: var(--red); }
.contactForm .input::placeholder { color: #8a8e95; }
.contactForm .tooltip          { position: absolute; right: 0; top: 10px; }
.contactForm .tooltip img      { width: 18px; opacity: .6; }
.contactForm .tooltiptext      { display: none; }
.contactForm .tooltip:hover .tooltiptext { display: block; position: absolute; right: 0; top: 26px; width: 240px; background: var(--ink); color: #fff; font-size: 12px; line-height: 1.5; padding: 10px 12px; border-radius: 4px; z-index: 5; }
.contactForm .CAPTCHA          { margin-bottom: 18px; }
.contactForm .smaller          { font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.contactForm input[type=checkbox] { margin-right: 8px; accent-color: var(--red); }
.contactForm .SendButton       { border: 0; margin-top: 6px; }
.contactForm .CancelButton     { display: none; }
.contactForm center            { margin: 6px 0 10px; }

/* ---------- BENEFITS PAGE (draft) ----------------------------------- */
.mainOne                       { display: grid; grid-template-columns: 90px 1fr; column-gap: 24px; padding: 26px 0; border-top: 1px solid var(--line); }
.mainOne .bigText              { grid-row: span 2; font-size: 52px; font-weight: 700; color: var(--red); line-height: 1; }
.mainOne .smallTextHeader      { font-size: 20px; font-weight: 700; color: var(--ink); }
.benefits figure               { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.benefit                       { background: #fff; padding: 34px 16px; border-radius: 6px; box-shadow: 0 14px 40px rgba(17,17,17,.07); }
.counter                       { display: inline-block; font-size: 46px; font-weight: 700; color: var(--ink); }
.plus                          { display: inline-block; }
.large                         { font-size: 34px; font-weight: 700; color: var(--red); }
.text                          { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; line-height: 1.5; margin-top: 6px; }
.expoWrapper                   { max-width: var(--wrap); margin: 0 auto; padding: 0 30px 90px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.expoBox img                   { width: 100%; max-height: 380px; object-fit: cover; border-radius: 6px; margin-bottom: 20px; }

/* ---------- THANK YOU ----------------------------------------------- */
.pageImage                     { display: none; }

/* ---------- MISC LEGACY CLASSES ------------------------------------- */
.FR                            { float: right; max-width: 380px; margin: 0 0 20px 40px; border-radius: 6px; }
.aos-set                       { }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) {
    .show_hide                 { display: flex; }
    header nav.slidingDiv      { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 86vw); background: #fff; box-shadow: -10px 0 40px rgba(0,0,0,.15); transform: translateX(100%); transition: transform .35s ease; padding: 100px 30px 30px; z-index: 600; overflow-y: auto; }
    .navOpen header nav.slidingDiv { transform: translateX(0); }
    header nav ul              { flex-direction: column; align-items: stretch; gap: 0; }
    header nav ul li a         { font-size: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
    header nav ul li a::after  { display: none; }
    header nav ul li.contact a { margin: 24px 0 0; text-align: center; padding: 16px; border: 0; }
    .show_hide                 { position: relative; z-index: 700; }
    .contactStrip ul           { grid-template-columns: repeat(2, 1fr); }
    .contactStrip li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.18); }
    .contactStrip li:nth-child(2) { border-right: 1px solid rgba(255,255,255,.18); }
}
@media (max-width: 900px) {
    section                    { padding: 70px 0; }
    .split, .serviceBox, .contactSplit { grid-template-columns: 1fr; gap: 36px; }
    .split.reverse .split-media,
    .serviceBox:nth-child(even) .serviceMedia { order: 0; }
    .ctaBanner .ctaInner       { flex-direction: column; align-items: flex-start; padding: 45px 30px; margin: 0 20px; }
    footer .footerGrid         { grid-template-columns: 1fr; gap: 40px; }
    .benefits figure           { grid-template-columns: repeat(2, 1fr); }
    .expoWrapper               { grid-template-columns: 1fr; }
    .FR                        { float: none; max-width: 100%; margin: 0 0 24px 0; }
}
@media (max-width: 600px) {
    .wrap, section figure, section .container, .headerInner, .contactStrip ul, footer .footerGrid { padding-left: 20px; padding-right: 20px; }
    .headerInner               { height: 72px; }
    .logo img                  { height: 50px; }
    .contactStrip ul           { grid-template-columns: 1fr 1fr; padding: 0; }
    .contactStrip a            { padding: 12px; gap: 10px; }
    .contactStrip svg          { width: 22px; height: 22px; flex-basis: 22px; }
    .contactStrip strong       { font-size: 12.5px; }
    .contactStrip li:nth-child(n+3) { display: none; }
    .contactStrip small        { display: none; }
    .contactStrip a            { justify-content: center; }
    .hero                      { height: 78vh; }
    .hero .tag                 { bottom: 8%; padding: 0 20px; }
    .button                    { padding: 14px 26px; }
    .contactForm               { padding: 30px 20px; }
    .innerWrapper              { gap: 24px; }
    .mainOne                   { grid-template-columns: 60px 1fr; }
    .mainOne .bigText          { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero video                { animation: none; }
}