.mainButton {
    display: inline-block;

    padding: 0.4rem 1.25rem;
    border: 1.5px solid currentColor;
    border-radius: 100px;
    
    color: inherit;
    background: transparent;
    
    white-space: nowrap;
    cursor: pointer;
}
.pageHeader, .pageContent {
    .mainButton {
        margin: 0 1rem;
    }
}
.mainButton:hover {
    color: var(--mainBackgroundColour);
    background: var(--mainAccentColour);
}





.pictograms img {
    width: 36px;
    opacity: 0.5;
}
.pictograms > * {
    flex: 1 1 0;
    align-items: center;
}













.caption {
    font-style: italic;
    font-size: 90%;
    line-height: 1.4em;
}




/* Option */
/*
.pageHeader .pageHeadline {
    position: relative;
    z-index: 10;
}
*/
#what-we-do img {
/*    position: absolute;
    top: 0;
    scale: 0.7;*/
    mix-blend-mode: multiply;
}




.hardware img {
    background-color: white;
    border-radius: 12px;
}
.flexQueued {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1em;
}

.flexQueued > * {
    flex: 0 0 256px;
}



.widgetTestimonials {
    font-style: italic;
    /*//TODO h3 replaced with p */ h3 {
        font-weight: 400;
    }
    p {
        font-size: 15pt;
    }
    cite {

    }
    blockquote::before {
        content: "”";
        display: block;
        text-align: center;
        font-size: 100pt;
        line-height: 0.45;
        margin-bottom: -0.5em;
    }
    blockquote::after {
        content: "“";
        display: block;
        text-align: center;
        font-size: 100pt;
        line-height: 0.45;
        margin-top: 0.2em;
    }
}




.installationType {
    position: relative;
    display: inline-block;
    max-width: 72rem;
    width: 100%;
}

.installationType img {
    display: block;
    width: 80%;
    height: auto;
    margin: 10% auto;
}

.installationType svg { pointer-events: none; }

.installationTypeLabel {
    position: absolute;
    top: var(--y);
    left: var(--x);
    white-space: nowrap;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    backdrop-filter: blur(5px) saturate(120%);
}

.installationTypeLabel.light {
    color: rgb(0, 0, 0);
    background-color: rgba(240, 240, 240, 0.4);
}

.installationTypeLabel.dark {
    color: rgb(255, 255, 255);
    background-color: rgba(15, 15, 15, 0.4);
}

.installationTypeLabel.left {
    transform: translateY(-50%);
}
.installationTypeLabel.right {
    text-align: right;
    transform: translateX(-100%) translateY(-50%);
}

.installationTypeLabelGraph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.installationTypeLabelGraph line {
    stroke: rgb(255, 255, 255);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
























footer {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 400;
    line-height: 18pt;
    letter-spacing: -0.3px;

    color: #808080;

    text-align: left;
}

.footerLogos {
    gap: 64px;
    opacity: 0.5;
    margin: 64px auto;
}

.footerNav {
    margin: 64px auto;
}

.footerNote {
    font-size: 12px;
    opacity: 0.5;

    margin: 28px auto;
}








legend {
    text-transform: uppercase;
    font-size: 12pt;
}
#enquiry label[for] {
    font-size: 0.7em;
    opacity: 0.65;
}
#pageNetworkSolutionsTypePicker,
#enquiry input {
    font-size: 0.8em;
}
#enquiry select[name],
#enquiry .help-groups label,
#enquiry .help-groups h3,
#enquiry .slider-labels,
#enquiry button {
    font-size: 0.85em;
}
#enquiry button {
    font-family: inherit;
    font-weight: 600;
}
#enquiry + p#formError {
    font-size: 16px;
    font-style: italic;
}






main {
    --fieldHeight: 2.25rem;
}
#enquiry {
    gap: 2.5rem;
    accent-color: var(--mainAccentColour);

    fieldset {
        margin: 0;
        padding: 7px 21px 33px 25px;
        
        border-radius: 12px;
        border-width: 1px;
        border-color: color-mix(in srgb, var(--mainTextColour) 15%, transparent);
    }

    textarea {
        margin-top: 21px;
    }
}

