/**
 * Lakeside overrides on top of the Bringer template.
 */

/* ==========
   TYPE SCALE
   ==========
   The template ships nine distinct text sizes. Lakeside collapses them onto
   five roles: display, section heading, subhead/lead, body, interface, meta.
   h2/h3 share the section size and h4/h5/large-text share the subhead size,
   so heading level stays a semantic choice rather than a visual one. */
:root {
    /* Display */
    --bringer-t-h1-fs: 88px;

    /* Section heading */
    --bringer-t-h2-fs: 40px;
    --bringer-t-h3-fs: 40px;

    /* Subhead and lead */
    --bringer-t-h4-fs: 22px;
    --bringer-t-h5-fs: 22px;
    --bringer-t-large-fs: 22px;

    /* Body */
    --bringer-t-h6-fs: 16px;
    --bringer-t-content-fs: 16px;

    /* Interface: menu, buttons, inputs, footer */
    --bringer-t-button-fs: 14px;

    /* Meta: labels and tags */
    --bringer-t-meta-fs: 12px;
}

@media only screen and (max-width: 1279px) {
    :root {
        --bringer-t-h1-fs: 64px;
        --bringer-t-h2-fs: 32px;
        --bringer-t-h3-fs: 32px;
        --bringer-t-h4-fs: 20px;
        --bringer-t-h5-fs: 20px;
        --bringer-t-large-fs: 20px;
        --bringer-t-h6-fs: 15px;
        --bringer-t-content-fs: 15px;
        --bringer-t-meta-fs: 11px;
    }
}

@media only screen and (max-width: 960px) {
    :root {
        --bringer-t-h1-fs: 48px;
    }
}

@media only screen and (max-width: 739px) {
    :root {
        --bringer-t-h1-fs: 40px;
        --bringer-t-h2-fs: 28px;
        --bringer-t-h3-fs: 28px;
        --bringer-t-h4-fs: 18px;
        --bringer-t-h5-fs: 18px;
        --bringer-t-large-fs: 18px;
    }
}

/* ==========
   SVG ICONS
   ========== */
:root {
    --icon-lakeside-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    --icon-lakeside-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill-rule='evenodd' d='M15.817.113A.5.5 0 0 1 16 .5v14a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 15.01l-4.902.98A.5.5 0 0 1 0 15.5v-14a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0L10.5.99l4.902-.98a.5.5 0 0 1 .415.103zM10 1.91l-4-.8v12.98l4 .8V1.91zm1 12.98 4-.8V1.11l-4 .8v12.98zm-6-.8V1.11l-4 .8v12.98l4-.8z'/%3E%3C/svg%3E");
    --icon-lakeside-lightbulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.94A5 5 0 0 0 8 1z'/%3E%3C/svg%3E");
}
.bringer-icon-lakeside-search {
    -webkit-mask-image: var(--icon-lakeside-search);
    mask-image: var(--icon-lakeside-search);
}
.bringer-icon-lakeside-map {
    -webkit-mask-image: var(--icon-lakeside-map);
    mask-image: var(--icon-lakeside-map);
}
.bringer-icon-lakeside-lightbulb {
    -webkit-mask-image: var(--icon-lakeside-lightbulb);
    mask-image: var(--icon-lakeside-lightbulb);
}

/* Three service cards carry a heading and a paragraph only, so the icon
   sits beside a smaller title than the stock four-column layout expects. */
.bringer-icon-box h5 {
    padding-right: calc(64px + var(--stg-gap));
    margin: 0;
}
.bringer-icon-box.is-compact {
    row-gap: var(--stg-gap);
}

/* ==============
   SECTION TITLES
   ==============
   The stock eyebrow margin is 4px, and it collapses to nothing wherever the
   label renders inline. Pair it with the optical top trim on h2/h3 and the
   label ends up almost touching the heading. Numbered steps use h5 and keep
   the tighter pairing, since there the label is a step marker, not an eyebrow. */
.bringer-label:has(+ h2),
.bringer-label:has(+ h3) {
    display: block;
    margin-bottom: var(--stg-small-gap);
}

/* =====================
   AT-A-GLANCE FACT CARDS
   =====================
   Subgrid keeps every paragraph on the same baseline even when a title wraps
   to two lines, so the strip scans as one row rather than four cards. */
.lakeside-fact {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    row-gap: var(--stg-xs-gap);
}
.lakeside-fact h4,
.lakeside-fact p {
    margin: 0;
}

/* ============
   TAG LISTS
   ============ */
.bringer-tags-list li span {
    border-radius: var(--bringer-xs-br);
    font-size: var(--bringer-t-meta-fs);
    font-weight: var(--bringer-t-meta-fw);
    letter-spacing: var(--bringer-t-meta-ls);
    color: var(--bringer-s-heading);
    text-transform: uppercase;
    padding: calc(0.75 * var(--stg-xs-gap)) calc(1.5 * var(--stg-xs-gap));
    background: var(--bringer-s-nav);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    backdrop-filter: saturate(150%) blur(12px);
    display: block;
    border: 1px solid var(--bringer-s-border);
}
.lakeside-tags-group:not(:last-child) {
    margin-bottom: var(--stg-large-gap);
}
.lakeside-tags-group .bringer-label {
    display: block;
    margin-bottom: var(--stg-small-gap);
}

/* =================
   CLIENT LOGO TICKER
   ================= */
