/*
	Gilbert O'Neill Construction brand palette.
	Source: Figma "Gilbert O'neill Construction" colour styles.
	  Primary blue        #21438F
	  Secondary blue      #0083C7
	  Light Blue Highlight #B9FAF8
	  Yellow  #FFF205   Green #00A650   Red #EF3A25
*/
/* fonts*/
/*
	Section colour schemes.
	background / color  - the section itself
	accent / accentColor - primary call to action button inside the section
	heading             - h1 + h2 colour
	rule                - the short underline beneath a heading
	link                - inline links and small text accents
*/
/*
  `accent`/`accentColor` are the button inside a section - `bgScheme()` emits
  `.bgN .ajs-btn`, which outranks `.btn`, so this is where a section's button colour is
  really decided.

  The Figma flips the pair by section ground, so the button always contrasts with what is
  behind it:

    light section (bg1 white, bg2 grey)  ->  #21438F ground, white label
                                             e.g. "About us" y1734, "Request a free
                                             site visit" y5118, both on white
    dark section  (bg3 black, bg4 blue)  ->  #FFF205 ground, #21438F label
                                             e.g. "Contact us" y4714, on the blue band

  bg4 has to be the yellow one: a #21438F button on a #21438F section would vanish.
  The label on yellow is #21438F, not black - an earlier draft of BRANDING.md said black.
*/
@media screen {
  #mobile-navigation .depth-0 .open-next span, #footer-branding strong, #contact-form .swiper .swiper-intro-button-next span {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    top: -99999px;
    left: -99999px;
  }
}

#mobile-navigation .depth-0 .open-next, #mobile-menu .closer, #mobile-menu ul, .contact-details ul,
.menu ul, .pagination li, .pagination ul, .swiper-outer .ajs-swiper-button, .btn-alt-tint, .btn-tint, .btn-alt-pink, .btn-pink, .btn-alt-green, .btn-green, .btn-alt-red, .btn-red, .btn-alt-ink, .btn-ink, .btn-alt-midGrey, .btn-midGrey, .btn-alt-lightGrey, .btn-lightGrey, .btn-alt-grey, .btn-grey, .btn-alt-accent, .btn-accent, .btn-alt-highlight, .btn-highlight, .btn-alt-secondary, .btn-secondary, .btn-alt-primary, .btn-primary, .btn-alt-black, .btn-black, .btn-alt-white, .btn-white, .btn-alt-font, .btn-font, .btn-alt-body, .btn-body, .btn {
  background: none;
  border: none;
  outline: 0;
  display: block;
  margin: 0;
  padding: 0;
  /* position: static;*/
  list-style: none;
  text-decoration: none;
}

#contact-form section {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media screen and (min-width: 1200px) {
  #contact-form section {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

#mobile-menu .level-0 > div, #footer .columns, #footer, #contact-form, #so-widget, #archive .archive-list, .case-study-box a, .case-study-box, .field-group, .ajs-btn, .btn-alt-tint, .btn-tint, .btn-alt-pink, .btn-pink, .btn-alt-green, .btn-green, .btn-alt-red, .btn-red, .btn-alt-ink, .btn-ink, .btn-alt-midGrey, .btn-midGrey, .btn-alt-lightGrey, .btn-lightGrey, .btn-alt-grey, .btn-grey, .btn-alt-accent, .btn-accent, .btn-alt-highlight, .btn-highlight, .btn-alt-secondary, .btn-secondary, .btn-alt-primary, .btn-primary, .btn-alt-black, .btn-black, .btn-alt-white, .btn-white, .btn-alt-font, .btn-font, .btn-alt-body, .btn-body, .btn {
  display: grid;
  grid-template-columns: 100%;
}

.input-field strong, .swiper-outer .ajs-swiper-button, .ajs-btn span:after, .ajs-btn span:before, .ajs-btn {
  transition: 600ms;
}

#footer .social ul, #contact-form .text, .pagination ul, .so_form .legal, #contact-form section figure figcaption {
  display: flex;
}

#mobile-navigation .depth-0, #mobile-menu .social ul, #sub-footer {
  display: flex;
  flex-wrap: wrap;
}

#mobile-navigation .depth-0 .open-next:before, #mobile-menu .closer strong:before, #contact-form .swiper .swiper-intro-button-next:after, .select:after, .radio input[type=radio] + span:before, .checkbox input[type=checkbox] + span:before {
  font-family: "Font Awesome 6 Pro";
}

.bg4, .bg3, .bg2 {
  /*
    Figma section hatching: black at 8% over whatever the section colour is, 45deg
    lines running bottom-left to top-right, 15px apart horizontally (10.607px
    perpendicular) and ~1.5px wide. Measured off the v2 comp, not eyeballed.
    Replaces the hexagon tile the target theme shipped with.

    Applied site-wide: #hero, .bg2/.bg3/.bg4, the three page-title bands and
    #contact-us. That matches the Figma, which masks a `background pattern` group at
    8% over the blue hero, a grey band at y3095 and blue bands at y4075 and y6269.

    It was briefly scoped to #services alone and then reverted - if it is ever cut
    back again, note that #services sits *inside* #hero, so only one of the two may
    carry it or the pattern doubles up.

    The lines are 8% black at NORMAL blending. The three page-title bands and .bg3
    used to pair the hatch with `background-blend-mode: screen`, and screen with a
    black source layer is the identity at every alpha - the hatch rendered flat
    colour on every band it was applied to. Measured off the v2 Contact band:
    lines read (30,63,133) against the (33,67,143) ground, which is exactly what
    mix(base, black, 0.08) gives.
  */
  background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.08) 1.5px, transparent 1.5px, transparent 10.607px);
  background-attachment: fixed;
}

.bg1 {
  background-color: #fff;
  color: #000000;
  /*
    The tick on %wysiwyg list items. Handed down as a custom property rather than a
    selector so it reaches the list wherever it sits inside the section, without this
    mixin having to guess at the markup - and so a list outside any scheme still has
    the fallback in %wysiwyg to fall back on. Declared before the nested rules below:
    Sass warns about plain declarations that follow them.
  */
  --tick: #0083C7;
}
.bg1 h1, .bg1 h2 {
  color: #21438F;
  border-color: #0083C7;
}
.bg1 .ajs-btn {
  background: #21438F;
  color: #fff;
}
.bg1 .ajs-btn span:before {
  border-right-color: #B9FAF8;
}
.bg1 .ajs-btn span:after {
  border-left-color: #B9FAF8;
}
.bg1 .ajs-btn:hover, .bg1 .ajs-btn.hover {
  color: #21438F;
}

.bg2 {
  background-color: #F5F5F5;
  color: #000000;
  /*
    The tick on %wysiwyg list items. Handed down as a custom property rather than a
    selector so it reaches the list wherever it sits inside the section, without this
    mixin having to guess at the markup - and so a list outside any scheme still has
    the fallback in %wysiwyg to fall back on. Declared before the nested rules below:
    Sass warns about plain declarations that follow them.
  */
  --tick: #0083C7;
}
.bg2 h1, .bg2 h2 {
  color: #21438F;
  border-color: #0083C7;
}
.bg2 .ajs-btn {
  background: #21438F;
  color: #fff;
}
.bg2 .ajs-btn span:before {
  border-right-color: #B9FAF8;
}
.bg2 .ajs-btn span:after {
  border-left-color: #B9FAF8;
}
.bg2 .ajs-btn:hover, .bg2 .ajs-btn.hover {
  color: #21438F;
}

