@font-face {
    font-family: 'Google Sans Flex';
    src: url('https://creeksidevets.pages.dev/wp-content/themes/custom-vet-theme/google-sans-flex-latin-wght-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
.post-content {
    min-width: 0 !important;
    max-width: 100% !important;
}
article {
    min-width: 0 !important;
}
pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 16px;
}
.wp-caption {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: block !important;
    clear: both;
}
.post-content .wp-caption-text {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 19px;
    font-weight: 400;
    color: #163328;
    margin-top: 8px;
	margin-bottom: 0;
}
.wp-caption img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}
.wp-caption-text{
width: 100%;
}
.byline{
font-size: 15px;
}
@media (min-width: 640px) {
  .article-title {
    font-size: 40px;
    line-height: 48px;
  }
}

/* =========================================
   WordPress Pagination
   ========================================= */

.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
    font-family: 'Inter', sans-serif;
}

.page-numbers li {
    margin: 0;
    padding: 0;
}

/* Number buttons + current page */
.page-numbers a.page-numbers,
.page-numbers span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 40px;
    height: 40px;
    padding: 0 12px;

    box-sizing: border-box;

    border: 1px solid #d7dedb;
    border-radius: 8px;

    background: #ffffff;
    color: #163328;

    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;

    text-decoration: none;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}

/* Hover */
.page-numbers a.page-numbers:hover {
    background: #eef2f0;
    border-color: #4b7a68;
    color: #0F766E;
}

/* Current page */
.page-numbers span.page-numbers.current {
    background: #163328;
    border-color: #163328;
    color: #ffffff;
}

/* Current page should not behave like a link */
.page-numbers span.page-numbers.current:hover {
    background: #163328;
    border-color: #163328;
    color: #ffffff;
}

/* Next / Previous */
.page-numbers a.next,
.page-numbers a.prev {
    padding-left: 15px;
    padding-right: 15px;
}

