/* ============================================================
   MG Infrastructure — Master Stylesheet  v3.0
   Fonts: Bebas Neue (display) + Open Sans (body)
   Theme: Hybrid — dark nav/hero/footer, light content sections
   Brand colors: Navy #0d2b52 | Navy Bright #1e5fac | Gold #c8922a
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');

:root {
  --black:          #0a0a0a;
  --charcoal:       #1a1a1a;
  --dark-gray:      #252525;
  --mid-gray:       #3a3a3a;
  --light-gray:     #c8cdd6;
  --page-bg:        #f4f5f7;
  --section-white:  #ffffff;
  --section-light:  #eef1f5;
  --section-steel:  #dde2ea;
  --body-text:      #2c3340;
  --body-muted:     #5a6478;
  --border-light:   #d0d6e0;
  --white:          #f5f5f5;
  --pure-white:     #ffffff;
  --navy:           #0d2b52;
  --navy-light:     #1a4080;
  --navy-bright:    #1e5fac;
  --gold:           #c8922a;
  --gold-light:     #e8a832;
  --font-display:   'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:      'Open Sans', 'Arial', sans-serif;
  --nav-height:     80px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--page-bg);color:var(--body-text);line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block;max-height:100%;object-fit:cover;}
a{color:inherit;text-decoration:none}
ul{list-style:none}

h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:0.04em;line-height:1.05}
.dark-section h1,.dark-section h2,.dark-section h3,.dark-section h4{color:var(--pure-white)}
h1{font-size:clamp(3rem,7vw,6rem)}
h2{font-size:clamp(2.2rem,4.5vw,3.8rem)}
h3{font-size:clamp(1.6rem,2.5vw,2.4rem)}
h4{font-size:clamp(1.2rem,1.8vw,1.6rem)}
p{font-family:var(--font-body);font-size:1rem;font-weight:400;line-height:1.75;color:var(--body-muted)}
.dark-section p{color:#d4d8e0}

.section-label{font-family:var(--font-display);font-size:1rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--navy-bright);display:block;margin-bottom:0.5rem}
.dark-section .section-label{color:var(--gold)}

.container{max-width:1280px;margin:0 auto;padding:0 2rem}
.container-narrow{max-width:920px;margin:0 auto;padding:0 2rem}
.section-pad{padding:100px 0}
.section-pad-sm{padding:60px 0}
.text-center{text-align:center}
.text-white{color:var(--pure-white)!important}
.text-navy{color:var(--navy-bright)!important}
.text-gold{color:var(--gold)!important}
.text-dark{color:var(--body-text)!important}

.light-section{background:var(--section-white)}
.tinted-section{background:var(--section-light)}
.steel-section{background:var(--section-steel)}
.dark-section{background:var(--charcoal)}
.navy-section{background:var(--navy)}
.black-section{background:var(--black)}

.divider{width:60px;height:4px;background:var(--navy-bright);margin:1rem 0 1.75rem;border-radius:2px}
.dark-section .divider{background:var(--gold)}
.center .divider,.text-center .divider{margin-left:auto;margin-right:auto}

/* Buttons */
.btn{display:inline-block;font-family:var(--font-display);font-weight:400;font-size:1.1rem;letter-spacing:0.15em;text-transform:uppercase;padding:0.85rem 2.2rem;border-radius:3px;cursor:pointer;transition:all 0.25s ease;border:2px solid transparent;line-height:1}
.btn-primary{background:var(--navy-bright);color:var(--pure-white);border-color:var(--navy-bright)}
.btn-primary:hover{background:var(--navy-light);border-color:var(--navy-light);transform:translateY(-2px);box-shadow:0 8px 24px rgba(30,95,172,0.4)}
.btn-outline{background:transparent;color:var(--pure-white);border-color:rgba(255,255,255,0.7)}
.btn-outline:hover{background:var(--pure-white);color:var(--navy);border-color:var(--pure-white);transform:translateY(-2px)}
.btn-outline-dark{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline-dark:hover{background:var(--navy);color:var(--pure-white);transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--black);border-color:var(--gold);font-weight:700}
.btn-gold:hover{background:var(--gold-light);border-color:var(--gold-light);transform:translateY(-2px);box-shadow:0 8px 24px rgba(200,146,42,0.4)}

