/*
 * Blinco Flooring Ltd - framework.css
 * Core layout, typography and navigation framework.
 *
 * Component surface mirrors the Responsee v7 framework (myresponsee.com,
 * MIT) so existing markup conventions carry over, but this build is
 * written from scratch: no JavaScript, no icon-font dependency, and all
 * theming driven by the custom properties in :root below.
 *
 * Breakpoints cascade on max-width, widest first:
 *   xxl  default (> 1366px)
 *   xl   <= 1366px
 *   l    <= 1140px
 *   m    <= 768px
 *   s    <= 480px
 *
 * CONTENTS
 *   1.  Design tokens
 *   2.  Reset
 *   3.  Typography
 *   4.  Tables
 *   5.  Media
 *   6.  Containers (.size-*, .line, .grid)
 *   7.  Spacing helpers (.padding, .margin, .box)
 *   8.  Column system (.s-*, .m-*, .l-*, .xl-*, .xxl-*)
 *   9.  Alignment + visibility helpers
 *   10. Top navigation (CSS-only mobile toggle + dropdowns)
 *   11. Aside navigation
 *   12. Slide navigation
 *   13. Breadcrumb navigation
 *   14. Breakpoint cascade
 *   15. Grid normalisation
*/

/* ==========================================================================
   1. DESIGN TOKENS
   NEUTRAL DEFAULTS ONLY - this is a brand-agnostic framework.

   Every colour here is greyscale on purpose. The framework must render
   sensibly on its own, but it carries no site identity: all brand and site
   colours belong in main.css, which loads last and overrides these.

   Colours are stored twice where transparency is needed:
     --bf-dark      a usable colour value
     --bf-dark-rgb  the same colour as space-separated channels, so
                    overlays can be built with rgb(var(--bf-dark-rgb) / 0.6)
   Override the -rgb pair alongside the colour or scrims will drift.
   ========================================================================== */
:root {
  /* Structure - neutral charcoals */
  --bf-dark:            #262626;
  --bf-dark-rgb:        38 38 38;
  --bf-dark-mid:        #383838;
  --bf-dark-light:      #525252;

  /* Accent - deliberately neutral; main.css gives this the brand colour */
  --bf-primary:         #525252;
  --bf-primary-rgb:     82 82 82;
  --bf-primary-hover:   #666666;
  --bf-accent:          #383838;

  /* Surfaces */
  --bf-body-bg:         #f5f5f5;
  --bf-surface:         #ffffff;
  --bf-surface-alt:     #f7f7f7;
  --bf-surface-sunken:  #ebebeb;

  /* Text */
  --bf-text:            #404040;
  --bf-heading:         #262626;
  --bf-text-muted:      #808080;
  --bf-text-invert:     #ffffff;

  /* Lines */
  --bf-border:          #dddddd;
  --bf-border-light:    #ebebeb;

  /* State */
  --bf-success:         #4a7a4a;
  --bf-warning:         #b58230;
  --bf-danger:          #a63b31;

  /* Overlays + scrims, derived from --bf-dark-rgb */
  --bf-scrim:           rgb(var(--bf-dark-rgb) / 0.6);
  --bf-scrim-soft:      rgb(var(--bf-dark-rgb) / 0.5);
  --bf-overlay-light:   rgb(255 255 255 / 0.2);
  --bf-overlay-dark:    rgb(var(--bf-dark-rgb) / 0.1);
  --bf-primary-soft:    rgb(var(--bf-primary-rgb) / 0.10);
  --bf-primary-ring:    rgb(var(--bf-primary-rgb) / 0.35);
  --bf-mark-bg:         #f5f0c0;

  /* Type */
  --bf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --bf-font-heading: var(--bf-font);
  --bf-font-mono: Menlo, Monaco, Consolas, "Courier New", monospace;
  --bf-font-size: 16px;
  --bf-line-height: 1.6;

  /* Rhythm - the 0.625rem/1.25rem gutter pair the grid is built on */
  --bf-gutter:          0.625rem;
  --bf-gutter2x:        1.25rem;

  /* Chrome */
  --bf-radius:          6px;
  --bf-radius-lg:       10px;
  --bf-radius-btn:      8px;
  --bf-shadow:          0 1px 2px rgb(var(--bf-dark-rgb) / 0.06),
                        0 2px 8px rgb(var(--bf-dark-rgb) / 0.06);
  --bf-shadow-lg:       0 4px 12px rgb(var(--bf-dark-rgb) / 0.08),
                        0 12px 32px rgb(var(--bf-dark-rgb) / 0.10);
  --bf-transition:      0.2s linear;
  --bf-ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --bf-nav-height:      60px;
  /* Ceiling for CSS-only collapse animations (nav submenus). Must exceed
     the tallest submenu; raise it if a menu is ever taller than this. */
  --bf-collapse-max:    60rem;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  background: var(--bf-body-bg);
  color: var(--bf-text);
  font-family: var(--bf-font);
  font-size: var(--bf-font-size);
  line-height: var(--bf-line-height);
  min-height: 100vh;
  overflow-x: hidden;
}
main { display: block; }
[hidden] { display: none !important; }
:focus-visible {
  outline: 2px solid var(--bf-primary);
  outline-offset: 2px;
}
/* Form fields get a soft ring instead of a hard outline */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 3px var(--bf-primary-ring);
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--bf-heading);
  font-family: var(--bf-font-heading);
  font-weight: normal;
  line-height: 1.3;
  margin: 0.5rem 0;
}
h1 { font-size: 2.7rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 0.9rem; }
p, li, dl, blockquote, table, kbd {
  font-size: 0.85rem;
  line-height: var(--bf-line-height);
}
p { margin: 0 0 0.75rem; }
p:last-child { margin-bottom: 0; }
a, a:link, a:visited, a:hover, a:active {
  color: var(--bf-primary);
  text-decoration: none;
  transition: color var(--bf-transition) 0s;
}
a:hover { color: var(--bf-primary-hover); }
b, strong { font-weight: 700; }
small { font-size: 0.8rem; }
ul, ol { padding-left: 1.25rem; }
li { padding: 0; }
ul.no-bullet, ol.no-bullet {
  list-style: none;
  padding-left: 0;
}
blockquote {
  border-left: 3px solid var(--bf-primary);
  background: var(--bf-surface-alt);
  padding: 1.25rem;
}
cite {
  color: var(--bf-text-muted);
  display: block;
  font-size: 0.8rem;
}
cite::before { content: "\2014\00a0"; }
dl dt { font-weight: 700; }
dl dd { margin-bottom: 0.625rem; }
dl dd:last-child { margin-bottom: 0; }
abbr { cursor: help; }
abbr[title] { border-bottom: 1px dotted; }
code, kbd, pre, samp { font-family: var(--bf-font-mono); }
kbd {
  background: var(--bf-dark);
  border-radius: 3px;
  color: var(--bf-text-invert);
  font-size: 0.8rem;
  padding: 0.125rem 0.3125rem;
}
pre {
  background: var(--bf-surface-alt);
  border: 1px solid var(--bf-border-light);
  border-radius: var(--bf-radius);
  font-size: 0.8rem;
  overflow-x: auto;
  padding: 1rem;
}
mark {
  background: var(--bf-mark-bg);
  padding: 0.125rem 0.3125rem;
}
hr {
  border: 0;
  border-top: 1px solid var(--bf-border);
  clear: both;
  height: 0;
  margin: 2.5rem auto;
}
form { line-height: 1.4; }

/* ==========================================================================
   4. TABLES
   Modern default: no outer box, no vertical rules, no zebra. A typographic
   header rule plus row hairlines and a hover tint carry the structure.

   Modifiers (add to the <table>):
     .table-striped   zebra banding
     .table-bordered  full grid of rules, incl. outer border
     .table-compact   tighter row height for dense data
     .table-card      rounded, shadowed surface
   Wrap wide tables in <div class="table-scroll"> so the page never
   scrolls sideways.
   ========================================================================== */
