/* Live blog/page grid layout — sourced from tmi_content/inc/grid-style.css (2026-06-11). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Playfair+Display:wght@500;600;700&display=swap');

:root { --grid-gap: 16px;--grid-gap-neg: -16px; --grid-gap-half: 8px;--grid-gap-half-neg: -8px; --wrapper-padding: 20px; }

.video-popup {display: none; position: fixed; inset: 0; background: rgba(20, 20, 22, 0.92); z-index: 9999; justify-content: center; align-items: center;}
.video-popup.active {display: flex;}
.video-popup-content {position: relative; max-width: 900px; width: 100%;padding:25px;}
.video-popup-content video {width: 100%; height: auto;}
.video-popup-close {position: absolute; top:-10px; right:0; font-size: 32px; cursor: pointer; color: #fff;}

.video-thumbnail {position: relative; display: inline-block;}
.video-thumbnail::after {content: ""; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; transform: translate(-50%, -50%);
    background: rgba(60,60,60,0.7); border-radius: 50%; z-index: 1; transition: all 0.25s ease;}
.video-thumbnail::before {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-35%, -50%); width: 0; height: 0;
    border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-left: 26px solid rgba(180,180,180,0.8); z-index: 2; transition: all 0.25s ease;}
.video-thumbnail:hover::after {background: rgba(60,60,60,0.9);}
.video-thumbnail:hover::before {border-left: 26px solid rgba(255,255,255,1);}

.grid-row{font-size: 1.0625rem;}
.grid-clearfix{clear:both;}

.grid-w-30{width:30%!important;}
.grid-w-40{width:40%!important;}
.grid-w-50{width:50%!important;}
.grid-w-60{width:50%!important;}

.grid-relative{position:relative;}
.grid-absolute{position:absolute;}
.overlay-fabrics{max-width:20%;top:0;bottom: 0;left:50%;transform:translateX(-50%);}
.overlay-fabrics figure{padding:8px 5px!important;}
.overlay-fabrics figure:first-child{padding-top:1px!important;}
.overlay-fabrics figure:last-child{padding-bottom:1px!important;}

.grid-img-round{border-radius:50%;overflow:hidden;}
.grid-border{border:solid #fff 12px;}

.grid-row ul{padding-left:2rem;}
.grid-row .mt-1{margin-top: 1rem!important;}
.grid-row .text-center{text-align:center;}
.grid-row .text-right{text-align: right;}
.grid-row .grid-gap-top{margin-top: var(--grid-gap);}
.grid-row .grid-gap-bottom{margin-bottom: var(--grid-gap);}
.grid-row img{object-fit:cover;width:100%;}

.grid-row h1,.grid-row h2,.grid-row h3,.grid-row blockquote,
.grid-row .h3{font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;line-height: 1.25;margin: 1em 0 .6em;}
.grid-row h1{margin-bottom:2rem;margin-top:0;}
.grid-row h3,.grid-row .h3{margin-top:1rem}
.grid-row .h2-xl{font-size:1.85rem;}

.grid-row p{margin:0 0 1rem;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.0625rem;line-height: 1.65;color: #1a1a1a;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.grid-row p:first-child{margin-top:1em;}

.grid-row blockquote{margin-left:1rem;margin-right:1rem;font-weight:bold;}

.grid-row figcaption,.grid-row .caption{font-size: .95rem;color: #666;margin-top: .5rem;font-style: italic;}
.grid-row figcaption a,.grid-row .caption a{
    font-size: .95rem;color: #666;font-style: italic;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-decoration:underline;
}

.grid-row figure { width: 100%; max-width: 100%;height:auto; margin: 0; padding: 0; }
/* In a multi-column row, a column that holds a SINGLE figure stretches it to
 * the tallest column so images line up at equal heights (img uses object-fit:
 * cover). Scoped to :only-child so columns that STACK two+ figures (e.g. the
 * 2-left/1-right layout) keep each figure on its own inline aspect-ratio — the
 * stacked heights are what make the layout add up. Opt out with .figure-uniform. */