.bg3 {
  background-color: #000000;
  color: #fff;
  /*
    The tick on %wysiwyg list items. Handed down as a custom property rather than a
    selector so it reaches the list wherever it sits inside the section, without this
    mixin having to guess at the markup - and so a list outside any scheme still has
    the fallback in %wysiwyg to fall back on. Declared before the nested rules below:
    Sass warns about plain declarations that follow them.
  */
  --tick: #FFF205;
}
.bg3 h1, .bg3 h2 {
  color: #fff;
  border-color: #FFF205;
}
.bg3 .ajs-btn {
  background: #FFF205;
  color: #21438F;
}
.bg3 .ajs-btn span:before {
  border-right-color: #B9FAF8;
}
.bg3 .ajs-btn span:after {
  border-left-color: #B9FAF8;
}
.bg3 .ajs-btn:hover, .bg3 .ajs-btn.hover {
  color: #21438F;
}

#footer, .so_form .legal > div, .bg4 {
  background-color: #21438F;
  color: #fff;
  /*
    The tick on %wysiwyg list items. Handed down as a custom property rather than a
    selector so it reaches the list wherever it sits inside the section, without this
    mixin having to guess at the markup - and so a list outside any scheme still has
    the fallback in %wysiwyg to fall back on. Declared before the nested rules below:
    Sass warns about plain declarations that follow them.
  */
  --tick: #FFF205;
}
#footer h1, .so_form .legal > div h1, .bg4 h1, #footer h2, .so_form .legal > div h2, .bg4 h2 {
  color: #fff;
  border-color: #B9FAF8;
}
#footer .ajs-btn, .so_form .legal > div .ajs-btn, .bg4 .ajs-btn {
  background: #FFF205;
  color: #21438F;
}
#footer .ajs-btn span:before, .so_form .legal > div .ajs-btn span:before, .bg4 .ajs-btn span:before {
  border-right-color: #B9FAF8;
}
#footer .ajs-btn span:after, .so_form .legal > div .ajs-btn span:after, .bg4 .ajs-btn span:after {
  border-left-color: #B9FAF8;
}
#footer .ajs-btn:hover, .so_form .legal > div .ajs-btn:hover, .bg4 .ajs-btn:hover, #footer .ajs-btn.hover, .so_form .legal > div .ajs-btn.hover, .bg4 .ajs-btn.hover {
  color: #21438F;
}