/* Navigation */
.site-nav,#main-nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-height);background:rgba(10,10,10,0.97);border-bottom:2px solid var(--navy);display:flex;align-items:center;transition:background 0.3s,box-shadow 0.3s;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-nav.scrolled{box-shadow:0 4px 24px rgba(0,0,0,0.5)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1280px;margin:0 auto;padding:0 2rem}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.nav-logo img{height:52px;width:auto;display:block;flex-shrink:0}
.brand-icon{width:48px;height:48px;background:var(--navy);border:2px solid var(--navy-bright);border-radius:4px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.5rem;color:var(--pure-white);letter-spacing:0.05em;flex-shrink:0}
.brand-name{font-family:var(--font-display);font-size:1.35rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--pure-white);line-height:1}
.brand-sub{font-family:var(--font-body);font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:#7ab8f5;line-height:1;display:block}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-family:var(--font-display);font-size:1rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.75);transition:color 0.2s;position:relative;padding-bottom:2px}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--gold);transition:width 0.25s}
.nav-links a:hover,.nav-links a.active{color:var(--pure-white)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:0.75rem}
.nav-actions .btn{padding:0.55rem 1.2rem;font-size:0.95rem}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--pure-white);transition:0.3s;border-radius:1px}

/* Hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding-top:var(--nav-height)}
.hero-bg{position:absolute;inset:0;background:linear-gradient(140deg,#080f1a 0%,#0d2b52 55%,#0a1628 100%);z-index:0}
.hero-bg::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60L60 0' stroke='rgba(255,255,255,0.03)' stroke-width='1'/%3E%3C/svg%3E") repeat;z-index:1}
.hero-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 65% 50%,rgba(30,95,172,0.3) 0%,transparent 65%);z-index:2}
.hero-content{position:relative;z-index:10;padding:3rem 0}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(30,95,172,0.15);border:1px solid rgba(30,95,172,0.45);border-radius:2px;padding:0.45rem 1.1rem;margin-bottom:1.75rem}
.hero-badge span{font-family:var(--font-display);font-size:0.9rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--gold-light)}
.hero-badge .dot{width:6px;height:6px;background:var(--gold);border-radius:50%;animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.8)}}
.hero h1{color:var(--pure-white);margin-bottom:1.25rem;text-shadow:0 2px 20px rgba(0,0,0,0.4)}
.hero h1 em{color:var(--gold-light);font-style:normal}
.hero-sub{font-size:clamp(1rem,1.8vw,1.2rem);color:rgba(255,255,255,0.75);max-width:660px;margin-bottom:2.5rem;line-height:1.8}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3rem}
.trust-strip{display:flex;gap:2rem;flex-wrap:wrap;padding-top:2rem;border-top:1px solid rgba(255,255,255,0.1)}
.trust-item{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:0.95rem;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.65)}
.trust-item::before{content:'checkmark';content:'\2713';color:var(--gold);font-family:var(--font-body);font-size:0.9rem;font-weight:700}

/* Inner hero */
.hero-inner,.page-hero{min-height:42vh;padding:160px 0 80px;position:relative;overflow:hidden;background:linear-gradient(140deg,#080f1a 0%,#0d2b52 100%)}
.hero-inner .hero-bg{background:linear-gradient(140deg,#080f1a 0%,#0d2b52 100%)}
.hero-inner h1,.page-hero h1{color:var(--pure-white);margin-bottom:1rem}
.hero-inner p,.page-hero p{font-size:1.15rem;max-width:700px;color:rgba(255,255,255,0.75)}

/* Proverbs */
.proverbs-banner{background:var(--navy);border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);padding:1.6rem 2rem;text-align:center}
.proverbs-banner blockquote{font-family:var(--font-body);font-style:italic;font-size:1.05rem;color:var(--pure-white);max-width:880px;margin:0 auto;line-height:1.85;font-weight:300}
.proverbs-banner cite{display:block;margin-top:0.5rem;font-style:normal;font-family:var(--font-display);font-size:0.9rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold)}

/* Section header */
.section-header{margin-bottom:3rem}
.section-header h2{color:var(--navy);margin-bottom:0.5rem}
.section-header p{max-width:680px}
.dark-section .section-header h2{color:var(--pure-white)}
.dark-section .section-header p{color:var(--light-gray)}
.section-header.center,.section-header.text-center{text-align:center}
.section-header.center p,.section-header.text-center p{margin-left:auto;margin-right:auto}

/* Why grid */
.why-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2rem}
.why-card{background:var(--section-white);border:1px solid var(--border-light);border-top:4px solid var(--navy-bright);border-radius:4px;padding:2rem 1.75rem;transition:transform 0.25s,box-shadow 0.25s}
.why-card:hover{transform:translateY(-5px);box-shadow:0 12px 32px rgba(13,43,82,0.12)}
.why-icon{font-size:2rem;margin-bottom:1rem}
.why-card h4{font-family:var(--font-display);font-size:1.35rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--navy);margin-bottom:0.75rem}
.why-card p{font-size:0.95rem}
.dark-section .why-card{background:var(--dark-gray);border-color:var(--mid-gray);border-top-color:var(--navy-bright)}
.dark-section .why-card h4{color:var(--pure-white)}