table {
  background: transparent;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.85rem;
  text-align: left;
  width: 100%;
}
caption {
  color: var(--bf-text-muted);
  font-size: 0.8rem;
  padding-bottom: 0.75rem;
  text-align: left;
}
table th,
table td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
}
table thead th {
  border-bottom: 2px solid var(--bf-border);
  color: var(--bf-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
table tbody td {
  border-bottom: 1px solid var(--bf-border-light);
  color: var(--bf-text);
}
table tbody tr { transition: background var(--bf-transition) 0s; }
table tbody tr:hover { background: var(--bf-surface-alt); }
table tbody tr:last-child td { border-bottom: 0; }
table tbody th {
  border-bottom: 1px solid var(--bf-border-light);
  color: var(--bf-heading);
  font-weight: 600;
}
table tfoot td,
table tfoot th {
  border-top: 2px solid var(--bf-border);
  color: var(--bf-text-muted);
  font-size: 0.78rem;
}
/* Numeric columns read better right-aligned and tabular */
table .numeric,
table td.numeric,
table th.numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- Modifiers --- */
table.table-striped tbody tr:nth-of-type(2n) { background: var(--bf-surface-alt); }
table.table-striped tbody tr:hover { background: var(--bf-surface-sunken); }

table.table-bordered { border: 1px solid var(--bf-border); }
table.table-bordered th,
table.table-bordered td { border: 1px solid var(--bf-border-light); }
table.table-bordered thead th { border-bottom-color: var(--bf-border); }

table.table-compact th,
table.table-compact td { padding: 0.5rem 0.7rem; }

table.table-card {
  background: var(--bf-surface);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow);
  overflow: hidden;
}
table.table-card thead th { background: var(--bf-surface-alt); }

.table-scroll {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  width: 100%;
}

/* ==========================================================================
   5. MEDIA
   ========================================================================== */
img, svg, video {
  border: 0;
  display: block;
  height: auto;
  max-width: 100%;
}
img { width: auto; }
.full-img {
  max-width: none;
  width: 100%;
}
.cover-img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
figure { margin: 0; }
figcaption {
  color: var(--bf-text-muted);
  font-size: 0.8rem;
  padding-top: 0.5rem;
}
iframe { border: 0; max-width: 100%; }
/* Responsive embed: <div class="video-wrap"><iframe ...></iframe></div> */
.video-wrap {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  width: 100%;
}
.video-wrap > * {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}


/* ==========================================================================
   6. CONTAINERS
   .size-* goes on <body> and caps every .line / .grid inside it.
   ========================================================================== */
.size-960 .line, .size-1140 .line, .size-1280 .line, .size-1520 .line {
  margin: 0 auto;
  padding: 0 var(--bf-gutter);
}
.size-960 .line,  .size-960 .grid  { max-width: 59.75rem; }
.size-1140 .line, .size-1140 .grid { max-width: 71rem; }
.size-1280 .line, .size-1280 .grid { max-width: 80rem; }
.size-1520 .line, .size-1520 .grid { max-width: 95rem; }

.size-960.align-content-left .line,
.size-1140.align-content-left .line,
.size-1280.align-content-left .line,
.size-1520.align-content-left .line { margin-left: 0; }

.line { clear: left; }
.line .line { padding: 0; }
.line-full-width { width: 100%; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  margin: 0 auto;
  width: 100%;
}
.grid.full {
  max-width: 100% !important;
  padding: 0;
}
.grid .grid {
  padding: 0;
  width: 100%;
}

/* Float-grid clearfix */
.line::after, nav::after, .center::after, .box::after,
.margin::after, .margin2x::after, .grid.full::after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.grid.margin::after, .grid.margin2x::after {
  content: none;
  display: none;
}

/* ==========================================================================
   7. SPACING HELPERS
   ========================================================================== */
.padding {
  display: block;
  padding: var(--bf-gutter);
}
.padding2x { padding: var(--bf-gutter2x); }
.padding-top { padding-top: var(--bf-gutter2x); }
.padding-bottom { padding-bottom: var(--bf-gutter2x); }
.no-padding { padding: 0 !important; }

.margin, .margin2x { display: block; }
.margin   { margin: 0 calc(var(--bf-gutter) * -1); }
.margin2x { margin: 0 calc(var(--bf-gutter2x) * -1); }
.grid.margin {
  display: grid;
  grid-column-gap: 20px;
  margin: 0 auto;
}
.grid.margin2x {
  display: grid;
  grid-column-gap: 40px;
  margin: 0 auto;
}
.margin-bottom   { margin-bottom: var(--bf-gutter2x) !important; }
.margin-bottom2x { margin-bottom: 2.5rem !important; }
.margin-top      { margin-bottom: 0; margin-top: var(--bf-gutter2x) !important; }
.no-margin       { margin: 0 !important; }

.box {
  background: var(--bf-surface);
  display: block;
  padding: var(--bf-gutter2x);
  width: 100%;
}
.box.rounded { border-radius: var(--bf-radius-lg); }
.box.bordered { border: 1px solid var(--bf-border); }
.box.shadow { box-shadow: var(--bf-shadow); }
.box.shadow-lg { box-shadow: var(--bf-shadow-lg); }


/* ==========================================================================
   8. COLUMN SYSTEM
   Two engines share the same class names:
     - inside .line  -> floats with percentage widths
     - inside .grid  -> CSS Grid column spans
   ========================================================================== */
.s-1,.s-2,.s-five,.s-3,.s-4,.s-5,.s-6,.s-7,.s-8,.s-9,.s-10,.s-11,.s-12,.m-1,.m-2,.m-five,.m-3,.m-4,.m-5,.m-6,.m-7,.m-8,.m-9,.m-10,.m-11,.m-12,.l-1,.l-2,.l-five,.l-3,.l-4,.l-5,.l-6,.l-7,.l-8,.l-9,.l-10,.l-11,.l-12,.xl-1,.xl-2,.xl-five,.xl-3,.xl-4,.xl-5,.xl-6,.xl-7,.xl-8,.xl-9,.xl-10,.xl-11,.xl-12,.xxl-1,.xxl-2,.xxl-five,.xxl-3,.xxl-4,.xxl-5,.xxl-6,.xxl-7,.xxl-8,.xxl-9,.xxl-10,.xxl-11,.xxl-12 {
  float: left;
  position: static;
}

/* Gutters: .margin / .margin2x negative-margin wrapper pays the columns back */
.line .margin > .s-1,.line .margin > .s-2,.line .margin > .s-five,.line .margin > .s-3,.line .margin > .s-4,.line .margin > .s-5,.line .margin > .s-6,.line .margin > .s-7,.line .margin > .s-8,.line .margin > .s-9,.line .margin > .s-10,.line .margin > .s-11,.line .margin > .s-12,.line .margin > .m-1,.line .margin > .m-2,.line .margin > .m-five,.line .margin > .m-3,.line .margin > .m-4,.line .margin > .m-5,.line .margin > .m-6,.line .margin > .m-7,.line .margin > .m-8,.line .margin > .m-9,.line .margin > .m-10,.line .margin > .m-11,.line .margin > .m-12,.line .margin > .l-1,.line .margin > .l-2,.line .margin > .l-five,.line .margin > .l-3,.line .margin > .l-4,.line .margin > .l-5,.line .margin > .l-6,.line .margin > .l-7,.line .margin > .l-8,.line .margin > .l-9,.line .margin > .l-10,.line .margin > .l-11,.line .margin > .l-12,.line .margin > .xl-1,.line .margin > .xl-2,.line .margin > .xl-five,.line .margin > .xl-3,.line .margin > .xl-4,.line .margin > .xl-5,.line .margin > .xl-6,.line .margin > .xl-7,.line .margin > .xl-8,.line .margin > .xl-9,.line .margin > .xl-10,.line .margin > .xl-11,.line .margin > .xl-12,.line .margin > .xxl-1,.line .margin > .xxl-2,.line .margin > .xxl-five,.line .margin > .xxl-3,.line .margin > .xxl-4,.line .margin > .xxl-5,.line .margin > .xxl-6,.line .margin > .xxl-7,.line .margin > .xxl-8,.line .margin > .xxl-9,.line .margin > .xxl-10,.line .margin > .xxl-11,.line .margin > .xxl-12 {padding: 0 var(--bf-gutter);}
.line-full-width .margin > .s-1,.line-full-width .margin > .s-2,.line-full-width .margin > .s-five,.line-full-width .margin > .s-3,.line-full-width .margin > .s-4,.line-full-width .margin > .s-5,.line-full-width .margin > .s-6,.line-full-width .margin > .s-7,.line-full-width .margin > .s-8,.line-full-width .margin > .s-9,.line-full-width .margin > .s-10,.line-full-width .margin > .s-11,.line-full-width .margin > .s-12,.line-full-width .margin > .m-1,.line-full-width .margin > .m-2,.line-full-width .margin > .m-five,.line-full-width .margin > .m-3,.line-full-width .margin > .m-4,.line-full-width .margin > .m-5,.line-full-width .margin > .m-6,.line-full-width .margin > .m-7,.line-full-width .margin > .m-8,.line-full-width .margin > .m-9,.line-full-width .margin > .m-10,.line-full-width .margin > .m-11,.line-full-width .margin > .m-12,.line-full-width .margin > .l-1,.line-full-width .margin > .l-2,.line-full-width .margin > .l-five,.line-full-width .margin > .l-3,.line-full-width .margin > .l-4,.line-full-width .margin > .l-5,.line-full-width .margin > .l-6,.line-full-width .margin > .l-7,.line-full-width .margin > .l-8,.line-full-width .margin > .l-9,.line-full-width .margin > .l-10,.line-full-width .margin > .l-11,.line-full-width .margin > .l-12,.line-full-width .margin > .xl-1,.line-full-width .margin > .xl-2,.line-full-width .margin > .xl-five,.line-full-width .margin > .xl-3,.line-full-width .margin > .xl-4,.line-full-width .margin > .xl-5,.line-full-width .margin > .xl-6,.line-full-width .margin > .xl-7,.line-full-width .margin > .xl-8,.line-full-width .margin > .xl-9,.line-full-width .margin > .xl-10,.line-full-width .margin > .xl-11,.line-full-width .margin > .xl-12,.line-full-width .margin > .xxl-1,.line-full-width .margin > .xxl-2,.line-full-width .margin > .xxl-five,.line-full-width .margin > .xxl-3,.line-full-width .margin > .xxl-4,.line-full-width .margin > .xxl-5,.line-full-width .margin > .xxl-6,.line-full-width .margin > .xxl-7,.line-full-width .margin > .xxl-8,.line-full-width .margin > .xxl-9,.line-full-width .margin > .xxl-10,.line-full-width .margin > .xxl-11,.line-full-width .margin > .xxl-12 {padding: 0 var(--bf-gutter);}
.line .margin2x > .s-1,.line .margin2x > .s-2,.line .margin2x > .s-five,.line .margin2x > .s-3,.line .margin2x > .s-4,.line .margin2x > .s-5,.line .margin2x > .s-6,.line .margin2x > .s-7,.line .margin2x > .s-8,.line .margin2x > .s-9,.line .margin2x > .s-10,.line .margin2x > .s-11,.line .margin2x > .s-12,.line .margin2x > .m-1,.line .margin2x > .m-2,.line .margin2x > .m-five,.line .margin2x > .m-3,.line .margin2x > .m-4,.line .margin2x > .m-5,.line .margin2x > .m-6,.line .margin2x > .m-7,.line .margin2x > .m-8,.line .margin2x > .m-9,.line .margin2x > .m-10,.line .margin2x > .m-11,.line .margin2x > .m-12,.line .margin2x > .l-1,.line .margin2x > .l-2,.line .margin2x > .l-five,.line .margin2x > .l-3,.line .margin2x > .l-4,.line .margin2x > .l-5,.line .margin2x > .l-6,.line .margin2x > .l-7,.line .margin2x > .l-8,.line .margin2x > .l-9,.line .margin2x > .l-10,.line .margin2x > .l-11,.line .margin2x > .l-12,.line .margin2x > .xl-1,.line .margin2x > .xl-2,.line .margin2x > .xl-five,.line .margin2x > .xl-3,.line .margin2x > .xl-4,.line .margin2x > .xl-5,.line .margin2x > .xl-6,.line .margin2x > .xl-7,.line .margin2x > .xl-8,.line .margin2x > .xl-9,.line .margin2x > .xl-10,.line .margin2x > .xl-11,.line .margin2x > .xl-12,.line .margin2x > .xxl-1,.line .margin2x > .xxl-2,.line .margin2x > .xxl-five,.line .margin2x > .xxl-3,.line .margin2x > .xxl-4,.line .margin2x > .xxl-5,.line .margin2x > .xxl-6,.line .margin2x > .xxl-7,.line .margin2x > .xxl-8,.line .margin2x > .xxl-9,.line .margin2x > .xxl-10,.line .margin2x > .xxl-11,.line .margin2x > .xxl-12 {padding: 0 var(--bf-gutter2x);}
.line-full-width .margin2x > .s-1,.line-full-width .margin2x > .s-2,.line-full-width .margin2x > .s-five,.line-full-width .margin2x > .s-3,.line-full-width .margin2x > .s-4,.line-full-width .margin2x > .s-5,.line-full-width .margin2x > .s-6,.line-full-width .margin2x > .s-7,.line-full-width .margin2x > .s-8,.line-full-width .margin2x > .s-9,.line-full-width .margin2x > .s-10,.line-full-width .margin2x > .s-11,.line-full-width .margin2x > .s-12,.line-full-width .margin2x > .m-1,.line-full-width .margin2x > .m-2,.line-full-width .margin2x > .m-five,.line-full-width .margin2x > .m-3,.line-full-width .margin2x > .m-4,.line-full-width .margin2x > .m-5,.line-full-width .margin2x > .m-6,.line-full-width .margin2x > .m-7,.line-full-width .margin2x > .m-8,.line-full-width .margin2x > .m-9,.line-full-width .margin2x > .m-10,.line-full-width .margin2x > .m-11,.line-full-width .margin2x > .m-12,.line-full-width .margin2x > .l-1,.line-full-width .margin2x > .l-2,.line-full-width .margin2x > .l-five,.line-full-width .margin2x > .l-3,.line-full-width .margin2x > .l-4,.line-full-width .margin2x > .l-5,.line-full-width .margin2x > .l-6,.line-full-width .margin2x > .l-7,.line-full-width .margin2x > .l-8,.line-full-width .margin2x > .l-9,.line-full-width .margin2x > .l-10,.line-full-width .margin2x > .l-11,.line-full-width .margin2x > .l-12,.line-full-width .margin2x > .xl-1,.line-full-width .margin2x > .xl-2,.line-full-width .margin2x > .xl-five,.line-full-width .margin2x > .xl-3,.line-full-width .margin2x > .xl-4,.line-full-width .margin2x > .xl-5,.line-full-width .margin2x > .xl-6,.line-full-width .margin2x > .xl-7,.line-full-width .margin2x > .xl-8,.line-full-width .margin2x > .xl-9,.line-full-width .margin2x > .xl-10,.line-full-width .margin2x > .xl-11,.line-full-width .margin2x > .xl-12,.line-full-width .margin2x > .xxl-1,.line-full-width .margin2x > .xxl-2,.line-full-width .margin2x > .xxl-five,.line-full-width .margin2x > .xxl-3,.line-full-width .margin2x > .xxl-4,.line-full-width .margin2x > .xxl-5,.line-full-width .margin2x > .xxl-6,.line-full-width .margin2x > .xxl-7,.line-full-width .margin2x > .xxl-8,.line-full-width .margin2x > .xxl-9,.line-full-width .margin2x > .xxl-10,.line-full-width .margin2x > .xxl-11,.line-full-width .margin2x > .xxl-12 {padding: 0 var(--bf-gutter2x);}

/* --- s tier --- */
.s-1, .grid .s-1.center {width:8.3333%;}
.s-2, .grid .s-2.center {width:16.6666%;}
.s-five {width:20%;}
.s-3, .grid .s-3.center {width:25%;}
.s-4, .grid .s-4.center {width:33.3333%;}
.s-5, .grid .s-5.center {width:41.6666%;}
.s-6, .grid .s-6.center {width:50%;}
.s-7, .grid .s-7.center {width:58.3333%;}
.s-8, .grid .s-8.center {width:66.6666%;}
.s-9, .grid .s-9.center {width:75%;}
.s-10, .grid .s-10.center {width:83.3333%;}
.s-11, .grid .s-11.center {width:91.6666%;}
.s-12, .grid .s-12.center {width:100%;}
.grid .s-1 {grid-column:span 1;}
.grid .s-2 {grid-column:span 2;}
.grid .s-3 {grid-column:span 3;}
.grid .s-4 {grid-column:span 4;}
.grid .s-5 {grid-column:span 5;}
.grid .s-6 {grid-column:span 6;}
.grid .s-7 {grid-column:span 7;}
.grid .s-8 {grid-column:span 8;}
.grid .s-9 {grid-column:span 9;}
.grid .s-10 {grid-column:span 10;}
.grid .s-11 {grid-column:span 11;}
.grid .s-12 {grid-column:span 12;}
.grid .s-row-1 {grid-row:span 1;}
.grid .s-row-2 {grid-row:span 2;}
.grid .s-row-3 {grid-row:span 3;}
.grid .s-row-4 {grid-row:span 4;}
.grid .s-row-5 {grid-row:span 5;}
.grid .s-row-6 {grid-row:span 6;}
.grid .s-row-7 {grid-row:span 7;}
.grid .s-row-8 {grid-row:span 8;}
.grid .s-row-9 {grid-row:span 9;}
.grid .s-row-10 {grid-row:span 10;}
.grid .s-row-11 {grid-row:span 11;}
.grid .s-row-12 {grid-row:span 12;}

/* --- m tier --- */
.m-1, .grid .m-1.center {width:8.3333%;}
.m-2, .grid .m-2.center {width:16.6666%;}
.m-five {width:20%;}
.m-3, .grid .m-3.center {width:25%;}
.m-4, .grid .m-4.center {width:33.3333%;}
.m-5, .grid .m-5.center {width:41.6666%;}
.m-6, .grid .m-6.center {width:50%;}
.m-7, .grid .m-7.center {width:58.3333%;}
.m-8, .grid .m-8.center {width:66.6666%;}
.m-9, .grid .m-9.center {width:75%;}
.m-10, .grid .m-10.center {width:83.3333%;}
.m-11, .grid .m-11.center {width:91.6666%;}
.m-12, .grid .m-12.center {width:100%;}
.grid .m-1 {grid-column:span 1;}
.grid .m-2 {grid-column:span 2;}
.grid .m-3 {grid-column:span 3;}
.grid .m-4 {grid-column:span 4;}
.grid .m-5 {grid-column:span 5;}
.grid .m-6 {grid-column:span 6;}
.grid .m-7 {grid-column:span 7;}
.grid .m-8 {grid-column:span 8;}
.grid .m-9 {grid-column:span 9;}
.grid .m-10 {grid-column:span 10;}
.grid .m-11 {grid-column:span 11;}
.grid .m-12 {grid-column:span 12;}
.grid .m-row-1 {grid-row:span 1;}
.grid .m-row-2 {grid-row:span 2;}
.grid .m-row-3 {grid-row:span 3;}
.grid .m-row-4 {grid-row:span 4;}
.grid .m-row-5 {grid-row:span 5;}
.grid .m-row-6 {grid-row:span 6;}
.grid .m-row-7 {grid-row:span 7;}
.grid .m-row-8 {grid-row:span 8;}
.grid .m-row-9 {grid-row:span 9;}
.grid .m-row-10 {grid-row:span 10;}
.grid .m-row-11 {grid-row:span 11;}
.grid .m-row-12 {grid-row:span 12;}

/* --- l tier --- */
.l-1, .grid .l-1.center {width:8.3333%;}
.l-2, .grid .l-2.center {width:16.6666%;}
.l-five {width:20%;}
.l-3, .grid .l-3.center {width:25%;}
.l-4, .grid .l-4.center {width:33.3333%;}
.l-5, .grid .l-5.center {width:41.6666%;}
.l-6, .grid .l-6.center {width:50%;}
.l-7, .grid .l-7.center {width:58.3333%;}
.l-8, .grid .l-8.center {width:66.6666%;}
.l-9, .grid .l-9.center {width:75%;}
.l-10, .grid .l-10.center {width:83.3333%;}
.l-11, .grid .l-11.center {width:91.6666%;}
.l-12, .grid .l-12.center {width:100%;}
.grid .l-1 {grid-column:span 1;}
.grid .l-2 {grid-column:span 2;}
.grid .l-3 {grid-column:span 3;}
.grid .l-4 {grid-column:span 4;}
.grid .l-5 {grid-column:span 5;}
.grid .l-6 {grid-column:span 6;}
.grid .l-7 {grid-column:span 7;}
.grid .l-8 {grid-column:span 8;}
.grid .l-9 {grid-column:span 9;}
.grid .l-10 {grid-column:span 10;}
.grid .l-11 {grid-column:span 11;}
.grid .l-12 {grid-column:span 12;}
.grid .l-row-1 {grid-row:span 1;}
.grid .l-row-2 {grid-row:span 2;}
.grid .l-row-3 {grid-row:span 3;}
.grid .l-row-4 {grid-row:span 4;}
.grid .l-row-5 {grid-row:span 5;}
.grid .l-row-6 {grid-row:span 6;}
.grid .l-row-7 {grid-row:span 7;}
.grid .l-row-8 {grid-row:span 8;}
.grid .l-row-9 {grid-row:span 9;}
.grid .l-row-10 {grid-row:span 10;}
.grid .l-row-11 {grid-row:span 11;}
.grid .l-row-12 {grid-row:span 12;}

/* --- xl tier --- */
.xl-1, .grid .xl-1.center {width:8.3333%;}
.xl-2, .grid .xl-2.center {width:16.6666%;}
.xl-five {width:20%;}
.xl-3, .grid .xl-3.center {width:25%;}
.xl-4, .grid .xl-4.center {width:33.3333%;}
.xl-5, .grid .xl-5.center {width:41.6666%;}
.xl-6, .grid .xl-6.center {width:50%;}
.xl-7, .grid .xl-7.center {width:58.3333%;}
.xl-8, .grid .xl-8.center {width:66.6666%;}
.xl-9, .grid .xl-9.center {width:75%;}
.xl-10, .grid .xl-10.center {width:83.3333%;}
.xl-11, .grid .xl-11.center {width:91.6666%;}
.xl-12, .grid .xl-12.center {width:100%;}
.grid .xl-1 {grid-column:span 1;}
.grid .xl-2 {grid-column:span 2;}
.grid .xl-3 {grid-column:span 3;}
.grid .xl-4 {grid-column:span 4;}
.grid .xl-5 {grid-column:span 5;}
.grid .xl-6 {grid-column:span 6;}
.grid .xl-7 {grid-column:span 7;}
.grid .xl-8 {grid-column:span 8;}
.grid .xl-9 {grid-column:span 9;}
.grid .xl-10 {grid-column:span 10;}
.grid .xl-11 {grid-column:span 11;}
.grid .xl-12 {grid-column:span 12;}
.grid .xl-row-1 {grid-row:span 1;}
.grid .xl-row-2 {grid-row:span 2;}
.grid .xl-row-3 {grid-row:span 3;}
.grid .xl-row-4 {grid-row:span 4;}
.grid .xl-row-5 {grid-row:span 5;}
.grid .xl-row-6 {grid-row:span 6;}
.grid .xl-row-7 {grid-row:span 7;}
.grid .xl-row-8 {grid-row:span 8;}
.grid .xl-row-9 {grid-row:span 9;}
.grid .xl-row-10 {grid-row:span 10;}
.grid .xl-row-11 {grid-row:span 11;}
.grid .xl-row-12 {grid-row:span 12;}

/* --- xxl tier --- */
.xxl-1, .grid .xxl-1.center {width:8.3333%;}
.xxl-2, .grid .xxl-2.center {width:16.6666%;}
.xxl-five {width:20%;}
.xxl-3, .grid .xxl-3.center {width:25%;}
.xxl-4, .grid .xxl-4.center {width:33.3333%;}
.xxl-5, .grid .xxl-5.center {width:41.6666%;}
.xxl-6, .grid .xxl-6.center {width:50%;}
.xxl-7, .grid .xxl-7.center {width:58.3333%;}
.xxl-8, .grid .xxl-8.center {width:66.6666%;}
.xxl-9, .grid .xxl-9.center {width:75%;}
.xxl-10, .grid .xxl-10.center {width:83.3333%;}
.xxl-11, .grid .xxl-11.center {width:91.6666%;}
.xxl-12, .grid .xxl-12.center {width:100%;}
.grid .xxl-1 {grid-column:span 1;}
.grid .xxl-2 {grid-column:span 2;}
.grid .xxl-3 {grid-column:span 3;}
.grid .xxl-4 {grid-column:span 4;}
.grid .xxl-5 {grid-column:span 5;}
.grid .xxl-6 {grid-column:span 6;}
.grid .xxl-7 {grid-column:span 7;}
.grid .xxl-8 {grid-column:span 8;}
.grid .xxl-9 {grid-column:span 9;}
.grid .xxl-10 {grid-column:span 10;}
.grid .xxl-11 {grid-column:span 11;}
.grid .xxl-12 {grid-column:span 12;}
.grid .xxl-row-1 {grid-row:span 1;}
.grid .xxl-row-2 {grid-row:span 2;}
.grid .xxl-row-3 {grid-row:span 3;}
.grid .xxl-row-4 {grid-row:span 4;}
.grid .xxl-row-5 {grid-row:span 5;}
.grid .xxl-row-6 {grid-row:span 6;}
.grid .xxl-row-7 {grid-row:span 7;}
.grid .xxl-row-8 {grid-row:span 8;}
.grid .xxl-row-9 {grid-row:span 9;}
.grid .xxl-row-10 {grid-row:span 10;}
.grid .xxl-row-11 {grid-row:span 11;}
.grid .xxl-row-12 {grid-row:span 12;}

/* --- xxl offsets + order --- */
.xxl-offset-1 {margin-left:8.3333%;}
.xxl-offset-2 {margin-left:16.6666%;}
.xxl-offset-five {margin-left:20%;}
.xxl-offset-3 {margin-left:25%;}
.xxl-offset-4 {margin-left:33.3333%;}
.xxl-offset-5 {margin-left:41.6666%;}
.xxl-offset-6 {margin-left:50%;}
.xxl-offset-7 {margin-left:58.3333%;}
.xxl-offset-8 {margin-left:66.6666%;}
.xxl-offset-9 {margin-left:75%;}
.xxl-offset-10 {margin-left:83.3333%;}
.xxl-offset-11 {margin-left:91.6666%;}
.xxl-offset-12 {margin-left:100%;}
.xxl-order-1 {order:-1;}
.xxl-order-2 {order:2;}
.xxl-order-3 {order:3;}
.xxl-order-4 {order:4;}
.xxl-order-5 {order:5;}
.xxl-order-6 {order:6;}
.xxl-order-7 {order:7;}
.xxl-order-8 {order:8;}
.xxl-order-9 {order:9;}
.xxl-order-10 {order:10;}
.xxl-order-11 {order:11;}
.xxl-order-12 {order:12;}
.xxl-order-last {order:99999999;}

/* ==========================================================================
   9. ALIGNMENT + VISIBILITY HELPERS
   ========================================================================== */
.left  { float: left; }
.right { float: right; }
.center {
  display: block;
  float: none;
  margin: 0 auto;
}
.grid .center {
  grid-column: 1 / -1;
  justify-self: center;
  margin: auto;
}
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

/* Vertically centre a column's contents against its siblings */
.vertical-center {
  align-items: center;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}
.vertical-center > * { width: 100%; }
.text-center .vertical-center,
.vertical-center.text-center { align-items: center; }

/* Flex utilities for one-off alignment without extra markup */
.flex { display: flex; }
.flex-middle { align-items: center; }
.flex-center { justify-content: center; }
.flex-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.flex-gap { gap: var(--bf-gutter2x); }
.flex-fill { flex: 1 1 auto; min-width: 0; }

/* Visibility
   Each .hide-* class hides the element at exactly one tier, matching
   Responsee's behaviour. Expressed as bounded ranges rather than
   hide-then-reset, so nothing ever force-overrides `display` on an element
   that needs its own (e.g. <div class="grid hide-l"> stays a grid).
   .show-* is the inverse: visible only at that tier. */
.hide { display: none !important; }

@media screen and (min-width: 1367px) {
  .hide-xxl { display: none !important; }
}
@media screen and (min-width: 1141px) and (max-width: 1366px) {
  .hide-xl { display: none !important; }
}
@media screen and (min-width: 769px) and (max-width: 1140px) {
  .hide-l { display: none !important; }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
  .hide-m { display: none !important; }
}
@media screen and (max-width: 480px) {
  .hide-s { display: none !important; }
}

@media screen and (max-width: 1366px) {
  .show-xxl { display: none !important; }
}
@media screen and (max-width: 1140px), screen and (min-width: 1367px) {
  .show-xl { display: none !important; }
}
@media screen and (max-width: 768px), screen and (min-width: 1141px) {
  .show-l { display: none !important; }
}
@media screen and (max-width: 480px), screen and (min-width: 769px) {
  .show-m { display: none !important; }
}
@media screen and (min-width: 481px) {
  .show-s { display: none !important; }
}

/* Screen-reader-only; also used to park the nav/tab/accordion inputs */
.sr-only, .nav-toggle, .sub-toggle, .tab-radio, .slide-toggle {
  border: 0 !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}


/* ==========================================================================
   10. TOP NAVIGATION
   Fully CSS-only. Markup:

   <nav class="top-nav s-12 l-9">
     <input type="checkbox" id="nav" class="nav-toggle">
     <label for="nav" class="nav-text" aria-label="Menu"><span></span></label>
     <ul class="right chevron">
       <li><a href="/">Home</a></li>
       <li class="submenu">
         <input type="checkbox" id="sub-1" class="sub-toggle">
         <label for="sub-1" class="sub-label">Services</label>
         <ul>
           <li><a href="/services/vinyl/">Vinyl</a></li>
         </ul>
       </li>
     </ul>
     <label for="nav" class="nav-backdrop"></label>
   </nav>

   On desktop the submenu opens on hover/focus (the .sub-label is inert).
   At <= 768px the nav becomes a full-screen panel driven by .nav-toggle,
   and .sub-toggle expands each submenu inline.
   ========================================================================== */
nav {
  background: var(--bf-dark);
  display: block;
  width: 100%;
}
nav.transparent-nav { background: none; }

.top-nav ul { padding: 0; }
.top-nav li {
  cursor: pointer;
  float: left;
  list-style: none outside none;
  position: relative;
}
.top-nav li a,
.top-nav li .sub-label {
  color: var(--bf-text-invert);
  display: block;
  font-size: 1rem;
  padding: 1.25rem;
  transition: background var(--bf-transition) 0s;
}
.top-nav li .sub-label { cursor: pointer; }
.top-nav li a:hover,
.top-nav li .sub-label:hover { background: var(--bf-dark-mid); }
.top-nav .active-item > a { background: var(--bf-dark-mid); }

/* Submenus */
.top-nav ul ul {
  background: var(--bf-dark);
  display: none;
  left: 0;
  min-width: 100%;
  position: absolute;
  top: 100%;
  z-index: 10;
}
.top-nav li ul li,
.top-nav li ul li ul li {
  float: none;
  min-width: 100%;
  padding: 0;
}
.top-nav li ul li a {
  background: var(--bf-dark);
  min-width: 100%;
  padding: 0.625rem 1.25rem;
  white-space: nowrap;
}
.top-nav li ul li a:hover { background: var(--bf-dark-mid); }

/* Chevron markers, drawn with borders - no icon font */
.chevron .submenu > a::after,
.chevron .submenu > .sub-label::after,
.chevron .sub-submenu > a::after,
.chevron .sub-submenu > .sub-label::after,
.chevron .aside-submenu > a::after,
.chevron .aside-submenu > .sub-label::after,
.chevron .aside-sub-submenu > a::after,
.chevron .aside-sub-submenu > .sub-label::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  display: inline-block;
  height: 0.4em;
  margin: -0.2em 0 0 0.55em;
  transform: rotate(45deg);
  transition: transform var(--bf-transition) 0s;
  vertical-align: middle;
  width: 0.4em;
}