/* Mobile */
@media (max-width: 640px) {

    .page-numbers {
        gap: 6px;
    }

    .page-numbers a.page-numbers,
    .page-numbers span.page-numbers {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        font-size: 13px;
    }

    .page-numbers a.next,
    .page-numbers a.prev {
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* gestation calculator */
/* Horse Gestation Calculator */

.horse-gestation-calculator {
    width: 100%;
    max-width: 36rem;
    margin: 2rem auto;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #191c1d;
    box-sizing: border-box;
}


.horse-gestation-calculator h2 {
    margin: 0 0 1.25rem;
    color: #163328;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.025em;
}


/* Date picker */

.horse-date-field {
    width: 100%;
}


.horse-date-field input {
    width: 100%;
    min-height: 48px;
    padding: 0.85rem 1rem;
    box-sizing: border-box;

    border: 1px solid #d7dedb;
    border-radius: 0.75rem;

    background: #ffffff;
    color: #191c1d;

    font-size: 1rem;
    font-family: inherit;

    cursor: pointer;
    transition: all 150ms ease;
}


.horse-date-field input:hover {
    border-color: #4b7a68;
}


.horse-date-field input:focus {
    outline: none;
    border-color: #4b7a68;
    box-shadow: 0 0 0 3px rgba(75, 122, 104, 0.18);
}


/* Result */

.horse-result {
    margin-top: 1.5rem;
    padding: 1.25rem;

    background: #f1f6f3;
    border-left: 5px solid #4b7a68;

    border-radius: 0.75rem;
}


.horse-result-title {
    margin-bottom: 0.75rem;

    color: #163328;

    font-size: 1.125rem;
    font-weight: 700;
}


.horse-result p {
    margin: 0.4rem 0;

    font-size: 1rem;
    line-height: 1.5;
}


/* Notes */

.horse-note {
    margin-top: 1.25rem;

    color: #555;

    font-size: 0.875rem;
    line-height: 1.6;
}

.horse-date-label {
    display: block;
    margin-bottom: 0.5rem;
    color: #163328;
    font-weight: 600;
}

.horse-date-help {
    margin-top: 0.5rem;
    color: #666;
    font-size: 0.875rem;
}
/* Mobile */

@media (max-width: 640px) {

    .horse-gestation-calculator {
        margin: 1rem auto;
        padding: 1.25rem;
        border-radius: 0.75rem;
    }


    .horse-gestation-calculator h2 {
        font-size: 1.25rem;
    }


    .horse-date-field input {
        font-size: 16px;
    }


    .horse-note {
        font-size: 0.8rem;
    }

}

/* =========================================
   Horse Age Calculator
========================================= */

.horse-age-calculator {
    width: 100%;
    max-width: 36rem;
    margin: 2rem auto;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    color: #191c1d;
    box-sizing: border-box;
}

.horse-age-calculator h2 {
    margin: 0 0 1.25rem;
    color: #163328;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.025em;
}


/* Input */

.horse-age-field {
    width: 100%;
}

.horse-age-field label {
    display: block;
    margin-bottom: .5rem;
    color: #163328;
    font-weight: 600;
}

.horse-age-field input {
    width: 100%;
    min-height: 48px;
    padding: .85rem 1rem;
    box-sizing: border-box;

    border: 1px solid #d7dedb;
    border-radius: .75rem;

    background: #fff;
    color: #191c1d;

    font-size: 1rem;
    font-family: inherit;

    transition: all .15s ease;
}

.horse-age-field input:hover {
    border-color: #4b7a68;
}

.horse-age-field input:focus {
    outline: none;
    border-color: #4b7a68;
    box-shadow: 0 0 0 3px rgba(75,122,104,.18);
}

.horse-age-help {
    margin-top: .5rem;
    color: #666;
    font-size: .875rem;
}


/* Result */

.horse-age-result {
    margin-top: 1.5rem;
    padding: 1.25rem;

    background: #f1f6f3;
    border-left: 5px solid #4b7a68;

    border-radius: .75rem;
}

.horse-age-result-title {
    margin-bottom: .5rem;

    color: #163328;

    font-size: 1.125rem;
    font-weight: 700;
}

.horse-age-result p {
    margin: .4rem 0;
    font-size: 1rem;
    line-height: 1.6;
}

.horse-age-result hr {
    margin: 1rem 0;
    border: 0;
    border-top: 1px solid #d7dedb;
}


/* Note */

.horse-age-note {
    margin-top: 1.25rem;
    color: #555;
    font-size: .875rem;
    line-height: 1.6;
}


/* Mobile */

@media (max-width:640px){

    .horse-age-calculator{
        margin:1rem auto;
        padding:1.25rem;
        border-radius:.75rem;
    }

    .horse-age-calculator h2{
        font-size:1.25rem;
    }

    .horse-age-field input{
        font-size:16px; /* Prevents iOS zoom */
    }

    .horse-age-note{
        font-size:.8rem;
    }

}


/* Table Container */

.dynamic-table {
    display: grid;
    gap: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    margin: 0;
    overflow: hidden;
}
/* Base Cells (Inter, Body-md) */
.dynamic-table > div {
    padding: 12px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #191c1d; /* on-background */
}

/* Alternating Row Colors c9ead9*/

.row-odd { background: #eef2f0; }  /* primary-fixed (Greenish) */
.row-even { background: #f8fafa; } /* background (Clean contrast) */

/* Label Styling (Inter, Label-md) */
.dynamic-table > div.label {
    font-weight: 600;
    letter-spacing: 0.05em;
    font-size: 16px;
    color: #022016; /* on-primary-fixed (Deep Green) */
}
.dynamic-table > div {
min-width: 0;

    overflow-wrap: break-word;
    word-wrap: break-word;
}
.dynamic-table-wrapper.scroll-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    display: block;
}

.dynamic-table-wrapper.scroll-table .dynamic-table {
    width: max-content;
    min-width: 100%;
}

@media (max-width: 768px) {

    .dynamic-table > div {
        padding: 10px 8px;
        font-size: 14px;
        line-height: 20px;
    }

}
.dynamic-table-wrapper {
    width: 100%;
}

.dynamic-table-wrapper.scroll-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
/* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #163328 #f8fafa;
}

.dynamic-table-wrapper.scroll-table .dynamic-table {
    width: max-content;
    min-width: 100%;
}


/* Semantic Table Test Version */

.semantic-table-wrapper {
    width:100%;
}
.semantic-table thead th {
    background: #4b7a68;
    color: #ffffff;
}

.semantic-table {
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}
.semantic-table {
    width: 100%;
    table-layout: auto;
}

.semantic-table th,
.semantic-table td {
font-weight: 400;
    padding:10px 20px;

    font-family:'Google Sans Flex', sans-serif;

    font-size:1rem;

    line-height:24px;

    color:#3b4042;

    text-align:left;

    overflow-wrap:break-word;
letter-spacing: -0.015em;

}

.semantic-row-odd {

    background:#eef2f0;

}


.semantic-row-even {

    background:#f8fafa;

}


.semantic-label {

    font-weight:530 !important;

letter-spacing: -0.015em;

    color:#3b4042;

}



/* Horizontal scrolling for 3+ columns */

.semantic-scroll-table {

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;
/* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #163328 #f8fafa;
}

.semantic-scroll-table::-webkit-scrollbar {

    height: 8px;

}


.semantic-scroll-table::-webkit-scrollbar-track {

    background:#f8fafa;

}


.semantic-scroll-table::-webkit-scrollbar-thumb {

    background:#163328;

    border-radius:10px;

}


.semantic-scroll-table::-webkit-scrollbar-thumb:hover {

    background:#022016;

}
.semantic-scroll-table .semantic-table {

    width:max-content;

    min-width:100%;

}
.semantic-table-wide .semantic-table {
    width:100%;
    min-width:550px;
}


@media(max-width:768px){


    .semantic-table th,
    .semantic-table td {

        padding:10px 8px;

        font-size:14px;

        line-height:20px;

    }
	.semantic-table td {
        font-size:15px;

	}

}

/* --- Expand/Collapse Setup --- */

/* Outer Block Container */
.semantic-table-block {
    position: relative;
    width: 100%;
    margin-bottom: 24px;
}

/* Base Wrapper */
.semantic-table-wrapper {
    position: relative;
    overflow-y: hidden;
    transition: max-height 0.4s ease-in-out;
}

/* Max height for tables with > 5 rows */
.semantic-table-wrapper.is-collapsible {
    max-height: 300px !important;
}

/* Fixed Overlay at bottom of outer block frame */
.semantic-table-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 90px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 60%, #ffffff 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 12px;
    pointer-events: none;
    z-index: 10;
}

/* Subtle Link Button */
.semantic-expand-link {
    pointer-events: auto;
    background: transparent;
    border: none;
    color: #4b7a68;
    font-family: 'Google Sans Flex', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.semantic-expand-link:hover {
    color: #163328;
}

/* Expanded State */
.semantic-table-wrapper.is-expanded {
    max-height: max-content !important;
    overflow-y: visible !important;
}



/* Base Link Styles */
.post-content a:not(.btn), .breadcrumb, .author-color{
    color:#0F766E;
    font-weight:600;
/*     text-decoration:underline;
    text-decoration-thickness:1.5px;
    text-underline-offset:3px; */
    transition:.2s ease;
}

.post-content a:not(.btn):hover, .breadcrumb:hover, .author-color:hover{
    color:#163328;
}
/* Target links in WordPress paragraphs */
.wp-block-paragraph a {
    color: #022016 !important;       /* Your deep green */
    font-weight: 700 !important;     /* BOLD - makes it stand out */
}

/* Optional: Make the hover state pop even more */
.wp-block-paragraph a:hover {
    color: #191c1d !important;
    background-color: rgba(201, 234, 217, 0.4); /* Subtle highlight effect on hover */
}

.dynamic-table-wrapper.scroll-table::-webkit-scrollbar {
    height: 10px;
}

.dynamic-table-wrapper.scroll-table::-webkit-scrollbar-track {
    background: #f8fafa;
}

.dynamic-table-wrapper.scroll-table::-webkit-scrollbar-thumb {
    background: #163328; /* Your Dark Green */
    border-radius: 5px;
    border: 2px solid #f8fafa; /* Creates the gap */
}

.dynamic-table-wrapper.scroll-table::-webkit-scrollbar-thumb:hover {
    background: #2d4a3e; /* Your primary-container */
}
/* typography for headings of post content */
/* Using body to increase specificity and !important to break theme overrides */
/* Post Content Typography - Vanilla CSS */
.post-content h1 {
    font-family: 'Merriweather', serif;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #163328;
    margin-top: 48px;
    margin-bottom: 24px;
}

.post-content h2 {
    font-family: 'Merriweather', serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    color: #0F766E;
/*     margin-top: 40px; */
    margin-bottom: 20px;
}

.post-content h3 {
    font-family: 'Google Sans Flex', serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: #3b4042;
/*     margin-top: 32px; */
    margin-bottom: 16px;
}

.post-content h4 {
    font-family: 'Merriweather', serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: #163328;
/*     margin-top: 24px; */
    margin-bottom: 12px;
}

.post-content h5 {
    font-family: 'Merriweather', serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #163328;
    margin-top: 20px;
    margin-bottom: 8px;
}

.post-content h6 {
    font-family: 'Merriweather', serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: #163328;
    margin-top: 16px;
    margin-bottom: 8px;
}

.post-content p {
    font-family: 'Google Sans Flex', sans-serif;
    font-size: 1.08rem;
    line-height: 1.625;
    font-weight: 400;
    color: #464e5a;
    margin-bottom: 16px;
letter-spacing: -0.015em;
-webkit-font-smoothing: antialiased; /* Forces crisp, thin rendering on Mac/Chrome */
    -moz-osx-font-smoothing: grayscale;

}
.post-content strong,
.post-content b {
  font-weight: 600 !important; /* Smooth Inter Semi-Bold */
}
/* 
.post-content li {
    font-size: inherit;
    line-height: inherit;
    margin-bottom: 10px;
}


 .post-content ul {
  list-style-type: disc !important;
 padding-left: 1.8rem; 
    margin: 1rem 0;
}
.post-content ul,
.post-content ol {
    font-size: 18px;
    line-height: 1.625;
    margin-bottom: 6px;

}
.post-content ul li::marker {
    color: #0F766E;
} 
 */

.post-content ul li:last-child,
.post-content ol li:last-child {
    margin-bottom: 0;
}


.post-content ul,
.post-content ol {
font-family: 'Google Sans Flex', sans-serif;
color: #464e5a;
    font-size: 1.08rem;
    line-height: 1.625;
    margin-bottom: 1rem;
	list-style: none !important;
	 padding-left: 1.8rem;
letter-spacing: -0.015em;

}
.post-content ol {
list-style-type: decimal !important;
}
.post-content ul li,
.post-content ol li {
position: relative;
  font-size: inherit;
    line-height: inherit;
    margin-bottom: 10px;
}


.post-content  ul li::before {  content: "•"; position: absolute; left: -1.4rem;  top: -11px; line-height: 1.525;   font-size: 2em; color: #0F766E;}
.post-content ul[data-icon="warning"] li::before {
    content: "⚠️";
    left: -1.6rem;
    top: 2px;
    font-size: 0.9em;
}
.post-content ul[data-icon="good"] li::before {
content: "✅";
  left: -1.6rem;
    top: 2px;
    font-size: 0.9em;
}
.post-content ul[data-icon="avoid"] li::before {
   content: "❌";
  left: -1.6rem;
    top: 2px;
    font-size: 0.9em;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .post-content h1 { font-size: 36px; line-height: 44px; }
    .post-content h2 { font-size: 28px; line-height: 36px;}
    .post-content h3 { font-size: 22px; line-height: 30px; }
	.post-content p { font-size: 1.06rem; line-height: 1.625; letter-spacing: -0.015em; }
/* 	.post-content ul, .post-content ol { font-size: 1rem; line-height: 1.525; margin-bottom: 10px; text-wrap: pretty;} */
	.post-content  ul { list-style: none !important; padding-left: 1.8rem; font-size: 1.06rem; line-height: 1.525; margin-bottom: 10px; letter-spacing: -0.015em; text-wrap: pretty;}
	.post-content  ul li { position: relative; }  
	.post-content  ul li::before {  content: "•"; position: absolute; left: -1.6rem;  top: -11px; line-height: 1.525;   font-size: 2em; color: #0F766E;}
	.post-content .key_takeaway { padding: 1.25rem; }

}
p.key_takeaway_title {
    font-size: 1.4rem;
    font-family: 'Google Sans Flex', sans-serif;
}
/* sources udner the post */
.post-sources {
    --sources-font-size: 0.9375rem;
    --sources-list-font-size: 0.875rem;

    --sources-bg: #eef2f0;
    --sources-border: #4b7a68;
    --sources-border-hover: #eef2f0;
    --sources-divider: #cfe6db;
    --sources-text: #163328;
    --sources-link: #163328;
    --sources-muted: #eef2f0;

    width: 100%;
    margin: 24px 0;
    border: 1px solid var(--sources-border-hover);
    border-radius: 8px;
    background: var(--sources-bg);
    color: var(--sources-text);
    font-size: var(--sources-font-size);
    transition: background-color .15s, border-color .15s;
}

.post-sources:hover {
    border-color: var(--sources-border);
}

.post-sources summary {
    cursor: pointer;
    padding: 14px 18px;
    font-weight: 700;
    list-style: none;
    user-select: none;
}

.post-sources summary::-webkit-details-marker {
    display: none;
}

.post-sources summary::after {
    content: "+";
    float: right;
    font-size: 1.2rem;
    transition: transform .2s ease;
}

.post-sources[open] summary::after {
    content: "−";
}

.post-sources ul {
    margin: 0;
    padding: 0 18px 18px 36px;
    border-top: 1px solid var(--sources-divider);
    font-size: var(--sources-list-font-size);
}

.post-sources li {
    margin: 10px 0;
}

.post-sources a {
    color: var(--sources-link);
    text-decoration: underline;
    word-break: break-word;
}

.post-sources a:hover {
    opacity: .85;
}
@media (min-width:1107px) {
    .article-layout {
        grid-template-columns: 1fr 320px;
    }
}

/* Fix image intrinsic size shift */
.post-content img,
article img {
    contain-intrinsic-size: auto !important;
}
.widget {
padding: 24px 24px 24px 40px;
}
/* Restores default bullets to ANY list inside widgets or sidebars */
aside ul:not(.article-outline ul),
.widget ul,
.sidebar ul:not(.article-outline ul) {
  list-style-type: disc !important;
}
aside ul > li {
  margin-bottom: 12px; /* Adjust pixel value as needed */
}
aside ul > li a:hover {
  text-decoration: underline;
}
/* outline scroll behaviour to show header */
.post-content h2[id] {
    scroll-margin-top: 50px !important;
}

/* FAQS */

.post-faqs {
    --faq-font-size: 0.9375rem;
    --faq-answer-font-size: 0.875rem;

    --faq-bg: #eef2f0;
    --faq-border: #4b7a68;
    --faq-border-hover: #163328;
    --faq-divider: #d7e0dc;
    --faq-text: #163328;

    width: 100%;
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.post-faq-item {
    width: 100%;
    border: 1px solid var(--faq-border);
    border-radius: 8px;
    background: var(--faq-bg);
    color: var(--faq-text);
    font-size: var(--faq-font-size);
    transition: background-color .15s, border-color .15s;
    overflow: hidden;
}

.post-faq-item:hover {
    border-color: var(--faq-border-hover);
}

.post-faq-item summary {
    cursor: pointer;
    padding: 14px 18px;
    font-weight: 700;
    list-style: none;
    user-select: none;
}

.post-faq-item summary::-webkit-details-marker {
    display: none;
}

.post-faq-item summary::after {
    content: "+";
    float: right;
    font-size: 1.2rem;
    line-height: 1;
    transition: transform .2s ease;
}

.post-faq-item[open] summary::after {
    content: "−";
}

.post-faq-item .faq-answer {
    padding: 14px 18px;
    border-top: 1px solid var(--faq-divider);
    font-size: var(--faq-answer-font-size);
}

.post-faq-item .faq-answer p {
    margin: 0;
    line-height: 1.5;
}
.post-faqs-wrapper {
    width: 100%;
    margin: 32px 0;
}

.post-faqs-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--faq-text, #163328);
    margin-bottom: 16px;
    line-height: 1.3;
}
.post-faq-item summary h3 {
    display: inline;
    margin: 0;
    font-size: inherit;
}
/*  clinical note */

.post-clinical-note {
    --note-bg: #eef2f0;
    --note-border: #4b7a68;
    --note-text: #163328;
    --note-badge-bg: #163328;
    --note-badge-text: #ffffff;

    width: 100%;
/*     margin: 28px 0; */
    padding: 20px 22px;
    background: var(--note-bg);
    border: 1px solid var(--note-border);
    border-left: 5px solid var(--note-border);
    border-radius: 8px;
    color: var(--note-text);
    box-sizing: border-box;
}

.clinical-note-header {
    margin-bottom: 12px;
}

.clinical-note-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--note-badge-bg);
    color: var(--note-badge-text);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 4px;
    line-height: 1;
}

.clinical-note-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.clinical-note-body p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.06rem;
    line-height: 1.6;
    color: var(--note-text);
}

.clinical-note-body p:empty,
.clinical-note-body br {
    display: none !important;
}
.post-content .post-clinical-note {
/*     margin-block-end: 0 !important; */
}


/* Veterinary Insight Box */


.post-vet-insight, .post-tip {
    position: relative;
    width: 100%;
    padding: 32px 24px 24px;
    background: #eef2f0;
    border: 1px solid #4b7a68;
    border-left: 5px solid #4b7a68;
    border-radius: 8px;
    box-sizing: border-box;
    margin-top: 28px;
}
.vet-insight-title {
    margin: 0 0 14px;
    font-size: 1.15rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--insight-title);
text-wrap: pretty;

}

.vet-insight-body, .post-tip-body {
    color: #163328;
    font-size: 1.06rem;
    line-height: 1.7;
}
.vet-insight-body p, .post-tip-body p {
    margin: 0 0 12px;
    color: #163328;

}

.vet-insight-body ul {
    list-style: disc;

    margin: 12px 0 16px;
    padding-left: 22px;
}

.vet-insight-body li {
    margin-bottom: 6px;
}

.vet-insight-body p:last-child, .post-tip-body p:last-child {
    margin-bottom: 0;
}
/* Vet Insight Badge */

.vet-insight-badge, .creekside-tip-badge {
    position: absolute;
    top: -13px;
    left: 22px;

    background: #163328;
    color: #fff;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;

    padding: 6px 14px;
    border-radius: 4px;
}


/* Title */

.vet-insight-title {
    display: block;
    margin-bottom: 14px;
    font-size: 1.15rem;
    line-height: 1.45;
    font-weight: 800;
    color: #163328;
}

.post-disclaimer {
font-family: 'Google Sans Flex', sans-serif;
    margin-top: 3rem;
    padding: 1.5rem;
    background: #F0FDFA;
    border: 1px solid #CCFBF1;
    border-left: 4px solid #0F766E;
    border-radius: 8px;
}

.post-disclaimer h3 {

    margin: 0 0 0.75rem;
    color: #0F766E;
    font-size: 1.125rem;
    font-weight: 600;
}

.post-disclaimer p {
    margin: 0 0 1rem;
    color: #464e5a;
    line-height: 1.7;
}

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

/* take away */
.key_takeaway, .answer {
    padding: 1.25rem;
    background: #f2f5f3;
    border: 1px solid #f2f5f3;
    border-left: 4px solid #0F766E;
    border-radius: 8px;
}

.key_takeaway h2 {
    margin-top: 0; 
margin-bottom: 12px;
    color: #163328;
}

.key_takeaway p, .answer p {
    color: #464e5a;
}

.key_takeaway p:last-child, .answer p:last-child  {
    margin-bottom: 0;
}

.article-outline {
    background: #eef2f0;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 30px;
}

.article-outline > .outline-title {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 16px;
}
/* 
.article-outline ul {
    list-style: none;
    padding: 0;
    margin: 0;
}  */
.article-outline ul {
    padding-left: 12px;
    list-style: disc;

}
.article-outline li {
    margin: 0;
    border-bottom: 1px solid #f1f1f1;
}

.article-outline li:last-child {
    border-bottom: 0;
}

.article-outline a {
    display: block;
    padding: 8px 0;
    color: #0F766E;
    font-size: 17px;
    line-height: 1.5;
    text-decoration: none;
    transition: all .2s ease;
}
.article-outline a {
    display: block;
    padding: 4px 0;
    color: #0F766E;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
    transition: all .2s ease;
}
.article-outline a:hover {
    color: #0f766e;
    padding-left: 6px;
}
/* Desktop default */
.outline-toggle {
    display: none;
}

.outline-content {
    display: block;
}


/* desktop */
@media (min-width: 1029px){
.mobile-article-outline {
		display: none;
	}

}
/* Tablet + Mobile */
@media (max-width: 1029px) {

    .outline-title {
        display: none;
    }
 .mobile-article-outline .outline-title {
        display:none;
    }
	aside {
  display: none;
}
	.mobile-article-outline > .article-outline{
	padding: 12px;
	margin-bottom: 14px;
}

    .outline-toggle {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;

        padding: 10px 16px;

        background: #fff;
        border: 1px solid #e5e7eb;
        border-top: 4px solid #0f766e;
        border-radius: 10px;

        font-size: 14px;
        font-weight: 600;

        cursor: pointer;
    }


    .outline-content {
        display: none;
        padding-top: 15px;
    }


    .article-outline.open .outline-content {
        display: block;
    }

}

.post-content .key_takeaway > ul {
    list-style: none !important;
    padding: 0;
    margin: 1rem 0 0;
}

.post-content .key_takeaway li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: .5rem;
}

.post-content .key_takeaway li::before {  content: "•"; position: absolute; left: -0.5rem;  top: -11px; line-height: 1.525;   font-size: 2em; color: #0F766E; }

/*  by line css */
.vet-byline {
    display: flex;
    align-items: center;
    gap: 12px;
}


.vet-byline-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}


.vet-byline-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}


