/* Additions for the Astro build of the site (loaded after the template CSS).
   Everything else is the original YOOtheme Infinite template, untouched. */

/* Honeypot field - hidden from people, visible to bots. */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Application form: section headings and choice lists in the RSForm/UIkit layout. */
#applyForm .formContainer { margin-bottom: 30px; }
#applyForm h2.title { margin: 0 0 15px 0; }
.rsform-choices .rsform-choice { display: block; margin: 0 0 6px 0; cursor: pointer; }
.rsform-choices .rsform-choice input { margin-right: 6px; }
.rsform-hint { display: block; color: #777; margin-top: 4px; }
.uk-form .formNoError { display: none; }
.uk-form .formError { display: block; color: #d85030; margin-top: 4px; }
.uk-form input.uk-form-danger, .uk-form textarea.uk-form-danger { border-color: #d85030; }
.form-status .uk-alert { margin-top: 10px; }
.cf-turnstile { margin: 5px 0; }

/* Forms: inset the RSForm-style forms from the content edge (they sit directly
   in #content, outside any .module, so the template gives them no padding). */
#userForm, #applyForm { padding: 0 10px; }
@media (max-width: 767px) {
  #userForm, #applyForm { padding: 0 15px; }
  #userForm .rsform-input-box, #userForm .rsform-text-box,
  #applyForm .rsform-input-box, #applyForm .rsform-text-box { width: 100%; box-sizing: border-box; }
}

/* Phones: the template clones the logo into #header-responsive but gives the clone
   a 45% box with no image constraint, so the logo was cropped. Show it whole. */
@media (max-width: 767px) {
  #header-responsive { padding: 12px 0 0; }
  #header-responsive .logo {
    display: block;
    width: auto;
    margin: 0 0 12px;
    text-align: center;
  }
  #header-responsive .logo img { max-width: 220px; width: 100%; height: auto; }

  /* Phones: the template's responsive menu is a bare <select>; style it to match
     the header (dark bar, orange accent) instead of the browser default. */
  .menu-responsive {
    display: block;
    width: 100%;
    margin: 0 0 4px;
    padding: 12px 44px 12px 14px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: #3a3a3a url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 0;
    border-left: 6px solid #f74902;
    border-radius: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
  }
  .menu-responsive:focus { outline: 2px solid #f74902; outline-offset: -2px; }
  .menu-responsive option { color: #333333; background: #ffffff; text-transform: none; font-weight: 400; }
}

/* ------------------------------------------------------------------------
   Forms: give the RSForm-style forms the site's colours - orange accents
   (#f74902 / #B93701 from the template), light cards per section, zebra rows.
   ------------------------------------------------------------------------ */

/* Submit buttons: the template's .button-primary look instead of UIkit's blue. */
.rsform-submit-button.uk-button,
.rsform-submit-button.uk-button:focus {
  display: inline-block;
  padding: 10px 26px;
  border: 1px solid #962E01;
  background: #B93701;
  color: #fff;
  font: bold 14px/1.4 "Open Sans", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s;
}
.rsform-submit-button.uk-button:hover { background: #C63A02; border-color: #B93701; color: #fff; }
.rsform-submit-button.uk-button:active { background: #A53101; }
.rsform-submit-button.uk-button[disabled] { opacity: 0.6; cursor: default; }

/* Required marker and help text */
.uk-form strong.formRequired { color: #f74902; font-weight: bold; }
.uk-form .formControlLabel { color: #333; font-weight: 600; }

/* Inputs (ids beat UIkit's .uk-form input[type] rules) */
#userForm .rsform-input-box, #applyForm .rsform-input-box,
#userForm .rsform-text-box, #applyForm .rsform-text-box {
  border: 1px solid #8f8f8f;
  border-radius: 3px;
  padding: 7px 9px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#userForm .rsform-input-box:focus, #applyForm .rsform-input-box:focus,
#userForm .rsform-text-box:focus, #applyForm .rsform-text-box:focus {
  border-color: #f74902;
  box-shadow: 0 0 0 3px rgba(247,73,2,0.15);
  outline: none;
}

/* Intro callout above the application form */
.form-callout {
  margin: 15px 0 0;
  padding: 12px 16px;
  background: #fff4ee;
  border-left: 4px solid #f74902;
  border-radius: 0 3px 3px 0;
  color: #444;
}
.form-callout strong { color: #B93701; }

/* Application + contact forms: one card per section, numbered headings, zebra rows */
#applyForm { counter-reset: section; }
#applyForm .formContainer,
#userForm .formContainer {
  min-width: 0; /* fieldsets default to min-content width, which the textareas' cols inflate past a phone screen */
  margin: 0 0 25px;
  padding: 0 0 10px;
  background: #fafafa;
  border: 1px solid #e4e4e4;
  border-top: 4px solid #f74902;
  border-radius: 3px;
}
#applyForm h2.title {
  counter-increment: section;
  margin: 0 0 12px;
  padding: 16px 20px 14px;
  font-size: 20px;
  line-height: 1.3;
  color: #333;
  border-bottom: 1px solid #e4e4e4;
  background: #f3f3f3;
}
#applyForm h2.title::before {
  content: counter(section);
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  border-radius: 50%;
  background: #f74902;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 28px;
  text-align: center;
  vertical-align: 2px;
}
#applyForm .form-note {
  margin: 0 20px 12px;
  padding: 10px 14px;
  background: #fff4ee;
  border-left: 4px solid #f7941d;
  border-radius: 0 3px 3px 0;
  color: #555;
  font-size: 14px;
}
#applyForm .uk-form-row,
#userForm .uk-form-row {
  margin: 0;
  padding: 12px 20px;
  border-top: 1px solid #ececec;
}
#applyForm .uk-form-row:nth-child(even),
#userForm .uk-form-row:nth-child(even) { background: #fff; }
#applyForm .uk-form-row:nth-child(odd),
#userForm .uk-form-row:nth-child(odd) { background: #fafafa; }
#userForm .formContainer { margin-top: 0; padding-top: 6px; }
.contact #innertop + #content { margin-top: 0; }
.contact #innertop .module { margin-bottom: 0; }
.contact #innertop h2.title { margin-bottom: 8px; }
#userForm .uk-form-row:first-child { border-top: 0; }
#userForm .rsform-input-box { width: 100%; max-width: 420px; box-sizing: border-box; }
#applyForm .rsform-upload-box { max-width: 100%; box-sizing: border-box; }
#userForm .rsform-text-box { width: 100%; max-width: 620px; box-sizing: border-box; }
#applyForm .rsform-choices { padding-top: 4px; }
#applyForm .rsform-choices .rsform-choice { padding: 3px 0; }
#applyForm .rsform-choice input { accent-color: #f74902; }
#applyForm .rsform-hint { color: #777; font-size: 12.5px; }

/* Last card (certification, Turnstile, submit): no number */
#applyForm .formContainer:last-of-type h2.title::before { display: none; }

@media (max-width: 767px) {
  #applyForm .formContainer,
  #userForm .formContainer { margin-left: -15px; margin-right: -15px; border-left: 0; border-right: 0; border-radius: 0; }
  #userForm .uk-form-row { padding: 12px 15px; }
  #applyForm h2.title { padding: 14px 15px 12px; font-size: 18px; }
  #applyForm h2.dv-heading { --dv-inset: 15px; padding: 14px 15px 72px; }
  #applyForm .form-note { margin: 0 15px 12px; }
  #applyForm .uk-form-row { padding: 12px 15px; }
  #applyForm .uk-form-label { margin-bottom: 6px; }
}

/* ------------------------------------------------------------------------
   Careers: open positions as a list of rows - icon badge left, title largest.
   ------------------------------------------------------------------------ */
.job-list { margin: 30px 0; }
.job-list__heading { margin: 0 0 15px; padding-bottom: 8px; border-bottom: 2px solid #f74902; font-size: 22px; }
.job-row {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin: 0 0 18px;
  padding: 22px 24px;
  background: #fafafa;
  border: 1px solid #e4e4e4;
  border-left: 5px solid #f74902;
  border-radius: 0;
  transition: box-shadow 0.15s, background 0.15s;
}
.job-row:hover { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.job-row__icon {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #4d4d4d;
}
.job-row__icon img { width: 58px; height: 58px; display: block; }
.job-row__body { flex: 1 1 auto; min-width: 0; }
.job-row__title { margin: 4px 0 4px; font-size: 26px; line-height: 1.2; font-weight: 300; text-transform: uppercase; }
.job-row__title a { color: #333; text-decoration: none; }
.job-row__title a:hover { color: #B93701; }
.job-row__meta { margin: 0 0 8px; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: #777; }
.job-row__summary { margin: 0 0 14px; color: #555; }
.job-row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.job-row__actions .button-primary { margin: 0; }
.job-row__pdf { font-weight: 600; }
@media (max-width: 767px) {
  .job-row { gap: 16px; padding: 16px; }
  .job-row__icon { flex-basis: 66px; width: 66px; height: 66px; }
  .job-row__icon img { width: 46px; height: 46px; }
  .job-row__title { font-size: 21px; }
}
@media (max-width: 479px) {
  .job-row { flex-direction: column; align-items: center; text-align: center; }
  .job-row__actions { justify-content: center; }
}

/* Icon badges: sharp offset shadow on the glyph and a little depth on the disc,
   echoing the bevelled look of the home-page service icons. */
.job-row__icon { box-shadow: 0 4px 0 rgba(0,0,0,0.14); }
.job-row__icon--drop img { filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.5)); }

/* Phones: compact custom menu replaces the template's native <select>. */
.mobile-nav { display: none; }
@media (max-width: 767px) {
  #header-responsive .menu-responsive { display: none; }
  .mobile-nav { display: block; position: relative; margin: 0 0 6px; z-index: 50; }
  .mobile-nav__toggle {
    display: block;
    width: 100%;
    padding: 12px 44px 12px 14px;
    font: 600 15px/1.2 "Open Sans", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: left;
    color: #fff;
    background: #3a3a3a url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 0;
    border-left: 6px solid #f74902;
    cursor: pointer;
  }
  .mobile-nav.is-open .mobile-nav__toggle { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 14l5-5 5 5z'/%3E%3C/svg%3E"); }
  .mobile-nav__list, .mobile-nav__sub { list-style: none; margin: 0; padding: 0; }
  .mobile-nav__list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #2e2e2e;
    border-left: 6px solid #f74902;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  }
  .mobile-nav__list > li { border-top: 1px solid #444; }
  .mobile-nav__l1, .mobile-nav__l2 {
    display: block;
    padding: 9px 14px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.3;
  }
  .mobile-nav__l1 { font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
  .mobile-nav__l2 { padding: 6px 14px 6px 28px; color: #ddd; }
  .mobile-nav__sub { padding-bottom: 4px; }
  .mobile-nav__l1:hover, .mobile-nav__l2:hover { background: #3a3a3a; color: #fff; }
  .mobile-nav__l1[aria-current="page"], .mobile-nav__l2[aria-current="page"] { background: #f74902; color: #fff; }
  .mobile-nav__list > li.is-active > .mobile-nav__l1:not([aria-current]) { color: #f7941d; }
}

/* Application form: a faint tint per section, darkest first (deep red, red,
   orange, amber, yellow). One flat colour per section: heading strip and rows
   share it, no zebra striping. Orange rules and badges unchanged. */
#applyForm .uk-form-row:nth-child(odd),
#applyForm .uk-form-row:nth-child(even) { background: transparent; }
#applyForm h2.title { background: transparent; }
#applyForm .formContainer:nth-of-type(1) { background: #fcf5f5; }
#applyForm .formContainer:nth-of-type(2) { background: #fdf6f6; }
#applyForm .formContainer:nth-of-type(3) { background: #fdf7f5; }
#applyForm .formContainer:nth-of-type(4) { background: #fef9f3; }
#applyForm .formContainer:nth-of-type(5) { background: #fefbf3; }

/* Form headings (.dv-heading): the D&V mark (public/images/dv-mark.svg, a
   vector rebuild of the logo at 1/4 scale: 49.6217 x 58.875px, bands 4.625px
   tall) sits under the bold heading text, in from the card's edge by the text
   inset. Its three bands run out as rules to both edges of the card: left after
   a slit of 1.9887px (the gap seen between the 45 deg bands), right after the
   same slit through a curve that bends the rule down into the D (the curve is
   part of the SVG and ends in a short straight run; the CSS rules start 1px
   inside the image's right edge, overlapping that run, so no seam shows). On the application form the section number sits
   inside the yellow D in white, centred on the D's circle. */
#applyForm .formContainer { border-top: 1px solid #e4e4e4; }
#applyForm h2.dv-heading, #innertop h2.dv-heading {
  --dv-inset: 20px;
  position: relative;
  margin: 0 0 12px;
  padding: 14px var(--dv-inset) 72px;
  font-family: 'OpenSansRegular', Arial, Helvetica, sans-serif; font-weight: 600;
  border-bottom: 0;
  background: transparent;
}
#innertop h2.dv-heading { --dv-inset: 0px; margin-bottom: 8px; }
#applyForm h2.dv-heading::after, #innertop h2.dv-heading::after {
  content: ""; position: absolute; bottom: 6px; left: 0; right: 0; height: 58.875px;
  background:
    url("/images/dv-mark.svg") calc(var(--dv-inset) + 14.8125px) 0 / 49.6217px 58.875px no-repeat,
    linear-gradient(#f8a000, #f8a000) 0 15.875px / calc(var(--dv-inset) + 12.8238px) 4.625px no-repeat,
    linear-gradient(#f84010, #f84010) 0 23.3125px / calc(var(--dv-inset) + 12.8238px) 4.625px no-repeat,
    linear-gradient(#f03038, #f03038) 0 30.75px / calc(var(--dv-inset) + 12.8238px) 4.625px no-repeat,
    linear-gradient(#f8a000, #f8a000) 100% 14.0676px / calc(100% - var(--dv-inset) - 63.4342px) 4.625px no-repeat,
    linear-gradient(#f84010, #f84010) 100% 21.5051px / calc(100% - var(--dv-inset) - 63.4342px) 4.625px no-repeat,
    linear-gradient(#f03038, #f03038) 100% 28.9426px / calc(100% - var(--dv-inset) - 63.4342px) 4.625px no-repeat;
}
/* the section number, centred on the D's circle (centre 21px in, 16.3px down the mark) */
#applyForm h2.dv-heading::before {
  position: absolute; z-index: 1; bottom: 48.575px; left: calc(var(--dv-inset) + 35.8125px);
  transform: translate(-50%, 50%);
  width: auto; height: auto; margin: 0; border-radius: 0; background: transparent;
  color: #fff; font-size: 20px; line-height: 1; vertical-align: baseline;
}
#applyForm .formContainer .uk-form-row:first-of-type { border-top: 0; }

/* Contact page: the title, then one aligned row of address / map / photo with
   equal heights, then the full-width "Use Our Contact Form" heading and form
   (no sidebar, so the heading's rules and the form clear to the right edge). */
.contact-grid { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 24px; margin: 6px 0 30px; }
.contact-info { padding-top: 2px; }
.contact-office + .contact-office { margin-top: 24px; padding-top: 20px; border-top: 1px solid #ececec; }
.contact-office h3 { margin: 0 0 2px; font-family: 'OpenSansRegular', Arial, Helvetica, sans-serif; font-weight: 600; font-size: 14px; line-height: 1.3; letter-spacing: .04em; color: #333; }
.contact-office__sub { margin: 0 0 10px; color: #777; font-size: 13px; }
.contact-office address { margin: 0 0 10px; font-style: normal; line-height: 1.55; }
.contact-phones { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0 0 12px; padding: 0; }
.contact-phones dt { margin: 0; padding: 0; font-weight: normal; color: #777; }
.contact-phones dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.contact-phones a { color: inherit; text-decoration: none; }
.contact-phones a:hover { color: #B93701; }
.contact-map-link { display: inline-block; font-size: 13px; }
.contact-map, .contact-photo { position: relative; min-height: 420px; border: 1px solid #e4e4e4; background: #f3f3f3; overflow: hidden; }
.contact-map iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }
/* the photo fills whatever height the row gets (set by the address column or the
   map) and is cropped, so its own tall aspect never stretches the row */
.contact-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 959px) {
  .contact-grid { grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); }
  .contact-photo { display: none; }
}
@media (max-width: 767px) {
  .contact-grid { grid-template-columns: 1fr; gap: 18px; }
  .contact-map, .contact-map iframe { min-height: 300px; }
}

/* ------------------------------------------------------------------------
   Project gallery lightbox (.dv-lightbox, built by the script in
   src/pages/[slug].astro): a native <dialog> in place of the Widgetkit/UIkit 2
   lightbox. The picture (the 2x rendition from scripts/gallery-zoom.mjs when
   one exists) is shown at its real pixel size and never enlarged
   (--w/--h are the file's own dimensions, set inline), prev/next stay visible
   on touch screens, swipes step through the gallery, and a dark backdrop
   replaces the translucent grey one. The arrows and the close button reuse
   the template's UIkit slidenav / close glyphs (FontAwesome from wk-styles).
   ------------------------------------------------------------------------ */
html.dv-lightbox-open { overflow: hidden; }
.dv-lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden;
  touch-action: pan-y;
}
.dv-lightbox::backdrop { background: rgba(18, 18, 18, .93); }
.dv-lightbox__stage {
  position: absolute; inset: 0; box-sizing: border-box; padding: 16px 16px 76px;
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
.dv-lightbox__img {
  display: block; width: auto; height: auto; cursor: default; user-select: none; -webkit-user-drag: none;
  max-width: min(var(--w, 100vw), 100vw - 32px);
  max-height: min(var(--h, 100vh), 100vh - 92px);
  max-height: min(var(--h, 100dvh), 100dvh - 92px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
  opacity: 1; transition: opacity .2s ease-out;
}
.dv-lightbox.is-loading .dv-lightbox__img { opacity: 0; }
/* gallery thumbnails fade in as they load (the grid gets .dv-fade from the page
   script; UIkit's own .uk-overlay-scale transition already covers opacity) */
.dv-fade img.uk-overlay-scale:not(.is-loaded) { opacity: 0; }
.dv-lightbox.is-loading .dv-lightbox__stage::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%;
  animation: dv-lightbox-spin .8s linear infinite;
}
@keyframes dv-lightbox-spin { to { transform: rotate(360deg); } }
.dv-lightbox__close {
  position: absolute; top: 14px; right: 14px; z-index: 2; cursor: pointer; color: #444;
  width: 26px; line-height: 26px; padding: 5px; font-size: 18px;
}
.dv-lightbox__nav {
  position: absolute; top: 50%; z-index: 2; margin-top: -27px; padding: 0; border: 0; cursor: pointer;
  width: 54px; height: 54px; line-height: 54px; font-size: 44px; border-radius: 50%;
  background: rgba(0, 0, 0, .4); -webkit-tap-highlight-color: transparent;
}
.dv-lightbox__nav:hover, .dv-lightbox__nav:focus { background: rgba(0, 0, 0, .6); }
.dv-lightbox__nav:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 2px; }
.dv-lightbox__nav.uk-slidenav-previous { left: 10px; }
.dv-lightbox__nav.uk-slidenav-next { right: 10px; }
.dv-lightbox[data-single] .dv-lightbox__nav { display: none; }
.dv-lightbox__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 70px 20px; text-align: center;
  font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .85);
}
.dv-lightbox__counter { display: block; margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .55); }
.dv-lightbox__counter:empty { display: none; }
@media (max-width: 767px) {
  .dv-lightbox__stage { padding: 12px 12px 76px; }
  .dv-lightbox__img { max-width: min(var(--w, 100vw), 100vw - 24px); }
  .dv-lightbox__nav { width: 44px; height: 44px; line-height: 44px; margin-top: -22px; font-size: 34px; }
  .dv-lightbox__nav.uk-slidenav-previous { left: 6px; }
  .dv-lightbox__nav.uk-slidenav-next { right: 6px; }
}

/* Ken Burns slideshows (home page top-a, careers, general engineering): the slide
   is a background-cover div animated from scale(1) to scale(1.2) over 15s. Chrome
   rasterises an animated layer at its largest scale and then shrinks that bitmap
   on the GPU without mipmaps, which shimmers / moires on gravel, fences and
   shotcrete. will-change pins the raster at the starting scale so the zoom only
   ever magnifies (no aliasing); backface-visibility keeps it on its own layer. */
.uk-slideshow .uk-cover-background { will-change: transform; backface-visibility: hidden; }

/* ------------------------------------------------------------------------
   Page chrome: titles, gutters and heroes all fall out of one token so every
   page uses the same numbers.
     --dv-gap  the air above and below a page title and, on desktop, the side
               gutters of the page: (site header 101px - title 35px) / 2 = 33px;
               on phones (header 69px) 17px.
   Two kinds of header, both as tall as the site header:
     page title   the first article's header on a page: plain band, title
                  centred, starting right under the site header
     section title  the later articles on a stacked page (About: Meet Our Team,
                  Company History): the template's 1px-ruled bar, same height
   Lists of items (projects, news) keep the template's own 20px ruled bars.
   ------------------------------------------------------------------------ */
:root { --dv-gap: 33px; }
@media (max-width: 767px) { :root { --dv-gap: 17px; } }

/* Side gutters on desktop match the gap above the title (phones keep the template's
   10px). Done once, at the block level: the page blocks' .wrapper gets a padding
   of (gap - 10px), so the template's own 10px margins on #content, modules and
   list items land exactly at the gap. New pages built from the same blocks need
   nothing. Heroes still bleed: they measure from the viewport, not the wrapper. */
@media (min-width: 768px) {
  #block-top-a > .wrapper, #block-top-b > .wrapper, #block-main > .wrapper {
    box-sizing: border-box; padding-left: calc(var(--dv-gap) - 10px); padding-right: calc(var(--dv-gap) - 10px);
  }
}
/* page titles that live in a module (Featured Projects, Latest News, Contact,
   Employment Application): the same band as the article titles, starting right
   under the site header, so the block's top padding and the module's 10px go */
#block-top-a:has(.module > :is(h1.title, .module-title):first-child) { padding-top: 0; }
#block-top-a .module:has(> :is(h1.title, .module-title):first-child) { margin-top: 0; }
#innertop .module:has(> :is(h1.title, .module-title):first-child) { margin-top: -20px; } /* #block-main's 20px padding */
#block-top-a .module > :is(h1.title, .module-title):first-child,
#innertop .module > :is(h1.title, .module-title):first-child { margin: 0; padding: var(--dv-gap) 0; }

/* whatever follows a title band starts right after its 33px, not 15px further down */
#block-top-a .module > :is(h1.title, .module-title):first-child + *,
#innertop .module > :is(h1.title, .module-title):first-child + *,
#system .item > header + .content > :first-child { margin-top: 0; }

/* the seam between an intro block and the main block (Featured Projects, News,
   Services): exactly one gap. The template stacks 20px padding on each block, a
   10px module margin, a 15px paragraph margin and then pulls adjacent white
   blocks together by -40px; all of that is zeroed and #content carries the gap. */
#block-top-a:has(.module > :is(h1.title, .module-title):first-child) { padding-bottom: 0; }
#block-top-a:has(.module > :is(h1.title, .module-title):first-child) .module { margin-bottom: 0; }
#block-top-a:has(.module > :is(h1.title, .module-title):first-child) .module > :last-child { margin-bottom: 0; }
#block-top-a + #block-main { margin-top: 0; padding-top: 0; }
#block-top-a + #block-main #content { margin-top: var(--dv-gap); }

/* section titles: the template's ruled bar, as tall as the site header, with a
   gap's worth of air above it (the template's own 12px + 18px is replaced) */
#system .items-col-1 .item { margin-top: var(--dv-gap); margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
#system .items-col-1 .item > header { margin: 0 0 var(--dv-gap); padding: var(--dv-gap) 0; }

/* page title: a plain band as tall as the site header. The negative top margin
   swallows the 40px the template puts above the article (#block-main's 20px
   padding + #content's 20px margin), so the band starts right under the header. */
#system > .item > header,
#system > .items-col-1 > .grid-box:first-child > .item:first-child > header {
  margin: -40px 0 0; padding: var(--dv-gap) 0; border: 0;
}
#system > .items-col-1 > .grid-box:first-child > .item:first-child { margin-top: 0; }

/* Heroes (.dv-hero, tagged in the legacy HTML and src/pages/[slug].astro: the
   slideshow or banner image right under a page title) bleed to the viewport
   edges and carry the About page's double grey rule top and bottom. 100vw
   includes the scrollbar, so #block-main clips the overshoot instead of growing
   a horizontal scrollbar. The home hero has no title and keeps its own look. */
#block-top-a, #block-main { overflow-x: clip; }
#block-top-a .dv-hero, #block-main .dv-hero {
  display: block; box-sizing: border-box; height: auto;
  width: 100vw !important; max-width: none !important; /* custom.css clamps #content img to 100% !important */
  margin: 0 calc(50% - 50vw) var(--dv-gap); /* a gap's worth of air below, like the title band */
  border: 0; border-top: 4px double #dddddd; border-bottom: 4px double #dddddd;
}
#block-main p:has(> .dv-hero) { margin-bottom: var(--dv-gap); }
#block-main p > .dv-hero { margin-bottom: 0; }
/* the home hero: no title above it and no rule; it also pulls up through the
   block's 20px padding + the module's 10px margin (and down the same) */
#block-top-a .dv-hero { margin-top: -30px; margin-bottom: -30px; border-top: 0; border-bottom: 0; }
/* slideshow heroes reserve their height before the pictures and UIkit arrive
   (every slider is 3750x1050; --dv-ratio overrides, e.g. the testimonials one) */
.dv-hero[data-uk-slideshow], .dv-hero:has(> [data-uk-slideshow]) { aspect-ratio: var(--dv-ratio, 25 / 7); min-height: 300px; }

/* Wide screens: the home page's features band under the hero (top-b), the three
   bottom boxes (80% wrappers) and the footer line (65%) run the full width of
   the screen, with no side bands, up to 1920px (1080p); on wider screens they
   stop at 1920px and centre. Below 960px the template already makes these
   wrappers 100%, so tablets and phones are unchanged. */
@media (min-width: 960px) {
  #block-top-b .wrapper.max-width80,
  #block-bottom-b .wrapper.max-width80,
  #block-footer .wrapper.max-width65 { max-width: 1920px; }
}
/* Both bottom footers keep the page's side gutter (--dv-gap, the air above a
   title) like the content blocks. The three tinted bottom boxes still run edge
   to edge (so no plain orange strip shows beside them); the gutter sits inside
   the outer boxes' own 20px padding, on the side that meets the screen edge. The
   footer line's wrapper gets gap - 10px and the footer's own 10px makes up the
   rest. The features band already gets the gutter from the page-chrome rule
   above. Phones keep the template's edges. */
@media (min-width: 768px) {
  #block-footer > .wrapper { box-sizing: border-box; padding-left: calc(var(--dv-gap) - 10px); padding-right: calc(var(--dv-gap) - 10px); }
}
@media (min-width: 960px) {
  #bottom-b .grid-box:first-child .module { padding-left: var(--dv-gap); }
  #bottom-b .grid-box:last-child .module { padding-right: var(--dv-gap); }
}
@media (min-width: 768px) and (max-width: 959px) {
  #bottom-b .module { padding-left: var(--dv-gap); padding-right: var(--dv-gap); } /* boxes stack full width here */
}

/* /sitemap: the menu as a nested list, with projects, news and jobs under their sections */
.sitemap h2 { margin: 24px 0 10px; font-size: 20px; }
.sitemap h2:first-child { margin-top: 4px; }
.sitemap__list, .sitemap__list ul { margin: 0; padding: 0; list-style: none; }
.sitemap__list > li { margin: 0 0 8px; }
.sitemap__list > li > a { font-weight: bold; }
.sitemap__list ul { margin: 4px 0 10px 22px; }
.sitemap__list ul li { margin: 0 0 4px; padding-left: 14px; position: relative; }
.sitemap__list ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 2px; background: #f74902; }
.sitemap__list ul ul { margin-top: 2px; }
.sitemap__list ul ul li::before { background: #ccc; }


/* Phones: the template keeps a 20px margin under #header from its old layout and the
   logo image sits inline (a few px of descender), so the menu bar hung 38px below
   the logo. Now the logo has the same 12px below it as above. */
@media (max-width: 767px) {
  #header { margin-bottom: 0; }
  #header-responsive .logo img { display: block; margin: 0 auto; }
}