/* =============================================
   CONTACT SECTION (REDESIGN)
   ============================================= */

.contact { padding: 70px 0; background: var(--navy); }
.contact .container { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; }
/* Contact Map toggled off in the CMS: same fixed-track problem as .network-grid - the
   1.2fr column stayed, leaving ~55% of the navy band empty. Class added by app JS. */
.contact .container.no-map { grid-template-columns: 1fr; }
.contact-info h2 { font-family: var(--heading); font-size: 2.5rem; font-weight: 800; color: var(--white); margin-bottom: 16px; letter-spacing: -.02em; }
.contact-info > p { color: rgba(255, 255, 255, .5); margin-bottom: 44px; line-height: 1.8; }
.contact-details { display: flex; flex-direction: column; gap: 24px; }
.contact-item { display: flex; gap: 20px; }
.contact-item-icon { width: 48px; height: 48px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .3s; }
.contact-item:hover .contact-item-icon { background: var(--red-glow); border-color: transparent; }
.contact-item-icon svg { width: 20px; height: 20px; color: var(--red); }
.contact-item-content h3 { font-family: var(--heading); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: rgba(255, 255, 255, .75); margin-bottom: 6px;   /* was .3 = 2.68:1, failed WCAG AA badly at this size */ }
.contact-item-content p, .contact-item-content a { font-size: .9375rem; color: rgba(255, 255, 255, .7); font-weight: 500; }
.contact-item-content a:hover { color: var(--red); }
.contact-team { margin-top: 52px; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, .08); }
.contact-team h3 { font-family: var(--heading); font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 20px; letter-spacing: -.01em; }
.team-contacts { display: flex; flex-direction: column; gap: 12px; }
.team-contact { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; background: rgba(255, 255, 255, .05); border-radius: 6px; border: 1px solid rgba(255, 255, 255, .08); transition: all .2s; }
.team-contact:hover { border-color: rgba(255, 255, 255, .15); box-shadow: 0 4px 15px rgba(0, 0, 0, .2); }
.team-contact-name { font-family: var(--heading); font-weight: 600; color: var(--white); }
.team-contact-role { font-size: .8125rem; color: rgba(255, 255, 255, .65); margin-top: 2px; }   /* was .4 = 3.72:1, under AA */
.team-contact-email { font-size: .875rem; color: var(--white); font-family: var(--heading); font-weight: 600; }
/* isolation: the map's Leaflet controls (z-index 1000) stay inside the map instead of painting over the fixed header and
   the open menu sheet as the section scrolls under them - the same as .network-map-wrap (audit 2026-10-09). */
.contact-map { position: relative; isolation: isolate; background: rgba(255, 255, 255, .05); border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); height: 100%; min-height: 500px; }
#contactMap { position: absolute; inset: 0; width: 100%; height: 100%; }
#contactMap .leaflet-container { background: #e8edf2; font-family: var(--body); }


/* =============================================
   FOOTER (redesigned 2026-10-13 - owner: "make the footer much nicer, it's very basic")
   Light (white), so it never shares a background with the navy Contact section above it - and the grey/white
   striping (stripeOptionalSections) still reads it as 'white'. A red line along the top, a brand column, FOUR link
   columns of at most four links each (the owner's second round, same day: "remove [the tagline] and add in a fourth
   column ... so it is more organised and then can be made shorter") and a bottom bar. Third round, same day: every
   footer link permanently underlined in red, the columns evenly spaced; 2026-10-15 the permanent underline went again -
   a red underline on hover only. No glow on any button (owner rule): colour
   changes only.
   ============================================= */

/* --- Shell --- */
.footer { background: var(--white); color: var(--navy); padding: 0; position: relative; border-top: 3px solid var(--red); }

/* --- Main: the brand column + the four link columns (Navigation | Explore | Services | Contact) ---
   EVEN spacing (owner, 2026-10-13: "make sure in the footer there is even spacing between the columns"): each block is
   exactly as wide as its own content and the room left over is shared EQUALLY between them (space-between), so every
   gap is the same, the brand starts at the left edge and Contact ends at the right edge, in line with Back to top. A
   flex row rather than a grid, so a column that hides (Services switched off in FR8 Creator) just closes up and the
   rest stay evenly spaced. Below 1300px the brand becomes a row across the top (see the steps at the end of this block). */