/*
  The centred section heading - #building-types, #process, #our-work, #our-reviews,
  #accreditations, and (through %page-header) the three page-title bands.

  Figma, v2: Montserrat 600, centred, **no uppercase and no rule**. A scan of every heading
  and every rule node on the rebranded Homepage found no heading rule anywhere; the only
  90x0 lines are dividers inside the Latest News cards. The uppercase and the 100px rule
  that used to live here were the target theme's.

  Centring is right and stays - those headings really are centred on 960 in the Figma
  (Accreditations, What we Offer, Why Choose..., Latest News). The left-aligned headings in
  the file are content-row headings and come from %wysiwyg instead.

  Size ladder mirrors the hero's (2.25/3/3.75rem), scaled to the 44px these sit at. Only
  the $xlDesktop value is from the Figma - it is drawn at 1920 and nothing else.
*/
/*
  Page-title bands run bigger - Figma has them at 60/73.1, the same as the hero title, so
  this reuses the hero's exact ladder. Extends %header, and is declared after it, so its
  font-size wins at each breakpoint.
*/
/*
  The brand button, and the only button definition on the site - `.btn` is what the intro
  row, the case-studies "View more", the CTA block, page-title-single and every enquiry-form
  submit all use, so this is the global one. Do not add a section-specific button; restyle
  here.

  Geometry and type only - Montserrat 500, 21/25.6, square corners, 75px tall. The COLOUR
  comes from the section scheme, because `bgScheme()` emits `.bgN .ajs-btn` and that
  outranks `.btn`; see `accent`/`accentColor` in _vars.scss. The Figma flips the pair by
  section ground: blue on light, yellow on dark.

  What is set here is only the fallback for a button outside any .bgN container, and it
  takes the light-section pair (#21438F ground, white label) because that is the common case.

  The in-content button components in the Figma (`Component 21/22/23`) are still the target
  theme's orange #E54711 and navy #0F2430 - they were never rebranded, so take their
  geometry and type but never their colour.

  75px = 25.6 line + 24.7 padding top and bottom. min-width matches the Figma component's
  251px so short labels do not collapse; longer labels grow past it.
*/
.btn-alt-tint, .btn-tint, .btn-alt-pink, .btn-pink, .btn-alt-green, .btn-green, .btn-alt-red, .btn-red, .btn-alt-ink, .btn-ink, .btn-alt-midGrey, .btn-midGrey, .btn-alt-lightGrey, .btn-lightGrey, .btn-alt-grey, .btn-grey, .btn-alt-accent, .btn-accent, .btn-alt-highlight, .btn-highlight, .btn-alt-secondary, .btn-secondary, .btn-alt-primary, .btn-primary, .btn-alt-black, .btn-black, .btn-alt-white, .btn-white, .btn-alt-font, .btn-font, .btn-alt-body, .btn-body, .btn {
  width: -moz-max-content;
  width: max-content;
  background: #21438F;
  margin-top: 2rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.219;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
.btn-alt-tint strong, .btn-tint strong, .btn-alt-pink strong, .btn-pink strong, .btn-alt-green strong, .btn-green strong, .btn-alt-red strong, .btn-red strong, .btn-alt-ink strong, .btn-ink strong, .btn-alt-midGrey strong, .btn-midGrey strong, .btn-alt-lightGrey strong, .btn-lightGrey strong, .btn-alt-grey strong, .btn-grey strong, .btn-alt-accent strong, .btn-accent strong, .btn-alt-highlight strong, .btn-highlight strong, .btn-alt-secondary strong, .btn-secondary strong, .btn-alt-primary strong, .btn-primary strong, .btn-alt-black strong, .btn-black strong, .btn-alt-white strong, .btn-white strong, .btn-alt-font strong, .btn-font strong, .btn-alt-body strong, .btn-body strong, .btn strong,
.btn-alt-tint span,
.btn-tint span,
.btn-alt-pink span,
.btn-pink span,
.btn-alt-green span,
.btn-green span,
.btn-alt-red span,
.btn-red span,
.btn-alt-ink span,
.btn-ink span,
.btn-alt-midGrey span,
.btn-midGrey span,
.btn-alt-lightGrey span,
.btn-lightGrey span,
.btn-alt-grey span,
.btn-grey span,
.btn-alt-accent span,
.btn-accent span,
.btn-alt-highlight span,
.btn-highlight span,
.btn-alt-secondary span,
.btn-secondary span,
.btn-alt-primary span,
.btn-primary span,
.btn-alt-black span,
.btn-black span,
.btn-alt-white span,
.btn-white span,
.btn-alt-font span,
.btn-font span,
.btn-alt-body span,
.btn-body span,
.btn span {
  grid-row: 1;
  grid-column: 1;
  display: block;
  padding: 0.5rem 1rem;
  font-weight: inherit;
  color: inherit;
}
@media screen and (min-width: 1600px) {
  .btn-alt-tint, .btn-tint, .btn-alt-pink, .btn-pink, .btn-alt-green, .btn-green, .btn-alt-red, .btn-red, .btn-alt-ink, .btn-ink, .btn-alt-midGrey, .btn-midGrey, .btn-alt-lightGrey, .btn-lightGrey, .btn-alt-grey, .btn-grey, .btn-alt-accent, .btn-accent, .btn-alt-highlight, .btn-highlight, .btn-alt-secondary, .btn-secondary, .btn-alt-primary, .btn-primary, .btn-alt-black, .btn-black, .btn-alt-white, .btn-white, .btn-alt-font, .btn-font, .btn-alt-body, .btn-body, .btn {
    font-size: 1.3125rem;
    min-width: 15.6875rem;
  }
  .btn-alt-tint strong, .btn-tint strong, .btn-alt-pink strong, .btn-pink strong, .btn-alt-green strong, .btn-green strong, .btn-alt-red strong, .btn-red strong, .btn-alt-ink strong, .btn-ink strong, .btn-alt-midGrey strong, .btn-midGrey strong, .btn-alt-lightGrey strong, .btn-lightGrey strong, .btn-alt-grey strong, .btn-grey strong, .btn-alt-accent strong, .btn-accent strong, .btn-alt-highlight strong, .btn-highlight strong, .btn-alt-secondary strong, .btn-secondary strong, .btn-alt-primary strong, .btn-primary strong, .btn-alt-black strong, .btn-black strong, .btn-alt-white strong, .btn-white strong, .btn-alt-font strong, .btn-font strong, .btn-alt-body strong, .btn-body strong, .btn strong,
  .btn-alt-tint span,
  .btn-tint span,
  .btn-alt-pink span,
  .btn-pink span,
  .btn-alt-green span,
  .btn-green span,
  .btn-alt-red span,
  .btn-red span,
  .btn-alt-ink span,
  .btn-ink span,
  .btn-alt-midGrey span,
  .btn-midGrey span,
  .btn-alt-lightGrey span,
  .btn-lightGrey span,
  .btn-alt-grey span,
  .btn-grey span,
  .btn-alt-accent span,
  .btn-accent span,
  .btn-alt-highlight span,
  .btn-highlight span,
  .btn-alt-secondary span,
  .btn-secondary span,
  .btn-alt-primary span,
  .btn-primary span,
  .btn-alt-black span,
  .btn-black span,
  .btn-alt-white span,
  .btn-white span,
  .btn-alt-font span,
  .btn-font span,
  .btn-alt-body span,
  .btn-body span,
  .btn span {
    padding: 1.54375rem 2.3rem;
  }
}

/*
  The hover wipe that rides on top of %btn - two triangles that slide up to fill the button
  with `highlight`. Every button in the theme is `class="btn ajs-btn"`, and this block is
  emitted after %btn at equal specificity, so any colour set here beats %btn's: keep the
  label colour in step with it rather than letting them drift apart.
*/
.ajs-btn {
  max-width: 20rem;
  color: #fff;
  align-items: stretch;
}
.ajs-btn span {
  display: block;
  position: relative;
  grid-row: 1;
  grid-column: 1;
  z-index: 1;
  overflow: hidden;
  font-weight: 400;
}
.ajs-btn span:before {
  content: "";
  pointer-events: none;
  display: block;
  position: absolute;
  top: -3rem;
  right: 50%;
  height: calc(100% + 1px);
  transform: translateY(calc(100% + 1px));
  border: 0 solid transparent;
  border-top: 3rem solid transparent;
  border-right: 10rem solid #B9FAF8;
}
.ajs-btn span:after {
  content: "";
  pointer-events: none;
  display: block;
  position: absolute;
  top: -3rem;
  left: 50%;
  height: calc(100% + 1px);
  transform: translateY(calc(100% + 1px));
  border: 0 solid transparent;
  border-top: 3rem solid transparent;
  border-left: 10rem solid #B9FAF8;
}
.ajs-btn strong {
  grid-row: 1;
  grid-column: 1;
  z-index: 2;
  font-weight: inherit;
}
.ajs-btn:hover, .hover.ajs-btn {
  color: #21438F;
}
.ajs-btn:hover span:before, .ajs-btn:hover span:after, .hover.ajs-btn span:before, .hover.ajs-btn span:after {
  transform: translateY(0);
}

/*
  The round slider arrow, from Figma `Component 50` (116:11176): a 54px #0083C7 disc with a
  1px white ring, and a white glyph that is a straight shaft ending in a *concave, flared*
  head - two arcs sweeping back from the tip. Font Awesome's \f178 and \f061, which the
  intro and the case-study/review sliders were using, draw a plain straight chevron and do
  not look like it.

  The component is drawn pointing LEFT, and the Figma's own "next" instance carries
  `rotation: 3.14159` - so `-next` here is the same asset turned 180deg rather than a
  second file. The glyph sits in a full 54x54 viewBox, so the mask covers the whole button
  and the arrow lands exactly where Figma places it inside the disc.

  Applied as a mask, like the nav caret, so the colour stays in the palette instead of
  being baked into the asset. Appearance only - each caller keeps its own positioning.
*/
.swiper-outer .ajs-swiper-button {
  position: absolute;
  z-index: 3;
  width: 3.375rem;
  height: 3.375rem;
  border: 1px solid #fff;
  border-radius: 3.375rem;
  background: #0083C7;
  cursor: pointer;
  /* :after only - covering :before as well drew the glyph twice, and the second one
     overflowed below the disc */
}
.swiper-outer .ajs-swiper-button:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  mask: url(../img/slider-arrow.svg) no-repeat center;
  mask-size: 100% 100%;
  -webkit-mask: url(../img/slider-arrow.svg) no-repeat center;
  -webkit-mask-size: 100% 100%;
}
.swiper-outer .ajs-swiper-button:hover {
  background: #21438F;
}

.swiper-outer .ajs-swiper-button.ajs-swiper-button-next:after {
  transform: rotate(180deg);
}

#contact-form section {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media screen and (min-width: 1600px) {
  #contact-form section {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media screen and (min-width: 1800px) {
  #contact-form section {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.btn-alt-body, .btn-body {
  color: #fff;
  border-color: #fff;
  background-color: #fff;
}
.btn-alt-body:hover, .btn-body:hover {
  color: #fff;
  background: #fff;
  border-color: #fff;
}
@media screen and (min-width: 1200px) {
  .icon.btn-alt-body .fa, .icon.btn-body .fa {
    color: #fff;
  }
}