#clients .bringer-section-title {
    margin-bottom: var(--stg-large-gap);
}
.lakeside-logo-marquee {
    background: #fff;
    padding: var(--stg-small-gap) 0;
}
.lakeside-logo-marquee .bringer-marquee-list li::before {
    display: none;
}
.lakeside-logo-marquee .bringer-marquee-list li {
    margin-right: var(--stg-gap);
}
.lakeside-logo-marquee .bringer-marquee-list img {
    display: block;
    box-sizing: border-box;
    width: 200px;
    height: 76px;
    object-fit: contain;
    padding: 8px 16px;
}

/* =====
   STEPS
   ===== */
.lakeside-step {
    border-top: 1px solid var(--bringer-s-border);
    padding-top: var(--stg-small-gap);
}
.lakeside-step h5 {
    margin: 0;
}
.lakeside-bordered-title {
    border-top: 1px solid var(--bringer-s-border);
    padding-top: var(--stg-gap);
    margin-bottom: 0;
}

/* ======
   BYLINE
   ======
   Name and role sit at body size and separate on weight and colour, so the
   About block reads at one text size rather than three. */
.lakeside-byline {
    font-size: var(--bringer-t-content-fs);
    line-height: var(--bringer-t-content-lh);
}
.lakeside-byline-name {
    color: var(--bringer-s-heading);
    font-weight: var(--bringer-t-heading-fw);
}
.lakeside-byline-role::before {
    content: ', ';
}

/* ==========
   PULL QUOTE
   ========== */
.lakeside-quote {
    border-left: 2px solid var(--bringer-s-accent);
    padding-left: var(--stg-small-gap);
    margin: var(--stg-large-gap) 0;
    font-size: var(--bringer-t-large-fs);
    line-height: var(--bringer-t-content-lh);
    color: var(--bringer-s-heading);
}

/* ==============
   HERO ADDITIONS
   ============== */
.bringer-logo img {
    height: auto;
}
.bringer-header-lp .bringer-logo img {
    width: 220px;
}
.bringer-info-widget .bringer-logo img {
    width: 200px;
}
@media only screen and (max-width: 960px) {
    .bringer-mobile-header-inner .bringer-logo img {
        width: 190px;
    }
}

.bringer-page-title .bringer-accent,
.bringer-page-title .bringer-accent .char {
    color: var(--bringer-s-accent);
}

.bringer-hero-type02 .bringer-page-title,
.bringer-hero-type02 .bringer-page-title .line {
    line-height: 1em;
}

.lakeside-hero-locations {
    display: block;
    margin-top: var(--stg-gap);
}

@media only screen and (min-width: 1280px) {
    .bringer-hero-type02 .bringer-page-title ~ p {
        padding-right: calc(1.5 * var(--stg-large-gap));
    }
}

/* The stock hero pulls the media up over the title column, which assumes a
   short title block. Lakeside's hero carries intro copy, so below desktop the
   media drops underneath the text instead of overlapping it. */
@media only screen and (max-width: 1279px) {
    .bringer-hero-type02 > .stg-row {
        flex-wrap: wrap;
    }
    .bringer-hero-type02 > .stg-row > .stg-col-6:first-child {
        width: 100%;
    }
    .bringer-hero-type02 .stg-row.stg-no-gap > div.stg-tp-offset-6 {
        position: static;
        width: 50%;
        flex-shrink: 0;
        margin: var(--stg-large-gap) 0 0 50%;
    }
    .stg-row.bringer-hero02-row {
        width: 100%;
    }
    .bringer-hero-type02 .bringer-page-title ~ p {
        max-width: 62ch;
    }
}
@media only screen and (max-width: 739px) {
    .bringer-hero-type02 .stg-row.stg-no-gap > div.stg-tp-offset-6 {
        width: 100%;
        margin: var(--stg-large-gap) 0 0 0;
    }
    .bringer-hero-type02 .bringer-hero02-row .align-right {
        text-align: left;
    }
}

/* ==============
   MISC UTILITIES
   ============== */
.lakeside-statement {
    color: var(--bringer-s-heading);
}
.bringer-footer-widgets .bringer-widget .bringer-button {
    margin-top: var(--stg-small-gap);
}

a.bringer-button.lakeside-linkedin-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    padding-left: 28px;
    padding-right: 28px;
}
.bringer-icon-linkedin {
    -webkit-mask-image: var(--icon-social-linkedin);
    mask-image: var(--icon-social-linkedin);
}
.lakeside-address {
    font-style: normal;
}

.lakeside-form-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--stg-gap);
    margin-bottom: var(--bringer-input-gap);
}
.lakeside-contact-form textarea {
    height: 280px;
}

@media only screen and (max-width: 739px) {
    .lakeside-form-split {
        grid-template-columns: 1fr;
    }
}

@media only screen and (min-width: 960px) {
    .lakeside-media-match {
        align-items: stretch;
    }
    .lakeside-media-match > [class*="stg-col-"]:has(.bringer-parallax-media) {
        display: flex;
        flex-direction: column;
    }
    .lakeside-media-match .bringer-parallax-media,
    .lakeside-media-match .bringer-parallax-media .st-lazy-wrapper {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
    }
    .lakeside-media-match .bringer-parallax-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

@media only screen and (max-width: 739px) {
    .lakeside-logo-marquee .bringer-marquee-list img {
        width: 150px;
        height: 60px;
    }
}