.footer-main { display: flex; justify-content: space-between; gap: 36px; padding: 60px 0 44px; text-align: left; }

/* Brand column - NOT a .footer-column (see the note on the footer in index.html) */
.footer-brand { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }   /* never squeezed below the wordmark */
.footer-logo { margin: 0; font-family: var(--logo); font-size: 32px; font-weight: 560; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--red); white-space: nowrap; }
.footer-address { margin: 0; display: flex; align-items: flex-start; gap: 12px; font-size: .875rem; line-height: 1.7; color: var(--g600); }
.footer-icon { flex: 0 0 18px; width: 18px; height: 18px; color: var(--red); }
.footer-address .footer-icon { margin-top: 3px; }
.footer-cta { margin-top: 4px; padding: 14px 26px; font-size: .8125rem; }

/* --- The four link columns (FR8 Creator -> Footer edits Navigation, Services and Contact; Explore's heading is fixed) --- */
.footer-column { flex: 0 1 auto; min-width: 0; }
.footer-column h3 { font-family: var(--heading); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; margin: 6px 0 20px; color: var(--navy); position: relative; padding-bottom: 12px; }
.footer-column h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 24px; height: 2px; background: var(--red); border-radius: 1px; }
.footer-column ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* No underline at rest (owner, 2026-10-15: "please remove the underlining in the footer so it is a lot nicer"). A red
   underline appears only on hover or keyboard focus - the effect the owner first asked for on 2026-10-13 ("instead of
   the hover effect of making it red and moving it to the right can it get a red underline"), the same as the header's
   links. The words go navy, never red, and nothing moves. The legal links below match. */
.footer-column a { color: var(--g600); font-size: .9rem; line-height: 1.5; display: inline-block; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.footer-column a:hover, .footer-column a:focus-visible { color: var(--navy); text-decoration-color: var(--red); }
.footer-column a:focus-visible, .footer-legal a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 12px; }
.footer-contact .footer-icon { margin-top: 2px; }
.footer-contact a { overflow-wrap: anywhere; }
/* In the two-by-two grid (1024px and under) Contact always takes the right-hand column: if the Services column hides
   (its section switched off in FR8 Creator, Nav-Menu.js), the email address keeps its room. (Wider screens use a flex
   row, where this does nothing.) */
.footer-contact { grid-column: -2 / -1; }

/* --- Bottom bar: copyright + company number | the legal links | back to top --- */
.footer-bottom { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; grid-template-areas: "copy legal top" "company legal top"; align-items: center; column-gap: 28px; row-gap: 2px; padding: 22px 0 26px; border-top: 1px solid var(--g100); font-size: .8125rem; color: var(--g500); }
/* The copyright must stay the FIRST <p> here: applyCmsData writes footer_copyright into '.footer-bottom > p'. */
.footer-bottom > p { margin: 0; grid-area: copy; color: var(--g600); }
.footer-bottom > p.footer-company { grid-area: company; font-size: .75rem; color: var(--g500); }
/* Three legal links since 2026-10-16 (+ Gender Pay Gap Report): the copyright keeps at least 220px and the links wrap
   onto a second line on narrower screens instead of squeezing it. */
.footer-legal { grid-area: legal; display: flex; flex-wrap: wrap; gap: 4px; }
.footer-legal a { padding: 6px 12px; border-radius: 4px; color: var(--g600); text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--navy); text-decoration-color: var(--red); }
/* A legal label cleared in FR8 Creator hides its link (the href stays, so an empty label would be a
   clickable gap). Responsive.css gives these links display:inline-flex, so [hidden] needs help. */