.btn-alt-font, .btn-font {
  color: #fff;
  border-color: #000000;
  background-color: #000000;
}
.btn-alt-font:hover, .btn-font:hover {
  color: #000000;
  background: #fff;
  border-color: #000000;
}
@media screen and (min-width: 1200px) {
  .icon.btn-alt-font .fa, .icon.btn-font .fa {
    color: #000000;
  }
}

.btn-alt-white, .btn-white {
  color: #fff;
  border-color: #fff;
  background-color: #fff;
}
.btn-alt-white:hover, .btn-white:hover {
  color: #fff;
  background: #fff;
  border-color: #fff;
}
@media screen and (min-width: 1200px) {
  .icon.btn-alt-white .fa, .icon.btn-white .fa {
    color: #fff;
  }
}

.btn-alt-black, .btn-black {
  color: #fff;
  border-color: #000000;
  background-color: #000000;
}
.btn-alt-black:hover, .btn-black:hover {
  color: #000000;
  background: #fff;
  border-color: #000000;
}
@media screen and (min-width: 1200px) {
  .icon.btn-alt-black .fa, .icon.btn-black .fa {
    color: #000000;
  }
}

.btn-alt-primary, .btn-primary {
  color: #fff;
  border-color: #21438F;
  background-color: #21438F;
}
.btn-alt-primary:hover, .btn-primary:hover {
  color: #21438F;
  background: #fff;
  border-color: #21438F;
}
@media screen and (min-width: 1200px) {
  .icon.btn-alt-primary .fa, .icon.btn-primary .fa {
    color: #21438F;
  }
}

.btn-alt-secondary, .btn-secondary {
  color: #fff;
  border-color: #0083C7;
  background-color: #0083C7;
}
.btn-alt-secondary:hover, .btn-secondary:hover {
  color: #0083C7;
  background: #fff;
  border-color: #0083C7;
}
@media screen and (min-width: 1200px) {
  .icon.btn-alt-secondary .fa, .icon.btn-secondary .fa {
    color: #0083C7;
  }
}

.btn-alt-highlight, .btn-highlight {
  color: #fff;
  border-color: #B9FAF8;
  background-color: #B9FAF8;
}
.btn-alt-highlight:hover, .btn-highlight:hover {
  color: #B9FAF8;
  background: #fff;
  border-color: #B9FAF8;
}
@media screen and (min-width: 1200px) {
  .icon.btn-alt-highlight .fa, .icon.btn-highlight .fa {
    color: #B9FAF8;
  }
}

.btn-alt-accent, .btn-accent {
  color: #fff;
  border-color: #FFF205;
  background-color: #FFF205;
}
.btn-alt-accent:hover, .btn-accent:hover {
  color: #FFF205;
  background: #fff;
  border-color: #FFF205;
}
@media screen and (min-width: 1200px) {
  .icon.btn-alt-accent .fa, .icon.btn-accent .fa {
    color: #FFF205;
  }
}

.btn-alt-grey, .btn-grey {
  color: #fff;
  border-color: #F5F5F5;
  background-color: #F5F5F5;
}
.btn-alt-grey:hover, .btn-grey:hover {
  color: #F5F5F5;
  background: #fff;
  border-color: #F5F5F5;
}
@media screen and (min-width: 1200px) {
  .icon.btn-alt-grey .fa, .icon.btn-grey .fa {
    color: #F5F5F5;
  }
}

.btn-alt-lightGrey, .btn-lightGrey {
  color: #fff;
  border-color: #D9D9D9;
  background-color: #D9D9D9;
}
.btn-alt-lightGrey:hover, .btn-lightGrey:hover {
  color: #D9D9D9;
  background: #fff;
  border-color: #D9D9D9;
}
@media screen and (min-width: 1200px) {
  .icon.btn-alt-lightGrey .fa, .icon.btn-lightGrey .fa {
    color: #D9D9D9;
  }
}

.btn-alt-midGrey, .btn-midGrey {
  color: #fff;
  border-color: #707070;
  background-color: #707070;
}
.btn-alt-midGrey:hover, .btn-midGrey:hover {
  color: #707070;
  background: #fff;
  border-color: #707070;
}
@media screen and (min-width: 1200px) {
  .icon.btn-alt-midGrey .fa, .icon.btn-midGrey .fa {
    color: #707070;
  }
}

.btn-alt-ink, .btn-ink {
  color: #fff;
  border-color: #0F2430;
  background-color: #0F2430;
}
.btn-alt-ink:hover, .btn-ink:hover {
  color: #0F2430;
  background: #fff;
  border-color: #0F2430;
}
@media screen and (min-width: 1200px) {
  .icon.btn-alt-ink .fa, .icon.btn-ink .fa {
    color: #0F2430;
  }
}

.btn-alt-red, .btn-red {
  color: #fff;
  border-color: #EF3A25;
  background-color: #EF3A25;
}
.btn-alt-red:hover, .btn-red:hover {
  color: #EF3A25;
  background: #fff;
  border-color: #EF3A25;
}
@media screen and (min-width: 1200px) {
  .icon.btn-alt-red .fa, .icon.btn-red .fa {
    color: #EF3A25;
  }
}

.btn-alt-green, .btn-green {
  color: #fff;
  border-color: #00A650;
  background-color: #00A650;
}
.btn-alt-green:hover, .btn-green:hover {
  color: #00A650;
  background: #fff;
  border-color: #00A650;
}
@media screen and (min-width: 1200px) {
  .icon.btn-alt-green .fa, .icon.btn-green .fa {
    color: #00A650;
  }
}

.btn-alt-pink, .btn-pink {
  color: #fff;
  border-color: #ffb8b8;
  background-color: #ffb8b8;
}
.btn-alt-pink:hover, .btn-pink:hover {
  color: #ffb8b8;
  background: #fff;
  border-color: #ffb8b8;
}
@media screen and (min-width: 1200px) {
  .icon.btn-alt-pink .fa, .icon.btn-pink .fa {
    color: #ffb8b8;
  }
}

.btn-alt-tint, .btn-tint {
  color: #fff;
  border-color: #D9EDEC;
  background-color: #D9EDEC;
}
.btn-alt-tint:hover, .btn-tint:hover {
  color: #D9EDEC;
  background: #fff;
  border-color: #D9EDEC;
}
@media screen and (min-width: 1200px) {
  .icon.btn-alt-tint .fa, .icon.btn-tint .fa {
    color: #D9EDEC;
  }
}