/* Count badge - set manually, e.g. <span class="count-number">4</span> */
.count-number {
  background: var(--bf-overlay-light);
  border-radius: 10rem;
  color: var(--bf-text-invert);
  display: inline-block;
  font-size: 0.7rem;
  height: 1.3rem;
  line-height: 1.3rem;
  margin: 0 0 -0.3125rem 0.3125rem;
  text-align: center;
  width: 1.3rem;
}
.chevron .count-number { display: none; }

.nav-text, .nav-backdrop, .aside-nav-text { display: none; }

/* Hamburger bars */
.nav-text::before,
.nav-text::after,
.nav-text span {
  background-color: var(--bf-text-invert);
  border-radius: 3px;
  content: "";
  display: block;
  height: 3px;
  margin: 6px auto;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  width: 30px;
}
.nav-toggle:checked ~ .nav-text::before {
  transform: translateY(9px) rotate(135deg);
}
.nav-toggle:checked ~ .nav-text::after {
  transform: translateY(-9px) rotate(-135deg);
}
.nav-toggle:checked ~ .nav-text span {
  opacity: 0;
  transform: scale(0);
}

@media screen and (min-width: 769px) {
  /* Desktop: hover/focus opens the dropdown */
  .top-nav li:hover > ul,
  .top-nav li:focus-within > ul,
  .top-nav .sub-toggle:checked ~ ul {
    display: block;
  }
  /* Third level flies out to the side */
  .top-nav li ul li:hover > ul,
  .top-nav li ul li:focus-within > ul,
  .top-nav li ul .sub-toggle:checked ~ ul {
    left: 100%;
    top: 0;
  }
  .aside-nav .count-number {
    float: right;
    margin-left: -1.25rem;
  }
}