.flexEqual > .street { 
    flex: 2; 
}
.help-groups > div { 
    min-width: 200px; 
}
.invalid { 
    outline: 2px solid red; 
}
.invalid-group { 
    outline: 2px solid red; padding: 4px; 
}
.hp { 
    position: absolute;
    left: -9999px; 
    top: -9999px; 
}


/* Text fields */
#pageNetworkSolutionsTypePicker,
#enquiry :is(input[type="text"], input[type="email"], input[type="tel"], select) {
    height: var(--fieldHeight);
}
#enquiry textarea {
    resize: vertical;
}
#pageNetworkSolutionsTypePicker,
#enquiry :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;

    box-sizing: border-box;

    width: 100%;

    padding: 0.3em 0.5em;

    border: 1px solid color-mix(in srgb, var(--mainTextColour) 25%, transparent);
    border-radius: 8px;
    
    color: inherit;
    background-color: var(--mainEndColour);

    transition: border-color var(--themeTransition);
}
:where(#enquiry) :where(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
    font-size: inherit;
}

#enquiry :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea):hover,
#enquiry :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea):focus {
    border-color: var(--mainAccentColour);
}

#enquiry :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea):focus-visible {
    outline: 2px solid var(--mainAccentColour);
    outline-offset: 0;
}



/* Tick boxes */
#enquiry input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;

    border: 1px solid color-mix(in srgb, var(--mainTextColour) 25%, transparent);
    border-radius: 4px;

    width: 1em;
    height: 1em;
    
    margin: 0 0.5em 0 0;
    vertical-align: -0.15em;
    
    background-color: var(--mainEndColour);
    transition: border-color var(--themeTransition);

    cursor: pointer;
}
#enquiry label:has(input[type="checkbox"]) {
    cursor: pointer;
}
#enquiry input[type="checkbox"]:hover {
    border-color: var(--mainAccentColour);
}



#enquiry input[type="checkbox"]:checked {
    background-size: 0.75em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 4.8 8.6 9.5 3.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--mainAccentColour);

    border-color: var(--mainAccentColour);
}



/* Range sliders */
#enquiry input[type="range"] {
    -webkit-appearance: none;
    appearance: none;

    box-sizing: border-box;

    width: 100%;
    height: 14px;

    margin: 0;

    background-color: transparent;
    
    background-image:
        radial-gradient(circle, var(--rangeStop) 3px, transparent 3px),
        radial-gradient(circle, var(--rangeStop) 3px, transparent 3px),
        radial-gradient(circle, var(--rangeStop) 3px, transparent 3px),
        linear-gradient(var(--rangeLine), var(--rangeLine));
    background-repeat: no-repeat;
    background-size: 14px 14px, 14px 14px, 14px 14px, calc(100% - 14px) 2px;
    background-position: left center, center center, right center, center center;

    cursor: pointer;

    --rangeStop: color-mix(in srgb, var(--mainTextColour) 30%, transparent);
    --rangeLine: color-mix(in srgb, var(--mainTextColour) 15%, transparent);
}
#enquiry input[type="range"]:active {
    cursor: grabbing;
}
#enquiry input[type="range"]::-webkit-slider-runnable-track {
    height: 14px;
    border: none;
    background: transparent;
}
#enquiry input[type="range"]::-moz-range-track {
    height: 14px;
    border: none;
    background: transparent;
}
#enquiry input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;

    width: 10px;
    height: 10px;

    margin-top: 2px;

    border: none;
    border-radius: 50%;

    background: var(--mainAccentColour);

    cursor: grab;
}
#enquiry input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;

    border: none;
    border-radius: 50%;

    background: var(--mainAccentColour);

    cursor: grab;
}
#enquiry input[type="range"]:active::-webkit-slider-thumb {
    cursor: grabbing;
}
#enquiry input[type="range"]:active::-moz-range-thumb {
    cursor: grabbing;
}