#contact-form section {
  /*
    Prose links only. A `.btn` sitting inside a content section - the intro row's button
    is exactly that - is not a prose link, and this rule outranks %btn on specificity
    (`.wysiwyg-image-5050 section a` beats `.btn`), so without the :not() it repaints the
    button's label and underlines it.
  */
}
#contact-form section a:not(.btn) {
  color: #0083C7;
  text-decoration: underline;
}
#contact-form section a:not(.btn):hover {
  color: #21438F;
}
#contact-form section h1:first-child,
#contact-form section h2:first-child,
#contact-form section h3:first-child,
#contact-form section h4:first-child,
#contact-form section h5:first-child,
#contact-form section h6:first-child {
  margin-top: 0;
}
#contact-form section h1:last-child,
#contact-form section h2:last-child,
#contact-form section h3:last-child,
#contact-form section h4:last-child,
#contact-form section h5:last-child,
#contact-form section h6:last-child {
  margin-bottom: 0;
}
#contact-form section p {
  margin-bottom: 1rem;
}
#contact-form section p:last-child {
  margin-bottom: 0;
}
#contact-form section p {
  /* Figma body copy: Montserrat 500 18/32 */
}
@media screen and (min-width: 1600px) {
  #contact-form section p {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 2rem;
  }
}
#contact-form section {
  /*
    Figma list style, used all through the service pages - a tick in place of the bullet,
    18/50 w500, the label 41 in from the tick. The tick is an SVG mask like the nav caret
    and the slider arrow, so its colour stays in the palette; `--tick` comes from the
    section's own scheme via bgScheme(), the lighter blue on light grounds and the yellow
    on dark ones, and falls back here for a list outside any scheme.

    `ol` keeps its numbers and the old spacing - only unordered lists become ticks.
  */
}
#contact-form section ul {
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}
#contact-form section ul li {
  position: relative;
  margin-bottom: 0;
  padding-left: 2.5625rem;
  font-weight: 500;
  /* the tick is centred on the item's first line, so :before is a full line tall
     with the 16px glyph centred inside it - `top: 0.35em` on a 50px line sat it
     near the top of the line box instead of beside the label */
  line-height: 2rem;
}
#contact-form section ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1rem;
  height: 2rem;
  background-color: var(--tick, #0083C7);
  mask: url(../img/tick.svg) no-repeat center;
  mask-size: 1rem 1rem;
  -webkit-mask: url(../img/tick.svg) no-repeat center;
  -webkit-mask-size: 1rem 1rem;
}
#contact-form section ul li {
  /* after the :before above, not before it - media queries add no specificity, so
     declared first the taller line's height lost to the base 2rem */
}
@media screen and (min-width: 1600px) {
  #contact-form section ul li {
    font-size: 1.125rem;
    line-height: 3.125rem;
  }
  #contact-form section ul li:before {
    height: 3.125rem;
  }
}
#contact-form section ol {
  margin: 2rem 0;
}
#contact-form section ol li {
  margin-bottom: 1.187rem;
}
#contact-form section blockquote {
  margin: 4rem 0;
  padding: 4rem 2rem;
  position: relative;
  font-weight: 900;
}
#contact-form section blockquote p {
  font-size: inherit;
}
#contact-form section blockquote:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.25rem;
  border-radius: 0.25rem;
}
#contact-form section blockquote:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.25rem;
  border-radius: 0.25rem;
}
#contact-form section blockquote:first-child {
  margin-top: 0;
}
#contact-form section blockquote:last-child {
  margin-bottom: 0;
}
#contact-form section {
  /*
    Montserrat 600 44/53.6 is the section-heading size right across the rebranded v2
    Homepage. Neither the uppercase nor the 100px rule that used to sit here appears
    anywhere on it - both were the target theme's, and a scan of every heading and every
    rule node on the frame turned up no heading rule at all. The only 90x0 lines are
    dividers inside the Latest News cards.
  */
}
#contact-form section h1, #contact-form section h2 {
  font-weight: 600;
}
#contact-form section h3 {
  font-size: 1.8rem;
  font-weight: 900;
}
#contact-form section h4 {
  font-size: 1.5625rem;
  font-weight: 900;
}
#contact-form section iframe {
  max-width: 100%;
}
#contact-form section .videoWrapper {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 56.2%;
}
#contact-form section .videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
#contact-form section figure {
  margin: 0;
  display: block;
}
#contact-form section figure img {
  width: 100%;
}
#contact-form section figure figcaption {
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.8rem;
  font-style: italic;
  text-align: center;
  padding: 1rem 2rem;
  color: #fff;
  background: #21438F;
}
@media screen and (min-width: 1200px) {
  #contact-form section h1, #contact-form section h2 {
    font-size: 2rem;
  }
  #contact-form section blockquote {
    font-size: 1.5625rem;
  }
}
#contact-form section {
  /* the Figma's section heading at its 1920 reference: Montserrat 600 44/53.6. This has
     to sit after the $desktop block above - same selector, same specificity, so the later
     one wins and a 2rem declared afterwards would silently beat it. */
}
@media screen and (min-width: 1600px) {
  #contact-form section h1, #contact-form section h2 {
    font-size: 2.75rem;
    line-height: 1.218;
  }
}

#contact-form .text {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/*
  The card the Figma reuses across the site: Latest News on the homepage (y6428), the
  category index cards (Domestic Construction y602) and the Projects grid (y602). Same
  439-440 width, same image band above a panel, same type:

    image    439x241 on Latest News, 439-440x250 everywhere else
    title    Montserrat 500 24/29.3 #21438F, 30 down from the panel top, 26 side padding
    body     400 16/20 clamped, 25 under the title
    footer   "Read more" #0083C7 over a 90x1 rule, pinned to the bottom, 39 off the edge

  The two differences between the variants are the panel ground - white on the blue Latest
  News band, #F5F5F5 on the light ones - and the date, which only Latest News carries. Both
  are left to the variant; everything here is shared, so the three cannot drift.
*/
/* Elements that are commonly re-used but not needed above the fold*/
* {
  box-sizing: border-box;
}

p:last-child {
  margin-bottom: 0;
}

h1, h2, h3, h4 {
  font-weight: 500;
}

h1, h2 {
  /* section colour schemes override this - see %bgN */
  color: #21438F;
}

input[type=text],
input[type=email],
input[type=phone],
input[type=number],
textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  line-height: 1.7555rem;
  border: 0;
  border-bottom: 2px solid #fff;
  background: #F5F5F5;
  height: auto;
  outline: 0;
  position: relative;
  z-index: 1;
}

select {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  line-height: 1.7555rem;
  border: 0;
  border-bottom: 2px solid #fff;
  background: #F5F5F5;
  height: auto;
  outline: 0;
  position: relative;
  z-index: 1;
}

textarea {
  height: 7.5rem;
  position: relative;
  z-index: 1;
}

.field-group {
  grid-template-columns: 100%;
  grid-column-gap: 1.33333rem;
  grid-row-gap: 1.33333rem;
}
.field-group .field span {
  display: block;
  margin-bottom: 0.5rem;
  width: -moz-max-content;
  width: max-content;
}
.field-group .field.required span:after {
  content: "*";
  color: #EF3A25;
}
.field-group .field.full-width {
  grid-column: 1/-1;
}
@media screen and (min-width: 480px) {
  .field-group {
    grid-template-columns: 1fr 1fr;
  }
}

.checkbox {
  position: relative;
  margin-bottom: 1rem;
  display: block;
}
.checkbox input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.checkbox input[type=checkbox] + span {
  padding-left: 2rem;
  display: block;
  position: relative;
}
.checkbox input[type=checkbox] + span:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: block;
  width: 1rem;
  height: 1rem;
  text-align: center;
  border: 1px solid #21438F;
  line-height: 1rem;
  border-radius: 0.12rem;
  color: #fff;
}
.checkbox input[type=checkbox]:checked + span:before {
  content: "\f00c";
  color: #21438F;
}