/* ==========================================================================
   11. ASIDE NAVIGATION
   Same submenu pattern, driven by .sub-toggle at every width.
   ========================================================================== */
.aside-nav ul {
  background: var(--bf-surface-sunken);
  padding: 0;
}
.aside-nav li {
  cursor: pointer;
  list-style: none outside none;
}
.aside-nav li a,
.aside-nav li .sub-label {
  color: var(--bf-text);
  display: block;
  font-size: 1rem;
  padding: 1.25rem;
  transition: background var(--bf-transition) 0s;
}
.aside-nav li .sub-label { cursor: pointer; }
.aside-nav li a:hover,
.aside-nav li .sub-label:hover {
  background: var(--bf-dark-mid);
  color: var(--bf-text-invert);
}
.aside-nav > ul > li.active-item > a {
  background: var(--bf-dark-mid);
  color: var(--bf-text-invert);
}
.aside-nav > ul > li:last-child a { border-bottom: 0 none; }

/* Collapsed by default. max-height (not the grid-template-rows:0fr trick)
   because a <ul> has many <li> children - 0fr only sizes the first row
   track, so later items would sit in implicit auto rows and never collapse.
   --bf-collapse-max just needs to exceed the tallest submenu. */
.aside-nav li > ul {
  background: var(--bf-surface-alt);
  border-left: 1px solid var(--bf-border-light);
  border-right: 1px solid var(--bf-border-light);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-in-out;
}
.aside-nav li ul ul {
  background: var(--bf-surface);
  border: 0;
}
.aside-nav ul ul a { padding: 0.625rem 1.25rem; }
.aside-nav .sub-toggle:checked ~ ul,
.aside-nav .show-aside-ul,
.aside-nav .active-aside-item {
  max-height: var(--bf-collapse-max);
}
.aside-nav .sub-toggle:checked ~ .sub-label::after {
  transform: rotate(225deg) translate(-0.15em, -0.15em);
}
.aside-nav li li a:hover,
.aside-nav li li.active-item > a {
  background: var(--bf-dark-mid);
  color: var(--bf-text-invert);
}