/* Service cards */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem}
.service-card{background:var(--section-white);border:1px solid var(--border-light);border-radius:4px;padding:2rem 1.75rem;position:relative;overflow:hidden;transition:transform 0.25s,box-shadow 0.25s,border-color 0.25s}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--navy),var(--navy-bright));transform:scaleX(0);transform-origin:left;transition:transform 0.35s}
.service-card:hover{transform:translateY(-5px);box-shadow:0 12px 32px rgba(13,43,82,0.12);border-color:var(--navy-bright)}
.service-card:hover::before{transform:scaleX(1)}
.service-card-icon{font-size:2.2rem;margin-bottom:1rem}
.service-card h4{font-family:var(--font-display);font-size:1.4rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--navy);margin-bottom:0.75rem}
.service-card p{font-size:0.95rem}
.dark-section .service-card{background:var(--dark-gray);border-color:var(--mid-gray)}
.dark-section .service-card h4{color:var(--pure-white)}

/* Generic card */
.card{background:var(--section-white);border:1px solid var(--border-light);border-radius:4px;padding:2rem;transition:border-color 0.25s,transform 0.25s,box-shadow 0.25s;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--navy-bright);transform:scaleX(0);transition:transform 0.3s;transform-origin:left}
.card:hover::before{transform:scaleX(1)}
.card:hover{border-color:var(--navy-bright);transform:translateY(-4px);box-shadow:0 10px 30px rgba(13,43,82,0.1)}
.card-icon{width:52px;height:52px;background:rgba(30,95,172,0.1);border:1px solid rgba(30,95,172,0.25);border-radius:4px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;font-size:1.6rem}
.card h3{color:var(--navy);font-size:1.5rem;margin-bottom:0.6rem}
.card p{font-size:0.95rem}
.card-link{display:inline-block;margin-top:1.25rem;font-family:var(--font-display);font-size:0.95rem;letter-spacing:0.12em;text-transform:uppercase;color:#7ab8f5;transition:color 0.2s}
.card-link:hover{color:var(--pure-white)}
.card-link::after{content:' \2192'}
/* card-link on light backgrounds gets darker color for contrast */
.light-section .card-link,
.tinted-section .card-link,
.steel-section .card-link,
.section-white .card-link,
.bg-white .card-link,
.bg-light .card-link { color: var(--navy-bright); }
.light-section .card-link:hover,
.tinted-section .card-link:hover,
.bg-white .card-link:hover { color: var(--navy); }

.dark-section .card{background:var(--dark-gray);border-color:var(--mid-gray)}
.dark-section .card h3{color:var(--pure-white)}

/* Two-col */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.two-col.reverse{direction:rtl}
.two-col.reverse>*{direction:ltr}

/* Image block */
.img-block{background:var(--section-steel);border:1px solid var(--border-light);border-radius:4px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.img-block img{width:100%;height:100%;object-fit:cover}
.img-block-placeholder{display:flex;flex-direction:column;align-items:cover;gap:0.75rem;padding:0rem;text-align:center;display:block;height:100%;width:100%;object-fit: cover;}
.img-block-placeholder .ph-icon{font-size:0rem;color:var(--body-muted)}
.img-block-placeholder p{font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--body-muted)}
.dark-section .img-block{background:var(--dark-gray);border-color:var(--mid-gray)}
.dark-section .img-block-placeholder .ph-icon{color:var(--mid-gray)}
.dark-section .img-block-placeholder p{color:var(--light-gray)}

/* Projects grid */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.75rem}
.project-card{background:var(--section-white);border:1px solid var(--border-light);border-radius:6px;overflow:hidden;transition:border-color 0.25s,transform 0.25s,box-shadow 0.25s;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.project-card:hover{border-color:var(--navy-bright);transform:translateY(-5px);box-shadow:0 16px 40px rgba(13,43,82,0.14)}
.project-card-img{height:220px;background:var(--section-steel);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.project-card-img img{width:100%;height:100%;object-fit:cover}
.project-card-img-placeholder{display:flex;flex-direction:column;align-items:center;gap:0.5rem;color:var(--body-muted)}
.project-card-img-placeholder span{font-size:2.5rem}
.project-card-img-placeholder p{font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--body-muted)}
.project-card-tag{position:absolute;top:1rem;left:1rem;background:var(--navy);color:var(--pure-white);font-family:var(--font-display);font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;padding:0.3rem 0.7rem;border-radius:2px}
.project-card-body{padding:1.5rem}
.project-card-body h3{color:var(--navy);font-size:1.4rem;margin-bottom:0.3rem}
.project-cat{font-size:0.82rem;color:var(--navy-bright);font-family:var(--font-display);letter-spacing:0.1em;text-transform:uppercase;display:block;margin-bottom:0.5rem}
.project-loc{font-size:0.85rem;color:var(--body-muted);margin-bottom:0.6rem}
.project-card-body p{font-size:0.9rem}

/* Filter bar */
.filter-bar{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:2.5rem}
.filter-btn{font-family:var(--font-display);font-size:0.95rem;letter-spacing:0.12em;text-transform:uppercase;padding:0.5rem 1.25rem;border:2px solid var(--border-light);border-radius:3px;background:var(--section-white);color:var(--body-muted);cursor:pointer;transition:all 0.2s}
.filter-btn:hover,.filter-btn.active{background:var(--navy);border-color:var(--navy);color:var(--pure-white)}

/* Process steps */
.process-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2.5rem;counter-reset:step}
.process-step{counter-increment:step;position:relative;padding-top:2rem}
.process-step::before{content:counter(step,decimal-leading-zero);font-family:var(--font-display);font-size:4rem;color:rgba(13,43,82,0.08);position:absolute;top:0;left:0;line-height:1}
.dark-section .process-step::before{color:rgba(30,95,172,0.2)}
.process-step h4{font-family:var(--font-display);font-size:1.4rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--navy);margin-bottom:0.6rem;margin-top:1.75rem}
.dark-section .process-step h4{color:var(--pure-white)}
.process-step p{font-size:0.95rem}