.vet-byline-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.vet-verified-badge {
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 16px;
    height: 16px;
}



.vet-byline-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.vet-byline-text {
    font-size: 14px;
    line-height: 1.35;
    color: #333;
}


.vet-byline-text a {
    font-weight: 700;
    color: #17665b;
    text-decoration: underline;
}


.vet-byline-text a:hover {
    color: #0f4d45;
}


.vet-byline-text strong {
    font-weight: 700;
}


.vet-byline-date {
    font-size: 14px;
    line-height: 1.35;
    color: #555;
}



@media (width >= 48rem) {
    .md\:px-margin-desktop {
        padding-inline: clamp(16px, 5vw, 100px) !important;
    }
    
    /* 2. Inner container: Restricts content to 1040px and centers it */
    .md\:px-margin-desktop > .article-layout {
        max-width: 1060px;
        margin-inline: auto;
    }
}

@media (max-width: 1107px) {
.md\:px-margin-desktop > .article-layout {
        max-width: 730px;
	}
}


@font-face {
    font-family: "Merriweather";
    src: url("https://creeksidevets.pages.dev/wp-content/themes/custom-vet-theme/assets/fonts/Merriweather24pt-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
size-adjust: 100%;
}


/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-bold: 700;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --blur-md: 12px;
    --blur-3xl: 64px;
    --aspect-video: 16 / 9;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .inset-0 {
    inset: 0px;
  }
  .top-0 {
    top: 0px;
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
  .-right-8 {
    right: calc(var(--spacing) * -8);
  }
  .-bottom-8 {
    bottom: calc(var(--spacing) * -8);
  }
  .left-0 {
    left: 0px;
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .-z-10 {
    z-index: calc(10 * -1);
  }
  .z-0 {
    z-index: 0;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-50 {
    z-index: 50;
  }
  .order-1 {
    order: 1;
  }
  .order-2 {
    order: 2;
  }
  .col-span-1 {
    grid-column: span 1 / span 1;
  }
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .mb-1 {
    margin-bottom: var(--spacing);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .table {
    display: table;
  }
  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-64 {
    height: calc(var(--spacing) * 64);
  }
  .h-\[300px\] {
    height: 300px;
  }
  .h-full {
    height: 100%;
  }
  .min-h-\[500px\] {
    min-height: 500px;
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-auto {
    width: auto;
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-container-max {
    max-width: 1280px;
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .scale-105 {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-gutter {
    gap: 24px;
  }
  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-gutter > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(24px * var(--tw-space-y-reverse));
    margin-block-end: calc(24px * calc(1 - var(--tw-space-y-reverse)));
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-x-gutter {
    column-gap: 24px;
  }
  .gap-y-1 {
    row-gap: var(--spacing);
  }
  .gap-y-10 {
    row-gap: calc(var(--spacing) * 10);
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-on-primary {
    border-color: #ffffff;
  }
  .border-on-primary\/30 {
    border-color: color-mix(in oklab, #ffffff 30%, transparent);
  }
  .border-outline-variant {
    border-color: #c1c8c3;
  }
  .border-primary {
    border-color: #163328;
  }
  .border-primary\/10 {
    border-color: color-mix(in oklab, #163328 10%, transparent);
  }
  .border-white\/10 {
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .border-white\/30 {
    border-color: color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }
  .bg-background {
    background-color: #f8fafa;
  }
  .bg-primary {
    background-color: #163328;
  }
  .bg-primary-container {
    background-color: #2d4a3e;
  }
  .bg-primary-container\/10 {
    background-color: color-mix(in oklab, #2d4a3e 10%, transparent);
  }
  .bg-primary-fixed {
    background-color: #c9ead9;
  }
  .bg-primary\/5 {
    background-color: color-mix(in oklab, #163328 5%, transparent);
  }
  .bg-surface {
    background-color: #f8fafa;
  }
  .bg-surface\/80 {
    background-color: color-mix(in oklab, #f8fafa 80%, transparent);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/10 {
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-primary\/90 {
    --tw-gradient-from: color-mix(in oklab, #163328 90%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-primary\/40 {
    --tw-gradient-to: color-mix(in oklab, #163328 40%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .bg-cover {
    background-size: cover;
  }
  .bg-center {
    background-position: center;
  }
  .object-cover {
    object-fit: cover;
  }
  .p-1 {
    padding: var(--spacing);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-margin-desktop {
    padding-inline: 64px;
  }
  .py-1 {
    padding-block: var(--spacing);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .py-section-gap {
    padding-block: 60px;
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }
  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }
  .pb-1 {
    padding-bottom: var(--spacing);
  }
  .pb-section-gap {
    padding-bottom: 60px;
  }
  .text-center {
    text-align: center;
  }
  .font-body-lg {
    font-family: Google Sans Flex;
  }
  .font-body-md {
    font-family: Google Sans Flex;
  }
  .font-headline-lg {
    font-family: Merriweather;
  }
  .font-headline-md {
    font-family: Merriweather;
  }
  .font-headline-xl {
    font-family: Merriweather;
  }
  .font-label-md {
    font-family: Google Sans Flex;
  }
  .text-headline-xl {
    font-size: 48px;
    line-height: var(--tw-leading, 60px);
    letter-spacing: var(--tw-tracking, -0.02em);
    font-weight: var(--tw-font-weight, 700);
  }
  .text-label-md {
    font-size: 14px;
    line-height: var(--tw-leading, 20px);
    letter-spacing: var(--tw-tracking, 0.05em);
    font-weight: var(--tw-font-weight, 600);
  }
  .text-body-lg {
    font-size: 18px;
    line-height: var(--tw-leading, 28px);
    font-weight: var(--tw-font-weight, 400);
  }
  .text-body-md {
    font-size: 16px;
    line-height: var(--tw-leading, 24px);
    font-weight: var(--tw-font-weight, 400);
  }
  .text-headline-lg {
    font-size: 32px;
    line-height: var(--tw-leading, 40px);
    font-weight: var(--tw-font-weight, 700);
  }
  .text-headline-md {
    font-size: 24px;
    line-height: var(--tw-leading, 32px);
    font-weight: var(--tw-font-weight, 700);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .tracking-\[0\.2em\] {
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-on-background {
    color: #191c1d;
  }
  .text-on-primary {
    color: #ffffff;
  }
  .text-on-primary-fixed {
    color: #022016;
  }
  .text-on-primary\/70 {
    color: color-mix(in oklab, #ffffff 70%, transparent);
  }
  .text-on-primary\/80 {
    color: color-mix(in oklab, #ffffff 80%, transparent);
  }
  .text-on-surface-variant {
    color: #424844;
  }
  .text-primary {
    color: #163328;
  }
  .text-primary-fixed {
    color: #c9ead9;
  }
  .text-white {
    color: var(--color-white);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .opacity-90 {
    opacity: 90%;
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .blur-3xl {
    --tw-blur: blur(var(--blur-3xl));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  @media (hover: hover) {
    .group-hover\:scale-105:is(:where(.group):hover *) {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
    .group-hover\:scale-110:is(:where(.group):hover *) {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
    .group-hover\:gap-4:is(:where(.group):hover *) {
      gap: calc(var(--spacing) * 4);
    }
    .group-hover\:text-primary:is(:where(.group):hover *) {
      color: #163328;
    }
    .group-hover\:text-primary-fixed:is(:where(.group):hover *) {
      color: #c9ead9;
    }
  }
  .selection\:bg-primary-fixed ::selection {
    background-color: #c9ead9;
  }
  .selection\:bg-primary-fixed::selection {
    background-color: #c9ead9;
  }
  .selection\:text-primary ::selection {
    color: #163328;
  }
  .selection\:text-primary::selection {
    color: #163328;
  }
  @media (hover: hover) {
    .hover\:scale-105:hover {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
    .hover\:border-primary:hover {
      border-color: #163328;
    }
    .hover\:bg-primary-container:hover {
      background-color: #2d4a3e;
    }
    .hover\:bg-white\/10:hover {
      background-color: color-mix(in srgb, #fff 10%, transparent);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/10:hover {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    .hover\:bg-white\/20:hover {
      background-color: color-mix(in srgb, #fff 20%, transparent);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/20:hover {
        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }
    .hover\:text-primary:hover {
      color: #163328;
    }
    .hover\:text-primary-fixed:hover {
      color: #c9ead9;
    }
    .hover\:underline:hover {
      text-decoration-line: underline;
    }
    .hover\:opacity-70:hover {
      opacity: 70%;
    }
    .hover\:shadow-md:hover {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    .hover\:brightness-110:hover {
      --tw-brightness: brightness(110%);
      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
  }
  @media (width < 930px) {
    .max-\[930px\]\:hidden {
      display: none;
    }
  }
  @media (width < 888px) {
    .max-\[888px\]\:flex {
      display: flex;
    }
    .max-\[888px\]\:hidden {
      display: none;
    }
  }
  @media (width < 591px) {
    .max-\[591px\]\:block {
      display: block;
    }
    .max-\[591px\]\:hidden {
      display: none;
    }
  }
  @media (width < 470px) {
    .max-\[470px\]\:tracking-\[-0\.035em\] {
      --tw-tracking: -0.035em;
      letter-spacing: -0.035em;
    }
  }
  @media (width >= 1030px) {
    .min-\[1030px\]\:block {
      display: block;
    }
    .min-\[1030px\]\:grid-cols-\[1fr\,320px\] {
      grid-template-columns: 1fr,320px;
    }
  }
  @media (width >= 40rem) {
    .sm\:col-span-1 {
      grid-column: span 1 / span 1;
    }
    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .sm\:flex-row {
      flex-direction: row;
    }
  }
  @media (width >= 48rem) {
    .md\:order-1 {
      order: 1;
    }
    .md\:order-2 {
      order: 2;
    }
    .md\:mb-8 {
      margin-bottom: calc(var(--spacing) * 8);
    }
    .md\:mb-12 {
      margin-bottom: calc(var(--spacing) * 12);
    }
    .md\:mb-16 {
      margin-bottom: calc(var(--spacing) * 16);
    }
    .md\:block {
      display: block;
    }
    .md\:h-12 {
      height: calc(var(--spacing) * 12);
    }
    .md\:h-\[450px\] {
      height: 450px;
    }
    .md\:h-\[870px\] {
      height: 870px;
    }
    .md\:h-auto {
      height: auto;
    }
    .md\:w-1\/2 {
      width: calc(1 / 2 * 100%);
    }
    .md\:w-auto {
      width: auto;
    }
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .md\:flex-row {
      flex-direction: row;
    }
    .md\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }
    .md\:gap-16 {
      gap: calc(var(--spacing) * 16);
    }
    .md\:gap-20 {
      gap: calc(var(--spacing) * 20);
    }
    .md\:gap-gutter {
      gap: 24px;
    }
    .md\:gap-y-12 {
      row-gap: calc(var(--spacing) * 12);
    }
    .md\:p-1 {
      padding: var(--spacing);
    }
    .md\:p-10 {
      padding: calc(var(--spacing) * 10);
    }
    .md\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }
    .md\:px-10 {
      padding-inline: calc(var(--spacing) * 10);
    }
    .md\:px-margin-desktop {
      padding-inline: 64px;
    }
    .md\:py-0 {
      padding-block: 0px;
    }
    .md\:py-5 {
      padding-block: calc(var(--spacing) * 5);
    }
    .md\:py-20 {
      padding-block: calc(var(--spacing) * 20);
    }
    .md\:py-section-gap {
      padding-block: 60px;
    }
    .md\:text-left {
      text-align: left;
    }
    .md\:text-headline-xl {
      font-size: 48px;
      line-height: var(--tw-leading, 60px);
      letter-spacing: var(--tw-tracking, -0.02em);
      font-weight: var(--tw-font-weight, 700);
    }
    .md\:text-body-lg {
      font-size: 18px;
      line-height: var(--tw-leading, 28px);
      font-weight: var(--tw-font-weight, 400);
    }
    .md\:text-headline-lg {
      font-size: 32px;
      line-height: var(--tw-leading, 40px);
      font-weight: var(--tw-font-weight, 700);
    }
    .md\:text-headline-md {
      font-size: 24px;
      line-height: var(--tw-leading, 32px);
      font-weight: var(--tw-font-weight, 700);
    }
    .md\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
    .md\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
    .md\:tracking-normal {
      --tw-tracking: var(--tracking-normal);
      letter-spacing: var(--tracking-normal);
    }
  }
  @media (width >= 64rem) {
    .lg\:block {
      display: block;
    }
    .lg\:hidden {
      display: none;
    }
    .lg\:w-1\/3 {
      width: calc(1 / 3 * 100%);
    }
    .lg\:w-2\/3 {
      width: calc(2 / 3 * 100%);
    }
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:flex-row {
      flex-direction: row;
    }
    .lg\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }
    .lg\:p-1 {
      padding: var(--spacing);
    }
  }
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
    }
  }
}