/* ==========================================================================
   12. SLIDE NAVIGATION
   <body class="slide-wrap">
     <input type="checkbox" id="slide" class="slide-toggle">
     <div class="slide-content">...</div>
     <label for="slide" class="slide-nav-button"><span class="nav-icon"><span></span></span></label>
     <nav class="aside-nav slide-nav">...</nav>
   </body>
   ========================================================================== */
.slide-content, .slide-nav {
  transition: margin 0.2s linear 0s;
}
.slide-content {
  float: left;
  width: calc(100% - var(--bf-nav-height));
}
.aside-nav.slide-nav {
  background: var(--bf-dark-mid);
  bottom: 0;
  margin-right: -180px;
  overflow-y: auto;
  padding-top: 0.625rem;
  position: fixed;
  right: 0;
  top: 0;
  width: 240px;
  z-index: 2;
}
.aside-nav.slide-nav > ul {
  background: var(--bf-dark-mid);
  opacity: 0;
  transition: opacity var(--bf-transition) 0s;
}
.aside-nav.slide-nav li a,
.aside-nav.slide-nav li .sub-label {
  border-bottom: 0;
  color: var(--bf-text-invert);
  font-size: 0.9rem;
  padding: 0.625rem 1.25rem;
}
.aside-nav.slide-nav li a:hover,
.aside-nav.slide-nav li .sub-label:hover {
  background: var(--bf-dark) !important;
  color: var(--bf-text-invert) !important;
}
.aside-nav.slide-nav li > ul {
  background: var(--bf-dark-light);
  border-left: 0;
  border-right: 0;
}
.aside-nav.slide-nav li > ul ul {
  background: var(--bf-dark-light);
  border-left: 0;
  border-right: 0;
}
.slide-nav-button {
  background: var(--bf-dark);
  bottom: 0;
  cursor: pointer;
  position: fixed;
  right: 0;
  top: 0;
  width: var(--bf-nav-height);
  z-index: 3;
}
.slide-toggle:checked ~ .slide-content { margin-left: -240px; }
.slide-toggle:checked ~ .slide-nav { margin-right: var(--bf-nav-height); }
.slide-toggle:checked ~ .slide-nav > ul { opacity: 1; }