.radio {
  position: relative;
  margin-bottom: 1rem;
  display: block;
}
.radio input[type=radio] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.radio input[type=radio] + span {
  padding-left: 2rem;
  display: block;
  position: relative;
}
.radio input[type=radio] + span:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: block;
  width: 1rem;
  height: 1rem;
  text-align: center;
  border: 1px solid #21438F;
  line-height: 1rem;
  border-radius: 0.12rem;
  color: #fff;
}
.radio input[type=radio]:checked + span:before {
  content: "\f00c";
  color: #21438F;
}

.select {
  position: relative;
}
.select:after {
  content: "\f078";
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  pointer-events: none;
}
.select select {
  appearance: none;
}

.file-wrap {
  position: relative;
  margin-bottom: 1rem;
  display: block;
}
.file-wrap input[type=file] {
  width: 100%;
}
.file-wrap input[type=file]::file-selector-button {
  padding: 1rem 2rem;
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin-right: 1rem;
  background: #FFF205;
  color: #000000;
  border: 0;
}
.file-wrap input[type=file]:empty + span:before {
  content: "\e185";
}
.file-wrap input[type=file]::file-selector-button:hover {
  background: #000000;
}

.input-field {
  align-self: start;
  padding-top: 0.8rem;
  position: relative;
  display: block;
  margin-bottom: 1rem;
}
.input-field strong {
  position: absolute;
  top: 0.8rem;
  padding: 0.5rem 1rem;
  line-height: 1.7555rem;
  font-size: 1rem;
  color: #21438F;
  cursor: pointer;
  font-weight: 300;
  z-index: 2;
}
.input-field.focus strong, .input-field.has-value strong {
  top: 0;
  padding: 0;
  line-height: 0.5rem;
  font-size: 0.8rem;
}
.input-field.invalid:not(.focus) strong {
  color: #EF3A25;
}
.input-field.invalid:not(.focus) input,
.input-field.invalid:not(.focus) textarea,
.input-field.invalid:not(.focus) select {
  background-color: #ffb8b8;
  border-bottom: 2px solid #EF3A25;
}
.input-field:not(.focus):not(.has-value) {
  color: #21438F;
}

.swiper-outer {
  position: relative;
  padding-bottom: 5.375rem;
  /* same disc as the intro slider - one arrow asset for both, see %slider-arrow */
}
.swiper-outer .ajs-swiper-button {
  bottom: 0;
}
.swiper-outer .ajs-swiper-button.ajs-swiper-button-next {
  right: 0rem;
}
.swiper-outer .ajs-swiper-button.ajs-swiper-button-prev {
  right: 4.375rem;
}
.swiper-outer .ajs-swiper-pagination {
  text-align: center;
  z-index: 2;
  width: max-content;
  margin: 0 auto;
}
.swiper-outer .ajs-swiper-pagination .swiper-pagination-bullet {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0;
  background: #0083C7;
}
.swiper-outer .ajs-swiper-pagination.swiper-pagination-horizontal {
  width: max-content;
}
.swiper-outer .ajs-swiper-pagination.swiper-pagination-horizontal .swiper-pagination-bullet {
  margin: 0 1.25rem 0 0;
}
.swiper-outer .ajs-swiper-pagination.swiper-pagination-horizontal .swiper-pagination-bullet:last-child {
  margin-right: 0;
}
@media screen and (min-width: 1600px) {
  .swiper-outer {
    padding-bottom: 0;
  }
  .swiper-outer .ajs-swiper-button {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .swiper-outer .ajs-swiper-button.ajs-swiper-button-next {
    right: auto;
    left: calc(100% + 2rem);
  }
  .swiper-outer .ajs-swiper-button.ajs-swiper-button-prev {
    right: calc(100% + 2rem);
  }
}

.swiper .swiper-slide {
  height: auto;
}

.bg2 .ajs-swiper-button {
  background: #0083C7;
  color: #fff;
}

.bg3 .ajs-swiper-button {
  background: #0083C7;
}

.case-study-box {
  position: relative;
  background: #fff;
  height: 100%;
  align-items: start;
}
.case-study-box a {
  color: #21438F;
}
.case-study-box a:after {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  content: "Read More";
  color: #0083C7;
  display: block;
  border-bottom: 1px solid #0083C7;
}
.case-study-box h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
}
.case-study-box img {
  width: 100%;
}
.case-study-box .meta {
  padding-bottom: 1rem;
}
.case-study-box .meta:after {
  margin-top: 1rem;
  content: "";
  display: block;
  width: 6.25rem;
  border-bottom: 1px solid #0083C7;
}
.case-study-box .short-description {
  margin-bottom: 3.15rem;
}
.case-study-box .text {
  order: 2;
  padding: 1.25rem;
}
.case-study-box .date {
  text-align: right;
  opacity: 0.5;
}

.so_form {
  display: block;
  width: 100%;
}
.so_form .legal {
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -9999999px;
  left: -9999999px;
  width: 100%;
  height: 100%;
  background: rgba(33, 67, 143, 0.8);
  z-index: 101;
  padding: 2rem;
  align-items: center;
  justify-content: center;
}
.so_form .legal.open {
  top: 0;
  left: 0;
}
.so_form .legal > div {
  padding: 2rem;
  max-width: 38rem;
}
.so_form .legal .btn {
  margin: 2rem auto 0 auto;
}

.pagination {
  padding: 6.25rem 0 0 0;
}
.pagination ul {
  align-items: center;
  justify-content: center;
}
.pagination li {
  margin: 0 1.2rem 0 0;
}
.pagination li a {
  color: #21438F;
}
.pagination li a:hover {
  color: #0083C7;
}
.pagination li.current {
  font-weight: 700;
}
.pagination li:last-child {
  margin: 0;
}

#archive {
  padding: 3.125rem 1rem 6.25rem 1rem;
}
#archive .archive-list {
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
}
@media screen and (min-width: 480px) {
  #archive .archive-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1025px) {
  #archive {
    padding: 3.125rem 2rem 6.25rem 2rem;
  }
  #archive .archive-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1600px) {
  #archive {
    padding: 3.125rem 3.125rem 6.25rem 3.125rem;
  }
  #archive .archive-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/**
 * Swiper 8.1.4
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2022 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: April 24, 2022
 */
@font-face {
  font-family: swiper-icons;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color:#007aff;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-android .swiper-slide, .swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-pointer-events {
  touch-action: pan-y;
}

.swiper-pointer-events.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-autoheight, .swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-vertical.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-centered > .swiper-wrapper::before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}

.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-start: var(--swiper-centered-offset-before);
  margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-before: var(--swiper-centered-offset-before);
  margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
}

.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}

:root {
  --swiper-navigation-size:44px;
}

.swiper-button-next, .swiper-button-prev {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-next:after, .swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  content: "prev";
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
  content: "next";
}