.footer-legal a[hidden] { display: none; }
.footer-legal-placeholder { padding: 4px 12px; color: var(--g500); cursor: default; }
.footer-top { grid-area: top; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--g200); border-radius: 999px; font-family: var(--heading); font-size: .72rem; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--navy); transition: background .2s, border-color .2s, color .2s; }
.footer-top svg { flex: 0 0 16px; }
.footer-top:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.footer-top:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* --- The footer's own in-between steps (phones: Responsive.css, which loads after this file) ---
   Widths measured from the font files (Oxanium 400 at 14.4px): the email address 229px, 259px with its icon; the
   longest Services link 148px; the address 207px with its icon; Send an Enquiry 201px; the wordmark 264px. In one row
   the five blocks need 858px plus four 36px gaps = 1002px, so one row is comfortable down to 1300px. Below that the
   brand runs as one row across the top (wordmark | address | Send an Enquiry on the right) with the four columns under
   it, still evenly spaced (594px plus three gaps). At 1024px and under the columns go two by two (a grid), and the brand
   row uses the same two columns (wordmark and Send an Enquiry on the left, the address over the right-hand column). */
@media (max-width: 1299.98px) {
  .footer-main { flex-wrap: wrap; row-gap: 32px; padding: 48px 0 40px; }
  .footer-brand { flex: 0 0 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 48px; padding-bottom: 28px; border-bottom: 1px solid var(--g100); }
  .footer-cta { margin: 0 0 0 auto; }
}
@media (max-width: 1024px) {
  .footer-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 36px; }
  .footer-brand { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px 36px; }
  .footer-logo { grid-column: 1; grid-row: 1; }
  .footer-address { grid-column: 2; grid-row: 1 / span 2; }
  .footer-cta { grid-column: 1; grid-row: 2; justify-self: start; margin: 0; }
}


/* =============================================
   COOKIE BANNER & FLOATING (REDESIGN)
   ============================================= */

.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--navy); color: var(--white); padding: 20px 28px; z-index: 9999; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: 0 -8px 30px rgba(0, 0, 0, .2); transform: translateY(100%); transition: transform .4s; backdrop-filter: blur(20px); }
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner.hidden { display: none; }
/* The banner (z-index 9999) sat on top of the open mobile menu (999), covering the bottom
   of it - including the "Get a Quote" CTA and the phone link. Rather than reshuffle the
   whole stack (the navbar deliberately sits above the menu), just stand the banner down
   while the menu is open. #mobileMenu precedes #cookieBanner in the DOM. */
#mobileMenu.active ~ .cookie-banner { display: none; }
.cookie-banner p { font-size: .875rem; line-height: 1.7; margin: 0; color: rgba(255, 255, 255, .7); }
.cookie-banner a { color: var(--red); }
.cookie-buttons { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn { padding: 10px 20px; border-radius: 4px; font-family: var(--heading); font-size: .75rem; font-weight: 600; cursor: pointer; border: none; transition: all .2s; text-transform: uppercase; letter-spacing: .5px; }
.cookie-btn-accept { background: var(--red); color: var(--white); }
.cookie-btn-accept:hover { background: var(--red); }
.cookie-btn-decline { background: transparent; color: var(--white); border: 1px solid rgba(255, 255, 255, .2); }
.cookie-btn-decline:hover { background: rgba(255, 255, 255, .05); }

.sticky-cta { position: fixed; bottom: 24px; right: 24px; z-index: 999; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all .4s cubic-bezier(.16, 1, .3, 1); }
.sticky-cta.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.sticky-cta a { display: flex; align-items: center; gap: 10px; padding: 16px 28px; background: var(--red); color: var(--white); font-family: var(--heading); font-weight: 600; font-size: .8125rem; border-radius: 4px; transition: all .3s; text-transform: uppercase; letter-spacing: .5px; }
.sticky-cta a:hover { transform: translateY(-3px); }
.sticky-cta svg { width: 16px; height: 16px; }

.back-to-top { position: fixed; bottom: 80px; right: 24px; width: 44px; height: 44px; background: var(--navy); color: var(--white); border: none; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all .3s; z-index: 998; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-3px); }
.back-to-top svg { width: 20px; height: 20px; }