.grid-row .grid-col > figure:only-child:not(.figure-uniform){height:100%;}
.grid-row figure a{height:100%;}
.grid-row figure picture { width: 100%; max-width: 100%; display: block;height:100%; }
.grid-row figure picture source { width: 100%; max-width: 100%; }
.grid-row figure img { width: 100%; max-width: 100%; height:100%; display: block;object-fit: cover; }
.grid-banner-img img {aspect-ratio: 32 / 9;}
.grid-banner-img-sm img {aspect-ratio: 5.35 / 1;}

.grid-row .grid-img-float {float:right; margin-left:20px; margin-bottom:10px; display:block;}
.grid-row .grid-img-float-left{float:left; margin-right:20px; margin-bottom:10px; display:block;}

.intent-marker{list-style:none;}
.intent-marker li .sq { display:inline-block; width:0.30em; height:0.30em; background:#000; margin-right:0.30em; vertical-align:middle; }


.grid-row .tall-right,.grid-row .tall-right *{height:100%!important}

/* Stacked images in the same column always get vertical breathing room, even
 * when the source markup didn't carry an explicit .grid-gap-top (same 16px, so
 * it doesn't double up where that class is present). "Image below image". */
.grid-row .grid-col > figure + figure{margin-top: var(--grid-gap);}

.grid-row {display: flex; flex-wrap: wrap; margin-left: calc(-1 * var(--grid-gap-half));margin-right: calc(-1 * var(--grid-gap-half)); }
.grid-col { flex: 0 0 100%; max-width: 100%;padding-left: var(--grid-gap-half);padding-right: var(--grid-gap-half); }

.grid-row.grid-tight{--tight-gap: calc(var(--grid-gap-half) / 1.5);
    margin-left: calc(-1 * var(--tight-gap));margin-right: calc(-1 * var(--tight-gap));}
.grid-row.grid-tight .grid-col{padding-left: var(--tight-gap);padding-right: var(--tight-gap);}

.grid-col-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
.grid-col-2  { flex: 0 0 16.666%; max-width: 16.666%; }
.grid-col-3  { flex: 0 0 25%;     max-width: 25%; }
.grid-col-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.grid-col-5  { flex: 0 0 41.666%; max-width: 41.666%; }
.grid-col-6  { flex: 0 0 50%;     max-width: 50%; }
.grid-col-7  { flex: 0 0 58.333%; max-width: 58.333%; }
.grid-col-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.grid-col-9  { flex: 0 0 75%;     max-width: 75%; }
.grid-col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.grid-col-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.grid-col-12 { flex: 0 0 100%;max-width:100%; }

/* .gap-0 removed — its negative top margin pulled captions up under the row
 * and partially hid them. The class is also stripped from imported content. */

.grid-col-content p a,
.grid-col-content li a {color:#0057a3; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .25s ease;}
.grid-col-content p a:hover, .grid-col-content li a:hover{border-color:#0057a3;}


.grid-col-nav{padding-top:70px;/*border-right:1px solid #eee;padding-right:20px*/; }
/*.grid-nav-toggle {display: none;}*/
.grid-nav-toggle{padding-left:15px;font-weight: bold;font-size:1.2rem;}
nav.grid-nav-wrap {position: sticky;top:50px;align-self: flex-start;background:#fff;}
nav.grid-nav-wrap .grid-nav{margin:0;padding:0;list-style:none;}
nav.grid-nav-wrap .grid-nav li{margin:0;padding:2px 0;}
nav.grid-nav-wrap .grid-nav a {display: block;padding:8px 12px;border-left: 3px solid transparent;transition: all .25s ease;
    font-size: 1rem;}
nav.grid-nav-wrap .grid-nav a.active {border-left-color: #000;background: #f7f7f7;font-weight: 600;}

/*.grid-col-content{padding-left:20px;}*/

.grid-row .grid-img-float {margin-left:15px;}
.grid-row .grid-img-float-left{margin-right:15px;}

.grid-buttons{padding:10px 0 20px 0;}
.grid-buttons > *{margin-bottom:12px;margin-right:8px;}
.cta-btn-primary,
.cta-btn-secondary{border-radius:4px;transition:background .25s ease;}
.cta-btn-primary:hover {background:#111;}
.cta-btn-secondary {display:inline-block; border:2px solid #000; color:#000; background:transparent;}
.cta-btn-secondary:hover {background:#000; color:#fff;}

.faq-item {margin-bottom:20px;}
.faq-question {display:block; width:100%; background:transparent; border:none; padding:0; font-size:20px; font-weight:600; text-align:left;}
.faq-answer {padding-top:8px;}

.grid-col-content .page-toc li a{color:#000;}
.grid-col-content .page-toc li a:hover{border-color:#000;}

.grid-back-link { display:inline-flex; align-items:center; gap:8px; font-size:17px; font-weight:600; color:#000; text-decoration:none;}
.grid-back-link::before { content:"🡰"; font-size:18px; line-height:1;left:2px; transition:all .25s ease;position:relative }

.grid-back-link:hover:before{ left:-3px; }



@media (max-width: 900px) {
    :root {--grid-gap:14px;--grid-gap-neg: -14px;--grid-gap-half:7px;--grid-gap-half-neg: -7px;}

    .sticky-md{position:sticky; top:10px; align-self:flex-start;}
    .grid-row .grid-gap-md-bottom {margin-bottom: var(--grid-gap);}

    .grid-col-4{ flex: 0 0 50%;  max-width: 50%; }
    .grid-col-3{ flex: 0 0 50%;  max-width: 50%; }
    .grid-row.grid-tight .grid-col-2{flex: 0 0 25%;max-width:25%;}
    .grid-row .h2-xl {font-size: 1.65rem;}

    .grid-content-container > div:first-child{flex: 0 0 33.333%;max-width: 33.333%;}
    nav.grid-nav-wrap .grid-nav a{font-size: 0.9rem;padding:6px 10px;}

    .overlay-fabrics figure{padding:6px 4px!important;}
    .grid-border{border:solid #fff 8px;}
}

@media (max-width:767px) {
    .grid-col-6{ flex: 0 0 100% !important; max-width: 100% !important; }
    .grid-row.grid-tight .grid-col-2{flex: 0 0 33.333%;max-width:33.333%;}
    .grid-img-float,.grid-img-float-left {float:none; width:100% !important; margin:0 0 20px 0;}
    .grid-row .grid-gap-sm-top {margin-top: var(--grid-gap);}

    .grid-content-container > div{flex: 0 0 100% !important; max-width: 100% !important;}
    .grid-col-nav{padding-top:0;margin-bottom:35px;position:relative;width:100%;}
    nav.grid-nav-wrap{position:absolute;width:calc(100% - (var(--grid-gap-half) * 2));top:60px;
        padding:6px 12px;border:1px solid #ddd;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.08);max-height:0;transition:all .35s ease;visibility:hidden;
        overflow:hidden;}
    nav.grid-nav-wrap.open{max-height:600px;visibility:visible}
    .grid-nav-toggle{position:relative;display:block;width:100%;padding:12px 15px;border:1px solid #ddd;background:#fff;font-size:16px;
        text-align:left;cursor:pointer;border-radius:6px;}
    .grid-nav-toggle::after{content:"▾";position:absolute;top:50%;right:10px;transform:translateY(-50%);}
    .grid-nav-toggle[aria-expanded="true"]::after{transform:translateY(-50%) rotate(-180deg);}

    /*.grid-nav{max-height:600px;overflow:hidden;transition:max-height .35s ease;}
    .grid-nav.open{max-height:600px;}*/
    nav.grid-nav-wrap .grid-nav a{padding:6px 0}

    .overlay-fabrics{position:static;max-width:100%;transform:none;display:flex;margin-top:15px;align-items:flex-start;}
    .overlay-fabrics > figure,.overlay-fabrics > figure:first-child,.overlay-fabrics > figure:last-child{display:inline-block;max-width:33.332%;padding:8px 12px !important;}
    .overlay-fabrics .grid-border{border:0;}

    .video-popup-close {top: 15px;right: 30px;z-index:99;}
    .video-thumbnail::after {width: 68px; height: 68px;}
    .video-thumbnail::before {border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 22px solid rgba(180,180,180,0.8); transform: translate(-35%, -50%);}
    .video-thumbnail:hover::before {border-left: 22px solid rgba(255,255,255,1);}

    .faq-item{margin-bottom:10px;}
    .faq-question {cursor:pointer; position:relative; padding:8px 30px 8px 8px;background:#ccc;border-radius:4px;margin:0!important;
        font-weight:400;font-size:1.2rem;}
    .faq-question::after {content:"▾"; position:absolute;transition:transform .25s ease;
        right: 10px;top: 10px;font-size: 24px;line-height:1;}
    .faq-question[aria-expanded="false"]::after {transform:rotate(-90deg);}
    .faq-answer {max-height:0; overflow:hidden; transition:max-height .28s ease;}
    .faq-question[aria-expanded="true"] + .faq-answer { /* expanded state handled by JS setting maxHeight */ }
}

@media (max-width: 600px) {
    .grid-col { flex: 0 0 100%; max-width: 100%; }
    .grid-row.grid-tight .grid-col-2{flex: 0 0 50%;max-width:50%;}

    .grid-row .grid-gap-xs-top {margin-top: var(--grid-gap);}

    .grid-row figcaption:not(.caption-inline),.grid-row .caption:not(.caption-inline){display: flex;flex-direction:column;align-items: flex-start;}
    .grid-row figcaption:not(.caption-inline) a,.grid-row .caption:not(.caption-inline) a{display: block;width: auto;margin:2px 0;font-size: .9rem;}
    .grid-row figcaption:not(.caption-inline) span,.grid-row .caption:not(.caption-inline) span{display: none;}

    .grid-banner-img img{aspect-ratio: 16 / 7!important;}

    .grid-row .h2-xl {font-size: 1.45rem;line-height:1.4}
    .grid-row p{font-size: 1rem;}
    .grid-buttons{text-align:center;}
    .grid-buttons a {display: inline-block;min-width: 300px;max-width:none;}

    .overlay-fabrics > figure,.overlay-fabrics > figure:first-child,.overlay-fabrics > figure:last-child{padding:8px!important;}

    .video-thumbnail::after {width: 56px; height: 56px;}
    .video-thumbnail::before {border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 18px solid rgba(180,180,180,0.8); transform: translate(-35%, -50%);}
    .video-thumbnail:hover::before {border-left: 18px solid rgba(255,255,255,1);}
}

@media (max-width:380px) {
    :root {--wrapper-padding:15px;}
}

/* ============================================================
 * image_grid page-builder block (.pb-ig) — preset image collages.
 * Authored in the editor; rendered by ect_render_block_image_grid /
 * ect_render_block_image_group. Shared by pages AND blog posts.
 * Gap is driven by the inline --pb-ig-gap custom property so one value
 * controls the outer grid and every group's internal grid/flex.
 * In equal-height mode (.pb-ig--eq) cell heights are deterministic:
 * sibling cells share an aspect-ratio; a tall single beside a stacked
 * column stretches to match it. Authors override per image via the
 * image block's own aspect-ratio (inline style wins). Grids are the
 * agreed custom-CSS exception — everything else stays Tailwind.
 * ============================================================ */
/* Responsive video embed (iframe/<video>) — full container width + 16:9, so
 * Vimeo/YouTube/self-hosted fill their column (and grid cells) reliably without
 * depending on the Tailwind build. */
.pb-video{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;background:#000;}

.pb-ig{display:grid;gap:var(--pb-ig-gap,1rem);align-items:stretch;margin:0 0 1.5rem;}
.pb-ig:last-child{margin-bottom:0;}

/* Equal-column presets: a single group does the N-up grid (below). */
.pb-ig--cols-2,.pb-ig--cols-3,.pb-ig--cols-4,.pb-ig--cols-5,.pb-ig--cols-6{grid-template-columns:1fr;}

/* Asymmetric collages: 2-col (side by side) / 2-row (top+bottom) shapes.
 * Groups carry grid-area:a / grid-area:b inline (set by the renderer). */
.pb-ig--2L-1R,.pb-ig--1L-2R{grid-template-columns:1fr 1fr;grid-template-areas:"a b";}
.pb-ig--2T-1B,.pb-ig--1T-2B{grid-template-columns:1fr;grid-template-areas:"a" "b";}

/* Group internal arrangements. */
.pb-ig__group{min-width:0;}
.pb-ig__group--stack{display:flex;flex-direction:column;gap:var(--pb-ig-gap,1rem);}
.pb-ig__group--row{display:grid;grid-template-columns:1fr 1fr;gap:var(--pb-ig-gap,1rem);}
.pb-ig__group--grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--pb-ig-gap,1rem);}
.pb-ig__group--grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--pb-ig-gap,1rem);}
.pb-ig__group--grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pb-ig-gap,1rem);}
.pb-ig__group--grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--pb-ig-gap,1rem);}
.pb-ig__group--grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--pb-ig-gap,1rem);}

/* Equal heights — the <picture> owns the cell SHAPE (its aspect-ratio), the
 * <img> fills it and crops (object-fit:cover). The block renderer INLINES the
 * image's real aspect-ratio on the <picture> (style="aspect-ratio:…"), which
 * wins over the fallback defaults below — so cells take the image's true shape,
 * not a hardcoded one. The picture must NOT get height:100% (that would defeat
 * the aspect-ratio); only the img fills. */
.pb-ig--eq .pb-ig__group picture{display:block;width:100%;}
.pb-ig--eq .pb-ig__group img{display:block;width:100%;height:100%;object-fit:cover;}
.pb-ig--eq .pb-ig__group figure{margin:0;height:100%;}
.pb-ig--eq .pb-ig__group > a{display:block;height:100%;}
/* Fallback cell shape for cells whose image has NO inline aspect-ratio. */
.pb-ig--eq .pb-ig__group--grid-2 picture,.pb-ig--eq .pb-ig__group--grid-3 picture,
.pb-ig--eq .pb-ig__group--grid-4 picture,.pb-ig--eq .pb-ig__group--grid-5 picture,
.pb-ig--eq .pb-ig__group--grid-6 picture,.pb-ig--eq .pb-ig__group--row picture,
.pb-ig--eq .pb-ig__group--stack picture{aspect-ratio:4 / 3;}
/* Tall single BESIDE a stacked column (2L-1R / 1L-2R): stretch to match it.
 * This image has no aspect-ratio, so its picture fills the group height. */
.pb-ig--2L-1R.pb-ig--eq .pb-ig__group--single,
.pb-ig--1L-2R.pb-ig--eq .pb-ig__group--single{height:100%;}
.pb-ig--2L-1R.pb-ig--eq .pb-ig__group--single picture,
.pb-ig--1L-2R.pb-ig--eq .pb-ig__group--single picture{height:100%;}
/* Wide single on its OWN row (2T-1B / 1T-2B): banner shape. */
.pb-ig--2T-1B.pb-ig--eq .pb-ig__group--single picture,
.pb-ig--1T-2B.pb-ig--eq .pb-ig__group--single picture{aspect-ratio:21 / 9;}

/* Caption under a group (rich text / HTML). */
/* Caption spans the whole group, not a single grid cell — in a row/grid group
 * the caption is a grid item and would otherwise take one column's width. No
 * margin-top: the grid gap already spaces it from the images. (A single-image
 * <figcaption> isn't in a grid, so it gets a small gap below.) */
.pb-ig__cap{grid-column:1 / -1;font-size:.95rem;color:#666;font-style:italic;}
figure > .pb-ig__cap{margin-top:.5rem;}
.pb-ig__cap a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.pb-ig__cap p{margin:0 0 .25rem;}

/* Mobile: collapse every layout to a single column (chosen default). */
@media (max-width:640px){
  .pb-ig,.pb-ig--2L-1R,.pb-ig--1L-2R,.pb-ig--2T-1B,.pb-ig--1T-2B{grid-template-columns:1fr;grid-template-areas:none;}
  .pb-ig__group{grid-area:auto !important;height:auto !important;}
  .pb-ig__group--row,.pb-ig__group--grid-2,.pb-ig__group--grid-3,
  .pb-ig__group--grid-4,.pb-ig__group--grid-5,.pb-ig__group--grid-6{grid-template-columns:1fr;}
  /* let images keep their natural height once stacked (override the inline
   * aspect-ratio the renderer puts on the <picture>) */
  .pb-ig--eq .pb-ig__group picture,.pb-ig--eq .pb-ig__group img{height:auto;}
  .pb-ig--eq .pb-ig__group picture,.pb-ig--eq .pb-ig__group img{aspect-ratio:auto !important;}
}