.swiper-button-lock {
  display: none;
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%;
}

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: 50%;
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 0.2s transform, 0.2s top;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  swhite-space: nowrap;
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s left;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s right;
}

.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}

.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}

.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}

.swiper-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}

.swiper-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-swhite {
  --swiper-preloader-color:#fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color:#000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube {
  overflow: visible;
}

.swiper-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-next + .swiper-slide, .swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}

.swiper-cube .swiper-cube-shadow:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}

.swiper-flip {
  overflow: visible;
}

.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-flip .swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}

.swiper-cards {
  overflow: visible;
}

.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}

@keyframes soIn {
  0% {
    transform: translate3d(0, -50%, 0);
  }
  100% {
    transform: translate3d(-5.25rem, -50%, 0);
  }
}
@keyframes soOut {
  0% {
    transform: translate3d(-5.25rem, -50%, 0);
  }
  100% {
    transform: translate3d(0, -50%, 0);
  }
}
@keyframes soText {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes soTextOut {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#so-widget {
  font-size: 0.75rem;
  margin-left: auto;
  align-items: center;
  width: 6.875rem;
  max-width: 6.875rem;
  position: relative;
  height: 1.625rem;
}
#so-widget:before {
  content: "Website by";
  white-space: nowrap;
  padding-right: 2.75rem;
  grid-row: 1;
  grid-column: 1;
  z-index: 1;
  opacity: 1;
  animation-name: soTextOut;
  animation-duration: 300ms;
  animation-fill-mode: both;
  animation-direction: reverse;
}
#so-widget:after {
  content: "So Marketing";
  white-space: nowrap;
  padding-left: 2.75rem;
  grid-row: 1;
  grid-column: 1;
  z-index: 2;
  opacity: 0;
  animation-name: soText;
  animation-duration: 300ms;
  animation-fill-mode: both;
  animation-direction: reverse;
}
#so-widget svg {
  width: 1.375rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  height: 1.625rem;
  animation-name: soIn;
  animation-duration: 300ms;
  animation-fill-mode: both;
  animation-direction: reverse;
}
#so-widget:hover svg {
  animation-name: soOut;
  animation-direction: reverse;
}
#so-widget:hover:before {
  animation-name: soText;
  animation-direction: reverse;
}
#so-widget:hover:after {
  animation-name: soTextOut;
  animation-direction: reverse;
}

#contact-form .text {
  align-items: center;
  justify-content: center;
  position: relative;
}
#contact-form section {
  max-width: 56rem;
  position: static;
  top: 5rem;
  width: 100%;
}
#contact-form img {
  height: 100%;
  width: 100%;
  display: block;
  object-fit: cover;
}
#contact-form .swiper {
  position: sticky;
  top: 5rem;
}
#contact-form .swiper .swiper-intro-button-next {
  display: block;
  position: absolute;
  z-index: 3;
  bottom: 3.25rem;
  right: 3.25rem;
  width: 3.25rem;
  height: 3.25rem;
  line-height: 3.25rem;
  text-align: center;
  border: 0;
  background: #0083C7;
  color: #fff;
  font-size: 1.56rem;
  border-radius: 3.25rem;
  cursor: pointer;
}
#contact-form .swiper .swiper-intro-button-next:after {
  content: "\f178";
}
#contact-form .swiper .swiper-intro-button-next:hover {
  background: #21438F;
}
#contact-form .swiper .swiper-wrapper {
  align-items: stretch;
}
#contact-form .swiper .swiper-slide {
  height: auto;
}
#contact-form .swiper .swiper-intro-pagination {
  position: absolute;
  bottom: 4.2rem;
  left: 3.25rem;
  z-index: 3;
  width: max-content;
}
#contact-form .swiper .swiper-pagination-bullet {
  background: #fff;
  border-radius: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 1.25rem;
  opacity: 0.5;
  border: 1px solid #fff;
}
#contact-form .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #FFF205;
  opacity: 1;
}
#contact-form .input-field.focus strong, #contact-form .input-field.has-value strong {
  color: #fff;
}
@media screen and (min-width: 1025px) {
  #contact-form {
    grid-template-columns: 1fr 1fr;
  }
  #contact-form .text {
    order: 2;
    justify-content: start;
  }
}
@media screen and (min-width: 1600px) {
  #contact-form .text section {
    padding: 0 5rem;
  }
}

/*
  Footer - Figma v2 `Footer` component (116:7685), 1920x570.

  Two grounds side by side: a #D9D9D9 strip to x387 carrying the dark logo (x50, 287 wide)
  and the address in #21438F, then a #21438F panel from x387 holding four columns on a
  358px pitch - Home / Commercial Development / Domestic Construction / Contact Us - above
  a rule and the copyright bar.

    column headings   highlight #B9FAF8, 16 w600
    links             white, 16 w400; the long ones wrap inside a ~245px measure
    phone             highlight w600, email white w600
    socials           highlight, 24px
    CTA               286x75 accent yellow with a #21438F label
    copyright bar     tint #D9EDEC, 16 w450, above a 1433px rule; "Website by" white

  The Figma's third column is headed "Commercial Development" a second time - a copy/paste
  slip, its items are all domestic - so the menu is named Domestic Construction. Its bottom
  bar also uses #D9EDEC, the target theme's tint; it is reproduced here so the footer
  matches the Figma exactly, against the palette's own highlight.

  The two grounds are painted with a linear-gradient hard stop rather than a wrapper element,
  so the grey keeps running full-bleed at any width while the content stays in the grid.
*/
#footer {
  overflow: hidden;
}
#footer a {
  color: #fff;
}
#footer a:hover {
  color: #B9FAF8;
}
#footer .details {
  padding: 3.125rem 1rem;
  background: #D9D9D9;
}
#footer .columns {
  grid-row-gap: 3rem;
  padding: 3.125rem 1rem 0 1rem;
}
#footer .social {
  /* Figma: icons at y303 - email ends 249, so 54 below it */
  margin-top: 3.375rem;
}
#footer .social ul {
  align-items: center;
}
#footer .social li {
  /* the social list sits inside .contact-details, so it picks up the 20px link
     gap unless it opts out - that made the icon row 44 tall instead of 24 */
  margin-bottom: 0;
  margin-right: 2.25rem;
}
#footer .social a {
  display: block;
  color: #B9FAF8;
  font-size: 1.5rem;
  /* the icons are 24px in the Figma; an inherited body line-height made the row 46 */
  line-height: 1;
}
#footer .social a:hover {
  color: #fff;
}
@media screen and (min-width: 768px) {
  #footer .columns {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 2rem;
  }
}
@media screen and (min-width: 1025px) {
  #footer {
    /* grey strip to 387/1920 = 20.156%, blue beyond - one hard stop, no wrapper */
    background: linear-gradient(to right, #D9D9D9 0, #D9D9D9 20.156%, #21438F 20.156%, #21438F 100%);
    grid-template-columns: 20.156% 1fr;
  }
  #footer .details {
    background: none;
    /* Figma: logo top 100, address block 307..527 (220), footer 570 */
    padding: 6.25rem 1rem 2.6875rem 2.604vw;
  }
  #footer .columns {
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 0;
    /* the row gap is for the wrapped small-screen layout; at this width the columns
       sit on one row and it would stack with #sub-footer's own margin */
    grid-row-gap: 0;
    padding: 6.875rem 2.604vw 0 2.604vw;
  }
}