.slide-to-left .slide-content { float: right; }
.slide-to-left .slide-nav {
  left: 0;
  margin-left: -180px;
  margin-right: 0;
}
.slide-to-left .slide-nav-button { left: 0; right: auto; }
.slide-to-left .slide-toggle:checked ~ .slide-content {
  margin-left: 0;
  margin-right: -240px;
}
.slide-to-left .slide-toggle:checked ~ .slide-nav {
  margin-left: var(--bf-nav-height);
  margin-right: 0;
}

.nav-icon {
  display: block;
  padding: 0.9rem;
  width: 100%;
}
.nav-icon::before,
.nav-icon::after,
.nav-icon span {
  background-color: var(--bf-text-invert);
  border-radius: 3px;
  content: "";
  display: block;
  height: 3px;
  margin: 6px 0;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.slide-toggle:checked ~ .slide-nav-button .nav-icon::before {
  transform: translateY(9px) rotate(135deg);
}
.slide-toggle:checked ~ .slide-nav-button .nav-icon::after {
  transform: translateY(-9px) rotate(-135deg);
}
.slide-toggle:checked ~ .slide-nav-button .nav-icon span {
  opacity: 0;
  transform: scale(0);
}

/* ==========================================================================
   13. BREADCRUMB NAVIGATION
   ========================================================================== */
nav.breadcrumb-nav {
  background: none;
  margin: 0.625rem 0;
}
nav.breadcrumb-nav ul {
  list-style: none;
  padding: 0;
}
nav.breadcrumb-nav ul li {
  float: left;
  font-size: 0.8rem;
}
nav.breadcrumb-nav ul li a:hover { text-decoration: underline; }
nav.breadcrumb-nav ul li::after {
  color: var(--bf-text-muted);
  content: "/";
  margin: 0 9px;
}
nav.breadcrumb-nav ul li:last-child::after { content: ""; }
nav.breadcrumb-nav ul li:last-child { color: var(--bf-text-muted); }

/* --------------------------------------------------------------------------
   Legacy state-class aliases
   Responsee toggled these with jQuery. The :checked selectors above are the
   supported route, but these still work if you set a class in markup
   server-side (e.g. marking the current section open on page load).
   -------------------------------------------------------------------------- */
.active-slide-nav .slide-content { margin-left: -240px; }
.active-slide-nav .slide-nav { margin-right: var(--bf-nav-height); }
.active-slide-nav .slide-nav > ul { opacity: 1; }
.slide-to-left.active-slide-nav .slide-content {
  margin-left: 0;
  margin-right: -240px;
}
.slide-to-left.active-slide-nav .slide-nav {
  margin-left: var(--bf-nav-height);
  margin-right: 0;
}
.active-slide-nav .slide-nav-button .nav-icon::before {
  transform: translateY(9px) rotate(135deg);
}
.active-slide-nav .slide-nav-button .nav-icon::after {
  transform: translateY(-9px) rotate(-135deg);
}
.active-slide-nav .slide-nav-button .nav-icon span {
  opacity: 0;
  transform: scale(0);
}

@media screen and (min-width: 769px) {
  .top-nav ul li > ul.show-ul { display: block; }
}


/* ==========================================================================
   14. BREAKPOINT CASCADE
   ========================================================================== */
@media screen and (max-width: 1366px) {
  .size-960, .size-1140, .size-1280, .size-1520 { max-width: 1366px; }
  .xxl-offset-1,.xxl-offset-2,.xxl-offset-five,.xxl-offset-3,.xxl-offset-4,.xxl-offset-5,.xxl-offset-6,.xxl-offset-7,.xxl-offset-8,.xxl-offset-9,.xxl-offset-10,.xxl-offset-11,.xxl-offset-12 {margin-left:0;}
  .xl-offset-1 {margin-left:8.3333%;}
  .xl-offset-2 {margin-left:16.6666%;}
  .xl-offset-five {margin-left:20%;}
  .xl-offset-3 {margin-left:25%;}
  .xl-offset-4 {margin-left:33.3333%;}
  .xl-offset-5 {margin-left:41.6666%;}
  .xl-offset-6 {margin-left:50%;}
  .xl-offset-7 {margin-left:58.3333%;}
  .xl-offset-8 {margin-left:66.6666%;}
  .xl-offset-9 {margin-left:75%;}
  .xl-offset-10 {margin-left:83.3333%;}
  .xl-offset-11 {margin-left:91.6666%;}
  .xl-offset-12 {margin-left:100%;}
  .xxl-order-1,.xxl-order-2,.xxl-order-3,.xxl-order-4,.xxl-order-5,.xxl-order-6,.xxl-order-7,.xxl-order-8,.xxl-order-9,.xxl-order-10,.xxl-order-11,.xxl-order-12,.xxl-order-last {order:initial;}
  .xl-order-1 {order:-1;}
  .xl-order-2 {order:2;}
  .xl-order-3 {order:3;}
  .xl-order-4 {order:4;}
  .xl-order-5 {order:5;}
  .xl-order-6 {order:6;}
  .xl-order-7 {order:7;}
  .xl-order-8 {order:8;}
  .xl-order-9 {order:9;}
  .xl-order-10 {order:10;}
  .xl-order-11 {order:11;}
  .xl-order-12 {order:12;}
  .xl-order-last {order:99999999;}
  .xl-1, .grid .xl-1.center {width:8.3333%;}
  .xl-2, .grid .xl-2.center {width:16.6666%;}
  .xl-five {width:20%;}
  .xl-3, .grid .xl-3.center {width:25%;}
  .xl-4, .grid .xl-4.center {width:33.3333%;}
  .xl-5, .grid .xl-5.center {width:41.6666%;}
  .xl-6, .grid .xl-6.center {width:50%;}
  .xl-7, .grid .xl-7.center {width:58.3333%;}
  .xl-8, .grid .xl-8.center {width:66.6666%;}
  .xl-9, .grid .xl-9.center {width:75%;}
  .xl-10, .grid .xl-10.center {width:83.3333%;}
  .xl-11, .grid .xl-11.center {width:91.6666%;}
  .xl-12, .grid .xl-12.center {width:100%;}
  .grid .xl-1 {grid-column:span 1;}
  .grid .xl-2 {grid-column:span 2;}
  .grid .xl-3 {grid-column:span 3;}
  .grid .xl-4 {grid-column:span 4;}
  .grid .xl-5 {grid-column:span 5;}
  .grid .xl-6 {grid-column:span 6;}
  .grid .xl-7 {grid-column:span 7;}
  .grid .xl-8 {grid-column:span 8;}
  .grid .xl-9 {grid-column:span 9;}
  .grid .xl-10 {grid-column:span 10;}
  .grid .xl-11 {grid-column:span 11;}
  .grid .xl-12 {grid-column:span 12;}
  .grid .xl-row-1 {grid-row:span 1;}
  .grid .xl-row-2 {grid-row:span 2;}
  .grid .xl-row-3 {grid-row:span 3;}
  .grid .xl-row-4 {grid-row:span 4;}
  .grid .xl-row-5 {grid-row:span 5;}
  .grid .xl-row-6 {grid-row:span 6;}
  .grid .xl-row-7 {grid-row:span 7;}
  .grid .xl-row-8 {grid-row:span 8;}
  .grid .xl-row-9 {grid-row:span 9;}
  .grid .xl-row-10 {grid-row:span 10;}
  .grid .xl-row-11 {grid-row:span 11;}
  .grid .xl-row-12 {grid-row:span 12;}
}

@media screen and (max-width: 1140px) {
  .size-960, .size-1140, .size-1280, .size-1520 { max-width: 1140px; }
  .xxl-offset-1,.xxl-offset-2,.xxl-offset-five,.xxl-offset-3,.xxl-offset-4,.xxl-offset-5,.xxl-offset-6,.xxl-offset-7,.xxl-offset-8,.xxl-offset-9,.xxl-offset-10,.xxl-offset-11,.xxl-offset-12 {margin-left:0;}
  .xl-offset-1,.xl-offset-2,.xl-offset-five,.xl-offset-3,.xl-offset-4,.xl-offset-5,.xl-offset-6,.xl-offset-7,.xl-offset-8,.xl-offset-9,.xl-offset-10,.xl-offset-11,.xl-offset-12 {margin-left:0;}
  .l-offset-1 {margin-left:8.3333%;}
  .l-offset-2 {margin-left:16.6666%;}
  .l-offset-five {margin-left:20%;}
  .l-offset-3 {margin-left:25%;}
  .l-offset-4 {margin-left:33.3333%;}
  .l-offset-5 {margin-left:41.6666%;}
  .l-offset-6 {margin-left:50%;}
  .l-offset-7 {margin-left:58.3333%;}
  .l-offset-8 {margin-left:66.6666%;}
  .l-offset-9 {margin-left:75%;}
  .l-offset-10 {margin-left:83.3333%;}
  .l-offset-11 {margin-left:91.6666%;}
  .l-offset-12 {margin-left:100%;}
  .xl-order-1,.xl-order-2,.xl-order-3,.xl-order-4,.xl-order-5,.xl-order-6,.xl-order-7,.xl-order-8,.xl-order-9,.xl-order-10,.xl-order-11,.xl-order-12,.xl-order-last {order:initial;}
  .l-order-1 {order:-1;}
  .l-order-2 {order:2;}
  .l-order-3 {order:3;}
  .l-order-4 {order:4;}
  .l-order-5 {order:5;}
  .l-order-6 {order:6;}
  .l-order-7 {order:7;}
  .l-order-8 {order:8;}
  .l-order-9 {order:9;}
  .l-order-10 {order:10;}
  .l-order-11 {order:11;}
  .l-order-12 {order:12;}
  .l-order-last {order:99999999;}
  .l-1, .grid .l-1.center {width:8.3333%;}
  .l-2, .grid .l-2.center {width:16.6666%;}
  .l-five {width:20%;}
  .l-3, .grid .l-3.center {width:25%;}
  .l-4, .grid .l-4.center {width:33.3333%;}
  .l-5, .grid .l-5.center {width:41.6666%;}
  .l-6, .grid .l-6.center {width:50%;}
  .l-7, .grid .l-7.center {width:58.3333%;}
  .l-8, .grid .l-8.center {width:66.6666%;}
  .l-9, .grid .l-9.center {width:75%;}
  .l-10, .grid .l-10.center {width:83.3333%;}
  .l-11, .grid .l-11.center {width:91.6666%;}
  .l-12, .grid .l-12.center {width:100%;}
  .grid .l-1 {grid-column:span 1;}
  .grid .l-2 {grid-column:span 2;}
  .grid .l-3 {grid-column:span 3;}
  .grid .l-4 {grid-column:span 4;}
  .grid .l-5 {grid-column:span 5;}
  .grid .l-6 {grid-column:span 6;}
  .grid .l-7 {grid-column:span 7;}
  .grid .l-8 {grid-column:span 8;}
  .grid .l-9 {grid-column:span 9;}
  .grid .l-10 {grid-column:span 10;}
  .grid .l-11 {grid-column:span 11;}
  .grid .l-12 {grid-column:span 12;}
  .grid .l-row-1 {grid-row:span 1;}
  .grid .l-row-2 {grid-row:span 2;}
  .grid .l-row-3 {grid-row:span 3;}
  .grid .l-row-4 {grid-row:span 4;}
  .grid .l-row-5 {grid-row:span 5;}
  .grid .l-row-6 {grid-row:span 6;}
  .grid .l-row-7 {grid-row:span 7;}
  .grid .l-row-8 {grid-row:span 8;}
  .grid .l-row-9 {grid-row:span 9;}
  .grid .l-row-10 {grid-row:span 10;}
  .grid .l-row-11 {grid-row:span 11;}
  .grid .l-row-12 {grid-row:span 12;}
}

@media screen and (max-width: 768px) {
  .size-960, .size-1140, .size-1280, .size-1520 { max-width: 768px; }

  /* --- Mobile top navigation: full-screen panel --- */
  nav {
    cursor: pointer;
    display: block;
  }
  /* The <ul> itself becomes the sliding panel */
  .top-nav > ul {
    background: var(--bf-dark-mid);
    bottom: 0;
    left: -100%;
    overflow-y: auto;
    padding-top: var(--bf-nav-height);
    position: fixed;
    top: 0;
    transition: left var(--bf-transition) 0s;
    width: 100%;
    z-index: 100;
  }
  .top-nav > .nav-toggle:checked ~ ul { left: 0; }
  .top-nav li {
    float: none;
    padding: 0;
    position: static;
  }
  .top-nav li a,
  .top-nav li .sub-label {
    background: var(--bf-dark-mid);
    color: var(--bf-text-invert);
    display: block;
    padding: 1.25rem 0.625rem;
    text-align: center;
    text-decoration: none;
  }
  .top-nav li a:hover,
  .top-nav li .sub-label:hover {
    background: var(--bf-dark);
    color: var(--bf-text-invert);
  }
  /* Submenus expand inline rather than flying out */
  .top-nav ul ul {
    display: block;
    left: 0;
    max-height: 0;
    overflow: hidden;
    position: relative;
    right: 0;
    top: 0;
    transition: max-height 0.25s ease-in-out;
  }
  .top-nav .sub-toggle:checked ~ ul,
  .top-nav ul ul.show-ul { max-height: var(--bf-collapse-max); }
  .top-nav > ul.show-menu { left: 0; }
  .top-nav .sub-toggle:checked ~ .sub-label::after {
    transform: rotate(225deg) translate(-0.15em, -0.15em);
  }
  .top-nav li ul li a {
    background: var(--bf-dark-light);
    min-width: 100%;
    padding: 0.625rem;
    white-space: normal;
  }
  .top-nav li ul li ul li a { background: var(--bf-dark-light); }
  .chevron .count-number { display: inline-block; }

  /* Hamburger button, pinned top-left */
  .nav-text {
    background: var(--bf-dark-mid);
    color: var(--bf-text-invert);
    cursor: pointer;
    display: block;
    height: var(--bf-nav-height);
    left: 0;
    line-height: var(--bf-nav-height);
    padding-top: 15px;
    position: fixed;
    text-align: center;
    top: 0;
    width: var(--bf-nav-height);
    z-index: 110;
  }
  /* Tap-outside-to-close */
  .nav-backdrop {
    background: var(--bf-scrim-soft);
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99;
  }
  .nav-toggle:checked ~ .nav-backdrop { display: block; }

  /* Right-hand variant */
  .mobile-nav-right .top-nav > ul { left: 100%; }
  .mobile-nav-right .top-nav > .nav-toggle:checked ~ ul { left: 0; }
  .mobile-nav-right .nav-text {
    left: auto;
    right: 0;
  }

  .grid.margin2x { grid-column-gap: 20px; }
  .xxl-offset-1,.xxl-offset-2,.xxl-offset-five,.xxl-offset-3,.xxl-offset-4,.xxl-offset-5,.xxl-offset-6,.xxl-offset-7,.xxl-offset-8,.xxl-offset-9,.xxl-offset-10,.xxl-offset-11,.xxl-offset-12 {margin-left:0;}
  .xl-offset-1,.xl-offset-2,.xl-offset-five,.xl-offset-3,.xl-offset-4,.xl-offset-5,.xl-offset-6,.xl-offset-7,.xl-offset-8,.xl-offset-9,.xl-offset-10,.xl-offset-11,.xl-offset-12 {margin-left:0;}
  .l-offset-1,.l-offset-2,.l-offset-five,.l-offset-3,.l-offset-4,.l-offset-5,.l-offset-6,.l-offset-7,.l-offset-8,.l-offset-9,.l-offset-10,.l-offset-11,.l-offset-12 {margin-left:0;}
  .m-offset-1 {margin-left:8.3333%;}
  .m-offset-2 {margin-left:16.6666%;}
  .m-offset-five {margin-left:20%;}
  .m-offset-3 {margin-left:25%;}
  .m-offset-4 {margin-left:33.3333%;}
  .m-offset-5 {margin-left:41.6666%;}
  .m-offset-6 {margin-left:50%;}
  .m-offset-7 {margin-left:58.3333%;}
  .m-offset-8 {margin-left:66.6666%;}
  .m-offset-9 {margin-left:75%;}
  .m-offset-10 {margin-left:83.3333%;}
  .m-offset-11 {margin-left:91.6666%;}
  .m-offset-12 {margin-left:100%;}
  .l-order-1,.l-order-2,.l-order-3,.l-order-4,.l-order-5,.l-order-6,.l-order-7,.l-order-8,.l-order-9,.l-order-10,.l-order-11,.l-order-12,.l-order-last {order:initial;}
  .m-order-1 {order:-1;}
  .m-order-2 {order:2;}
  .m-order-3 {order:3;}
  .m-order-4 {order:4;}
  .m-order-5 {order:5;}
  .m-order-6 {order:6;}
  .m-order-7 {order:7;}
  .m-order-8 {order:8;}
  .m-order-9 {order:9;}
  .m-order-10 {order:10;}
  .m-order-11 {order:11;}
  .m-order-12 {order:12;}
  .m-order-last {order:99999999;}
  .m-1, .grid .m-1.center {width:8.3333%;}
  .m-2, .grid .m-2.center {width:16.6666%;}
  .m-five {width:20%;}
  .m-3, .grid .m-3.center {width:25%;}
  .m-4, .grid .m-4.center {width:33.3333%;}
  .m-5, .grid .m-5.center {width:41.6666%;}
  .m-6, .grid .m-6.center {width:50%;}
  .m-7, .grid .m-7.center {width:58.3333%;}
  .m-8, .grid .m-8.center {width:66.6666%;}
  .m-9, .grid .m-9.center {width:75%;}
  .m-10, .grid .m-10.center {width:83.3333%;}
  .m-11, .grid .m-11.center {width:91.6666%;}
  .m-12, .grid .m-12.center {width:100%;}
  .grid .m-1 {grid-column:span 1;}
  .grid .m-2 {grid-column:span 2;}
  .grid .m-3 {grid-column:span 3;}
  .grid .m-4 {grid-column:span 4;}
  .grid .m-5 {grid-column:span 5;}
  .grid .m-6 {grid-column:span 6;}
  .grid .m-7 {grid-column:span 7;}
  .grid .m-8 {grid-column:span 8;}
  .grid .m-9 {grid-column:span 9;}
  .grid .m-10 {grid-column:span 10;}
  .grid .m-11 {grid-column:span 11;}
  .grid .m-12 {grid-column:span 12;}
  .grid .m-row-1 {grid-row:span 1;}
  .grid .m-row-2 {grid-row:span 2;}
  .grid .m-row-3 {grid-row:span 3;}
  .grid .m-row-4 {grid-row:span 4;}
  .grid .m-row-5 {grid-row:span 5;}
  .grid .m-row-6 {grid-row:span 6;}
  .grid .m-row-7 {grid-row:span 7;}
  .grid .m-row-8 {grid-row:span 8;}
  .grid .m-row-9 {grid-row:span 9;}
  .grid .m-row-10 {grid-row:span 10;}
  .grid .m-row-11 {grid-row:span 11;}
  .grid .m-row-12 {grid-row:span 12;}
}

@media screen and (max-width: 480px) {
  .size-960, .size-1140, .size-1280, .size-1520 { max-width: 480px; }

  .aside-nav li a { text-align: center; }
  .count-number { margin-right: -1.25rem; }
  /* Collapsible aside nav heading on the smallest screens */
  .minimize-on-small .aside-nav-text {
    background: var(--bf-dark);
    color: var(--bf-text-invert);
    cursor: pointer;
    display: block;
    font-size: 1.2rem;
    line-height: 3;
    max-width: 100%;
    padding-right: 0.625rem;
    text-align: center;
  }
  .aside-nav-text::after {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    display: inline-block;
    height: 0.4em;
    margin: -0.3em 0 0 0.55em;
    transform: rotate(45deg);
    vertical-align: middle;
    width: 0.4em;
  }
  .aside-nav.minimize-on-small > ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-in-out;
  }
  .nav-toggle:checked ~ .aside-nav.minimize-on-small > ul,
  .aside-nav.minimize-on-small > ul.show-menu {
    max-height: var(--bf-collapse-max);
  }

  .xxl-offset-1,.xxl-offset-2,.xxl-offset-five,.xxl-offset-3,.xxl-offset-4,.xxl-offset-5,.xxl-offset-6,.xxl-offset-7,.xxl-offset-8,.xxl-offset-9,.xxl-offset-10,.xxl-offset-11,.xxl-offset-12 {margin-left:0;}
  .xl-offset-1,.xl-offset-2,.xl-offset-five,.xl-offset-3,.xl-offset-4,.xl-offset-5,.xl-offset-6,.xl-offset-7,.xl-offset-8,.xl-offset-9,.xl-offset-10,.xl-offset-11,.xl-offset-12 {margin-left:0;}
  .l-offset-1,.l-offset-2,.l-offset-five,.l-offset-3,.l-offset-4,.l-offset-5,.l-offset-6,.l-offset-7,.l-offset-8,.l-offset-9,.l-offset-10,.l-offset-11,.l-offset-12 {margin-left:0;}
  .m-offset-1,.m-offset-2,.m-offset-five,.m-offset-3,.m-offset-4,.m-offset-5,.m-offset-6,.m-offset-7,.m-offset-8,.m-offset-9,.m-offset-10,.m-offset-11,.m-offset-12 {margin-left:0;}
  .s-offset-1 {margin-left:8.3333%;}
  .s-offset-2 {margin-left:16.6666%;}
  .s-offset-five {margin-left:20%;}
  .s-offset-3 {margin-left:25%;}
  .s-offset-4 {margin-left:33.3333%;}
  .s-offset-5 {margin-left:41.6666%;}
  .s-offset-6 {margin-left:50%;}
  .s-offset-7 {margin-left:58.3333%;}
  .s-offset-8 {margin-left:66.6666%;}
  .s-offset-9 {margin-left:75%;}
  .s-offset-10 {margin-left:83.3333%;}
  .s-offset-11 {margin-left:91.6666%;}
  .s-offset-12 {margin-left:100%;}
  .m-order-1,.m-order-2,.m-order-3,.m-order-4,.m-order-5,.m-order-6,.m-order-7,.m-order-8,.m-order-9,.m-order-10,.m-order-11,.m-order-12,.m-order-last {order:initial;}
  .s-order-1 {order:-1;}
  .s-order-2 {order:2;}
  .s-order-3 {order:3;}
  .s-order-4 {order:4;}
  .s-order-5 {order:5;}
  .s-order-6 {order:6;}
  .s-order-7 {order:7;}
  .s-order-8 {order:8;}
  .s-order-9 {order:9;}
  .s-order-10 {order:10;}
  .s-order-11 {order:11;}
  .s-order-12 {order:12;}
  .s-order-last {order:99999999;}
  .s-1, .grid .s-1.center {width:8.3333%;}
  .s-2, .grid .s-2.center {width:16.6666%;}
  .s-five {width:20%;}
  .s-3, .grid .s-3.center {width:25%;}
  .s-4, .grid .s-4.center {width:33.3333%;}
  .s-5, .grid .s-5.center {width:41.6666%;}
  .s-6, .grid .s-6.center {width:50%;}
  .s-7, .grid .s-7.center {width:58.3333%;}
  .s-8, .grid .s-8.center {width:66.6666%;}
  .s-9, .grid .s-9.center {width:75%;}
  .s-10, .grid .s-10.center {width:83.3333%;}
  .s-11, .grid .s-11.center {width:91.6666%;}
  .s-12, .grid .s-12.center {width:100%;}
  .grid .s-1 {grid-column:span 1;}
  .grid .s-2 {grid-column:span 2;}
  .grid .s-3 {grid-column:span 3;}
  .grid .s-4 {grid-column:span 4;}
  .grid .s-5 {grid-column:span 5;}
  .grid .s-6 {grid-column:span 6;}
  .grid .s-7 {grid-column:span 7;}
  .grid .s-8 {grid-column:span 8;}
  .grid .s-9 {grid-column:span 9;}
  .grid .s-10 {grid-column:span 10;}
  .grid .s-11 {grid-column:span 11;}
  .grid .s-12 {grid-column:span 12;}
  .grid .s-row-1 {grid-row:span 1;}
  .grid .s-row-2 {grid-row:span 2;}
  .grid .s-row-3 {grid-row:span 3;}
  .grid .s-row-4 {grid-row:span 4;}
  .grid .s-row-5 {grid-row:span 5;}
  .grid .s-row-6 {grid-row:span 6;}
  .grid .s-row-7 {grid-row:span 7;}
  .grid .s-row-8 {grid-row:span 8;}
  .grid .s-row-9 {grid-row:span 9;}
  .grid .s-row-10 {grid-row:span 10;}
  .grid .s-row-11 {grid-row:span 11;}
  .grid .s-row-12 {grid-row:span 12;}
}