.slider-labels { 
    display: flex; 
    justify-content: space-between; 
    width: 100%; 

    span { flex: 1 1 0; }

    span:first-child { text-align: left; }
    span:nth-child(2) { text-align: center; }
    span:last-child { text-align: right; }
    
    span { cursor: pointer; }
    
    span:hover { color: var(--mainAccentColour); }
    
    .active { font-weight: bold; }
}



/* Submit button */
#addContact,
#enquiry button {
    align-self: center;

    padding: 0.6em 2.5em;

    border: none;

    color: var(--mainBackgroundColour);
    background-color: var(--mainAccentColour);

    transition: background-color var(--themeTransition);

    cursor: pointer;
}
#addContact:hover,
#enquiry button:hover {
    background-color: color-mix(in srgb, var(--mainAccentColour) 50%, var(--mainBackgroundColour));
}
#addContact:focus-visible,
#enquiry button:focus-visible {
    outline: 2px solid var(--mainTextColour);
    outline-offset: 2px;
}
#addContact:disabled,
#enquiry button:disabled {
    opacity: 0.5;
    background-color: var(--mainTextColour);
    cursor: default;
}













.pageContactUsPhoneLine {
    font-size: 140%;
    font-weight: 600;
    font-style: italic;
    gap: 2rem;
}
.pageContactUsCoverageMap {
    width: 100%;
    mix-blend-mode: multiply;
}


a.superLink {
    position: relative;
    display: inline-flex;
    justify-content: center;
}
a.superLink::before {
    content: '';
    position: absolute;
    width: calc(100% + 10px);
    height: 2px;
    bottom: -4px;
    background-color: var(--mainAccentColour);
}
















#pageNetworkSolutionsTypePicker {
    width: max-content;
}






main h3::after {
    content: '';
    
    display: block;
    position: relative;

    height: 2px;
    top: 0.5rem;
    width: 2rem;
    left: 0;
    
    background-color: var(--mainAccentColour);
}









.itcreative-reach {
    width: 240px;
}





.howWeWork li {
    margin-bottom: 20px;
}



/* #region Semantic markup adjustments
   Added when the templates were corrected for HTML validity - these keep the
   rendering identical to what the previous (invalid) markup produced. */

/* Headings that replaced pseudo-headings (<strong> in the footer, <p> in the
   help groups and testimonials) - reset the browser's default heading box */
footer h3,
.help-groups h3,
.widgetTestimonials h3 {
    margin: 0;
    font-size: inherit;
}
.help-groups h3 {
    font-weight: inherit;
}

/* The copyright line is now a paragraph inside its container */
.footerNote p {
    margin: 0;
}

/* The pictogram strip is a list now, not a row of <section>s */
.pictograms {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Video captions are <figure>/<figcaption> now - drop the default figure margin */
figure {
    margin: 0;
}

/* Testimonial attribution moved out of the <blockquote> into a <figcaption> */
.widgetTestimonials figcaption {
    font-style: normal;
}

/* Sections whose heading now comes first in the source but whose illustration
   should still appear above it on screen */
.mediaLead {
    display: flex;
    flex-direction: column;
}
.mediaLead > .heroImage,
.mediaLead > img,
.mediaLead > video {
    order: -1;
}

/* #endregion Semantic markup adjustments */




/* #region Breadcrumbs */

.mainBreadcrumbs {
    margin: 0 auto;
    font-size: 0.85em;
    opacity: 0.65;
}
.mainBreadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;

    margin: 0;
    padding: 0;
    list-style: none;
}
.mainBreadcrumbs li + li::before {
    content: "/";
    margin-right: 0.5em;
    opacity: 0.5;
}
.mainBreadcrumbs a:hover {
    color: var(--mainAccentColour);
}

/* #endregion Breadcrumbs */