#footer-branding {
  display: block;
  max-width: 17.9375rem;
  /* Figma: logo bottom 263, address top 307 */
  margin-bottom: 2.75rem;
}
#footer-branding img {
  display: block;
  width: 100%;
  height: auto;
}
/*
  Figma: 287x220 for ten lines, so 22px a line and no gap between the address and the
  VAT/company block - its \n is a plain line break there, not a paragraph space. The
  line-height has to be set on the `p`, not the wrapper: a base rule gives paragraphs
  29.6px and inheritance loses to it.
*/
#footer .address {
  color: #21438F;
  font-size: 1rem;
  /* Figma: 287x220 for ten 20px lines and two 10px paragraph gaps - three groups
     (Head Office / the seven address lines / VAT+Company), the option's blank lines
     marking them. 20 + 10 + 7x20 + 10 + 2x20 = 220. */
}
#footer .address p {
  margin: 0;
  line-height: 1.25;
}
#footer .address p + p {
  margin-top: 0.625rem;
}
#footer .address {
  /* Figma bolds three ranges in the block - "Head Office", "VAT No.", "Company No." -
     at the same 600 the column headings use */
}
#footer .address strong {
  font-weight: 600;
}

.contact-details .title,
.menu .title {
  display: block;
  /* Figma: heading bottom 130, first link 188. The line-height has to be stated -
     inherited it is 29.6px, which pushed every column down ~10px. */
  line-height: 1.25;
  margin-bottom: 3.6875rem;
  color: #B9FAF8;
  font-size: 1rem;
  font-weight: 600;
}
.contact-details li,
.menu li {
  /* 40px pitch in the Figma - 20px line, 20px gap - and no trailing gap on the last */
  margin-bottom: 1.25rem;
  font-size: 1rem;
  line-height: 1.25;
}
.contact-details li:last-child,
.menu li:last-child {
  margin-bottom: 0;
}

/*
  Figma wraps the long items inside a ~245px measure - "Facilities Management &
  Commercial Repairs" breaks after the "&", "Residential & Commercial" / "Development",
  "Architectural Design &" / "Planning Services", "Structural & Home Alterations/" /
  "Home Improvements". The browser's Montserrat runs a few percent wider than Figma's and
  refuses to break at the "/", so "Structural & Home Alterations/Home" needs 265 - at 260
  it falls to three lines. 265 keeps every item at the Figma's line count; only the
  Architectural break lands one word later than drawn.
*/
.menu li {
  max-width: 16.5625rem;
}

/* Figma column 1 (Home) spaces its three links a 44px pitch - 24px gaps against the
   20px the other columns use. */
.menu-home li {
  margin-bottom: 1.5rem;
}
.menu-home li:last-child {
  margin-bottom: 0;
}

.contact-details li {
  white-space: nowrap;
}
.contact-details li strong {
  font-weight: 600;
}
.contact-details .btn {
  margin-top: 3.125rem;
}

/* nested under #footer because `#footer a` has an id and beats a bare class rule */
#footer .contact-details li.phone a {
  color: #B9FAF8;
}

/* sits inside .columns, so it spans the blue panel only - the Figma rule runs x437..1870 */
#sub-footer {
  align-items: center;
  grid-column: 1/-1;
  /* Figma: rule y502, bar text 18px tall (y523..541), footer ends 570 - the inherited
     body line-height made the bar's text 30 tall and pushed the footer to 584 */
  margin: 3.125rem 0 0 0;
  /* 20 + the 26px Website-by mark + 21 lands the footer on the Figma's 570 */
  padding: 1.25rem 0 1.3125rem 0;
  line-height: 1.125;
  border-top: 1px solid rgba(185, 250, 248, 0.3);
  color: #D9EDEC;
  font-size: 1rem;
}
#sub-footer p {
  /* _core's own p rule beats inheritance - state the 18px bar height here */
  line-height: 1.125;
  margin: 0 2.5rem 0 0;
}
#sub-footer a {
  color: #D9EDEC;
  margin-right: 2.5rem;
}
#sub-footer a:hover {
  color: #fff;
}
#sub-footer #so-widget {
  margin-left: auto;
  font-size: 0.75rem;
  color: #fff;
}

/*
  The drawer carries the footer's content - nav, phone, email, socials, copyright - so it
  takes the footer's scheme, `$bg4`: primary ground, white text, `highlight` for links and
  hover. Pulling the values from the scheme map rather than naming colours means a change
  to $bg4 reaches here too.

  It was `highlight` on its own before, which was a mechanical swap of the target theme's
  pale-tint panel: legal, but it read as the target's mint drawer rather than ours, and it
  spent `highlight` on a full-bleed surface when the palette defines it as an accent to be
  used *on* the blue - which is what it now does here.
*/
#mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: calc(100% - 4rem);
  max-width: 30rem;
  background: #21438F;
  color: #fff;
  overflow: auto;
  transform: translateX(-100%);
  z-index: 101;
}
#mobile-menu .level-0 > div {
  padding-top: 4.2rem;
  grid-row-gap: 3rem;
  padding-left: 3rem;
  padding-right: 2rem;
}
#mobile-menu a {
  color: #fff;
}
#mobile-menu a:hover {
  color: #B9FAF8;
}
#mobile-menu .closer {
  position: absolute;
  top: 2.1rem;
  left: 1rem;
  transform: translateY(-50%);
  background: transparent;
  color: #fff;
  padding: 0.4rem;
  cursor: pointer;
  font-size: 1rem;
}
#mobile-menu .closer:hover {
  color: #B9FAF8;
}
#mobile-menu .closer strong {
  font-weight: 400;
}
#mobile-menu .closer strong:before {
  content: "\f00d";
  font-weight: 700;
  margin-right: 0.4rem;
}
#mobile-menu .social li {
  margin-right: 1rem;
}
@media screen and (min-width: 0) and (max-width: 379px) {
  #mobile-menu {
    width: 100vw;
  }
}

#mobile-navigation .depth-0 {
  align-items: start;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}
#mobile-navigation .depth-0 .open-next {
  margin-left: 0.2rem;
}
#mobile-navigation .depth-0 .open-next:before {
  display: block;
  content: "\f107";
  font-size: 1rem;
  width: 2.125rem;
  line-height: 2.125rem;
  cursor: pointer;
}
#mobile-navigation .depth-0 .level {
  order: 3;
  flex-basis: 100%;
  font-size: 1rem;
}
#mobile-navigation .depth-0.open > a {
  margin-bottom: 1rem;
}
#mobile-navigation .depth-0.open .level-1 {
  display: block;
}
#mobile-navigation .level-1 {
  display: none;
}
#mobile-navigation .level-1 a {
  display: block;
  padding: 0.5rem 0;
}

/*# sourceMappingURL=defered.css.map */