/* ==========================================================================
   15. GRID NORMALISATION
   Inside a .grid the float widths must yield to grid spans. This has to be
   the last rule in the file so it outranks every tier declared above.
   ========================================================================== */
.grid .s-1,
.grid .s-2,
.grid .s-five,
.grid .s-3,
.grid .s-4,
.grid .s-5,
.grid .s-6,
.grid .s-7,
.grid .s-8,
.grid .s-9,
.grid .s-10,
.grid .s-11,
.grid .s-12,
.grid .m-1,
.grid .m-2,
.grid .m-five,
.grid .m-3,
.grid .m-4,
.grid .m-5,
.grid .m-6,
.grid .m-7,
.grid .m-8,
.grid .m-9,
.grid .m-10,
.grid .m-11,
.grid .m-12,
.grid .l-1,
.grid .l-2,
.grid .l-five,
.grid .l-3,
.grid .l-4,
.grid .l-5,
.grid .l-6,
.grid .l-7,
.grid .l-8,
.grid .l-9,
.grid .l-10,
.grid .l-11,
.grid .l-12,
.grid .xl-1,
.grid .xl-2,
.grid .xl-five,
.grid .xl-3,
.grid .xl-4,
.grid .xl-5,
.grid .xl-6,
.grid .xl-7,
.grid .xl-8,
.grid .xl-9,
.grid .xl-10,
.grid .xl-11,
.grid .xl-12,
.grid .xxl-1,
.grid .xxl-2,
.grid .xxl-five,
.grid .xxl-3,
.grid .xxl-4,
.grid .xxl-5,
.grid .xxl-6,
.grid .xxl-7,
.grid .xxl-8,
.grid .xxl-9,
.grid .xxl-10,
.grid .xxl-11,
.grid .xxl-12 {
  float: none;
  width: auto;
}
.grid .center { float: none; }

#map { z-index: 1; }