/* ==========================================================================
   grid.css — the only parts of Bootstrap 4 this site actually uses.
   ==========================================================================
   Replaces css/vendors/bootstrap.min.css (152KB, render-blocking on every
   page) with the ~2KB of it the markup references: the container, the 12-col
   grid, and a handful of flex/text utilities.

   The values below are Bootstrap 4's own, not approximations — the legacy
   layouts in main.css and blog.css were built against those exact
   breakpoints and gutters, so changing them would shift those pages.

   If a Bootstrap class is ever added to the markup that is not here, it will
   simply do nothing. Add it to this file rather than pulling the framework
   back in.
   ========================================================================== */

/* --- Reboot essentials ---------------------------------------------------
   Bootstrap did not only ship a grid — it shipped Reboot, and the whole site
   was built on top of that baseline. Dropping the framework without these
   would silently change every box measurement and reintroduce the browser's
   default margins on headings, paragraphs and lists.

   These are Bootstrap 4 Reboot's own declarations, limited to the ones layout
   actually depends on. Colour, type and link styling are deliberately left
   out — main.css and new-designs.css own those. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

ol, ul, dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

ol ol, ul ul, ol ul, ul ol {
    margin-bottom: 0;
}

figure {
    margin: 0 0 1rem;
}

img {
    vertical-align: middle;
    border-style: none;
}

svg {
    overflow: hidden;
    vertical-align: middle;
}

table {
    border-collapse: collapse;
}

label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="submit"]:not(:disabled) {
    cursor: pointer;
}

textarea {
    overflow: auto;
    resize: vertical;
}

[hidden] {
    display: none !important;
}

/* --- Container ----------------------------------------------------------- */
.container,
.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

/* --- Grid ---------------------------------------------------------------- */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

/* Anchored, NOT `[class*="col-"]`.
   A bare substring match also catches this site's own BEM modifiers —
   `rp-brandslider__col--2`, `rp-home-hero__col--2`, `rp-home-hero__col--3`,
   `rp-process__col--2` — and hands each of them 15px of padding on both
   sides, which shows up as an unexplained gap between the slider columns.
   `^=` matches a class at the start of the attribute, `*=" col-"` one that
   follows a space; neither can match a modifier that has `col` mid-word. */
.no-gutters > [class^="col-"],
.no-gutters > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
}

[class^="col-"],
[class*=" col-"] {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.col { flex-basis: 0; flex-grow: 1; max-width: 100%; }

/* Widths apply from the md breakpoint up, stacking full-width below it —
   Bootstrap's behaviour for col-md-*. */
@media (min-width: 768px) {
    .col-md-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
    .col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3  { flex: 0 0 25%;        max-width: 25%; }
    .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6  { flex: 0 0 50%;        max-width: 50%; }
    .col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9  { flex: 0 0 75%;        max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100%;       max-width: 100%; }

    .offset-md-1 { margin-left: 8.333333%; }
    .offset-md-2 { margin-left: 16.666667%; }
    .offset-md-3 { margin-left: 25%; }
}

@media (min-width: 992px) {
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-6 { flex: 0 0 50%;        max-width: 50%; }
    .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
}

/* --- Display ------------------------------------------------------------- */
.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }

/* --- Flex ---------------------------------------------------------------- */
.flex-column   { flex-direction: column !important; }
.flex-wrap     { flex-wrap: wrap !important; }
.flex-grow-1   { flex-grow: 1 !important; }

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around  { justify-content: space-around !important; }

.align-items-start    { align-items: flex-start !important; }
.align-items-end      { align-items: flex-end !important; }
.align-items-center   { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch  { align-items: stretch !important; }

.align-self-center { align-self: center !important; }

/* --- Text ---------------------------------------------------------------- */
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

/* --- Screen-reader only --------------------------------------------------
   Used for labels that must exist for assistive tech but not on screen. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}