/* Credibility */
.cred-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}
.cred-item{text-align:center;padding:2rem 1.25rem;border:1px solid var(--border-light);border-radius:4px;background:var(--section-white);box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.cred-item .icon{font-size:2rem;margin-bottom:0.75rem}
.cred-item h4{font-family:var(--font-display);font-size:1.1rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--navy)}

/* Stats bar */
.stats-bar{background:var(--navy);padding:50px 0}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2rem;text-align:center}
.stat-item .stat-num{font-family:var(--font-display);font-size:3.5rem;color:var(--pure-white);line-height:1}
.stat-item .stat-label{font-family:var(--font-display);font-size:0.85rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-top:0.3rem}

/* CTA */
.cta-section{background:linear-gradient(135deg,var(--navy) 0%,#0a1628 100%);padding:90px 0;text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60L60 0' stroke='rgba(255,255,255,0.025)' stroke-width='1'/%3E%3C/svg%3E") repeat}
.cta-section .container{position:relative;z-index:1}
.cta-section h2{color:var(--pure-white);margin-bottom:1rem}
.cta-section p{color:rgba(255,255,255,0.75);max-width:620px;margin:0 auto 2.5rem;font-size:1.1rem}
.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* Footer */
footer{background:var(--charcoal);border-top:4px solid var(--navy);padding:70px 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:3rem;padding-bottom:3rem}
.footer-brand p{font-size:0.92rem;margin:1rem 0 1.5rem;line-height:1.75;color:var(--light-gray)}
.footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:1rem}
.footer-logo .brand-icon{width:44px;height:44px;background:var(--navy);border:2px solid var(--navy-bright);border-radius:4px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.3rem;color:var(--pure-white);flex-shrink:0}
.footer-logo .brand-name{font-family:var(--font-display);font-size:1.1rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--pure-white)}
.footer-col h5{font-family:var(--font-display);font-size:0.9rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.25rem;padding-bottom:0.6rem;border-bottom:1px solid var(--mid-gray)}
.footer-col ul li{margin-bottom:0.65rem}
.footer-col ul li a{font-size:0.92rem;color:var(--light-gray);transition:color 0.2s;font-family:var(--font-body)}
.footer-col ul li a:hover{color:var(--pure-white)}
.footer-contact p{font-size:0.92rem;margin-bottom:0.6rem;display:flex;align-items:flex-start;gap:10px;color:var(--light-gray)}
.footer-contact p strong{color:var(--gold);min-width:52px;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.08em;font-family:var(--font-display);padding-top:1px}
.footer-contact p a{color:var(--light-gray);transition:color 0.2s}
.footer-contact p a:hover{color:var(--pure-white)}
.footer-proverbs{padding:1.75rem 2rem;text-align:center;background:var(--navy);border-top:3px solid var(--gold)}
.footer-proverbs p{font-size:1rem;font-style:italic;color:var(--pure-white);max-width:880px;margin:0 auto;line-height:1.75;font-family:var(--font-body);font-weight:300}
.footer-proverbs .proverbs-cite{display:block;margin-top:0.5rem;font-style:normal;font-family:var(--font-display);font-size:0.85rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold)}
.footer-bottom{border-top:1px solid var(--mid-gray);padding:1.25rem 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem}
.footer-bottom p{font-size:0.82rem;color:var(--light-gray)}
.footer-bottom-links{display:flex;gap:1.5rem}
.footer-bottom-links a{font-size:0.82rem;color:var(--light-gray);transition:color 0.2s}
.footer-bottom-links a:hover{color:var(--pure-white)}
.values-list{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:1rem}
.value-tag{font-family:var(--font-display);font-size:0.82rem;letter-spacing:0.1em;text-transform:uppercase;padding:0.35rem 0.8rem;border:1px solid rgba(122,184,245,0.5);border-radius:2px;color:#7ab8f5}

/* Forms */
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-family:var(--font-display);font-size:0.9rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--navy);margin-bottom:0.45rem}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:0.85rem 1rem;background:var(--section-white);border:2px solid var(--border-light);border-radius:3px;color:var(--body-text);font-family:var(--font-body);font-size:1rem;transition:border-color 0.2s,box-shadow 0.2s;-webkit-appearance:none;appearance:none}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--navy-bright);box-shadow:0 0 0 3px rgba(30,95,172,0.12)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--body-muted)}
.form-group textarea{resize:vertical;min-height:130px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.dark-form .form-group label{color:#c8d0dc}
.dark-form .form-group input,.dark-form .form-group textarea,.dark-form .form-group select{background:var(--dark-gray);border-color:var(--mid-gray);color:var(--pure-white)}
.dark-form .form-group input::placeholder,.dark-form .form-group textarea::placeholder{color:var(--light-gray)}
.dark-form .form-group input:focus,.dark-form .form-group textarea:focus,.dark-form .form-group select:focus{border-color:var(--navy-bright)}

/* Map */
.map-placeholder{background:var(--section-steel);border:2px dashed var(--border-light);border-radius:6px;height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
.map-placeholder .map-icon{font-size:3rem}
.map-placeholder h3{color:var(--navy)}
.map-placeholder p{font-size:0.9rem;text-align:center;max-width:400px}

/* Roles/regions */
.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.role-card{border:1px solid var(--border-light);border-radius:3px;padding:1.25rem;background:var(--section-white);border-left:4px solid var(--navy-bright);transition:border-color 0.2s,box-shadow 0.2s}
.role-card:hover{box-shadow:0 6px 20px rgba(13,43,82,0.1)}
.role-card h4{font-family:var(--font-display);font-size:1.15rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--navy);margin-bottom:0.3rem}
.role-card p{font-size:0.85rem}
.region-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem}
.region-item{display:flex;align-items:flex-start;gap:0.75rem;padding:1.25rem;border:1px solid var(--border-light);border-radius:4px;background:var(--section-white);box-shadow:0 2px 6px rgba(0,0,0,0.04)}
.region-item .r-icon{font-size:1.5rem;flex-shrink:0;margin-top:2px}
.region-item h4{font-family:var(--font-display);font-size:1rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--navy);margin-bottom:0.25rem}
.region-item p{font-size:0.85rem}

