@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
:root{--navy:#06427a;--deep:#071018;--yellow:#ff6b16;--white:#fff;--ink:#111820;--muted:#4b5870;--orange:#ff6b16;--black:#080e15}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Montserrat,Arial,sans-serif;color:var(--ink);background:#fff}a{color:inherit;text-decoration:none}.site-header{height:82px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 4.4%;gap:24px;position:relative;z-index:5;box-shadow:0 2px 12px #061e4b12}.brand{width:145px;flex-shrink:0;height:78px;display:flex;align-items:center}.brand img{width:100%;height:100%;object-fit:contain}.nav{display:flex;align-items:center;gap:clamp(18px,2.5vw,42px);font-size:13px}.nav a{padding:12px 0;position:relative}.nav a.active:after,.nav a:hover:after{content:"";height:3px;width:25px;background:var(--yellow);position:absolute;bottom:3px;left:0}.phone{display:flex;align-items:center;gap:10px;white-space:nowrap}.phone-icon{font-size:27px}.phone strong{display:block;font-size:16px}.phone small{display:block;font-size:10px;margin-top:2px}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:14px 22px;min-height:44px;font-size:12px;font-weight:800;text-transform:uppercase;border-radius:2px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button span{font-size:17px}.button-yellow{background:var(--yellow);color:#071d42;box-shadow:0 2px 4px #0001}.button-outline{border:1px solid #fff;color:#fff;background:transparent}.header-quote{padding:13px 20px;white-space:nowrap}.menu-toggle{display:none;background:none;border:0;font-size:26px;color:var(--navy)}.hero{min-height:420px;position:relative;display:flex;align-items:center;overflow:hidden;background:var(--navy);color:#fff}.hero-photo{position:absolute;inset:0 0 0 26%;background-image:url('../images/client-hero-team.png');background-position:center;background-size:cover}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#052354 0%,#052354f2 28%,#052354b8 43%,#05235408 73%),linear-gradient(0deg,#061f4a66,transparent 50%)}.hero-content{position:relative;z-index:1;width:min(660px,56%);padding:42px 0 24px 4.5%}.eyebrow,.section-kicker{font-size:13px;text-transform:uppercase;font-weight:800;color:var(--yellow);letter-spacing:.2px}.eyebrow{display:flex;align-items:center;gap:10px}.eyebrow span,.section-kicker span{display:inline-block;width:36px;height:3px;background:var(--yellow)}h1{font-size:clamp(34px,3.65vw,58px);line-height:1.02;text-transform:uppercase;margin:14px 0 10px;font-weight:900;letter-spacing:-1.4px}h1 em,.about-panel h2 em{font-style:normal;color:var(--yellow)}.hero-copy{font-size:15px;line-height:1.55;max-width:470px;margin:10px 0 16px}.hero-actions{display:flex;gap:13px;flex-wrap:wrap}.hero-facts{display:flex;align-items:center;gap:22px;margin-top:25px}.hero-facts>div{display:flex;align-items:center;gap:10px;padding-right:20px;border-right:1px solid #ffffff55;font-size:12px;line-height:1.4}.hero-facts>div:last-child{border:0}.fact-icon{font-size:27px;color:var(--yellow);font-weight:500}.hero-facts strong{font-weight:800}.services{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:20px 2.7% 24px;gap:0;background:#fff}.service-card{position:relative;padding:0 15px 22px;border-right:1px solid #e8eaf0;min-width:0}.service-card:last-child{border:0}.service-card img{display:block;width:100%;height:78px;object-fit:cover;margin-bottom:12px}.service-icon{position:absolute;top:26px;left:18px;color:var(--yellow);font-size:28px;text-shadow:1px 1px #08275c}.service-card h2{font-size:12px;line-height:1.3;margin:0 0 5px;font-weight:800}.service-card p{font-size:11.5px;line-height:1.5;color:#39475d;margin:0;padding-right:2px}.service-card>a{position:absolute;right:14px;bottom:3px;background:var(--yellow);width:27px;height:27px;display:grid;place-items:center;font-size:20px;font-weight:700}.lower-grid{display:grid;grid-template-columns:34% 34% 32%;min-height:300px}.about-photo{background:url('../images/client-hero-team.png') center/cover no-repeat;min-height:300px}.about-panel{background:linear-gradient(120deg,#073a7a,#052354);color:#fff;padding:23px 7% 25px 9%;position:relative;overflow:hidden}.about-panel:after{content:"";position:absolute;right:-70px;top:-40px;width:160px;height:450px;transform:rotate(-18deg);background:#0c3b79;opacity:.45}.section-kicker{margin:0 0 7px;font-size:11px;position:relative;z-index:1}.about-panel h2,.why-panel h2{position:relative;z-index:1;text-transform:uppercase;font-size:clamp(23px,2.2vw,34px);line-height:1.02;margin:0 0 12px;font-weight:900}.about-panel p:not(.section-kicker),.why-panel>p:not(.section-kicker){position:relative;z-index:1;font-size:12px;line-height:1.55;margin:0 0 13px}.about-panel .button{position:relative;z-index:1;margin-top:0}.why-panel{padding:23px 7% 20px;background:#fff}.why-panel .section-kicker{color:#ff6b16}.why-panel h2{font-size:clamp(21px,2vw,30px);color:var(--navy);margin-bottom:7px}.why-panel>p:not(.section-kicker){color:#35435b}.benefits{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.benefits div{border:1px solid #e2e5eb;padding:10px 9px;display:flex;align-items:center;gap:9px;min-height:54px}.benefits b{color:#ff6b16;font-size:25px;font-weight:500}.benefits strong{font-size:10px;line-height:1.3}.contact{background:#f5f7fb;padding:36px 5%;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.contact>div{margin-right:auto}.contact h2,.projects-note h2{margin:0 0 7px;font-size:25px;text-transform:uppercase}.contact p:not(.section-kicker),.projects-note p{font-size:13px;color:#4b5870}.contact .button-outline{border-color:var(--navy);color:var(--navy)}.projects-note{text-align:center;padding:28px 20px}.projects-note h2{color:var(--navy)}footer{background:#fff;border-top:1px solid #e5e8ef;padding:18px 4%;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;color:#4c5870}footer img{width:85px;height:55px;object-fit:contain}footer a{font-weight:700;color:var(--navy)}
@media(max-width:1100px){.site-header{padding:0 3%;gap:15px}.brand{width:115px}.nav{gap:17px;font-size:12px}.phone strong{font-size:14px}.header-quote{padding:12px}.hero-content{width:62%}.hero-facts{gap:12px}.hero-facts>div{padding-right:12px}.services{padding-left:1.5%;padding-right:1.5%}.service-card{padding-left:9px;padding-right:9px}.service-card h2{font-size:11px}.service-card p{font-size:10.5px}.lower-grid{grid-template-columns:32% 36% 32%}.about-panel{padding-left:6%;padding-right:5%}.why-panel{padding-left:5%;padding-right:5%}}
@media(max-width:760px){.site-header{height:72px;padding:0 18px;gap:10px}.brand{height:68px;width:105px}.menu-toggle{display:block;margin-left:auto;order:2}.nav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;padding:14px 22px 20px;box-shadow:0 8px 15px #001b4420;flex-direction:column;align-items:flex-start;gap:4px}.nav.open{display:flex}.nav a{width:100%;padding:10px 0}.phone{order:1;margin-left:auto}.phone-icon{font-size:21px}.phone strong{font-size:12px}.phone small{font-size:9px}.header-quote{display:none}.hero{min-height:600px;align-items:flex-end}.hero-photo{inset:0;background-position:58% center}.hero-shade{background:linear-gradient(0deg,#052354 0%,#052354f2 40%,#0523548a 72%,#05235430 100%)}.hero-content{width:100%;padding:210px 22px 22px}.eyebrow{font-size:10px;line-height:1.4}h1{font-size:clamp(35px,10vw,50px)}.hero-copy{font-size:13px;max-width:500px}.button{font-size:10px;padding:13px 15px;gap:12px}.hero-facts{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:22px}.hero-facts>div{border:0;padding:0;font-size:11px}.fact-icon{font-size:24px}.services{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px 12px;gap:12px}.service-card{padding:0 10px 32px;border:1px solid #e8eaf0!important}.service-card img{height:110px}.service-icon{top:24px;left:18px;font-size:30px}.service-card h2{font-size:12px}.service-card p{font-size:11px}.service-card>a{right:10px;bottom:8px}.lower-grid{grid-template-columns:1fr}.about-photo{min-height:270px}.about-panel{padding:28px 24px 30px}.about-panel h2{font-size:32px}.about-panel p:not(.section-kicker){font-size:13px}.why-panel{padding:28px 22px}.why-panel h2{font-size:27px}.why-panel>p:not(.section-kicker){font-size:12px}.benefits div{min-height:60px}.benefits strong{font-size:10px}.contact{padding:28px 22px;align-items:flex-start}.contact>div{flex-basis:100%}.contact h2{font-size:22px}.projects-note{padding:25px 22px}footer{flex-wrap:wrap;justify-content:center;text-align:center}footer p{width:100%;order:3;margin:0}footer img{width:70px;height:45px}}
@media(max-width:380px){.phone strong{font-size:11px}.phone-icon{display:none}.hero-actions{gap:8px}.hero-actions .button{padding:12px 11px}.hero-facts{column-gap:8px}.services{padding-left:7px;padding-right:7px;gap:8px}.service-card{padding-left:7px;padding-right:7px}.service-card img{height:90px}.benefits{gap:6px}.benefits div{padding:8px 6px}}

/* Poster-matched header and official supplied logo */
@media (min-width:761px){
  .site-header{height:62px;padding-left:4.4%;padding-right:3.6%;position:relative;overflow:visible;z-index:20;}
  .brand{position:absolute;left:4.2%;top:2px;width:132px;height:116px;z-index:8;}
  .brand img{object-fit:contain;filter:drop-shadow(0 1px 1px #061e4b12);}
  .nav{margin-left:29%;}
  /* Start hero copy below the overlapping logo so the yellow eyebrow stays clear. */
  .hero-content{align-self:flex-start;padding-top:94px;}
  .eyebrow{margin-top:8px;}
}
@media (max-width:760px){
  /* Match the mobile poster: the logo overlaps the header and hero. */
  .site-header{height:72px;padding:0 18px;position:relative;z-index:10;}
  .brand{position:absolute;left:12px;top:3px;width:132px;height:132px;z-index:12;align-items:flex-start;}
  .brand img{width:100%;height:100%;object-fit:contain;}
  .menu-toggle{position:relative;z-index:13;margin-left:auto;}
  .phone{display:none;}
  .nav{margin-left:0;z-index:14;}
  .hero-content{padding-top:135px;}
}

/* Dedicated About Us page inspired by the supplied mobile poster */
.about-page .site-header{position:relative;z-index:20;overflow:visible}
.about-page .about-hero{min-height:330px;position:relative;display:flex;align-items:center;overflow:hidden;background:var(--deep);color:#fff}
.about-hero-image{position:absolute;inset:0 0 0 40%;background-image:url('../images/about-workers.jpg');background-size:cover;background-position:center 42%}
.about-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#052354 0%,#052354 36%,#052354d9 48%,#05235422 76%),linear-gradient(0deg,#05235455,transparent 60%)}
.about-hero-copy{position:relative;z-index:1;width:min(600px,58%);padding:32px 0 32px 4.5%}
.about-hero-copy .section-kicker,.about-label{color:var(--yellow);text-transform:uppercase;font-weight:800;letter-spacing:.2px;font-size:12px;margin:0 0 9px}
.about-hero-copy h1{font-size:clamp(35px,3.3vw,52px);margin:0 0 12px;line-height:1.02}
.about-hero-copy h1 em{color:var(--yellow);font-style:normal}
.about-hero-copy>p:last-child{font-size:13px;line-height:1.6;max-width:455px;margin:0}
.about-story{display:grid;grid-template-columns:46% 54%;gap:0;padding:20px 4.5%;align-items:center;background:#fff;min-height:250px}
.story-photo{min-height:205px;background:url('../images/hero-building-workers.jpg') center/cover no-repeat;margin-right:26px}
.story-copy{padding:15px 4% 15px 0}
.story-copy h2,.vision-copy h2,.mission-copy h2,.team-copy h2{font-size:clamp(21px,2vw,29px);line-height:1.12;text-transform:uppercase;margin:0 0 12px;color:var(--navy);font-weight:900}
.story-copy .about-label,.vision-copy .about-label,.team-copy .about-label{color:#c99700}
.story-copy p:not(.about-label),.vision-copy p:not(.about-label),.team-copy p:not(.about-label){font-size:12px;line-height:1.65;color:#36445a;margin:0 0 10px}
.values-section{background:#f2f3f5;padding:24px 4.5% 28px;text-align:center}
.values-section>h2{font-size:20px;text-transform:uppercase;margin:0 0 20px;color:var(--navy)}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.value-card{padding:0 12px;border-right:1px solid #dfe2e8}
.value-card:last-child{border-right:0}
.value-icon{width:58px;height:58px;border:2px solid var(--yellow);box-shadow:inset 0 0 0 4px #fff;border-radius:50%;display:grid;place-items:center;margin:0 auto 9px;color:var(--navy);font-size:28px;background:#fff}
.value-card h3{font-size:12px;margin:0 0 5px;color:var(--navy)}
.value-card p{font-size:11px;line-height:1.45;color:#4b5870;margin:0}
.vision-section{display:grid;grid-template-columns:56% 44%;min-height:235px;background:#fff}
.vision-copy{padding:34px 7% 30px 8%;align-self:center}
.vision-copy h2,.mission-copy h2,.team-copy h2{font-size:clamp(20px,2vw,28px)}
.vision-photo{min-height:235px;background:url('../images/scaffolding-worker.jpg') center/cover no-repeat;clip-path:polygon(8% 0,100% 0,100% 100%,0 100%)}
.mission-section{min-height:210px;position:relative;display:flex;align-items:center;color:#fff;background:linear-gradient(90deg,#052354f5 0%,#052354e8 46%,#05235455 100%),url('../images/hero-building-workers.jpg') center 48%/cover no-repeat}
.mission-copy{padding:32px 8%;max-width:680px}
.mission-copy .about-label{color:var(--yellow)}
.mission-copy h2{color:#fff;margin-bottom:10px}
.mission-copy p:not(.about-label){font-size:12px;line-height:1.6;max-width:490px;margin:0;color:#f4f6fb}
.team-section{display:grid;grid-template-columns:56% 44%;align-items:center;padding:24px 4.5%;gap:25px;background:#fff;min-height:245px}
.team-copy{padding:8px 0 8px 3%}
.team-copy .button{margin-top:4px}
.team-photo{height:190px;background:url('../images/teamwork.jpg') center/cover no-repeat}
.site-footer{display:grid;grid-template-columns:100px 1fr 1.5fr 1.2fr;gap:28px;align-items:start;background:#052354;color:#fff;padding:25px 4.5% 0}
.site-footer>img{width:90px;height:80px;object-fit:contain;background:#fff;border-radius:50%}
.footer-links{display:flex;flex-direction:column;gap:7px;font-size:10px}
.footer-links strong{font-size:12px;margin-bottom:3px;color:#fff}
.footer-links a,.footer-links span{color:#e2e9f5}
.footer-links a:hover{text-decoration:underline;color:var(--yellow)}
.social-dots{display:flex;gap:10px;margin-top:3px}.social-dots span{border:1px solid #aebbd1;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;font-size:11px}
.footer-bottom{grid-column:1/-1;border-top:1px solid #ffffff35;margin-top:6px;padding:13px 0 15px;display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#d4deed}
.footer-bottom a{color:#d4deed}
@media(min-width:761px){.about-page .brand{top:2px}}
@media(max-width:760px){
 .about-page .site-header{height:72px;padding:0 18px}
 .about-page .about-hero{min-height:360px;align-items:flex-end}
 .about-hero-image{inset:0;background-position:58% center}
 .about-hero-shade{background:linear-gradient(0deg,#052354 0%,#052354f2 34%,#052354a8 72%,#05235425 100%)}
 .about-hero-copy{width:100%;padding:130px 22px 24px}
 .about-hero-copy h1{font-size:clamp(34px,10vw,47px)}
 .about-hero-copy>p:last-child{font-size:12px;max-width:520px}
 .about-story{grid-template-columns:1fr;padding:18px 16px 22px;gap:12px}
 .story-photo{min-height:190px;margin:0}
 .story-copy{padding:8px 5px 0}
 .story-copy h2,.vision-copy h2,.mission-copy h2,.team-copy h2{font-size:22px}
 .story-copy p:not(.about-label),.vision-copy p:not(.about-label),.team-copy p:not(.about-label){font-size:11px}
 .values-section{padding:22px 12px 25px}
 .values-section>h2{font-size:18px;margin-bottom:17px}
 .values-grid{grid-template-columns:repeat(2,1fr);row-gap:20px}
 .value-card{padding:0 7px;border-right:1px solid #dfe2e8}
 .value-card:nth-child(2){border-right:0}
 .value-card:nth-child(3),.value-card:nth-child(4){padding-top:5px}
 .value-icon{width:55px;height:55px;font-size:25px}
 .value-card h3{font-size:11px}
 .value-card p{font-size:10px}
 .vision-section{grid-template-columns:1fr}
 .vision-copy{padding:26px 22px 24px}
 .vision-photo{min-height:200px;clip-path:none;background-position:center 40%}
 .mission-section{min-height:210px;background-position:58% center}
 .mission-copy{padding:28px 22px}
 .team-section{grid-template-columns:1fr;padding:23px 18px;gap:15px}
 .team-copy{padding:0 4px}
 .team-photo{height:190px}
 .site-footer{grid-template-columns:70px 1fr 1fr;gap:18px 15px;padding:22px 16px 0}
 .site-footer>img{width:65px;height:65px}
 .footer-links{font-size:9px;gap:6px}
 .footer-links strong{font-size:11px}
 .footer-contact{grid-column:2/-1}
 .footer-bottom{font-size:8px;flex-direction:column;gap:6px}
}


/* Dedicated Services page based on the supplied Services poster */
.services-page .site-header{position:relative;z-index:20;overflow:visible}
.services-hero{min-height:300px;position:relative;display:flex;align-items:center;overflow:hidden;background:var(--deep);color:#fff}
.services-hero-photo{position:absolute;inset:0 0 0 42%;background:url('../images/client-hero-office.png') center 42%/cover no-repeat}
.services-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#052354 0%,#052354 37%,#052354d9 52%,#05235435 82%),linear-gradient(0deg,#05235466,transparent 60%)}
.services-hero-copy{position:relative;z-index:1;width:min(790px,72%);padding:34px 0 34px 4.5%}
.services-hero-copy .section-kicker{color:var(--yellow);text-transform:uppercase;font-size:12px;margin:0 0 12px}
.services-hero-copy h1{font-size:clamp(29px,3vw,43px);line-height:1.08;margin:0 0 13px;letter-spacing:-.7px}
.services-hero-copy h1 em{font-style:normal;color:#fff}
.services-hero-copy>p:last-child{font-size:12px;line-height:1.6;max-width:610px;margin:0;color:#f0f4fb}
.service-list{padding:10px 4.5% 12px;background:#fff}
.service-row{display:grid;grid-template-columns:32px minmax(160px,32%) 1fr;gap:22px;align-items:center;padding:12px 0;border-bottom:1px solid #e4e7ec;min-height:125px;scroll-margin-top:15px}
.service-row:last-child{border-bottom:0}
.service-number{align-self:start;padding-top:7px;color:#c89a00;font-size:12px;font-weight:800}
.service-row>img{width:100%;height:100px;object-fit:cover;display:block}
.service-row h2{font-size:17px;line-height:1.2;color:var(--navy);margin:0 0 7px;font-weight:900}
.service-row p{font-size:12px;line-height:1.5;color:#4b5870;margin:0 0 7px;max-width:440px}
.service-row a{font-size:11px;text-transform:uppercase;color:#c69a00;font-weight:900;letter-spacing:.2px}
.service-row a span{font-size:15px;margin-left:4px}
.additional-services{background:#f1f4f8;padding:24px 4.5% 27px}
.additional-services>h2{text-align:center;text-transform:uppercase;font-size:17px;margin:0 0 20px;color:var(--navy)}
.additional-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 35px}
.additional-grid article{display:flex;align-items:center;gap:14px;min-width:0}
.additional-grid article>span{flex:0 0 42px;width:42px;height:42px;border:2px solid var(--yellow);border-radius:50%;display:grid;place-items:center;color:var(--navy);background:#fff;font-size:23px}
.additional-grid h3{font-size:12px;margin:0 0 4px;color:var(--navy)}
.additional-grid p{font-size:10px;line-height:1.45;color:#4b5870;margin:0}
.services-cta{background:linear-gradient(100deg,#052354f5,#063a7aef),url('../images/hero-building-workers.jpg') center/cover;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:24px 4.5%;color:#fff}
.services-cta .section-kicker{color:var(--yellow);margin:0 0 5px}
.services-cta h2{font-size:22px;text-transform:uppercase;margin:0 0 5px;color:#fff}
.services-cta p:not(.section-kicker){font-size:11px;line-height:1.5;margin:0;max-width:580px;color:#eef3fc}
.services-cta .button{flex-shrink:0}
@media(min-width:761px){.services-page .brand{top:2px}}
@media(max-width:760px){
 .services-page .site-header{height:72px;padding:0 18px}
 .services-hero{min-height:330px;align-items:flex-end}
 .services-hero-photo{inset:0;background-position:62% center}
 .services-hero-shade{background:linear-gradient(0deg,#052354 0%,#052354f2 35%,#052354a8 72%,#05235425 100%)}
 .services-hero-copy{width:100%;padding:135px 22px 24px}
 .services-hero-copy h1{font-size:clamp(26px,7.2vw,36px);line-height:1.08}
 .services-hero-copy>p:last-child{font-size:11px;max-width:510px}
 .service-list{padding:8px 16px 12px}
 .service-row{grid-template-columns:24px minmax(100px,40%) 1fr;gap:10px;min-height:105px;padding:11px 0}
 .service-row>img{height:82px}
 .service-number{font-size:10px;padding-top:3px}
 .service-row h2{font-size:12px;margin-bottom:5px}
 .service-row p{font-size:10px;line-height:1.4;margin-bottom:5px}
 .service-row a{font-size:9px}
 .additional-services{padding:21px 15px 23px}
 .additional-services>h2{font-size:15px;margin-bottom:16px}
 .additional-grid{gap:17px 12px}
 .additional-grid article{gap:8px;align-items:flex-start}
 .additional-grid article>span{flex-basis:32px;width:32px;height:32px;font-size:18px}
 .additional-grid h3{font-size:10px;line-height:1.35}
 .additional-grid p{font-size:9px}
 .services-cta{padding:23px 18px;align-items:flex-start;flex-direction:column;gap:15px}
 .services-cta h2{font-size:19px}
 .services-cta p:not(.section-kicker){font-size:10px}
}
@media(max-width:380px){.service-row{grid-template-columns:20px minmax(88px,37%) 1fr;gap:8px}.service-row>img{height:75px}.service-row h2{font-size:11px}.service-row p{font-size:9px}.additional-grid{grid-template-columns:1fr}}


/* Projects portfolio page; footer intentionally shares the site's existing .site-footer styling. */
.projects-page .site-header{position:relative;z-index:20;overflow:visible}
.projects-hero{min-height:310px;position:relative;display:flex;align-items:center;overflow:hidden;background:var(--deep);color:#fff}
.projects-hero-photo{position:absolute;inset:0 0 0 34%;background:url('../images/projects-hero-reference.jpg') center 45%/cover no-repeat}
.projects-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#052354 0%,#052354f2 28%,#052354b8 45%,#05235420 78%),linear-gradient(0deg,#05235466,transparent 58%)}
.projects-hero-copy{position:relative;z-index:1;width:min(640px,60%);padding:34px 0 34px 6%}
.projects-hero-copy .section-kicker{color:var(--yellow);text-transform:uppercase;font-size:13px;margin:0 0 10px}
.projects-hero-copy h1{font-size:clamp(36px,4vw,54px);line-height:1.02;margin:0 0 13px;letter-spacing:-.7px}
.projects-hero-copy>p:last-child{font-size:14px;line-height:1.5;max-width:460px;margin:0;color:#f0f4fb}
.project-gallery-section{padding:14px 5% 24px;background:#fff}
.project-filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0 0 20px;border:1px solid #e1e5ec}
.project-filters button{border:0;border-right:1px solid #e1e5ec;background:#f8f9fb;color:#253650;text-transform:uppercase;font:800 11px Montserrat,Arial,sans-serif;padding:15px 8px;cursor:pointer}
.project-filters button:last-child{border-right:0}.project-filters button.active,.project-filters button:hover{background:var(--yellow);color:#071d42}
.project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:23px 24px}
.project-card{min-width:0}.project-card[hidden]{display:none}.project-card img{display:block;width:100%;height:145px;object-fit:cover;margin-bottom:10px}.project-card h2{font-size:15px;line-height:1.25;margin:0 0 5px;font-weight:900;color:var(--navy)}.project-card p{font-size:13px;color:#5a6476;margin:0}
.projects-disclaimer{font-size:10px;color:#6b7483;margin:22px 0 0}
.projects-cta{background:#052354;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:26px 5%}.projects-cta .section-kicker{color:var(--yellow);margin-bottom:6px}.projects-cta h2{font-size:23px;text-transform:uppercase;margin:0 0 7px}.projects-cta p:not(.section-kicker){font-size:12px;line-height:1.5;color:#e2e9f5;margin:0;max-width:650px}
@media(max-width:760px){.projects-hero{min-height:340px;align-items:flex-end}.projects-hero-photo{inset:0;background-position:60% center}.projects-hero-shade{background:linear-gradient(0deg,#052354 0%,#052354ed 37%,#0523548f 75%,#05235420 100%)}.projects-hero-copy{width:100%;padding:150px 22px 25px}.projects-hero-copy h1{font-size:clamp(34px,9vw,44px)}.projects-hero-copy>p:last-child{font-size:12px}.project-gallery-section{padding:12px 14px 22px}.project-filters{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:14px}.project-filters button{padding:12px 5px;font-size:9px;border-bottom:1px solid #e1e5ec}.project-filters button:last-child{grid-column:1/-1}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.project-card img{height:112px;margin-bottom:8px}.project-card h2{font-size:12px}.project-card p{font-size:10px}.projects-cta{padding:24px 20px;align-items:flex-start;flex-direction:column;gap:15px}.projects-cta h2{font-size:20px}.projects-cta p:not(.section-kicker){font-size:11px}}


/* Dedicated Contact page styled to match the supplied Contact Us reference. */
.contact-page .site-header{position:relative;z-index:20;overflow:visible}
.contact-hero{min-height:300px;position:relative;display:flex;align-items:center;overflow:hidden;background:var(--deep);color:#fff}
.contact-hero-photo{position:absolute;inset:0 0 0 40%;background:url('../images/client-hero-office.png') center 47%/cover no-repeat}
.contact-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#052354 0%,#052354 34%,#052354d9 48%,#05235420 82%),linear-gradient(0deg,#05235455,transparent 60%)}
.contact-hero-copy{position:relative;z-index:1;width:min(600px,58%);padding:32px 0 32px 4.5%}
.contact-hero-copy .section-kicker{color:var(--yellow);text-transform:uppercase;font-size:12px;margin:0 0 11px}
.contact-hero-copy h1{font-size:clamp(36px,4vw,54px);line-height:1.02;margin:0 0 13px;letter-spacing:-.8px}
.contact-hero-copy h1 em{font-style:normal;color:var(--yellow)}
.contact-hero-copy>p:last-child{font-size:13px;line-height:1.55;max-width:440px;margin:0;color:#f0f4fb}
.contact-main{display:grid;grid-template-columns:minmax(240px,.82fr) minmax(0,1.18fr);gap:42px;padding:32px 5%;background:#fff;align-items:start}
.contact-details{padding:4px 0;display:flex;flex-direction:column;gap:22px}
.contact-detail{display:grid;grid-template-columns:42px 1fr;gap:13px;align-items:start}
.contact-detail>span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--navy);font-size:20px;font-weight:900;box-shadow:0 0 0 4px #ff6b1624}
.contact-detail h2{font-size:13px;color:var(--navy);margin:2px 0 5px;font-weight:900}
.contact-detail p{font-size:12px;line-height:1.55;color:#4b5870;margin:0;overflow-wrap:anywhere}
.contact-detail a:hover{color:#b68c00;text-decoration:underline}
.quote-card{padding:24px 25px 22px;background:#fff;box-shadow:0 5px 24px #0a245015;border:1px solid #edf0f4}
.quote-card>h2{font-size:22px;line-height:1.2;color:var(--navy);margin:0 0 7px}
.form-intro{font-size:12px;color:#697386;margin:0 0 19px}
#quote-form{display:flex;flex-direction:column;gap:13px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 12px}
#quote-form label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#4b5870;font-weight:700;min-width:0}
#quote-form input:not([type=checkbox]):not([type=file]),#quote-form select,#quote-form textarea{width:100%;min-height:39px;border:1px solid #dce1e9;border-radius:3px;padding:9px 10px;font:400 12px Arial,sans-serif;color:#152b50;background:#fff}
#quote-form textarea{resize:vertical;min-height:85px}
#quote-form input:focus,#quote-form select:focus,#quote-form textarea:focus{outline:2px solid #ff6b1699;border-color:#d9550b}
#quote-form .upload-label input[type=file]{font-size:11px;padding:7px 0;max-width:100%}
#quote-form .upload-label small{font-size:10px;font-weight:400;color:#7b8492;line-height:1.4}
#quote-form .consent{display:flex;flex-direction:row;align-items:flex-start;gap:8px;font-size:10px;line-height:1.4;font-weight:500}
#quote-form .consent input{margin:2px 0 0;accent-color:var(--navy);flex-shrink:0}
.form-submit{width:100%;border:0;cursor:pointer;margin-top:1px;min-height:46px}
.form-note{font-size:10px;line-height:1.4;color:#778092;margin:0}
.contact-map{padding:0;background:#dfeaf0}
.map-art{position:relative;height:270px;overflow:hidden;background-color:#e8eff0;background-image:linear-gradient(24deg,transparent 47%,#fff 48%,#fff 50%,transparent 51%),linear-gradient(105deg,transparent 37%,#f8e7a5 37.5%,#f8e7a5 38.2%,transparent 38.7%),linear-gradient(160deg,transparent 57%,#fff 57.5%,#fff 59%,transparent 59.5%),repeating-linear-gradient(12deg,transparent 0 42px,#d2e1dc 43px,#d2e1dc 45px,transparent 46px 78px),repeating-linear-gradient(98deg,transparent 0 55px,#d5e2df 56px,#d5e2df 58px,transparent 59px 94px)}
.map-road{position:absolute;height:7px;background:#fff;border:1px solid #d4dfe0;border-radius:8px;opacity:.9;transform-origin:left center}.road-one{width:75%;left:-4%;top:57%;transform:rotate(-16deg)}.road-two{width:70%;left:24%;top:22%;transform:rotate(39deg)}.road-three{width:65%;left:43%;top:88%;transform:rotate(-49deg)}
.map-river{position:absolute;width:120%;height:45px;left:-8%;top:44%;border-top:9px solid #b9dbe8;border-bottom:5px solid #c9e3ed;border-radius:50%;transform:rotate(-12deg)}
.map-pin{position:absolute;display:flex;align-items:center;gap:10px;color:var(--navy);font-size:12px;font-weight:700;background:#ffffffdc;padding:8px 12px;border-radius:3px;box-shadow:0 3px 10px #06275d12}
.map-pin b{width:30px;height:30px;display:grid;place-items:center;background:var(--yellow);color:var(--navy);border-radius:50%;font-size:17px;box-shadow:0 0 0 5px #ff6b1633}
.map-pin span{line-height:1.35}.map-pin strong{font-size:14px}.pin-gauteng{left:15%;top:36%}.pin-durban{right:11%;top:57%}.map-caption{position:absolute;left:18px;bottom:14px;color:#4b6471;font-size:10px;background:#ffffffbd;padding:6px 8px}
.contact-direct{min-height:160px;display:grid;grid-template-columns:1.15fr .85fr;background:var(--yellow);overflow:hidden}
.direct-copy{padding:24px 7% 25px 10%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.direct-copy .section-kicker{color:var(--navy);margin:0 0 6px}
.direct-copy h2{font-size:clamp(17px,2vw,24px);line-height:1.15;text-transform:uppercase;color:var(--navy);margin:0 0 15px}
.button-navy{background:var(--navy);color:#fff}
.direct-photo{background:url('../images/blueprints-tools.jpg') center/cover no-repeat;min-height:160px;clip-path:polygon(9% 0,100% 0,100% 100%,0 100%)}
@media(min-width:761px){.contact-page .brand{top:2px}}
@media(max-width:760px){
 .contact-page .site-header{height:72px;padding:0 18px}
 .contact-hero{min-height:350px;align-items:flex-end}
 .contact-hero-photo{inset:0;background-position:61% center}
 .contact-hero-shade{background:linear-gradient(0deg,#052354 0%,#052354f2 35%,#052354a8 72%,#05235420 100%)}
 .contact-hero-copy{width:100%;padding:135px 22px 25px}
 .contact-hero-copy h1{font-size:clamp(35px,9.5vw,46px)}
 .contact-hero-copy>p:last-child{font-size:12px;max-width:500px}
 .contact-main{grid-template-columns:1fr;gap:25px;padding:24px 16px}
 .contact-details{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}
 .contact-detail{grid-template-columns:32px 1fr;gap:9px}
 .contact-detail>span{width:29px;height:29px;font-size:16px}
 .contact-detail h2{font-size:11px}
 .contact-detail p{font-size:10px}
 .quote-card{padding:20px 16px}
 .quote-card>h2{font-size:19px}
 .form-grid{gap:12px 9px}
 #quote-form label{font-size:10px}
 .map-art{height:235px}
 .pin-gauteng{left:4%;top:30%}.pin-durban{right:3%;top:58%}
 .contact-direct{grid-template-columns:1fr}
 .direct-copy{padding:24px 20px}
 .direct-photo{min-height:130px;clip-path:none}
}
@media(max-width:390px){.contact-details{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.map-pin{font-size:10px;padding:6px 8px}.map-pin strong{font-size:12px}.map-pin b{width:25px;height:25px}}


/* === Motion polish: subtle, accessible, performance-friendly === */
@keyframes heroTextIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes heroImageDrift {
  from { transform: scale(1.025); }
  to { transform: scale(1.075); }
}
@keyframes accentDraw {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}
.hero-content, .about-hero-copy, .services-hero-copy, .projects-hero-copy, .contact-hero-copy {
  animation: heroTextIn .75s cubic-bezier(.2,.7,.2,1) both;
}
.hero-photo, .services-hero-photo, .projects-hero-photo, .contact-hero-photo, .about-hero-image {
  transform-origin: center;
  animation: heroImageDrift 18s ease-in-out alternate infinite;
}
.eyebrow span, .section-kicker span {
  transform-origin: left;
  animation: accentDraw .65s .18s ease-out both;
}
.button, .service-card, .service-row, .project-card, .value-card, .benefits div,
.contact-detail, .additional-grid > *, .project-filters button, .nav a {
  transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease,
              color .28s ease, border-color .28s ease, opacity .28s ease;
}
.service-card:hover, .project-card:hover, .value-card:hover, .benefits div:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(5,35,84,.10);
}
.service-card img, .project-card img, .story-photo, .team-photo, .vision-photo, .direct-photo {
  overflow: hidden;
}
.service-card img, .project-card img {
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.service-card:hover img, .project-card:hover img {
  transform: scale(1.045);
  filter: saturate(1.06);
}
.project-card { overflow: hidden; }
.project-card h2 { transition: color .25s ease; }
.project-card:hover h2 { color: #c79d00; }
.button:hover span { transform: translateX(3px); }
.button span { display: inline-block; transition: transform .25s ease; }
.nav a { transition: color .2s ease; }
.nav a:hover { color: #c59b00; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus,
.quote-card input:focus, .quote-card select:focus, .quote-card textarea:focus {
  outline: 2px solid rgba(255,212,0,.55);
  outline-offset: 1px;
  border-color: #e5b900;
}
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1);
}
.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.project-card.is-filtering-out {
  opacity: 0;
  transform: scale(.97);
  pointer-events: none;
}
.project-card[hidden] { display: none !important; }
.project-filters button:hover { transform: translateY(-2px); }
.site-header { transition: box-shadow .25s ease; }
.site-header:focus-within { box-shadow: 0 4px 18px rgba(5,35,84,.12); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .reveal-ready .reveal { opacity: 1; transform: none; }
}


/* Client style-guide update: black, white, blue and orange */
:root{--navy:#06427a;--deep:#071018;--yellow:#ff6b16;--ink:#111820;--muted:#4b5870;--orange:#ff6b16;--black:#080e15}
.site-header{background:#080e15;color:#fff;box-shadow:0 2px 12px #0003}
.site-header .nav a{color:#fff}
.site-header .nav a.active{background:#06427a;color:#fff;padding:12px 13px;border-radius:2px}
.site-header .nav a.active:after{display:none}
.site-header .nav a:hover:after{background:#ff6b16}
.menu-toggle{color:#fff}
.button-yellow{background:#ff6b16;color:#fff;box-shadow:0 3px 8px #0002}
.button-yellow:hover{background:#e85a0b}
.eyebrow,.section-kicker,.service-icon,.fact-icon,.benefits b{color:#ff6b16}
.eyebrow span,.section-kicker span{background:#ff6b16}
.service-card>a{background:#ff6b16;color:#fff}
.project-filters button.active,.project-filters button:hover{background:#06427a;color:#fff}
.contact-detail>span,.map-pin b{background:#ff6b16;color:#fff;box-shadow:0 0 0 4px #ff6b1624}
.contact-direct{background:#ff6b16}
footer,.site-footer{background:#080e15;color:#fff;border-top:3px solid #06427a}
footer a,.site-footer a{color:#fff}
.footer-links strong{color:#ff6b16}
.footer-bottom{border-top:1px solid #ffffff25}
@media(max-width:760px){.site-header .nav{background:#080e15}.site-header .nav a{color:#fff}.site-header .nav a.active{padding:10px 12px}}

/* VERIFIED CLIENT BRANDING OVERRIDES — 2026-10-28 v2 */
:root {--navy:#06427a;--deep:#101820;--yellow:#ff6b16;--orange:#ff6b16;--black:#101820}
body {background:#fff}
.site-header {background:#101820 !important;color:#fff !important}
.site-header .nav a {color:#fff !important}
.site-header .nav a.active {background:#06427a !important;color:#fff !important}
.site-header .header-quote,.button-yellow {background:#ff6b16 !important;color:#fff !important}
.hero-photo {background-image:url('../images/client-hero-team.png') !important}
.about-hero-image {background-image:url('../images/client-hero-team.png') !important}
.services-hero-photo {background-image:url('../images/client-hero-office.png') !important}
.contact-hero-photo {background-image:url('../images/client-hero-office.png') !important}
.site-footer,footer {background:#101820 !important;color:#fff !important}
.site-footer a,footer a {color:#fff}
.service-card>a {background:#ff6b16 !important;color:#fff !important}
.section-kicker,.eyebrow,.service-number {color:#ff6b16}
@media(max-width:760px){.site-header .nav {background:#101820 !important}}


/* LOGO LEGIBILITY FIX — keep the supplied full-colour logo clear on the dark header */
.site-header .brand {
  width: 158px;
  height: 68px;
  padding: 5px 9px;
  flex: 0 0 158px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  overflow: hidden;
}
.site-header .brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 760px) {
  .site-header .brand {
    width: 132px;
    height: 60px;
    flex-basis: 132px;
    padding: 4px 7px;
  }
}


/* HEADER LOGO: match the footer's original transparent logo and let it hang into the hero */
.site-header {
  position: relative;
  overflow: visible !important;
  z-index: 30 !important;
}
.site-header .brand {
  position: absolute !important;
  left: 4.4% !important;
  top: 8px !important;
  width: 145px !important;
  height: 145px !important;
  flex: 0 0 145px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 40 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
.site-header .brand img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: top center !important;
}
.site-header .nav {
  margin-left: 175px;
}
.site-header .header-quote {
  margin-left: auto;
}
@media (max-width: 760px) {
  .site-header .brand {
    left: 16px !important;
    top: 5px !important;
    width: 112px !important;
    height: 112px !important;
  }
  .site-header .nav {
    margin-left: 0;
  }
  .site-header .header-quote {
    margin-left: 0;
  }
}


/* FIX: reserve room for the hanging logo on every page, desktop and mobile */
.site-header {
  position: relative;
  min-height: 88px;
  overflow: visible !important;
  z-index: 40;
}
.site-header .brand {
  left: clamp(16px, 4.4%, 64px) !important;
  top: 8px !important;
  width: 145px !important;
  height: 145px !important;
}
.site-header .nav {
  margin-left: 175px !important;
}

/* Keep hero content clear of the logo, which hangs down from the header */
.hero,
.page-hero,
.about-hero,
.services-hero,
.projects-hero,
.contact-hero,
section.hero,
section.page-hero {
  padding-top: clamp(105px, 12vw, 150px) !important;
}

/* Page-specific hero wrappers used in this site */
.hero-content,
.page-hero-content,
.about-hero-content,
.services-hero-content,
.projects-hero-content,
.contact-hero-content {
  position: relative;
  z-index: 1;
}

/* Smaller screens: keep logo hanging but reserve enough vertical space */
@media (max-width: 760px) {
  .site-header {
    min-height: 72px;
  }
  .site-header .brand {
    left: 12px !important;
    top: 5px !important;
    width: 108px !important;
    height: 108px !important;
  }
  .site-header .nav {
    margin-left: 0 !important;
  }
  .hero,
  .page-hero,
  .about-hero,
  .services-hero,
  .projects-hero,
  .contact-hero,
  section.hero,
  section.page-hero {
    padding-top: 118px !important;
  }
}

/* Prevent first hero headings from being hidden behind the logo */
.hero h1:first-child,
.page-hero h1:first-child,
.hero-content h1,
.page-hero-content h1 {
  position: relative;
  z-index: 2;
}


/* FINAL POLISH: clean white header with high-contrast navigation */
.site-header {
  background: #ffffff !important;
  color: #172536 !important;
  border-bottom: 1px solid #e5eaf0 !important;
  box-shadow: 0 5px 20px rgba(18, 39, 62, .08) !important;
}
.site-header .nav a,
.site-header .menu-toggle {
  color: #172536 !important;
}
.site-header .nav a:hover,
.site-header .nav a:focus,
.site-header .nav a.active {
  color: #0756a6 !important;
}
.site-header .nav a.active::after,
.site-header .nav a:hover::after {
  background: #0756a6 !important;
}
.site-header .header-quote {
  color: #ffffff !important;
  background: #ff6b16 !important;
  border-color: #ff6b16 !important;
}
.site-header .brand {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 60 !important;
}
.site-header .brand img {
  object-fit: contain !important;
  object-position: center top !important;
}

/* Keep the hanging logo out of the heading area on every inner page */
.about-hero-copy,
.services-hero-copy,
.projects-hero-copy,
.contact-hero-copy {
  padding-top: 118px !important;
  position: relative !important;
  z-index: 2 !important;
}
.hero-content {
  padding-top: 135px !important;
  position: relative !important;
  z-index: 2 !important;
}
.about-hero,
.services-hero,
.projects-hero,
.contact-hero,
.hero {
  overflow: hidden;
}
@media (min-width: 761px) {
  .about-hero-copy { padding-top: 124px !important; }
  .services-hero-copy { padding-top: 124px !important; }
  .projects-hero-copy { padding-top: 124px !important; }
  .contact-hero-copy { padding-top: 124px !important; }
  .hero-content { padding-top: 142px !important; }
}
@media (max-width: 760px) {
  .site-header { min-height: 76px !important; }
  .site-header .brand {
    width: 104px !important;
    height: 104px !important;
    left: 10px !important;
    top: 5px !important;
  }
  .site-header .menu-toggle {
    color: #172536 !important;
    background: #ffffff !important;
  }
  .about-hero-copy,
  .services-hero-copy,
  .projects-hero-copy,
  .contact-hero-copy {
    width: 100% !important;
    padding: 126px 22px 30px !important;
  }
  .hero-content {
    width: 100% !important;
    padding: 130px 22px 28px !important;
  }
  .hero h1 { font-size: clamp(30px, 8vw, 42px) !important; }
  .about-hero-copy h1,
  .services-hero-copy h1,
  .projects-hero-copy h1 { overflow-wrap: anywhere; }
}


/* FINAL DEPLOYMENT FIX — white header and real page hero selectors */
.site-header {
  background: #fff !important;
  color: #172536 !important;
  border-bottom: 1px solid #e5eaf0 !important;
  box-shadow: 0 5px 20px rgba(18,39,62,.08) !important;
  min-height: 88px !important;
  height: auto !important;
  overflow: visible !important;
}
.site-header .nav a, .site-header .menu-toggle { color: #172536 !important; }
.site-header .nav a:hover, .site-header .nav a:focus, .site-header .nav a.active { color: #0756a6 !important; }
.site-header .header-quote { color: #fff !important; background: #ff6b16 !important; border-color: #ff6b16 !important; }
.site-header .nav { margin-left: 175px !important; }
.site-header .brand { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; z-index: 60 !important; }

/* These are the exact hero-copy classes used by the HTML pages. */
.about-hero, .services-hero, .projects-hero, .contact-hero {
  position: relative !important;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.about-hero-copy, .services-hero-copy, .projects-hero-copy, .contact-hero-copy {
  position: relative !important;
  z-index: 3 !important;
  width: min(660px, 62%) !important;
  padding: 150px 0 58px !important;
  margin-left: 7% !important;
}
.hero { min-height: 560px; }
.hero-content {
  position: relative !important;
  z-index: 3 !important;
  padding-top: 155px !important;
  padding-bottom: 42px !important;
}
.site-header .brand { top: 8px !important; width: 145px !important; height: 145px !important; }

@media (max-width: 760px) {
  .site-header { min-height: 76px !important; height: auto !important; }
  .site-header .brand { left: 10px !important; top: 5px !important; width: 104px !important; height: 104px !important; }
  .site-header .nav { margin-left: 0 !important; background: #fff !important; }
  .site-header .nav a { color: #172536 !important; }
  .about-hero, .services-hero, .projects-hero, .contact-hero {
    min-height: 540px !important;
    align-items: flex-end !important;
  }
  .about-hero-copy, .services-hero-copy, .projects-hero-copy, .contact-hero-copy {
    width: 100% !important;
    margin: 0 !important;
    padding: 145px 22px 30px !important;
  }
  .hero { min-height: 650px !important; align-items: flex-end !important; }
  .hero-content { width: 100% !important; padding: 190px 22px 28px !important; }
  .about-hero-copy h1, .services-hero-copy h1, .projects-hero-copy h1, .contact-hero-copy h1, .hero-content h1 {
    overflow-wrap: anywhere;
    position: relative;
    z-index: 4;
  }
}


/* DESIGN MOCKUP MATCH: clean white mobile header and menu, no blue menu panels */
@media (max-width: 760px) {
  .site-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 12px !important;
    min-height: 88px !important;
    height: auto !important;
    padding: 8px 16px !important;
    overflow: visible !important;
    position: relative !important;
    background: #fff !important;
    z-index: 100 !important;
  }
  .site-header .brand {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex: 0 0 82px !important;
    width: 82px !important;
    height: 82px !important;
    max-width: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    z-index: 2 !important;
  }
  .site-header .brand img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  .site-header .menu-toggle {
    display: block !important;
    order: 2 !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    margin-left: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #102b4e !important;
    font-size: 30px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    z-index: 3 !important;
  }
  .site-header .nav {
    display: none !important;
    position: static !important;
    inset: auto !important;
    order: 3 !important;
    flex: 0 0 calc(100% + 32px) !important;
    width: calc(100% + 32px) !important;
    margin: 8px -16px -8px !important;
    padding: 6px 18px 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: #fff !important;
    border-top: 1px solid #edf0f4 !important;
    box-shadow: 0 8px 14px rgba(18,39,62,.06) !important;
  }
  .site-header .nav.open { display: flex !important; }
  .site-header .nav a,
  .site-header .nav a.active,
  .site-header .nav a:hover,
  .site-header .nav a:focus {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #172536 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }
  .site-header .nav a + a { border-top: 1px solid #edf0f4 !important; }
  .site-header .nav a.active {
    color: #0756a6 !important;
    border-left: 4px solid #ff6b16 !important;
    padding-left: 10px !important;
    font-weight: 700 !important;
  }
  .site-header .nav a::after,
  .site-header .nav a.active::after,
  .site-header .nav a:hover::after { display: none !important; }
  .site-header .header-quote { display: none !important; }

  /* With the logo contained inside the header, the hero begins below it. */
  .hero {
    min-height: 600px !important;
    overflow: hidden !important;
  }
  .hero-content {
    padding: 38px 22px 28px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .about-hero, .services-hero, .projects-hero, .contact-hero {
    min-height: 500px !important;
    align-items: flex-end !important;
    overflow: hidden !important;
  }
  .about-hero-copy, .services-hero-copy, .projects-hero-copy, .contact-hero-copy {
    width: 100% !important;
    margin: 0 !important;
    padding: 38px 22px 30px !important;
  }
}


/* FINAL POLISH: consistent projects hero and refined desktop navigation */
.site-header .nav a,
.site-header .nav a.active,
.site-header .nav a:hover,
.site-header .nav a:focus {
  background: transparent !important;
  box-shadow: none !important;
  color: #172536 !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}
.site-header .nav a {
  position: relative !important;
  padding: 12px 13px !important;
  transition: color .18s ease !important;
}
.site-header .nav a::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 13px !important;
  right: 13px !important;
  bottom: 4px !important;
  height: 2px !important;
  background: #ff6b16 !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform .18s ease !important;
}
.site-header .nav a:hover,
.site-header .nav a:focus,
.site-header .nav a.active {
  color: #0756a6 !important;
}
.site-header .nav a:hover::after,
.site-header .nav a:focus::after,
.site-header .nav a.active::after {
  transform: scaleX(1) !important;
}
.site-header .nav a.active {
  border-left: 0 !important;
  font-weight: 700 !important;
}
/* Ensure all inner-page hero sections, including Projects, share the same layout */
.about-hero, .services-hero, .projects-hero, .contact-hero {
  box-sizing: border-box !important;
  min-height: 520px !important;
  padding: 0 !important;
}
.about-hero-copy, .services-hero-copy, .projects-hero-copy, .contact-hero-copy {
  box-sizing: border-box !important;
  max-width: 660px !important;
}
.projects-hero-copy {
  padding-top: 150px !important;
  padding-bottom: 58px !important;
}
@media (min-width: 761px) {
  .site-header .nav {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    margin-left: 175px !important;
    gap: 5px !important;
  }
  .site-header .nav a {
    white-space: nowrap !important;
  }
  .projects-hero {
    align-items: center !important;
  }
}
@media (max-width: 760px) {
  .site-header .nav a,
  .site-header .nav a.active,
  .site-header .nav a:hover,
  .site-header .nav a:focus {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    color: #172536 !important;
    padding: 14px 12px !important;
  }
  .site-header .nav a.active {
    color: #0756a6 !important;
    border-left: 4px solid #ff6b16 !important;
    padding-left: 10px !important;
  }
  .site-header .nav a::after,
  .site-header .nav a.active::after,
  .site-header .nav a:hover::after { display: none !important; }
  .projects-hero {
    min-height: 500px !important;
    align-items: flex-end !important;
  }
  .projects-hero-copy {
    width: 100% !important;
    margin: 0 !important;
    padding: 38px 22px 30px !important;
  }
}


/* FINAL FIX: remove filled active/hover menu blocks on desktop and mobile */
body .site-header .nav > a,
body .site-header .nav > a.active,
body .site-header .nav > a:hover,
body .site-header .nav > a:focus,
body .site-header .nav > a:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline-offset: 3px;
}
@media (min-width: 761px) {
  body .site-header .nav > a {
    color: #172536 !important;
    padding: 14px 13px !important;
    border: 0 !important;
    position: relative !important;
    transition: color .18s ease !important;
  }
  body .site-header .nav > a:hover,
  body .site-header .nav > a:focus,
  body .site-header .nav > a.active {
    color: #0756a6 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
  }
  body .site-header .nav > a::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 13px !important;
    right: 13px !important;
    bottom: 4px !important;
    height: 2px !important;
    background: #ff6b16 !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform .18s ease !important;
  }
  body .site-header .nav > a:hover::after,
  body .site-header .nav > a:focus::after,
  body .site-header .nav > a.active::after {
    transform: scaleX(1) !important;
  }
}
@media (max-width: 760px) {
  body .site-header .nav > a,
  body .site-header .nav > a.active,
  body .site-header .nav > a:hover,
  body .site-header .nav > a:focus {
    display: block !important;
    width: 100% !important;
    color: #172536 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 12px !important;
  }
  body .site-header .nav > a.active {
    color: #0756a6 !important;
    border-left: 3px solid #ff6b16 !important;
    padding-left: 10px !important;
    font-weight: 700 !important;
  }
  body .site-header .nav > a::after { display: none !important; }
}


/* Contact directory and updated business contact details */
.email-directory{padding:44px 5%;background:#f5f7fa;color:#172536}
.email-directory-heading{max-width:760px;margin:0 auto 24px;text-align:center}
.email-directory-heading h2{font-size:clamp(24px,3vw,34px);line-height:1.15;color:#052354;margin:7px 0 10px}
.email-directory-heading>p:last-child{color:#5b6675;font-size:14px;line-height:1.65;margin:0}
.email-directory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:1000px;margin:0 auto}
.email-directory-card{display:flex;flex-direction:column;gap:7px;padding:18px 20px;background:#fff;border:1px solid #e2e7ed;border-radius:8px;text-decoration:none;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;min-width:0}
.email-directory-card span{font-size:12px;font-weight:700;color:#687386;text-transform:uppercase;letter-spacing:.04em}
.email-directory-card strong{font-size:14px;color:#052354;overflow-wrap:anywhere}
.email-directory-card:hover,.email-directory-card:focus-visible{border-color:#ff6b16;transform:translateY(-2px);box-shadow:0 8px 20px #05235412}
.email-directory-primary{border-left:4px solid #ff6b16}
.site-footer .footer-contact span{overflow-wrap:anywhere;line-height:1.5}
.site-footer .footer-contact a{overflow-wrap:anywhere}
@media(max-width:760px){
  .email-directory{padding:34px 5%}
  .email-directory-grid{grid-template-columns:1fr}
  .email-directory-card{padding:15px}
  .email-directory-card strong{font-size:13px}
}


/* FIX: keep the Projects page footer at the bottom when page content is short */
html, body {
  min-height: 100%;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main {
  flex: 1 0 auto;
}
body > .site-footer,
body > footer.site-footer {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  margin-top: auto;
}