/**
 * WordPress-side styles.
 *
 * style.css is generated from the static design build and gets overwritten
 * whenever that is regenerated, so anything WordPress needs on top of it
 * lives here instead. Loaded after style.css.
 *
 * Contents:
 *   1. Block Settings tab utilities (spacing + background)
 *   2. Block WYSIWYG wrappers
 *   3. Boats hero variant
 *   4. Logo marquee links
 *   5. Gravity Forms
 *   6. Single post
 *   7. Comments
 *   8. Newsletter form (centred)
 *   9. Card grid hairline seams
 *  10. Search results
 *  11. Hero background video
 *  12. Post cards without an image
 *  13. Cookie consent banner (CookieYes)
 *  14. Legibility
 *  15. FAQs read from the FAQ plugin
 *  16. Site handbook (documentation page)
 *  17. Use-case cards, and the search bar transition
 *   Z. H1 / H2 heading scale (generated — always the last section)
 */

/* ------------------------------------------- 1. Block settings utilities */

.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.p-0 { padding-top: 0 !important; padding-bottom: 0 !important; }

.bg-dark-1 { background-color: #181C21; }
.bg-light-1 { background-color: #F5F4F2; }
.bg-blue-1 { background-color: #4E8CA8; }

.bg-light-1,
.bg-light-1 p,
.bg-light-1 h1,
.bg-light-1 h2,
.bg-light-1 h3 { color: #181C21; }

/* --------------------------------------------- 2. Block WYSIWYG wrappers */
/*
 * The design used a single <p> for these; the blocks wrap editor content in a
 * div so the copy can run to several paragraphs. The trailing paragraph margin
 * would otherwise collapse out and add ~16px to the section.
 */
.customise-lead > p:last-child,
.numbers-text > p:last-child,
.reach-text > p:last-child,
.reads-hero-text > p:last-child,
.contact-text > p:last-child,
.story-text > p:last-child,
.cta-text > p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------- 3. Boats hero variant */
/*
 * The boats hero applies hero-title_single / hero-title_boats,
 * hero-tagline-text_full and hero-btn_wide to every slide in the design.
 */
.hero-area_boats .hero-title { margin-top: 0; }
.hero-area_boats .hero-tagline-text { max-width: 1656px; }
.hero-area_boats .hero-content .hero-btn { min-width: 208px; }

/* -------------------------------------------------- 4. Logo marquee links */
/*
 * .partner-logo is display:block, so the optional wrapping anchor has to be
 * too, or the inline box changes the marquee's measurements.
 */
.partner-link {
    display: block;
    transition: opacity 0.2s ease;
}

.partner-link:hover,
.partner-link:focus-visible { opacity: 0.7; }

/* ------------------------------------------------------ 5. Gravity Forms */
/*
 * Gaps and width mirror .form-grid in the design so the plugin output
 * occupies the same space the static markup did. GF 2.5+ loads its own
 * stylesheet after the theme's, so the properties it controls need
 * !important.
 */
.form-gf .gform_required_legend { display: none; }

.form-gf .gform_fields {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* GF sets these from its own custom properties in a sheet that loads
       after the theme, so they need !important like the rest. */
    column-gap: 21px !important;
    row-gap: 24px !important;
    max-width: 755px;
}

.form-gf .gfield { grid-column: span 12; }
.form-gf .gfield[class*="gfield--width-half"] { grid-column: span 6; }

.form-gf .gfield_label {
    color: #F5F4F2;
    font-family: "Barlow", Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 16px;
}

.form-gf .gfield_required { color: #A0722A; }

.form-gf .ginput_container input[type="text"],
.form-gf .ginput_container input[type="email"],
.form-gf .ginput_container input[type="tel"],
.form-gf .ginput_container input[type="url"],
.form-gf .ginput_container input[type="number"],
.form-gf .ginput_container select,
.form-gf .ginput_container textarea {
    display: block;
    width: 100%;
    height: 64px;
    padding: 0 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: #FFFFFF !important;
    color: #13354C !important;
    font-family: "Barlow", Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* Matches the 125px textarea in the design; GF sizes from the rows
   attribute otherwise and renders more than twice as tall. */
.form-gf .ginput_container textarea {
    height: 125px !important;
    min-height: 125px;
    padding: 20px 24px !important;
    resize: vertical;
}

.form-gf .ginput_container input::placeholder,
.form-gf .ginput_container textarea::placeholder {
    color: rgba(19, 53, 76, 0.32);
    text-transform: uppercase;
}

.form-gf .ginput_container input:focus,
.form-gf .ginput_container select:focus,
.form-gf .ginput_container textarea:focus {
    outline: 2px solid #4E8CA8 !important;
    outline-offset: -2px;
}

.form-gf .ginput_container select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("../img/chevron-select.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 24px center !important;
    background-size: 21px 20px !important;
    padding-right: 60px !important;
    /* Chrome and Edge place a select's text with align-items. The browser
       default is center; Gravity Forms' Orbital reset sets it to normal,
       which drops the text to the top of the box. */
    align-items: center !important;
    /* Orbital also lets the text wrap; a long choice would break onto a
       second line inside the box. */
    white-space: nowrap !important;
}

/*
 * Nothing chosen yet: show "Reason for Contact" in the placeholder colour,
 * like the inputs. The design does this with :invalid, but Gravity Forms
 * marks the select aria-required rather than required, so :invalid never
 * matches — its placeholder option carries .gf_placeholder instead.
 */
.form-gf .ginput_container select:has(> option.gf_placeholder:checked) {
    color: rgba(19, 53, 76, 0.32) !important;
}

/* Keep the open list readable while the closed select is greyed out. */
.form-gf .ginput_container select option {
    color: #13354C;
}

.form-gf .ginput_container select option.gf_placeholder {
    color: rgba(19, 53, 76, 0.32);
}

.form-gf .gform_footer {
    padding: 0;
    margin-top: 24px;
}

.form-gf .gform_footer .gform_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 199px !important;
    width: auto !important;
    height: 72px !important;
    padding: 0 20px !important;
    border: 1px solid #A0722A !important;
    border-radius: 0 !important;
    background-color: #A0722A !important;
    color: #FFFFFF !important;
    font-family: "Barlow", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.04em;
    text-transform: uppercase !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.form-gf .gform_footer .gform_button:hover,
.form-gf .gform_footer .gform_button:focus-visible {
    background-color: #FFFFFF !important;
    color: #A0722A !important;
    box-shadow: inset 0 0 0 1px #A0722A;
}

/* Radios as the design's pill / segmented control. */
.form-gf .gfield_radio { display: flex; flex-wrap: wrap; gap: 12px; }

.form-gf .gfield_radio .gchoice input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.form-gf .gfield_radio .gchoice label {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 24px;
    border: 1px solid #F5F4F2;
    color: #F5F4F2;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.form-gf .gfield_radio .gchoice:has(input:checked) label {
    background-color: #A0722A;
    border-color: #A0722A;
    color: #FFFFFF;
}

.form-gf .gfield_error .ginput_container input,
.form-gf .gfield_error .ginput_container select,
.form-gf .gfield_error .ginput_container textarea {
    outline: 2px solid #C0392B !important;
    outline-offset: -2px;
}

.form-gf .validation_message,
.form-gf .gform_validation_errors {
    margin-top: 8px;
    padding: 8px 12px;
    border: 0 !important;
    border-left: 3px solid #C0392B !important;
    border-radius: 0 !important;
    background: rgba(192, 57, 43, 0.12) !important;
    box-shadow: none !important;
    color: #F5F4F2 !important;
    font-size: 14px;
}

.form-gf .gform_confirmation_message {
    padding: 24px;
    border-left: 3px solid #A0722A;
    background: rgba(160, 114, 42, 0.12);
    color: #F5F4F2;
    font-size: 18px;
}

.form-gf .form-fine {
    color: #F5F4F2;
    font-size: 14px;
    opacity: 0.7;
}

@media (min-width: 992px) {

    .form-gf .ginput_container input[type="text"],
    .form-gf .ginput_container input[type="email"],
    .form-gf .ginput_container input[type="tel"],
    .form-gf .ginput_container select {
        height: 72px;
        padding: 0 40px !important;
    }

    .form-gf .ginput_container textarea { padding: 24px 40px !important; }

    .form-gf .ginput_container select {
        padding-right: 70px !important;
        background-position: right 40px center !important;
    }
}

/* --------------------------------------------------------- 6. Single post */
/*
 * The design has no article page. This uses its own devices: the dark
 * full-bleed CTA band treatment for the hero, the topography shape behind
 * the body, gold eyebrows and rules.
 */
.post-hero {
    position: relative;
    overflow: hidden;
    padding-top: 90px;
    padding-bottom: 70px;
    background-color: #181C21;
    color: #FFFFFF;
    text-align: center;
}

.post-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dim so the headline always clears the photograph behind it. */
.post-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(24, 28, 33, 0.55) 0%, rgba(24, 28, 33, 0.78) 100%);
}

.post-hero > .container { position: relative; z-index: 2; }

.post-hero-mark {
    display: block;
    width: 56px;
    height: auto;
    margin: 0 auto 20px;
}

.post-hero-cat {
    display: inline-block;
    margin-bottom: 14px;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.post-hero-cat:hover,
.post-hero-cat:focus-visible { color: #A0722A; }

.post-hero-title {
    max-width: 900px;
    margin: 0 auto;
    color: #FFFFFF;
    font-family: "FS Industrie Condensed", "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 46px;
    letter-spacing: -0.01em;
}

.post-hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 22px 0 0;
    color: rgba(245, 244, 242, 0.75);
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.post-hero-sep {
    display: block;
    width: 28px;
    height: 1px;
    background-color: #A0722A;
}

/* Body */
.post-body-area {
    position: relative;
    overflow: hidden;
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #F5F4F2;
}

.post-body-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-body-area > .container { position: relative; z-index: 2; }

.post-lead {
    margin: 0 0 28px;
    padding-left: 20px;
    border-left: 3px solid #A0722A;
    color: #181C21;
    font-weight: 500;
    font-size: 21px;
    line-height: 32px;
    letter-spacing: -0.01em;
}

.post-body {
    color: #181C21;
    font-size: 17px;
    line-height: 28px;
}

.post-body > *:first-child { margin-top: 0; }
.post-body > *:last-child { margin-bottom: 0; }
.post-body p { margin: 0 0 20px; }

.post-body h2,
.post-body h3,
.post-body h4 {
    margin: 40px 0 12px;
    color: #181C21;
    font-family: "FS Industrie Condensed", "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.post-body h2 { font-size: 30px; line-height: 36px; }
.post-body h3 { font-size: 24px; line-height: 30px; }
.post-body h4 { font-size: 20px; line-height: 26px; }

.post-body a {
    color: #4E8CA8;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.post-body a:hover,
.post-body a:focus-visible { color: #A0722A; }

.post-body ul,
.post-body ol { margin: 0 0 20px; padding-left: 20px; }
.post-body li { margin-bottom: 8px; }

.post-body blockquote {
    margin: 32px 0;
    padding: 24px 28px;
    border-left: 3px solid #A0722A;
    background-color: #FFFFFF;
    font-family: "FS Industrie Condensed", "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}

.post-body blockquote p:last-child { margin-bottom: 0; }

.post-body img { height: auto; }
.post-body figure { margin: 32px 0; }

.post-body figcaption {
    margin-top: 8px;
    color: #3D3D3D;
    font-size: 14px;
    line-height: 22px;
}

/* Tags */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.post-tags a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid rgba(24, 28, 33, 0.2);
    color: #181C21;
    font-size: 13px;
    line-height: 20px;
    text-transform: uppercase;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.post-tags a:hover,
.post-tags a:focus-visible { border-color: #A0722A; color: #A0722A; }

/* Share */
.post-share {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid rgba(24, 28, 33, 0.14);
}

.post-share-label {
    color: #181C21;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.post-share-list {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-share-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(24, 28, 33, 0.2);
    color: #181C21;
    font-size: 16px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.post-share-list a:hover,
.post-share-list a:focus-visible {
    border-color: #A0722A;
    background-color: #A0722A;
    color: #FFFFFF;
}

/* Previous / next */
.post-nav { background-color: #181C21; }

.post-nav-link {
    display: block;
    height: 100%;
    padding: 34px 30px;
    color: #F5F4F2;
    transition: background-color 0.2s ease;
}

.post-nav-link_next {
    text-align: right;
    border-top: 1px solid rgba(245, 244, 242, 0.14);
}

.post-nav-link:hover,
.post-nav-link:focus-visible { background-color: rgba(245, 244, 242, 0.06); }

.post-nav-label {
    display: block;
    margin-bottom: 8px;
    /* A touch lighter than the brand gold (#A0722A, 4.0:1 here): small text
       on the dark band needs 4.5:1 to stay legible (WCAG AA). */
    color: #B08236;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.post-nav-title {
    display: block;
    font-family: "FS Industrie Condensed", "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
}

@media (min-width: 768px) {
    .post-nav-link_next {
        border-top: 0;
        border-left: 1px solid rgba(245, 244, 242, 0.14);
    }
}

@media (min-width: 992px) {

    .post-hero { padding-top: 140px; padding-bottom: 110px; }
    .post-hero-title { font-size: 64px; line-height: 68px; }
    .post-hero-mark { width: 82px; margin-bottom: 28px; }

    .post-body-area { padding-top: 90px; padding-bottom: 90px; }
    .post-body { font-size: 18px; line-height: 30px; }
    .post-body h2 { font-size: 36px; line-height: 42px; }

    .post-lead { font-size: 24px; line-height: 36px; padding-left: 28px; }

    .post-nav-link { padding: 50px 40px; }
}

/* ------------------------------------------------------------ 7. Comments */
/*
 * The design never shows comments, but WordPress renders the form whenever
 * discussion is open. Turn them off under Settings > Discussion if unwanted.
 */
.post-comments {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #FFFFFF;
    color: #181C21;
}

.post-comments .comments-title,
.post-comments .comment-reply-title {
    margin: 0 0 8px;
    color: #181C21;
    font-family: "FS Industrie Condensed", "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.01em;
}

.post-comments .comment-notes,
.post-comments .comment-form-cookies-consent label {
    color: #3D3D3D;
    font-size: 15px;
    line-height: 24px;
}

.post-comments .comment-form { margin-top: 20px; }
.post-comments .comment-form p { margin: 0 0 16px; }

.post-comments .comment-form label {
    display: block;
    margin-bottom: 6px;
    color: #181C21;
    font-weight: 700;
    font-size: 14px;
    line-height: 22px;
    text-transform: uppercase;
}

.post-comments .comment-form input[type="text"],
.post-comments .comment-form input[type="email"],
.post-comments .comment-form input[type="url"],
.post-comments .comment-form textarea {
    display: block;
    width: 100%;
    height: 64px;
    padding: 0 24px;
    border: 1px solid #D6D6D6;
    border-radius: 0;
    background-color: #FFFFFF;
    color: #13354C;
    font-family: "Barlow", Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.post-comments .comment-form textarea {
    height: 160px;
    padding: 20px 24px;
    resize: vertical;
}

.post-comments .comment-form input:focus,
.post-comments .comment-form textarea:focus {
    outline: 2px solid #4E8CA8;
    outline-offset: -2px;
}

.post-comments .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-comments .comment-form-cookies-consent label {
    margin-bottom: 0;
    font-weight: 400;
    text-transform: none;
}

.post-comments .form-submit .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 199px;
    height: 72px;
    padding: 0 20px;
    border: 1px solid #A0722A;
    border-radius: 0;
    background-color: #A0722A;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.post-comments .form-submit .submit:hover,
.post-comments .form-submit .submit:focus-visible {
    background-color: #FFFFFF;
    color: #A0722A;
}

.post-comments .comment-list {
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.post-comments .comment-list li { margin-bottom: 24px; }

.post-comments .comment-body {
    padding: 24px;
    border: 1px solid #D6D6D6;
}

.post-comments .comment-author .fn { font-weight: 700; font-style: normal; }

.post-comments .comment-metadata,
.post-comments .comment-metadata a { color: #3D3D3D; font-size: 14px; }

/* Archive listing empty state */
.reads-empty { color: #181C21; }

/* ------------------------------------------- 8. Newsletter form (centred) */
/*
 * The newsletter band centres its form and submit button, unlike the contact
 * and policy forms which sit left in their column. Scoped to the band so the
 * others are unaffected:
 *   HTML .form-grid          -> margin: 0 auto within a 1176px column
 *   HTML .newsletter-submit-col -> display:flex; justify-content:center
 *   HTML .newsletter-btn     -> min-width: 248px
 */
.newsletter-area .form-gf .gform_fields {
    margin-left: auto;
    margin-right: auto;
}

/* The design puts the submit inside the form grid, so the gap above it is
   the grid row-gap (24px), not a button margin. */
.newsletter-area .form-gf .gform_footer {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.newsletter-area .form-gf .gform_footer .gform_button {
    min-width: 248px !important;
}


/*
 * The design's <form class="newsletter-form"> carries the gap below the copy.
 * Gravity Forms renders its own form element, so the spacing goes on the
 * wrapper instead. Values from .newsletter-form in style.css.
 */
.newsletter-form-wrap { margin-top: 32px; }

@media (min-width: 768px) {
    .newsletter-form-wrap { margin-top: 60px; }
}


/* ------------------------------------------ 9. Card grid hairline seams */

/*
 * The card grids are three `col-sm-4` columns in a `g-0` row, so each edge
 * lands on a fractional pixel (33.3333% of a fluid container). At some
 * viewport widths — 1536px and 1680px are two — neither neighbour paints the
 * pixel on the boundary and the section's white background shows through as
 * a vertical white line between the cards.
 *
 * Each card covers that pixel itself: the photo is stretched one pixel wider
 * so the seam is filled with image, and a 1px box-shadow in the card colour
 * fills it beside the copy. The last column is excluded so nothing bleeds
 * past the container, and the whole thing only applies once the cards sit
 * side by side — while stacked, the extra pixel would overflow the page.
 */
@media (min-width: 576px) {

    .customise-cards .row.g-0 > [class*="col-"]:not(:last-child) .custom-card {
        box-shadow: 1px 0 0 0 #4E8CA8;
    }

    .customise-cards .row.g-0 > [class*="col-"]:not(:last-child) .custom-card-img {
        width: calc(100% + 1px);
        max-width: none;
    }

    /* .use-card clips its own overflow, so the photo cannot spill; the
       shadow alone covers the seam against the dark card. */
    .use-cases .row.g-0 > [class*="col-"]:not(:last-child) .use-card {
        box-shadow: 1px 0 0 0 #181C21;
    }
}


/* ------------------------------------------------------ 10. Search results */

/*
 * Assembled from the article page's devices so search reads as part of the
 * site: the dark .post-hero with R mark and gold rules, then the light
 * topography band. Results are list rows rather than image cards because
 * most matches are pages, which have no featured image or category.
 */

/* Hero */
.search-hero {
    padding-top: 80px;
    padding-bottom: 88px;
    /* Both the header and this hero are dark topography; the hairline keeps
       them reading as two pieces rather than one tall block. */
    border-top: 1px solid rgba(245, 244, 242, 0.1);
}

.search-hero-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 16px;
    color: rgba(245, 244, 242, 0.75);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* A long query must wrap rather than push the page sideways. */
.search-hero .post-hero-title {
    overflow-wrap: anywhere;
}

.search-hero-count {
    margin: 14px 0 0;
    color: rgba(245, 244, 242, 0.75);
    font-size: 17px;
    line-height: 28px;
}

.search-hero-form {
    margin-top: 36px;
}

/* Search form — every get_search_form() call, see searchform.php */
.search-form {
    display: flex;
    max-width: 620px;
    margin: 0 auto;
}

.search-form-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 56px;
    padding: 0 20px;
    border: 1px solid rgba(24, 28, 33, 0.2);
    border-right: 0;
    border-radius: 0;
    background-color: #FFFFFF;
    color: #181C21;
    font-family: "Barlow", Arial, Helvetica, sans-serif;
    font-size: 17px;
    -webkit-appearance: none;
    appearance: none;
}

.search-form-input::placeholder {
    color: rgba(24, 28, 33, 0.5);
}

.search-form-input:focus {
    outline: 2px solid #A0722A;
    outline-offset: -2px;
}

.search-form-btn {
    flex: 0 0 auto;
    height: 56px;
    padding: 0 28px;
    border: 1px solid #A0722A;
    border-radius: 0;
    background-color: #A0722A;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.search-form-btn:hover,
.search-form-btn:focus-visible {
    background-color: #FFFFFF;
    box-shadow: inset 0 0 0 1px #A0722A;
    color: #A0722A;
}

.search-form-btn:focus-visible {
    outline: 2px solid #A0722A;
    outline-offset: 3px;
}

/* Body band */
.search-results-area {
    position: relative;
    overflow: hidden;
    padding: 70px 0 100px;
    background-color: #F5F4F2;
}

.search-results-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.search-results-area > .container {
    position: relative;
    z-index: 2;
}

/* Result rows */
.search-results-list {
    border-top: 1px solid rgba(24, 28, 33, 0.14);
}

.search-result {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
    padding: 32px 0;
    border-bottom: 1px solid rgba(24, 28, 33, 0.14);
}

.search-result-body {
    flex: 1 1 auto;
    min-width: 0;
}

.search-result-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    color: #A0722A;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.search-result-meta time {
    color: rgba(24, 28, 33, 0.6);
}

.search-result-sep {
    display: block;
    width: 20px;
    height: 1px;
    background-color: #A0722A;
}

.search-result-title {
    margin: 0;
    font-family: "FS Industrie Condensed", "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.01em;
}

.search-result-title a {
    color: #181C21;
    text-decoration: none;
    transition: color 0.2s ease;
}

.search-result:hover .search-result-title a,
.search-result-title a:focus-visible {
    color: #4E8CA8;
}

.search-result-title a:focus-visible {
    outline: 2px solid #A0722A;
    outline-offset: 4px;
}

.search-result-excerpt {
    max-width: 680px;
    margin: 12px 0 0;
    color: rgba(24, 28, 33, 0.78);
    font-size: 17px;
    line-height: 28px;
}

/*
 * Matched terms: a gold marker stroke along the lower half of the text, the
 * site's accent rather than browser yellow. No horizontal padding — matches
 * often fall inside a longer word ("Boat" in "Boats"), and padding would
 * split the word visibly in two.
 */
.search-result mark {
    padding: 0;
    background: linear-gradient(transparent 58%, rgba(160, 114, 42, 0.3) 58%);
    color: inherit;
}

.search-result-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: #4E8CA8;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* The design's arrow is a white SVG; masking it lets it take the text colour. */
.search-result-arrow {
    display: block;
    flex-shrink: 0;
    width: 22px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: url("../img/arrow-right-white.svg") no-repeat center / contain;
    mask: url("../img/arrow-right-white.svg") no-repeat center / contain;
    transition: transform 0.25s ease;
}

.search-result:hover .search-result-arrow {
    transform: translateX(6px);
}

.search-result-media {
    overflow: hidden;
}

.search-result-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.search-result:hover .search-result-img {
    transform: scale(1.05);
}

/* Empty state */
.search-empty {
    padding: 10px 0;
    text-align: center;
}

.search-empty-title {
    margin: 0;
    color: #181C21;
    font-family: "FS Industrie Condensed", "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -0.01em;
}

.search-empty-text {
    max-width: 520px;
    margin: 14px auto 0;
    color: rgba(24, 28, 33, 0.78);
    font-size: 17px;
    line-height: 28px;
}

.search-empty-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.search-empty-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 24px;
    border: 1px solid #181C21;
    color: #181C21;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.search-empty-link:hover,
.search-empty-link:focus-visible {
    background-color: #181C21;
    color: #FFFFFF;
}

.search-empty-link:hover .search-result-arrow {
    transform: translateX(4px);
}

/* Pagination — WordPress's the_posts_pagination(), used here and on archives */
.navigation.pagination {
    margin-top: 56px;
}

.navigation.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(24, 28, 33, 0.2);
    color: #181C21;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.navigation.pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:focus-visible {
    border-color: #181C21;
    background-color: #181C21;
    color: #FFFFFF;
}

.navigation.pagination .page-numbers.current {
    border-color: #A0722A;
    background-color: #A0722A;
    color: #FFFFFF;
}

.navigation.pagination .page-numbers.dots {
    border-color: transparent;
}

@media (min-width: 768px) {

    .search-hero {
        padding-top: 100px;
        padding-bottom: 110px;
    }

    .search-result {
        flex-direction: row;
        align-items: center;
        gap: 48px;
        padding: 40px 0;
    }

    .search-result-media {
        flex: 0 0 240px;
    }

    .search-result-title {
        font-size: 34px;
        line-height: 38px;
    }

    .search-empty-title {
        font-size: 40px;
        line-height: 44px;
    }
}

@media (max-width: 575.98px) {

    /* Stack the form so the button stays a proper tap target. */
    .search-form {
        flex-direction: column;
        gap: 8px;
    }

    .search-form-input {
        border-right: 1px solid rgba(24, 28, 33, 0.2);
    }
}


/* ---------------------------------------------- 11. Hero background video */

/*
 * The video is a layer over the slide image (see hero.php). The image keeps
 * sizing the slide; the video covers it with the same crop. It stays
 * transparent until it is actually playing, so a slow connection, reduced
 * motion or blocked autoplay simply leaves the photo showing. The dim
 * overlay (.hero-slide-media::after) comes later in the box, so it still
 * darkens the video for the headline.
 */
.hero-slide-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom; /* as .hero-slide-img */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.hero-slide-video_center {
    object-position: center center; /* as .hero-slide-img_center */
}

.hero-slide-video.is-playing {
    opacity: 1;
}

/* Pause / play. Above .hero-content, which covers the whole slide. Only shown
   when scripts run — without them the video never starts. */
.hero-video-toggle {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(245, 244, 242, 0.7);
    border-radius: 50%;
    background-color: rgba(24, 28, 33, 0.45);
    color: #F5F4F2;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.js-anim .hero-video-toggle {
    display: flex;
}

/* Pause icon: two bars. */
.hero-video-toggle::before {
    content: "";
    width: 12px;
    height: 14px;
    background:
        linear-gradient(currentColor, currentColor) left / 4px 100% no-repeat,
        linear-gradient(currentColor, currentColor) right / 4px 100% no-repeat;
}

/* Play icon once paused: a triangle, nudged right to look centred. */
.hero-video-toggle[aria-pressed="true"]::before {
    width: 0;
    height: 0;
    margin-left: 4px;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent currentColor;
    background: none;
}

.hero-video-toggle:hover,
.hero-video-toggle:focus-visible {
    border-color: #A0722A;
    background-color: #A0722A;
}

.hero-video-toggle:focus-visible {
    outline: 2px solid #F5F4F2;
    outline-offset: 3px;
}

/* Block editor preview: the video does not play there, so say it is one. */
.hero-video-badge {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 3;
    padding: 4px 10px;
    background-color: #A0722A;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (min-width: 768px) {

    .hero-video-toggle {
        left: 24px;
        bottom: 24px;
    }
}

/* Reduced motion: the still photo, and nothing to pause. */
@media (prefers-reduced-motion: reduce) {

    .hero-slide-video,
    .js-anim .hero-video-toggle {
        display: none;
    }
}


/* ------------------------------------ 12. Post cards without an image */

/*
 * The design's post card always has a photo: the blue text panel is pulled
 * up over it with a negative margin (.post-card-body, margin-top: -43.12%).
 * A post published without a featured image has nothing to overlap, so the
 * pull drags the category line and the start of the title out of the card.
 * Without a photo the panel simply sits in the card. Covers every listing:
 * Interesting Reads, archives, the Post Cards block and related posts.
 */
.post-card:not(:has(.post-card-img)) .post-card-body {
    margin-top: 0;
}


/* ------------------------------------ 13. Cookie consent banner (CookieYes) */

/*
 * Colours are set in CookieYes itself (Cookie Banner > Customise), so the
 * team can still change them there. Only the shape is set here: CookieYes
 * ships rounded corners, the site's buttons and panels are square. The
 * round "revisit consent" icon button is left as it is.
 */
.cky-consent-container .cky-consent-bar,
.cky-preference-center,
.cky-consent-container .cky-btn,
.cky-preference-center .cky-btn {
    border-radius: 0 !important;
}


/* ------------------------------------------------------ 14. Legibility */

/*
 * The policy pages' "Last Updated" note is #D6D6D6 on white in the design —
 * a contrast of 1.45:1, barely readable. WCAG AA asks 4.5:1 for text this
 * size; this grey gives 5.1:1 and still reads as a quiet note.
 */
.policy-text .policy-updated {
    color: #6B6E72;
}


/* ------------------------------ 15. FAQs read from the FAQ plugin */

/*
 * The FAQ block can read its questions from the FAQ plugin, where answers are
 * written once and grouped into categories. Two extra pieces of design are
 * needed for that: a heading above each category's questions, and an "open
 * list" layout for pages that show every answer at once instead of an
 * accordion. Both reuse the accordion's card, spacing and type so the section
 * still looks like the rest of the site.
 */
.faq-group-title {
    margin: 0 0 16px;
    color: #13354C;
    font-family: "FS Industrie Condensed", "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.01em;
}

.faq-list .faq-group-title ~ .faq-group-title {
    margin-top: 48px;
}

/* The open list shows the answer, so the question is a heading, not a button. */
.faq-item_open .faq-heading {
    padding: 20px 24px 0;
    color: #181C21;
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
}

.faq-item_open .faq-answer {
    padding: 8px 24px 24px;
}

.faq-item_open .faq-answer p {
    margin: 0;
}

.faq-item_open .faq-answer p + p {
    margin-top: 16px;
}

/* Only the editor sees this, when a block has nothing to show yet. */
.faq-empty {
    margin: 0;
    padding: 20px 24px;
    border: 1px dashed #B7C4CC;
    border-radius: 16px;
    color: #6B6E72;
    font-size: 16px;
    line-height: 24px;
}

@media (min-width: 768px) {
    .faq-group-title {
        font-size: 34px;
        line-height: 38px;
    }

    .faq-item_open .faq-heading {
        padding: 24px 32px 0;
        font-size: 20px;
    }

    .faq-item_open .faq-answer {
        padding: 10px 32px 28px;
    }
}

/* --------------------------------- 16. Site handbook (documentation page) */

/*
 * The "Site Handbook" page template (page-documentation.php). It is a long
 * reference document rather than a marketing page, so it borrows the site's
 * colours, fonts and card treatment but lays them out for reading: a fixed
 * measure, a sticky contents list, and tables that stay legible on a phone.
 */
.docs-main {
    background-color: #FFFFFF;
}

.docs-hero {
    padding: 56px 0;
    background-color: #13354C;
    color: #FFFFFF;
}

.docs-eyebrow {
    margin: 0 0 12px;
    color: #9FC2D3;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.docs-title {
    margin: 0;
    color: #FFFFFF;
    font-family: "FS Industrie Condensed", "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: -0.01em;
}

.docs-lead {
    max-width: 760px;
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 30px;
}

.docs-meta {
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 22px;
}

.docs-body a {
    color: #13354C;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.docs-meta a {
    color: #9FC2D3;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.docs-body a:hover,
.docs-body a:focus-visible {
    color: #3F7690;
}

.docs-layout {
    display: grid;
    /* minmax(0,…) keeps a wide table inside the column instead of stretching it. */
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-top: 48px;
    padding-bottom: 80px;
}

.docs-toc {
    align-self: start;
    padding: 24px;
    border: 1px solid #E3E7EA;
    border-radius: 16px;
    background-color: #F7F9FA;
}

.docs-toc-title {
    margin: 0 0 12px;
    color: #13354C;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.docs-toc ol {
    margin: 0;
    padding-left: 20px;
    color: #3F7690;
    font-size: 15px;
    line-height: 20px;
}

.docs-toc li {
    margin-bottom: 10px;
}

.docs-toc a {
    color: #181C21;
    text-decoration: none;
}

.docs-toc a:hover,
.docs-toc a:focus-visible {
    color: #3F7690;
    text-decoration: underline;
}

.docs-body {
    max-width: 860px;
    color: #181C21;
    font-size: 17px;
    line-height: 28px;
}

.docs-section {
    /* The design pads every <section> by 120px; this one spaces itself. */
    padding: 0;
    /* Anchored links otherwise land with the heading against the viewport. */
    scroll-margin-top: 24px;
}

.docs-section + .docs-section {
    margin-top: 56px;
    padding-top: 48px;
    border-top: 1px solid #E3E7EA;
}

.docs-body h2 {
    margin: 0 0 16px;
    color: #13354C;
    font-family: "FS Industrie Condensed", "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -0.01em;
}

.docs-body h3 {
    margin: 36px 0 12px;
    color: #13354C;
    font-weight: 700;
    font-size: 22px;
    line-height: 28px;
}

.docs-body h4,
.docs-body .docs-tab-title {
    margin: 28px 0 10px;
    /* #4E8CA8 is only 3.72:1 on white; this is the same blue, readable. */
    color: #3F7690;
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.docs-body p {
    margin: 0 0 16px;
}

.docs-body ul,
.docs-body ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.docs-body li {
    margin-bottom: 10px;
}

.docs-steps li {
    padding-left: 4px;
}

.docs-body code {
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #F1F4F6;
    /* Bootstrap's pink is 4.07:1 on that grey; navy reads cleanly. */
    color: #13354C;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 15px;
}

/* Tables carry most of the reference material. */
.docs-table {
    width: 100%;
    margin: 0 0 24px;
    border: 1px solid #E3E7EA;
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-size: 16px;
    line-height: 24px;
}

.docs-table > thead > tr > th,
.docs-table > tbody > tr > th,
.docs-table > tbody > tr > td {
    padding: 12px 16px;
    border-bottom: 1px solid #E3E7EA;
    text-align: left;
    vertical-align: top;
}

.docs-table > thead > tr > th {
    background-color: #13354C;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.docs-table > tbody > tr > th {
    width: 26%;
    color: #13354C;
    font-weight: 700;
}

.docs-table > tbody > tr:last-child > th,
.docs-table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.docs-table > tbody > tr:nth-child(even) > th,
.docs-table > tbody > tr:nth-child(even) > td {
    background-color: #F7F9FA;
}

.docs-row_note td {
    background-color: #FFF8EC;
    color: #6B4E1F;
    font-size: 15px;
}

/* A repeater's own fields, shown inside the row that introduces them. */
.docs-row_children > td {
    padding: 0 16px 16px;
    background-color: #F7F9FA;
}

.docs-children-title {
    margin: 0 0 8px;
    color: #3F7690;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
}

.docs-row_children .docs-table {
    margin-bottom: 0;
    background-color: #FFFFFF;
    font-size: 15px;
}

.docs-callout {
    margin: 0 0 24px;
    padding: 18px 20px;
    border-left: 4px solid #4E8CA8;
    border-radius: 0 12px 12px 0;
    background-color: #F1F7FA;
}

.docs-callout p:last-child {
    margin-bottom: 0;
}

.docs-block {
    margin-bottom: 48px;
    padding: 24px;
    border: 1px solid #E3E7EA;
    border-radius: 16px;
    background-color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    scroll-margin-top: 24px;
}

.docs-block h3 {
    margin-top: 0;
    font-family: "FS Industrie Condensed", "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 28px;
    line-height: 32px;
}

.docs-block-desc {
    color: #4A5560;
}

.docs-block-preview {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 20px;
    border: 1px solid #E3E7EA;
    border-radius: 12px;
}

.docs-used {
    font-size: 16px;
}

.docs-id {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 20px;
    background-color: #F1F4F6;
    color: #6B6E72;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

.docs-demo-list {
    list-style: none;
    padding-left: 0;
}

.docs-demo-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #E3E7EA;
    border-radius: 12px;
    margin-bottom: 10px;
}

.docs-edit {
    margin-left: auto;
    font-size: 15px;
}

.docs-footnote {
    color: #6B6E72;
    font-size: 15px;
}

@media (max-width: 767px) {
    /* Reference tables are wider than a phone; let them scroll on their own. */
    .docs-table {
        display: block;
        overflow-x: auto;
    }

    .docs-table > tbody > tr > th {
        width: auto;
        min-width: 140px;
    }
}

@media (min-width: 768px) {
    .docs-hero {
        padding: 72px 0;
    }

    .docs-title {
        font-size: 52px;
        line-height: 58px;
    }

    .docs-body h2 {
        font-size: 40px;
        line-height: 44px;
    }
}

@media (min-width: 992px) {
    .docs-layout {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 56px;
        padding-top: 64px;
    }

    .docs-toc {
        position: sticky;
        top: 24px;
        max-height: calc(100vh - 48px);
        overflow-y: auto;
    }
}


/* ------------------- 17. Use-case cards, and the search bar transition */

/*
 * The three "Fishing / Adventure / Freedom" cards sit edge to edge in a row
 * with no gutters, but each card fades in as it is scrolled to. Until that
 * happens the card is transparent, so the white section behind it shows
 * through and reads as a white gap between the cards — most obvious on a
 * phone, where the cards are stacked and enter the screen one at a time.
 * Colouring the row itself means the space a card has not yet filled is the
 * card's own dark tone rather than white, and the seam disappears. The
 * section around the row keeps its white margins, as designed.
 */
.use-cases .row {
    background-color: #181C21;
}

/* Stacked on a phone, the cards run to both edges — no white frame. */
@media (max-width: 575.98px) {
    .use-cases .container {
        padding-left: 0;
        padding-right: 0;
    }
}

/*
 * The header search panel used to appear and vanish instantly, because the
 * hidden attribute cannot be animated. main.js now keeps the panel in the
 * document and adds .is-open, so the height can be transitioned; hidden is
 * still applied once it has closed, which keeps it out of the tab order and
 * away from screen readers. The 0fr → 1fr grid row animates to exactly the
 * height the form needs, whatever the screen width.
 */
.header-search:not([hidden]) {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.28s ease, opacity 0.22s ease;
}

.header-search:not([hidden]) > * {
    overflow: hidden;
}

.header-search.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

    .header-search:not([hidden]) {
        transition: none;
    }
}

/* ---------------------------------------- Z. H1 / H2 heading scale */
/*
 * GENERATED — H1 and H2 headings at 90% of their design size and
 * SemiBold (600) instead of Bold (700).
 *
 * Every rule in Bootstrap, style.css and wp-overrides.css that sizes or
 * weights an H1/H2 heading is mirrored here in the same media query and order, with the
 * original value noted beside each declaration. :is(h1, h2) scopes the change
 * to real H1/H2 elements (a heading switched to H3 in a block keeps the design
 * size) and lifts each override exactly one level above its original.
 *
 * If heading sizes change in style.css, update the matching value here.
 */

h1:is(h1, h2) {
    font-size: calc(calc(1.375rem + 1.5vw) * 0.9); /* calc(1.375rem + 1.5vw) */
}

@media (min-width:1200px) {
    h1:is(h1, h2) {
        font-size: 2.25rem; /* 2.5rem */
    }
}

h2:is(h1, h2) {
    font-size: calc(calc(1.325rem + .9vw) * 0.9); /* calc(1.325rem + .9vw) */
}

@media (min-width:1200px) {
    h2:is(h1, h2) {
        font-size: 1.8rem; /* 2rem */
    }
}

.hero-content.style-1 :is(h1, h2).hero-title {
    font-size: 135px; /* 150px */
}

:is(h1, h2).hero-title {
    font-weight: 600; /* 700 */
    font-size: 36px; /* 40px */
    line-height: 40px; /* 44px */
}

@media (max-width: 767.98px) {
    .hero-content.style-1 :is(h1, h2).hero-title {
        font-size: 36px; /* 40px */
    }
}

@media (min-width: 768px) {
    :is(h1, h2).hero-title {
        font-size: 50px; /* 56px */
        line-height: 54px; /* 60px */
    }

    .hero-content.style-1 :is(h1, h2).hero-title {
        font-size: 63px; /* 70px */
    }
}

@media (min-width: 992px) {
    :is(h1, h2).hero-title {
        font-size: 65px; /* 72px */
        line-height: 70px; /* 78px */
    }
}

@media (min-width: 1400px) {
    :is(h1, h2).hero-title {
        font-size: 79px; /* 88px */
        line-height: 83px; /* 92px */
    }
}

:is(h1, h2).customise-title {
    font-weight: 600; /* 700 */
    font-size: 43px; /* 48px */
    line-height: 50px; /* 56px */
}

@media (min-width: 768px) {
    :is(h1, h2).customise-title {
        font-size: 58px; /* 64px */
        line-height: 68px; /* 76px */
    }
}

@media (min-width: 1400px) {
    :is(h1, h2).customise-title {
        font-size: 79px; /* 88px */
        line-height: 94px; /* 104px */
    }
}

:is(h1, h2).cta-title {
    font-weight: 600; /* 700 */
    font-size: 40px; /* 44px */
    line-height: 41px; /* 46px */
}

@media (min-width: 768px) {
    :is(h1, h2).cta-title {
        font-size: 58px; /* 64px */
        line-height: 58px; /* 64px */
    }
}

@media (min-width: 992px) {
    :is(h1, h2).cta-title {
        font-size: 65px; /* 72px */
        line-height: 65px; /* 72px */
    }
}

@media (min-width: 1400px) {
    :is(h1, h2).cta-title {
        font-size: 79px; /* 88px */
        line-height: 77px; /* 85px */
    }
}

:is(h1, h2).story-title {
    font-weight: 600; /* 700 */
    font-size: 36px; /* 40px */
    line-height: 40px; /* 44px */
}

:is(h1, h2).numbers-title {
    font-weight: 600; /* 700 */
    font-size: 36px; /* 40px */
    line-height: 40px; /* 44px */
}

@media (min-width: 768px) {
    :is(h1, h2).story-title,
    :is(h1, h2).numbers-title {
        font-size: 50px; /* 56px */
        line-height: 54px; /* 60px */
    }
}

@media (min-width: 1200px) {
    :is(h1, h2).story-title,
    :is(h1, h2).numbers-title {
        font-size: 65px; /* 72px */
        line-height: 70px; /* 78px */
    }
}

@media (min-width: 1400px) {
    :is(h1, h2).story-title {
        font-size: 79px; /* 88px */
        line-height: 86px; /* 96px */
    }

    :is(h1, h2).numbers-title {
        font-size: 79px; /* 88px */
        line-height: 82px; /* 91px */
    }
}

:is(h1, h2).reads-title {
    font-weight: 600; /* 700 */
    font-size: 36px; /* 40px */
    line-height: 40px; /* 44px */
}

@media (min-width: 768px) {
    :is(h1, h2).reads-title {
        font-size: 50px; /* 56px */
        line-height: 54px; /* 60px */
    }
}

@media (min-width: 992px) {
    :is(h1, h2).reads-title {
        font-size: 65px; /* 72px */
        line-height: 70px; /* 78px */
    }
}

@media (min-width: 1400px) {
    :is(h1, h2).reads-title {
        font-size: 79px; /* 88px */
        line-height: 82px; /* 91px */
    }
}

:is(h1, h2).contact-title {
    font-weight: 600; /* 700 */
    font-size: 36px; /* 40px */
    line-height: 40px; /* 44px */
}

:is(h1, h2).brochure-title {
    font-weight: 600; /* 700 */
    font-size: 36px; /* 40px */
    line-height: 40px; /* 44px */
}

@media (min-width: 768px) {
    :is(h1, h2).contact-title,
    :is(h1, h2).brochure-title {
        font-size: 50px; /* 56px */
        line-height: 54px; /* 60px */
    }
}

@media (min-width: 992px) {
    :is(h1, h2).contact-title,
    :is(h1, h2).brochure-title {
        font-size: 65px; /* 72px */
        line-height: 70px; /* 78px */
    }
}

@media (min-width: 1200px) {
    :is(h1, h2).contact-title,
    :is(h1, h2).brochure-title {
        font-size: 79px; /* 88px */
        line-height: 82px; /* 91px */
    }

    :is(h1, h2).brochure-title {
        line-height: 77px; /* 85px */
    }
}

:is(h1, h2).reads-hero-title {
    font-weight: 600; /* 700 */
    font-size: 36px; /* 40px */
    line-height: 40px; /* 44px */
}

:is(h1, h2).newsletter-title {
    font-weight: 600; /* 700 */
    font-size: 36px; /* 40px */
    line-height: 40px; /* 44px */
}

@media (min-width: 768px) {
    :is(h1, h2).reads-hero-title,
    :is(h1, h2).newsletter-title {
        font-size: 50px; /* 56px */
        line-height: 54px; /* 60px */
    }
}

@media (min-width: 992px) {
    :is(h1, h2).reads-hero-title,
    :is(h1, h2).newsletter-title {
        font-size: 65px; /* 72px */
        line-height: 70px; /* 78px */
    }
}

@media (min-width: 1200px) {
    :is(h1, h2).reads-hero-title,
    :is(h1, h2).newsletter-title {
        font-size: 79px; /* 88px */
        line-height: 77px; /* 85px */
    }
}

:is(h1, h2).policy-title {
    font-weight: 600; /* 700 */
    font-size: 36px; /* 40px */
    line-height: 41px; /* 46px */
}

:is(h1, h2).reach-title {
    font-weight: 600; /* 700 */
    font-size: 36px; /* 40px */
    line-height: 40px; /* 44px */
}

@media (min-width: 768px) {
    :is(h1, h2).policy-title,
    :is(h1, h2).reach-title {
        font-size: 47px; /* 52px */
        line-height: 52px; /* 58px */
    }
}

@media (min-width: 992px) {
    :is(h1, h2).reach-title {
        font-size: 65px; /* 72px */
        line-height: 70px; /* 78px */
    }

    :is(h1, h2).policy-title {
        font-size: 50px; /* 56px */
        line-height: 54px; /* 60px */
    }
}

@media (min-width: 1200px) {
    :is(h1, h2).policy-title {
        font-size: 59px; /* 65px */
        line-height: 58px; /* 64px */
    }

    :is(h1, h2).reach-title {
        font-size: 79px; /* 88px */
        line-height: 82px; /* 91px */
    }
}

.hero-content.style-1 :is(h1, h2).hero-title {
    font-size: 99px; /* 110px */
}

@media (min-width:992px) {
    :is(h1, h2).cta-title {
        font-size: 59px; /* 66px */
        line-height: 65px; /* 72px */
    }
}

@media (max-width:800px) {
    .hero-content.style-1 :is(h1, h2).hero-title {
        font-size: 54px; /* 60px */
    }
}

:is(h1, h2).post-hero-title {
    font-weight: 600; /* 700 */
    font-size: 40px; /* 44px */
    line-height: 41px; /* 46px */
}

.post-body h2:is(h1, h2) {
    font-weight: 600; /* 700 */
}

.post-body h2:is(h1, h2) {
    font-size: 27px; /* 30px */
    line-height: 32px; /* 36px */
}

@media (min-width: 992px) {
    :is(h1, h2).post-hero-title {
        font-size: 58px; /* 64px */
        line-height: 61px; /* 68px */
    }

    .post-body h2:is(h1, h2) {
        font-size: 32px; /* 36px */
        line-height: 38px; /* 42px */
    }
}

.post-comments :is(h1, h2).comments-title {
    font-weight: 600; /* 700 */
    font-size: 27px; /* 30px */
    line-height: 32px; /* 36px */
}

:is(h1, h2).search-result-title {
    font-weight: 600; /* 700 */
    font-size: 25px; /* 28px */
    line-height: 29px; /* 32px */
}

@media (min-width: 768px) {
    :is(h1, h2).search-result-title {
        font-size: 31px; /* 34px */
        line-height: 34px; /* 38px */
    }
}
/* ------------------------------------------- end of Z (generated) ------ */

/* Added by hand after the generated section. */
.gform_validation_errors{
    display:none !important;
}
.form-gf .validation_message, .form-gf .gform_validation_errors {
    margin-top: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: red !important;
    font-size: 14px;
}
@media (min-width: 1400px) {
    :is(h1, h2).story-title {
        font-size: 68px;
        line-height: 80px;
    }
}