/* Stages */
.stages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem}
.stage-card{background:var(--section-white);border:1px solid var(--border-light);border-radius:4px;overflow:hidden;transition:border-color 0.25s,box-shadow 0.25s}
.stage-card:hover{border-color:var(--navy-bright);box-shadow:0 8px 24px rgba(13,43,82,0.1)}
.stage-card-img{height:180px;background:var(--section-steel);display:flex;align-items:center;justify-content:center}
.stage-num{font-family:var(--font-display);font-size:4rem;color:rgba(13,43,82,0.12)}
.stage-card-body{padding:1.25rem}
.stage-card-body h4{font-family:var(--font-display);font-size:1.1rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--navy);margin-bottom:0.5rem}
.stage-card-body p{font-size:0.88rem}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.gallery-item{aspect-ratio:4/3;background:var(--section-steel);border:1px solid var(--border-light);border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--body-muted);cursor:pointer;transition:border-color 0.2s,box-shadow 0.2s}
.gallery-item:hover{border-color:var(--navy-bright);box-shadow:0 4px 16px rgba(13,43,82,0.1)}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:0.5rem;margin-bottom:1.5rem}
.breadcrumb a,.breadcrumb span{font-family:var(--font-display);font-size:0.85rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.75)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{color:rgba(255,255,255,0.45)}
.breadcrumb .current{color:var(--gold);font-weight:700}

