/* UDEC site styles. Expects an images/ folder alongside this file. */
:root{
  --udec-blue:   #2095D5;
  --udec-input:  #EDEDED;
  --font: 'klavika-web', 'Titillium Web', 'Segoe UI', Arial, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:#111;line-height:1.6;background:#fff;font-weight:400}
img{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:inherit}
.container{max-width:1280px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{background:#fff}
.header-inner{display:flex;align-items:flex-start;justify-content:space-between;padding:20px;max-width:1280px;margin:0 auto}
.logo img{width:193px;height:auto}
.main-nav ul{display:flex;list-style:none;gap:40px;margin-top:26px}
.main-nav a{font-size:15px;font-weight:300;letter-spacing:.5px;color:#111;text-transform:uppercase;transition:color .2s}
.main-nav a:hover{color:var(--udec-blue)}
.header-social{display:flex;gap:20px;margin-top:32px}
.header-social svg{display:block}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px}

/* Hero */
/* Blue tint is baked into the source image - no CSS overlay */
.hero{
  --lqip:url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDABQODxIPDRQSERIXFhQYHzMhHxwcHz8tLyUzSkFOTUlBSEZSXHZkUldvWEZIZoxob3p9hIWET2ORm4+AmnaBhH//2wBDARYXFx8bHzwhITx/VEhUf39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f3//wAARCAALABwDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDNe43IAq7T6g0R3BB+bmq2SSAelOViDxXScZeFwmPuD86DOn90VAhyuT1p5+g/Knchn//Z');
  background-color:#3a4a55;
  background-image:url('../images/hero.jpg'),var(--lqip);
  background-position:center;background-size:cover;background-repeat:no-repeat;
  min-height:max-content;
}
.hero-content{color:#fff;max-width:50%;margin-left:10%;padding:160px 0}
.hero-title{font-size:44px;font-weight:700;line-height:1.15;color:#fff}
.hero-title::after{content:"";display:block;width:80%;padding-top:20px;border-bottom:1px solid #fff}
.hero-content p{font-size:18px;font-weight:300;margin-top:12px;max-width:80%}

/* Section scaffolding + watermarks */
section{position:relative;overflow:hidden}
.side-col{width:25%;position:relative}
.side-col .col-heading{text-align:center;font-size:30px;font-weight:700}
.watermark{
  position:absolute;transform:rotate(-90deg);
  font-size:190px;font-weight:700;color:#ececec;
  line-height:1;white-space:nowrap;user-select:none;pointer-events:none;
  right:-130px;top:365px;
}
.section-dark .watermark{color:#fff;opacity:.9}

/* Services */
.services-flex{display:flex;padding:80px 20px}
.services-main{width:66%;}
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:888px;margin:0 auto}
.service-tile{
  background-size:cover;background-position:center;background-color:#2a3f4d;
  min-height:250px;margin:16px 0;
}
.service-tile .tile-inner{margin:0 20px;margin-top:160px;max-width:80%}
.cat-title{font-weight:700;color:#fff;padding-top:56px;font-size:20px}
.cat-title::after{content:"";display:block;width:80%;padding-top:8px;border-bottom:1px solid #fff}
.service-tile p.tile-copy{color:#fff;font-size:18px;font-weight:300;margin-top:12px;padding-bottom:16px;line-height:1.5}
/* Tint is baked into these PNGs too */
.tile-1{background-image:url('../images/service-1.jpg')}
.tile-2{background-image:url('../images/service-2.jpg')}
.tile-3{background-image:url('../images/service-3.jpg')}
.tile-4{background-image:url('../images/service-4.jpg')}

/* Projects */
.projects-flex{display:flex;margin:80px 0}
.projects-flex .col-heading{margin-bottom:40px}
.projects-main{width:66%;padding:40px 20px}
.projects-main img{object-fit:contain;width:100%}
.projects-flex .watermark{top:400px}

/* Join Us */
.section-dark{
  background:linear-gradient(to right,#26282C,#090A0C);
  color:#fff;min-height:100vh;
}
.joinus-flex{display:flex;padding:80px 0 112px;position:relative;z-index:20}
.joinus-flex .col-heading{color:var(--udec-blue)}
.joinus-main{width:66%;display:flex;padding-top:80px;margin:0 20px;gap:20px}
.joinus-copy{width:50%}
.joinus-copy h2{font-size:30px;font-weight:700;color:#fff}
.joinus-copy .lead{color:#fff;font-size:20px;margin-top:16px;line-height:1.6}
.joinus-copy .lead::after{content:"";display:block;width:80%;padding-top:8px;border-bottom:1px solid #fff}
.joinus-copy h3{color:var(--udec-blue);margin:32px 0;font-size:25px;font-weight:600}
.joinus-copy p.body{color:#fff;font-size:18px;font-weight:300;line-height:1.5}
.btn-outline{
  display:inline-block;margin-top:40px;padding:16px 40px;
  border:1px solid #fff;color:#fff;font-size:15px;transition:all .2s;
}
.btn-outline:hover{background:var(--udec-blue);border-color:var(--udec-blue)}
.joinus-photo{width:50%;text-align:center}
.joinus-photo img{margin:0 auto;position:relative;z-index:30}
/* Dot-grid decoration (original uses two absolutely-positioned base64 PNGs;
   recreated here as CSS patterns) */
.dot-grid{
  position:absolute;top:0;width:245px;height:243px;z-index:0;
  background-image:radial-gradient(#34373c 3px,transparent 3px);
  background-size:22px 22px;
}
.dot-grid.one{right:40px}
.dot-grid.two{right:160px}

/* Contact form */
.contact-section{background:#fff;padding-top:80px}
.contact-flex{display:flex;max-width:1280px;margin:0 auto;padding-bottom:96px}
.contact-flex .col-heading{text-align:left;padding:0 80px;margin:0 20px 16px}
.contact-main{width:75%;margin:0 20px;padding-top:4px}
.form-row{display:flex;gap:20px;margin-bottom:16px}
.form-row .input{width:100%}
.contact-main label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.contact-main input,
.contact-main textarea{
  width:100%;border:1px solid #e0e0e0;background:var(--udec-input);
  border-radius:2px;padding:20px 16px;font-family:var(--font);font-size:15px;
}
.contact-main input:focus,
.contact-main textarea:focus{outline:none;box-shadow:0 0 0 2px var(--udec-blue)}
.btn-submit{
  padding:16px 32px;background:#000;color:#fff;border:none;cursor:pointer;
  font-family:var(--font);font-size:15px;transition:background .15s ease-in-out;
}
.btn-submit:hover{background:var(--udec-blue)}
/* Netlify fills .recaptcha-slot with the reCAPTCHA widget on deploy; it is
   empty (and so collapsed) when the files are previewed locally. The widget
   has a fixed 304px width, hence the scroll guard on narrow screens. */
.recaptcha-slot{margin-bottom:16px;overflow-x:auto}
.recaptcha-slot:empty{display:none}
.form-error{margin:0 0 16px;color:#c0392b;font-size:14px}

/* Footer */
.site-footer{background:linear-gradient(to right,#26282C,#090A0C);min-height:20vh;color:#fff}
.footer-grid{display:flex;gap:12px;max-width:1360px;margin:0 auto;padding:64px 20px 0}
.footer-brand{flex:1}
.footer-brand p{font-weight:300;line-height:2;margin-top:16px;font-size:14px}
.footer-nav{margin:0 80px}
.footer-nav ul{list-style:none}
.footer-nav a{display:block;font-weight:300;font-size:15px;margin-bottom:12px;color:#fff;transition:color .2s}
.footer-nav a:hover{color:var(--udec-blue)}
.footer-col{flex:1}
.footer-col h4{font-size:22px;font-weight:600;color:#fff}
.footer-col h4::after{content:"";display:block;width:80%;padding-top:8px;border-bottom:1px solid #fff}
.footer-social{display:flex;gap:24px;margin-top:24px}
.footer-contact{margin-top:24px}
.footer-contact p{font-weight:300;font-size:14px;line-height:1.8}
.footer-contact strong{font-weight:700}
.footer-bottom{padding:24px 0 40px;text-align:center;font-size:12px;text-transform:uppercase;font-weight:200;letter-spacing:.5px;line-height:2}
.footer-bottom a{text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.footer-bottom a:hover{color:var(--udec-blue)}

/* Responsive */
@media (max-width: 900px){
  .side-col,.watermark,.joinus-photo{display:none}
  .services-main,.projects-main,.joinus-main,.contact-main{width:100%}
  .services-grid{grid-template-columns:1fr}
  .joinus-copy{width:100%}
  .hero-content{max-width:100%;margin:0 20px;padding:100px 0}
  .hero-title{font-size:34px}
  .footer-grid{flex-direction:column;gap:40px}
  .footer-nav{margin:0}
  .contact-flex{flex-direction:column}
  .contact-flex .col-heading{padding:0}
  .form-row{flex-direction:column}
  .main-nav{display:none;position:absolute;top:0;left:0;right:0;background:#000;z-index:50;padding:40px 48px}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:16px;margin-top:0}
  .main-nav a{color:#fff}
  .nav-toggle{display:block;position:relative;z-index:60}
}

/* Careers page */
.hero-careers{
  --lqip:url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDABQODxIPDRQSERIXFhQYHzMhHxwcHz8tLyUzSkFOTUlBSEZSXHZkUldvWEZIZoxob3p9hIWET2ORm4+AmnaBhH//2wBDARYXFx8bHzwhITx/VEhUf39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f3//wAARCAATABwDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwCjHezz28x3qkUrYdioA3EdM/hTcosnlxMshU/LsGWB9ap2U++I2jKrISXAPrSxyR+a8QUQs+CXDEgYqbDTZpXdwjtC3Klfm2k8MDUcc9swJJWI55XdioQRcwOzybW42nGABmoJ5LESkNaTsw+8fM25P0oaAjtkVbhyBgryD+NQTndcDPeiimInLMtrOynDEqM+2BVDJ9aKKYj/2Q==');
  background-color:#3a4a55;
  background-image:url('../images/careers-hero-1280.jpg'),var(--lqip);
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
/* Larger screens get 1600px (1x) or 2560px (2x). Browsers without
   image-set() ignore this rule and keep the 1280px file above. */
@media (min-width:768px){
  .hero-careers{
    background-image:-webkit-image-set(url('../images/careers-hero-1600.jpg') 1x,
                                       url('../images/careers-hero-2560.jpg') 2x),var(--lqip);
    background-image:image-set(url('../images/careers-hero-1600.jpg') 1x,
                               url('../images/careers-hero-2560.jpg') 2x),var(--lqip);
  }
}
.hero-sub{color:#a8ddf5 !important;font-weight:500 !important}

/* Why UDEC */
.why-udec{max-width:80%;margin:0 auto;padding:80px 0}
.why-udec h2{font-size:30px;font-weight:700}
.why-udec > p{line-height:2;margin:12px 0 28px}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.benefit{margin:8px 0}
.benefit img{width:100%}
.benefit h3{font-weight:700;text-align:center;font-size:20px;margin:12px 0}
.benefit p{line-height:2;text-align:center;font-size:15px}

/* Open Vacancies */
.vacancies-section{background:#F4F4F4}
.vacancies-flex{display:flex;padding-top:80px;padding-bottom:60px;min-height:450px}
.vacancies-flex .watermark{right:20px;top:110px}
.vacancies-body{margin:40px;flex:1;min-width:0}
.vacancies-body h3{font-weight:700;font-size:24px;margin-bottom:12px}
.vacancies-body ul{list-style:none}
.vacancies-body li{font-size:18px;line-height:1.6}
.vacancies-body a{color:var(--udec-blue);transition:color .2s}
.vacancies-body a:hover{color:#7ec6ec}

/* Apply */
.apply-flex{display:flex;padding-top:80px;padding-bottom:80px}
.apply-flex .watermark{right:-20px;top:350px}
.apply-main{width:66%;margin:0 20px}
.apply-main .form-row{display:flex;gap:20px;margin-bottom:16px}
.apply-main .input{width:100%}
.apply-main label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.apply-main input[type=text],
.apply-main input[type=email],
.apply-main textarea{
  width:100%;border:1px solid #e0e0e0;background:var(--udec-input);
  border-radius:2px;padding:20px 16px;font-family:var(--font);font-size:15px;
}
.apply-main input:focus,
.apply-main textarea:focus{outline:none;box-shadow:0 0 0 2px var(--udec-blue)}
.file-block{padding:12px 0}
.file-block h2{font-size:20px;margin:12px 0}
.file-block .file-help{margin-top:4px;font-size:14px;color:#6b7280;max-width:250px}
.apply-main .btn-submit{margin:24px 0}

@media (max-width: 900px){
  .benefits-grid{grid-template-columns:1fr 1fr}
  .why-udec{max-width:100%;padding:80px 20px}
  .vacancies-body{margin:32px 20px}
  .apply-main{width:100%}
  .apply-main .form-row{flex-direction:column}
}
@media (max-width: 640px){
  .benefits-grid{grid-template-columns:1fr}
}

/* Services page */
.hero-services{
  height:320px;display:flex;align-items:center;
  --lqip:url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDABsSFBcUERsXFhceHBsgKEIrKCUlKFE6PTBCYFVlZF9VXVtqeJmBanGQc1tdhbWGkJ6jq62rZ4C8ybqmx5moq6T/wAALCAATABwBAREA/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/9oACAEBAAA/AL0NxI/l+ahB+8eMY9qZKVaQuxxk8Z+lU0iZJAQyuByRn+tW1MgGAqAehb/69QKsixBWuxgcbVTio4wkZz80hznmlhP7/wD1KiP7pwOwq00jEnI+mPSqLsRgDoWxVlEXAO0Zx1pdxx1pwPFf/9k=');
  background-color:#3a4a55;
  background-image:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.55) 28%,rgba(0,0,0,0) 62%),url('../images/light-rail-trackworks-hero-1280.jpg'),var(--lqip);
  background-position:center 40%;background-size:cover;background-repeat:no-repeat;
}
/* Source photo is 1280px wide, so there is no 1600/2560 step-up variant -
   the 1280 file is used at every breakpoint. */
.hero-services h1{color:#fff;font-size:44px;font-weight:700;margin-left:80px}

.service-block{display:flex;max-width:1280px;margin:0 auto;padding:20px 0}
.service-block.first{margin-top:80px}
.service-side{width:25%;margin:0 0 16px 20px;padding-left:48px;padding-top:8px;display:flex;flex-direction:column;align-items:center;text-align:center}
.service-side img{display:block;max-width:150px;width:100%}
.service-title{margin:16px 0 0 0;font-size:30px;font-weight:700;color:var(--udec-blue)}
.service-main{width:75%;margin:0 20px}
.service-content{text-align:justify}
.service-content p{line-height:1.7}
.service-content ul{margin:16px 0 0 22px}
.service-content li{margin-bottom:4px;line-height:1.7}
.service-photos{display:flex;margin-top:48px}
.service-photos > div{width:50%;position:relative}
.service-photos img{width:91.666%;object-fit:contain}
.service-photos .right img{position:absolute;right:0;top:0}
.service-divider{position:relative;height:80px}
.service-divider hr{position:absolute;right:0;bottom:0;width:66.666%;height:2px;border:0;background:#9ca3af;margin:16px 0}

@media (max-width: 900px){
  .hero-services h1{margin-left:20px}
  /* Narrow viewports show more of the photo, so the heading needs a wider scrim. */
  .hero-services{background-image:linear-gradient(90deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.58) 55%,rgba(0,0,0,0) 88%),url('../images/light-rail-trackworks-hero-1280.jpg'),var(--lqip)}
  .service-block{flex-direction:column}
  .service-side,.service-main{width:auto;padding-left:0}
  .service-photos{display:block;margin-top:32px}
  .service-photos > div{width:100%;margin-bottom:24px}
  .service-photos img{margin:0 auto}
  .service-photos .right img{position:static}
  .service-divider{height:40px}
}

/* Image placeholders (services page)
   Slots show a grey box + expected filename until the real
   image exists in images/. Drop the file in; nothing else
   to change. */
.photo-slot,.logo-slot{position:relative}
.ph-label{display:none}
.photo-slot.missing{
  background:#ececec;min-height:260px;width:91.666%;
  border:1px dashed #c4c4c4;
}
.photo-slot.right.missing{margin-left:auto}
.logo-slot.missing{
  background:#ececec;width:185px;height:62px;
  border:1px dashed #c4c4c4;
}
.missing .ph-label{
  display:flex;align-items:center;justify-content:center;
  position:absolute;inset:0;
  font-size:13px;color:#8a8a8a;text-align:center;padding:8px;
}
@media (max-width:900px){
  .photo-slot.missing{width:100%;margin-bottom:24px}
}

/* Projects page */
.hero-projects{
  height:320px;display:flex;align-items:center;
  --lqip:url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDABQODxIPDRQSERIXFhQYHzMhHxwcHz8tLyUzSkFOTUlBSEZSXHZkUldvWEZIZoxob3p9hIWET2ORm4+AmnaBhH//2wBDARYXFx8bHzwhITx/VEhUf39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f3//wAARCAAKAB4DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDLthAsO2Y44+TjqT/Omz2m12hkj2svXjFas8aHSYyUUkKuCR04qhG7SbWdizYAyxyaAK8Nv+83wxkqMY3gYq3Hb20U267RyHBwY+cHPIOfwNT6cMhgeRuNR3oAt0AA4249uKAP/9k=');
  background-color:#3a4a55;
  background-image:url('../images/projects-hero-1280.jpg'),var(--lqip);
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
/* Larger screens get 1600px (1x) or 2560px (2x). Browsers without
   image-set() ignore this rule and keep the 1280px file above. */
@media (min-width:768px){
  .hero-projects{
    background-image:-webkit-image-set(url('../images/projects-hero-1600.jpg') 1x,
                                       url('../images/projects-hero-2560.jpg') 2x),var(--lqip);
    background-image:image-set(url('../images/projects-hero-1600.jpg') 1x,
                               url('../images/projects-hero-2560.jpg') 2x),var(--lqip);
  }
}
.hero-projects h1{color:#fff;font-size:44px;font-weight:700;margin-left:80px}

/* Capability statement summary */
.capability-summary{background:#f7f9fa;border-bottom:1px solid #e2e2e2}
.cap-inner{max-width:80%;margin:0 auto;padding:64px 0}
.cap-heading{font-size:34px;font-weight:700}
.cap-heading::after{
  content:"";display:block;width:64px;margin-top:14px;
  border-bottom:3px solid var(--udec-blue);
}
.cap-lead{margin-top:22px;max-width:78ch;font-size:17px;font-weight:300;line-height:1.75}
.cap-points{
  list-style:none;margin-top:40px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
}
.cap-points li{border-top:2px solid var(--udec-blue);padding-top:16px}
.cap-points h3{font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.cap-points p{margin-top:8px;font-size:14px;font-weight:300;line-height:1.65;color:#444}
.cap-note{margin-top:36px;font-size:14px;color:#555}
.cap-note a{font-weight:600;color:var(--udec-blue);border-bottom:1px solid transparent;transition:border-color .15s}
.cap-note a:hover{border-bottom-color:var(--udec-blue)}
@media (max-width: 1100px){
  .cap-points{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media (max-width: 900px){
  .cap-inner{max-width:100%;padding:48px 20px}
  .cap-points{grid-template-columns:1fr}
}

/* Project list, grouped by state */
.projects-list-wrap{max-width:80%;margin:0 auto;padding:80px 0 0}
.projects-list-title{font-size:34px;font-weight:700}
.projects-list-intro{margin-top:8px;color:#555}
.state-groups{margin-top:32px;border-top:1px solid #e2e2e2}
.state-group{border-bottom:1px solid #e2e2e2}
.state-toggle{
  width:100%;display:flex;align-items:center;gap:16px;
  padding:22px 4px;background:none;border:none;cursor:pointer;
  font-family:var(--font);color:#111;text-align:left;transition:color .15s;
}
.state-toggle:hover{color:var(--udec-blue)}
.state-toggle:focus-visible{outline:2px solid var(--udec-blue);outline-offset:-2px}
/* A state with no projects listed under it: same row, but static -
   no chevron and not clickable, since there is nothing to open. */
.state-static{display:flex;align-items:center;gap:16px;padding:22px 4px;color:#111}
.state-name{font-size:22px;font-weight:700;letter-spacing:.3px}
.state-count{font-size:13px;font-weight:400;color:#777;margin-left:auto}
.state-chevron{flex:none;color:#111;transition:transform .28s ease,color .15s}
.state-toggle:hover .state-chevron{color:var(--udec-blue)}
.state-group.open .state-chevron{transform:rotate(180deg)}
/* Collapsible panel - animating grid-template-rows expands to the
   content's natural height without needing a hard-coded max-height. */
.state-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.state-group.open .state-panel{grid-template-rows:1fr}
.state-panel-inner{overflow:hidden}
.state-panel ul{list-style:none;padding:0 0 12px}
.project-item{
  width:100%;display:block;text-align:left;cursor:pointer;
  background:none;border:none;border-left:3px solid transparent;
  padding:12px 16px;font-family:var(--font);
  transition:background .15s,border-color .15s;
}
.project-item:hover{background:#f5f7f9;border-left-color:var(--udec-blue)}
.project-item:focus-visible{outline:2px solid var(--udec-blue);outline-offset:-2px}
.project-item.active{background:#f0f6fa;border-left-color:var(--udec-blue)}
.project-item-name{display:block;font-size:16px;font-weight:600;color:#111}
.project-item.active .project-item-name{color:var(--udec-blue)}
.project-item-address{display:block;font-size:13px;color:#666;margin-top:2px}

/* Project detail panel */
.project-info{max-width:80%;margin:40px auto;padding-top:40px}
/* Hidden until a project is selected - explicit so a later `display`
   rule on .project-info can't accidentally reveal the empty panel. */
.project-info[hidden]{display:none}
.project-info h2{font-size:34px;font-weight:700}
.project-info .proj-address{font-size:15px;font-weight:600;margin-top:4px}
.project-info .details-block{margin-top:40px}
.project-info .details-block h3{font-weight:700;margin-bottom:6px}
.project-info .details-block p{line-height:1.7}
.cs-cols{display:flex;gap:20px;padding-left:40px;margin-top:40px}
.cs-cols > div{width:50%}
.cs-cols h2{padding-left:40px;font-size:28px;color:var(--udec-blue)}
.cs-cols ul{margin-top:20px;list-style:none;counter-reset:csnum}
.cs-cols li{
  counter-increment:csnum;position:relative;padding:6px 0 6px 44px;
  line-height:1.6;font-size:15px;
}
.cs-cols li::before{
  content:counter(csnum);position:absolute;left:0;top:4px;
  width:30px;height:30px;border-radius:6px;background:#3b3b3b;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;
}
/* Capability statement button, under the project description */
.capability-cta{margin-top:48px;padding-left:40px}
.capability-cta[hidden]{display:none}
.btn-capability{
  display:inline-block;padding:16px 32px;background:#000;color:#fff;
  font-family:var(--font);font-size:15px;transition:background .15s ease-in-out;
}
.btn-capability:hover{background:var(--udec-blue)}
.btn-capability:focus-visible{outline:2px solid var(--udec-blue);outline-offset:3px}
@media (max-width: 900px){
  .hero-projects h1{margin-left:20px}
  .projects-list-wrap,.project-info{max-width:100%;padding-left:20px;padding-right:20px}
  .cs-cols{flex-direction:column;padding-left:0}
  .cs-cols > div{width:100%}
  .cs-cols h2{padding-left:0}
  .capability-cta{padding-left:0}
}

/* Contact page */
.contact-hero-row{display:flex;max-width:1280px;margin:0 auto;padding:64px 20px}
.contact-details-col{width:50%;margin:0 20px}
.contact-details-col > h2{font-size:30px;font-weight:700}
.loc-block{margin:48px 0 0 80px;max-width:320px;position:relative}
.loc-block h3{font-size:20px;font-weight:700;position:relative}
.loc-block .loc-icon{position:absolute;left:-40px;top:0}
.loc-block p{margin-top:2px;line-height:1.6}
.loc-block a{font-weight:700}
.loc-block a:hover{color:var(--udec-blue)}
.contact-photo-col{width:50%;display:flex;align-items:center}
.contact-photo-col img{width:100%;object-fit:cover}
@media (max-width: 900px){
  .contact-hero-row{flex-direction:column}
  .contact-details-col{width:auto}
  .contact-photo-col{display:none}
  .loc-block{margin-left:48px}
}

/* Careers resume upload: error message */
.file-error{
  margin-top:8px;color:#c0392b;font-size:14px;font-weight:600;
}

/* Careers: apply CTA + vacancy links (external) */
.vacancy-list a{font-weight:600}
.vacancy-note{margin-top:32px;font-size:14px;color:#666}
/* Fallback shown if the vacancy list is emptied out entirely */
.vacancy-list:empty::after{
  content:"No current vacancies \2014  check back soon, or email us below.";
  color:#666;font-size:16px;
}
.apply-cta{padding-top:20px}
.apply-cta h3{font-size:24px;font-weight:700;margin-bottom:14px}
.apply-cta p{line-height:1.7;margin-bottom:16px;max-width:640px}
.apply-cta a{font-weight:600;color:var(--udec-blue)}
.apply-cta a:hover{text-decoration:underline}

/* Careers: expanding vacancy details */
.vacancy-list{list-style:none;max-width:880px;margin-top:24px}
.vacancy-item{border-bottom:1px solid #dcdcdc}
.vacancy-item:first-child{border-top:1px solid #dcdcdc}
.vacancy-toggle{
  display:block;width:100%;text-align:left;background:none;border:none;
  padding:22px 52px 22px 0;cursor:pointer;position:relative;
  font-family:var(--font);font-size:20px;font-weight:600;line-height:1.4;
  color:var(--udec-blue);transition:color .2s;
}
.vacancy-toggle:hover{color:#7ec6ec}
/* +/- indicator. Both glyphs are CSS escapes (plus, minus sign) so they
   survive this file being re-saved by an editor that guesses the wrong
   encoding - the minus used to be a literal character and had been
   mangled into mojibake. */
.vacancy-toggle::after{
  content:"\002B";position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:28px;font-weight:300;line-height:1;color:#888;transition:color .2s;
}
.vacancy-item.open .vacancy-toggle::after{content:"\002212";color:var(--udec-blue)}
/* Smooth open/close: grid-rows 0fr -> 1fr animates to content height.
   .vacancy-panel-inner is the box that does the clipping, so it stays
   padding-free - padding there would still show while the panel is
   closed. All the breathing room lives on .vacancy-panel-body. */
.vacancy-panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
}
.vacancy-item.open .vacancy-panel{grid-template-rows:1fr}
.vacancy-panel-inner{overflow:hidden}
.vacancy-panel-body{padding:2px 0 36px;max-width:760px}
.vacancy-meta{
  font-size:13px;font-weight:700;color:#6b6b6b;
  letter-spacing:1.2px;text-transform:uppercase;
}
.vacancy-summary{margin-top:16px;line-height:1.9;font-size:16px;color:#333}
/* Heading above a group of bullets, for ads long enough that one flat
   list would be a wall. Sits tighter to its own list than the default
   gap, so heading + bullets read as one block. */
.vacancy-group-heading{
  margin-top:28px;font-size:13px;font-weight:700;color:#1a1a1a;
  letter-spacing:1.2px;text-transform:uppercase;
}
.vacancies-body .vacancy-group-heading + ul.vacancy-points{margin-top:12px}
/* .vacancies-body ul / li set list-style:none and 18px for the vacancy
   list itself, so the detail bullets have to out-specify them. */
.vacancies-body ul.vacancy-points{
  list-style:disc;margin:24px 0 0;padding-left:24px;font-size:16px;
}
.vacancies-body ul.vacancy-points li{
  margin-bottom:12px;line-height:1.8;padding-left:6px;color:#333;
}
.vacancies-body ul.vacancy-points li:last-child{margin-bottom:0}
/* Higher-specificity selector: .vacancies-body a (the plain link rule)
   was overriding this class and turning the text blue. Styled to match
   the "More" button on the projects map popup. */
.vacancies-body a.vacancy-apply{
  display:inline-block;margin:30px 0 0;padding:13px 30px;background:#000;color:#fff;
  font-size:14px;font-weight:600;letter-spacing:.4px;transition:background .15s;
}
.vacancies-body a.vacancy-apply:hover{background:var(--udec-blue);color:#fff;text-decoration:none}
.vacancy-empty{color:#666;font-size:16px;padding:8px 0}

/* Careers: "apply by email" note under each button
   Sits directly under the black "View posting & apply" button inside an
   open vacancy, and links down to the How to Apply section (#apply),
   where the recruitment address is. Higher-specificity selector on the
   link for the same reason as .vacancy-apply above - the plain
   .vacancies-body a rule would otherwise win. */
.vacancy-apply-note{
  margin-top:16px;max-width:560px;
  font-size:14px;line-height:1.7;color:#555;
}
.vacancies-body a.vacancy-apply-note-link{
  font-weight:600;color:var(--udec-blue);
  text-decoration:underline;text-underline-offset:3px;
}
.vacancies-body a.vacancy-apply-note-link:hover{color:#7ec6ec}

/* Careers: the "apply by email" box in How to Apply
   The landing spot for the note above, so it needs to read as a distinct
   block once the page scrolls to it. scroll-margin-top keeps it off the
   very top edge of the viewport when it does. */
#apply{scroll-margin-top:32px}
.apply-email-box{
  margin:24px 0 28px;padding:24px 28px;max-width:640px;
  background:#f4f7f9;border-left:4px solid var(--udec-blue);
}
.apply-cta .apply-email-box h4{
  margin-bottom:10px;font-size:18px;font-weight:700;color:#1a1a1a;
}
.apply-cta .apply-email-box p{margin-bottom:0;font-size:16px}
.apply-cta a.apply-email-btn{
  display:inline-block;margin-top:18px;padding:13px 30px;
  background:#000;color:#fff;font-size:14px;font-weight:600;
  letter-spacing:.4px;transition:background .15s;
}
.apply-cta a.apply-email-btn:hover{background:var(--udec-blue);color:#fff;text-decoration:none}
@media (max-width: 600px){
  .apply-email-box{padding:20px}
  .apply-cta a.apply-email-btn{display:block;text-align:center;padding:14px 20px}
}


/* Capability statement pages (capabilitystatements/*.html). Shared by
   every per-project statement; those pages carry content only. */
.capstat-inner{max-width:1100px;margin:0 auto;padding:0 20px}

/* Hero */
.capstat-hero{
  background:linear-gradient(to right,#26282C,#090A0C);
  color:#fff;padding:56px 0 72px;
}
.capstat-back{display:inline-block;font-size:14px;font-weight:300;color:#c8cdd2;margin-bottom:32px;transition:color .2s}
.capstat-back:hover{color:var(--udec-blue)}
.capstat-eyebrow{font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--udec-blue)}
.capstat-hero h1{font-size:44px;font-weight:700;line-height:1.15;margin-top:12px;max-width:24ch}
.capstat-hero h1::after{content:"";display:block;width:80px;margin-top:22px;border-bottom:3px solid var(--udec-blue)}
.capstat-location{margin-top:18px;font-size:17px;font-weight:300;color:#d8dde1}

/* At a glance */
.capstat-facts{background:#f7f9fa;border-bottom:1px solid #e2e2e2}
.capstat-facts dl{
  display:grid;grid-template-columns:repeat(4,1fr);gap:30px 28px;
  max-width:1100px;margin:0 auto;padding:44px 20px;
}
.capstat-facts dt{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#6b7280}
.capstat-facts dd{margin-top:8px;font-size:16px;font-weight:600;line-height:1.4}

/* Body sections */
.capstat-section{max-width:1100px;margin:0 auto;padding:64px 20px 0}
.capstat-section h2{font-size:30px;font-weight:700}
.capstat-section h2::after{content:"";display:block;width:64px;margin-top:14px;border-bottom:3px solid var(--udec-blue)}
.capstat-section > p{margin-top:22px;max-width:78ch;font-size:17px;font-weight:300;line-height:1.8}

/* Scope of works */
.capstat-scope{list-style:none;margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:14px 40px}
.capstat-scope li{position:relative;padding-left:28px;line-height:1.7}
.capstat-scope li::before{
  content:"";position:absolute;left:0;top:11px;
  width:10px;height:10px;background:var(--udec-blue);
}

/* Disciplines - same card treatment as .cap-points on projects.html */
.capstat-disciplines{list-style:none;margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.capstat-disciplines li{border-top:2px solid var(--udec-blue);padding-top:16px}
.capstat-disciplines h3{font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.capstat-disciplines p{margin-top:8px;font-size:14px;font-weight:300;line-height:1.65;color:#444}

/* Challenges & solutions - numbered, matching the projects page */
.capstat-cols{display:flex;gap:40px;margin-top:36px}
.capstat-cols > div{width:50%}
.capstat-cols h3{font-size:24px;font-weight:700;color:var(--udec-blue)}
.capstat-cols ul{margin-top:18px;list-style:none;counter-reset:capnum}
.capstat-cols li{
  counter-increment:capnum;position:relative;padding:8px 0 8px 44px;
  line-height:1.6;font-size:15px;
}
.capstat-cols li::before{
  content:counter(capnum);position:absolute;left:0;top:6px;
  width:30px;height:30px;border-radius:6px;background:#3b3b3b;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;
}

/* Outcomes */
.capstat-outcomes{list-style:none;margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.capstat-outcome{background:#f7f9fa;border-left:3px solid var(--udec-blue);padding:26px 24px}
.capstat-outcome .num{display:block;font-size:34px;font-weight:700;line-height:1.1;color:var(--udec-blue)}
.capstat-outcome p{margin-top:10px;font-size:15px;font-weight:300;line-height:1.65;color:#444}

/* Accreditation chips */
.capstat-creds{list-style:none;margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.capstat-creds li{border:1px solid #d6dbe0;padding:10px 18px;font-size:14px;font-weight:600;color:#333}

/* Contact band */
.capstat-cta{margin-top:80px;background:linear-gradient(to right,#26282C,#090A0C);color:#fff}
.capstat-cta .capstat-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;padding:56px 20px;
}
.capstat-cta h2{font-size:28px;font-weight:700}
.capstat-cta p{margin-top:10px;font-weight:300;max-width:60ch}
.capstat-cta .btn-outline{margin-top:0;flex:none}

@media (max-width: 1100px){
  .capstat-facts dl{grid-template-columns:repeat(2,1fr)}
  .capstat-disciplines{grid-template-columns:repeat(2,1fr)}
  .capstat-outcomes{grid-template-columns:1fr}
}
@media (max-width: 900px){
  .capstat-hero{padding:40px 0 56px}
  .capstat-hero h1{font-size:32px}
  .capstat-section{padding-top:48px}
  .capstat-scope{grid-template-columns:1fr}
  .capstat-cols{flex-direction:column;gap:32px}
  .capstat-cols > div{width:100%}
  .capstat-cta{margin-top:56px}
}
@media (max-width: 560px){
  .capstat-facts dl{grid-template-columns:1fr}
  .capstat-disciplines{grid-template-columns:1fr}
}

/* Print / Save as PDF
   Capability statements get emailed around as PDFs, so printing
   drops the site chrome and keeps just the statement. */
@media print{
  .site-header,.site-footer,.capstat-back,.capstat-cta{display:none}
  .capstat-hero{background:none;color:#111;padding:0 0 24px;border-bottom:1px solid #999}
  .capstat-location{color:#333}
  .capstat-facts{background:none;border-bottom:1px solid #999}
  .capstat-facts dl,.capstat-section{padding-left:0;padding-right:0;max-width:none}
  .capstat-section{padding-top:28px;break-inside:avoid}
  .capstat-outcome{background:none}
  .capstat-disciplines li,.capstat-outcomes li,.capstat-cols li{break-inside:avoid}
  /* Brand blue accents are kept - they carry through to an emailed PDF. */
}