/* Why item (SEO pages) */
.why-item{border-left:3px solid var(--navy-bright);padding-left:1.5rem}
.why-item h4{font-family:var(--font-display);font-size:1.2rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--navy);margin-bottom:0.5rem}
.why-item p{font-size:0.95rem}
.dark-section .why-item h4{color:var(--pure-white)}
.dark-section .why-item{border-left-color:var(--gold)}

/* Hero diagonal */
.hero-diagonal{position:absolute;bottom:-1px;left:0;right:0;height:80px;background:var(--page-bg);clip-path:polygon(0 100%,100% 0,100% 100%);z-index:5}

/* Background helpers */
.bg-dark{background:var(--dark-gray)!important}
.bg-charcoal{background:var(--charcoal)!important}
.bg-black{background:var(--black)!important}
.bg-navy{background:var(--navy)!important}
.bg-light{background:var(--section-light)!important}
.bg-white{background:var(--section-white)!important}

/* ── CONTRAST FIX: all dark backgrounds get readable text ── */
/* Every dark bg helper gets the same high-contrast text treatment as .dark-section */
.bg-black h1,.bg-black h2,.bg-black h3,.bg-black h4,.bg-black h5,
.bg-charcoal h1,.bg-charcoal h2,.bg-charcoal h3,.bg-charcoal h4,.bg-charcoal h5,
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4,.bg-dark h5,
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4,.bg-navy h5 {
  color: var(--pure-white);
}

.bg-black p,.bg-charcoal p,.bg-dark p,.bg-navy p { color: #d4d8e0; }
.bg-black .section-label,.bg-charcoal .section-label,.bg-dark .section-label,.bg-navy .section-label { color: var(--gold); }
.bg-black .divider,.bg-charcoal .divider,.bg-dark .divider { background: var(--gold); }

/* Standalone h2/h3 on dark backgrounds inside sections that use inline styles */
section[style*="background: var(--black)"] h1,
section[style*="background: var(--black)"] h2,
section[style*="background: var(--black)"] h3,
section[style*="background: var(--black)"] h4,
section[style*="background:var(--black)"] h1,
section[style*="background:var(--black)"] h2,
section[style*="background:var(--black)"] h3,
section[style*="background:var(--black)"] h4,
section[style*="background: var(--charcoal)"] h1,
section[style*="background: var(--charcoal)"] h2,
section[style*="background: var(--charcoal)"] h3,
section[style*="background: var(--charcoal)"] h4,
section[style*="background:var(--charcoal)"] h1,
section[style*="background:var(--charcoal)"] h2,
section[style*="background:var(--charcoal)"] h3,
section[style*="background:var(--charcoal)"] h4,
section[style*="background: var(--dark-gray)"] h1,
section[style*="background: var(--dark-gray)"] h2,
section[style*="background: var(--dark-gray)"] h3,
section[style*="background: var(--dark-gray)"] h4,
section[style*="background:var(--dark-gray)"] h1,
section[style*="background:var(--dark-gray)"] h2,
section[style*="background:var(--dark-gray)"] h3,
section[style*="background:var(--dark-gray)"] h4,
div[style*="background: var(--charcoal)"] h2,
div[style*="background: var(--charcoal)"] h3,
div[style*="background: var(--charcoal)"] h4,
div[style*="background:var(--charcoal)"] h2,
div[style*="background:var(--charcoal)"] h3,
div[style*="background:var(--charcoal)"] h4 { color: var(--pure-white); }

section[style*="background: var(--black)"] p,
section[style*="background:var(--black)"] p,
section[style*="background: var(--charcoal)"] p,
section[style*="background:var(--charcoal)"] p,
section[style*="background: var(--dark-gray)"] p,
section[style*="background:var(--dark-gray)"] p,
div[style*="background: var(--charcoal)"] p,
div[style*="background:var(--charcoal)"] p { color: #d4d8e0; }

section[style*="background: var(--black)"] .section-label,
section[style*="background:var(--black)"] .section-label,
section[style*="background: var(--charcoal)"] .section-label,
section[style*="background:var(--charcoal)"] .section-label,
section[style*="background: var(--dark-gray)"] .section-label,
section[style*="background:var(--dark-gray)"] .section-label { color: var(--gold); }


/* ══════════════════════════════════════════════════════════════════
   UNIVERSAL CONTRAST RULES — All custom dark-background classes
   Every section/component with a dark bg gets readable text here
   ══════════════════════════════════════════════════════════════════ */

/* All headings in any dark custom section → white */
.intro-section h1,.intro-section h2,.intro-section h3,.intro-section h4,
.featured-projects h1,.featured-projects h2,.featured-projects h3,.featured-projects h4,
.map-section h1,.map-section h2,.map-section h3,.map-section h4,
.process-section h1,.process-section h2,.process-section h3,.process-section h4,
.testimonials-section h1,.testimonials-section h2,.testimonials-section h3,.testimonials-section h4,
.mission-card h1,.mission-card h2,.mission-card h3,.mission-card h4,
.leadership-card h1,.leadership-card h2,.leadership-card h3,.leadership-card h4,
.stages-section h1,.stages-section h2,.stages-section h3,.stages-section h4,
.gallery-section h1,.gallery-section h2,.gallery-section h3,.gallery-section h4,
.project-overview-bar h1,.project-overview-bar h2,.project-overview-bar h3,.project-overview-bar h4,
.seo-intro h1,.seo-intro h2,.seo-intro h3,.seo-intro h4,
.seo-why h1,.seo-why h2,.seo-why h3,.seo-why h4,
.seo-services h1,.seo-services h2,.seo-services h3,.seo-services h4,
.seo-areas h1,.seo-areas h2,.seo-areas h3,.seo-areas h4,
.why-work-item h3,.why-work-item h4,
.contact-info-card h3,.contact-info-card h4,
.policy-section h1,.policy-section h2,.policy-section h3,.policy-section h4,
.policy-block h3 { color: var(--pure-white) !important; }

/* All paragraph text in dark custom sections → bright readable light gray */
.intro-section p,.featured-projects p,.map-section p,.process-section p,
.testimonials-section p,.mission-card p,.leadership-card p,.stages-section p,
.gallery-section p,.project-overview-bar p,.seo-intro p,.seo-why p,
.seo-services p,.seo-areas p,.why-work-item p,.contact-info-card p,
.policy-section p,.policy-block p { color: #d4d8e0 !important; }

/* Section labels in dark custom sections → gold */
.intro-section .section-label,.featured-projects .section-label,
.map-section .section-label,.process-section .section-label,
.testimonials-section .section-label,.stages-section .section-label,
.gallery-section .section-label,.seo-intro .section-label,
.seo-why .section-label,.seo-services .section-label,
.seo-areas .section-label { color: var(--gold) !important; }

/* Dividers in dark sections → gold */
.intro-section .divider,.featured-projects .divider,.process-section .divider,
.stages-section .divider,.gallery-section .divider,
.seo-intro .divider,.seo-why .divider,.seo-services .divider { background: var(--gold) !important; }

/* Leadership card specific fixes */
.leadership-body .title { color: #7ab8f5 !important; }
.leadership-body blockquote,
.leadership-body .quote,
.leadership-body p em,
.leadership-body p[style*="italic"],
blockquote[style*="italic"] { color: #a8c4e0 !important; }

/* Form labels on dark backgrounds → bright readable */
.dark-form .form-group label,
section.dark-section .form-group label,
.bg-black .form-group label,
.bg-charcoal .form-group label,
.bg-dark .form-group label { color: #c8d0dc !important; }

/* Form helper text, accept strings, small text on dark */
.dark-form small,
.bg-black small, .bg-charcoal small,
.bg-black .form-group small, .bg-charcoal .form-group small { color: #a0aab8 !important; }

/* Testimonial placeholder / instructional text */
.testimonials-section [style*="color:var(--mid-gray)"],
.testimonials-section [style*="color: var(--mid-gray)"] { color: #a0aab8 !important; }

/* Stage cards on project pages — text on light bg needs dark color for contrast */
.stage-card-body h4 { color: var(--navy) !important; }
.stage-card-body p   { color: var(--body-text) !important; }

/* Why-item on dark (SEO pages) */
.dark-section .why-item p { color: #d4d8e0 !important; }

/* Section-header standalone in dark */
.dark-section h2,
.dark-section h3 { color: var(--pure-white) !important; }

/* Service section titles — fix dark bg override */
.service-section h2,
.service-section h3,
.service-section h4 { color: var(--pure-white) !important; }
.service-section p   { color: #d4d8e0 !important; }
.service-section .section-label { color: var(--gold) !important; }

/* Responsive */
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr;gap:2.5rem}
  .two-col.reverse{direction:ltr}
}
@media (max-width:768px){
  .nav-links{display:none}
  .nav-actions{display:none}
  .nav-toggle{display:flex}
  .nav-links.open{display:flex;flex-direction:column;position:absolute;top:var(--nav-height);left:0;right:0;background:var(--charcoal);border-bottom:2px solid var(--navy);padding:1.5rem 2rem;gap:1.25rem;z-index:999}
  .nav-actions.open{display:flex;position:absolute;top:calc(var(--nav-height) + 220px);left:0;right:0;background:var(--charcoal);padding:1rem 2rem 1.5rem;flex-direction:column;gap:0.75rem;border-bottom:2px solid var(--navy);z-index:998}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .hero-actions{flex-direction:column}
  .cta-actions{flex-direction:column;align-items:center}
  .hero-diagonal{display:none}
}
@media (max-width:480px){
  .container{padding:0 1.25rem}
  .section-pad{padding:70px 0}
}

.cta-section .section-label { color: var(--gold) !important; }
.cta-section p { color: rgba(255,255,255,0.85) !important; }