/* ==========================================================================
   Hands On Physical Therapy - Modern Stylesheet
   Color Palette (from logo):
   - Earth Brown: #8B6F47
   - Sage Green: #71A38B
   - Slate Blue: #7F97A8
   - Dark Green: #4A7A64
   - Light Sage: #E8F0EC
   - Warm Cream: #FAF8F5
   - Dark Text: #2D3436
   ========================================================================== */

/* === BASE & RESET === */
:root {
    --earth-brown: #8B6F47;
    --sage-green: #71A38B;
    --dark-green: #4A7A64;
    --light-sage: #E8F0EC;
    --slate-blue: #7F97A8;
    --warm-cream: #FAF8F5;
    --dark-text: #2D3436;
    --body-text: #555555;
    --white: #FFFFFF;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --transition: all 0.3s ease;
}

* {
    box-sizing: border-box;
}

body {
    overflow-x: hidden !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--body-text);
    line-height: 1.7;
    background-color: var(--warm-cream);
}

a {
    text-decoration: none;
    color: var(--sage-green);
    transition: var(--transition);
}
a:hover {
    text-decoration: none;
    color: var(--dark-green);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--dark-text);
    font-weight: 600;
    line-height: 1.3;
}

img {
    max-width: 100%;
    height: auto;
}

/* === TOP HEADER BAR === */
.top-header {
    background: var(--white);
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Pairs the figures mark and the wordmark so they read as one logo instead of
   two elements separated by grid columns. */
.header-lockup {
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
}

/* Figures mark: 600x437 source, cropped tight to the artwork (1.372:1).
   70px tall renders ~96px wide. */
.top-header-logo {
    max-height: 70px;
    width: auto;
    flex-shrink: 0;
}

/* Wordmark: 900x105 source, cropped tight to the lettering (8.574:1).
   38px tall renders ~326px wide. min-width:0 lets it shrink (and scale down
   proportionally) on very narrow screens rather than overflowing. */
.top-header-wordmark {
    max-height: 38px;
    width: auto;
    min-width: 0;
}

.top-header-contact-info {
    color: var(--dark-text);
}

.top-header-contact-info a {
    display: block;
    text-decoration: none;
}

.top-header-contact-number {
    font-size: 24px;
    font-weight: 700;
    color: var(--earth-brown);
    line-height: 1.25;
}
.top-header-contact-number:hover {
    color: #7A5F3A;
}

.top-header-contact-email {
    font-size: 14px;
    color: var(--body-text);
}
.top-header-contact-email:hover {
    color: var(--sage-green);
}

/* Quieter than the old filled pill so it doesn't outrank the phone number */
.top-header-directions {
    font-size: 13px;
    font-weight: 500;
    color: var(--sage-green);
    margin-top: 3px;
}
.top-header-directions:hover {
    color: var(--dark-green);
}

/* === NAVBAR === */
.navbar {
    padding: 0;
}

/* Anchor point for the absolutely positioned stuck logo */
.navbar > .container {
    position: relative;
}

/* Compact logo revealed once the sticky navbar detaches from the top header.
   Positioned absolutely so revealing it never nudges the centred menu.
   Uses logo-white.png, a white silhouette that sits directly on the green bar
   with no containing chip. */
.navbar-logo {
    position: absolute;
    top: 50%;
    /* Absolute offsets resolve against the container's padding box, which sits
       outside its gutter, so `left: 0` would sit flush to the edge while the
       toggler is inset. Reuse the container's own padding expression so both
       line up with the page content. */
    left: calc(var(--bs-gutter-x) * 0.5);
    transform: translateY(-50%) translateX(-10px);
    display: block;
    line-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.navbar-logo img {
    display: block;
    max-height: 38px;
    width: auto;
}

.navbar.is-stuck .navbar-logo {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

/* Lifts the bar off the content once it is stuck */
.navbar.is-stuck {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.13);
}

@media (max-width: 991.98px) {
    /* Below the expand breakpoint the nav links are hidden, and they are what
       give the bar its height via their 16px vertical padding. Without them
       `.navbar { padding: 0 }` leaves the bar exactly as tall as the toggler,
       so the button sits flush against both edges. Restore symmetric room. */
    .navbar {
        padding: 10px 0;
    }

    /* Logo on the left, toggler pushed over to the right. The logo inherits
       left: 0 from the base rule; the toggler is a flex item so an auto left
       margin moves it to the far edge. */
    .navbar-toggler {
        margin-left: auto;
    }

    /* Pin the logo to the middle of the toggler row rather than to 50% of the
       navbar: when the menu is open the navbar grows tall and a 50% anchor
       drifts down over the nav links. Offsets resolve against the container,
       which sits inside the navbar's 10px padding, so 20px here lines the logo
       centre up with the 40px toggler's centre. */
    .navbar-logo {
        top: 20px;
    }
}

.bg-Handson-pt {
    background-color: var(--sage-green) !important;
}

.navbar-nav .nav-link {
    padding: 16px 20px !important;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: var(--transition);
    position: relative;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active .nav-link {
    background: rgba(255, 255, 255, 0.15);
}

.navbar-nav .nav-link::after {
    content: none;
}

/* === ACCENT BORDERS === */
.handson-border-top {
    background: linear-gradient(90deg, var(--sage-green), var(--slate-blue));
    height: 4px;
}

.border-top2 {
    background: linear-gradient(90deg, var(--slate-blue), var(--sage-green));
    height: 4px;
}

.border-top3 {
    background: linear-gradient(90deg, var(--earth-brown), var(--sage-green));
    height: 4px;
}

/* === HERO CAROUSEL === */
.carousel {
    width: 100% !important;
    overflow: hidden !important;
    right: 0 !important;
}

.carousel-inner {
    overflow: visible;
}

.hero-carousel {
    position: relative;
}

.hero-carousel .carousel-item img {
    object-fit: cover;
    min-height: 350px;
    max-height: 500px;
    filter: brightness(0.85);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.hero-text {
    color: var(--white);
    text-align: center;
    padding: 20px;
}

.hero-text h1 {
    color: var(--white);
    font-size: 3rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero-text p {
    font-size: 1.2rem;
    opacity: 0.95;
    text-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

/* === MAIN CONTENT SECTIONS === */
.middle-content {
    padding-top: 80px;
    padding-bottom: 80px;
}

.section-light {
    background: var(--white);
    padding: 80px 0;
}

.section-cream {
    background: var(--warm-cream);
    padding: 80px 0;
}

.section-green {
    background: var(--light-sage);
    padding: 80px 0;
}

/* === PAGE TITLES === */
.front-h1-top {
    color: var(--slate-blue);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.front-h1 {
    color: var(--sage-green);
    font-size: 1.4rem;
    font-weight: 400;
    font-style: italic;
    display: block;
    margin-top: 0;
}

.staff-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--earth-brown);
    margin-bottom: 15px;
}

/* === FEATURE CARDS === */
.feature-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 35px 30px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.feature-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--light-sage);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 24px;
    color: var(--sage-green);
}

.feature-card h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.feature-card p {
    font-size: 0.95rem;
    color: var(--body-text);
    margin-bottom: 0;
}

/* === TESTIMONIALS === */
.front-testimonal {
    background: linear-gradient(135deg, var(--sage-green), var(--dark-green));
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.front-testimonal::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.text-testimonals {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.05rem;
    line-height: 1.8;
    font-style: italic;
}

.testimonals-h2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    color: var(--white);
    font-size: 2rem;
}

.carousel-inner .carousel-item .img-box {
    width: 65px;
    height: 65px;
}

.initials-avatar {
    font-size: 22px;
    font-weight: 700;
    color: var(--sage-green);
    line-height: 1;
}

.carousel-control-prev,
.carousel-control-next {
    opacity: 0.7;
    transition: var(--transition);
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

@media (min-width: 320px) and (max-width: 640px) {
    .carousel-inner .carousel-item p {
        font-size: 14px;
    }
    .carousel-control-prev {
        left: -10px;
    }
    .carousel-control-next {
        right: -10px;
    }
}

/* === STAFF / TEAM CARDS === */
/* Matches the .compare-card treatment: a 4px accent along the top rather than
   down the side, and a lift on hover. Background stays white rather than
   copying compare-card's --light-sage, because several of these cards sit on
   .section-green, which is that exact colour, and would blend into it. */
.team-member {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 35px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--sage-green);
    transition: var(--transition);
}

.team-member:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

/* Alternating accent, same pairing the compare cards use */
.team-member.alt {
    border-top-color: var(--slate-blue);
}

.team-member h2 {
    font-size: 1.4rem;
    color: var(--earth-brown);
    margin-bottom: 15px;
}

.team-member h2.has-credentials {
    margin-bottom: 10px;
}

/* Role label following a team member's name, e.g. (Co-Owner). Bootstrap's
   <small> is 0.875em, which reads almost the same size as the name beside it.
   Sized in em so it tracks the heading. */
.team-role {
    font-size: 0.68em;
    font-weight: 500;
    color: var(--body-text);
    white-space: nowrap;
}

/* === CREDENTIAL PILLS === */
.credential-list {
    margin-bottom: 18px;
}

.credential-pill {
    display: inline-block;
    background: var(--light-sage);
    color: var(--dark-green);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.4;
    padding: 5px 13px;
    border-radius: 50px;
    margin: 0 6px 6px 0;
    white-space: nowrap;
}

/* === FORMS === */
.form-control {
    border: 2px solid #e8e8e8;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 15px;
    transition: var(--transition);
    background: var(--white);
}

.form-control:focus {
    border-color: var(--sage-green);
    box-shadow: 0 0 0 3px rgba(113, 163, 139, 0.15);
}

.form-label {
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: 6px;
    font-size: 14px;
}

.btn-secondary {
    background: var(--sage-green);
    border: none;
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;
    transition: var(--transition);
}

.btn-secondary:hover {
    background: var(--dark-green);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* === CTA BUTTON === */
.btn-cta {
    display: inline-block;
    background: var(--earth-brown);
    color: var(--white);
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    transition: var(--transition);
    border: none;
}

.btn-cta:hover {
    background: #7A5F3A;
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Secondary pairing for .btn-cta.
   Padding is 12px/33px rather than 14px/35px so the 2px border brings the total
   box to the same size as .btn-cta, keeping both buttons the same height. */
.btn-cta-outline {
    display: inline-block;
    background: transparent;
    color: var(--sage-green);
    padding: 12px 33px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    transition: var(--transition);
    border: 2px solid var(--sage-green);
}

.btn-cta-outline:hover {
    background: var(--sage-green);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* === FOOTER === */
.footer {
    background: var(--dark-text);
    padding: 50px 0 30px;
    color: rgba(255, 255, 255, 0.8);
}

/* Footer brand lockup. Uses the white silhouettes because the footer
   background is dark; the colour logos are flattened onto white and would
   show as rectangles here. */
.footer-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-mark {
    max-height: 44px;
    width: auto;
    flex-shrink: 0;
}

.footer-wordmark {
    max-height: 22px;
    width: auto;
    min-width: 0;
}

.footer h5 {
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer h5::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 3px;
    background: var(--sage-green);
    border-radius: 3px;
}

.footer-title {
    font-size: 15px;
    margin-bottom: 0 !important;
    padding-bottom: 4px !important;
    color: #ecebf1;
    font-weight: bolder;
}

.footer-links {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}
.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition);
}
.footer-links a:hover {
    color: var(--sage-green);
}

.footer-contact-info {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 2;
}
.footer-contact-info a {
    color: rgba(255, 255, 255, 0.8);
    transition: var(--transition);
}
.footer-contact-info a:hover {
    color: var(--sage-green);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
    margin-top: 40px;
}

.sapphire {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    text-align: center;
}
.sapphire a {
    color: rgba(255, 255, 255, 0.6);
    transition: var(--transition);
}
.sapphire a:hover {
    color: var(--sage-green);
}

/* === CONTACT SPLIT PANEL ===
   One panel split into a green detail column and a white form column, rather
   than two separate floating cards. overflow:hidden lets the two flush columns
   share the panel's rounded corners. */
.contact-panel {
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.contact-panel-aside {
    background: linear-gradient(160deg, var(--sage-green), var(--dark-green));
    color: rgba(255, 255, 255, 0.9);
    padding: 45px 38px;
}

.contact-panel-aside h2 {
    color: var(--white);
    font-size: 1.3rem;
    margin-bottom: 30px;
}

.contact-panel-aside a {
    color: var(--white);
}

.contact-panel-aside a:hover {
    color: var(--white);
    text-decoration: underline;
}

.contact-panel-body {
    padding: 45px 40px;
}

.contact-panel-body h2 {
    font-size: 1.3rem;
    color: var(--earth-brown);
    margin-bottom: 4px;
}

/* Icon + label + value row used in the green column */
.contact-item {
    display: flex;
    gap: 14px;
    margin-bottom: 24px;
}

.contact-item:last-child {
    margin-bottom: 0;
}

.contact-item > i {
    font-size: 17px;
    line-height: 1.7;
    opacity: 0.85;
    flex-shrink: 0;
}

.contact-item-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    opacity: 0.7;
    margin-bottom: 1px;
}

.contact-item-value {
    font-size: 15px;
    line-height: 1.6;
}

/* === CONTENT CARDS (for services, careers, etc.) === */
.content-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 40px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.content-card h2 {
    color: var(--earth-brown);
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.content-card ul {
    padding-left: 0;
    list-style: none;
}

.content-card ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    line-height: 1.6;
}

.content-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    background: var(--sage-green);
    border-radius: 50%;
}

/* === VIDEO RESPONSIVE === */
.videoresp {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
    margin: 20px auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.videoresp iframe,
.videoresp object,
.videoresp embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
}

/* === UTILITY OVERRIDES === */
/* NOTE: Do not add `.row { margin: 0 !important; }` here.
   Bootstrap's g-* gutter classes apply padding-top to columns and cancel it
   with a negative margin-top on the row. Overriding the row margin keeps the
   column padding but removes the compensation, which adds phantom space above
   every gutter row. Horizontal overflow is already handled by
   `body { overflow-x: hidden }` above. */

.alert {
    margin-bottom: 0 !important;
}

hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08), transparent);
    margin: 40px 0;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .top-header {
        padding: 12px 0;
    }

    /* Scale the lockup down so mark + wordmark still fit side by side on a
       phone. At 26px the wordmark is ~223px, leaving room for the mark. */
    .header-lockup {
        gap: 12px;
    }

    .top-header-logo {
        max-height: 52px;
    }

    .top-header-wordmark {
        max-height: 26px;
    }

    .top-header-contact-number {
        font-size: 20px;
    }

    .top-header-directions {
        font-size: 12px;
    }

    .front-h1-top {
        font-size: 1.6rem;
    }

    .middle-content {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .front-testimonal,
    .section-light,
    .section-cream,
    .section-green {
        padding: 50px 0;
    }

    .hero-text h1 {
        font-size: 2rem;
    }

    .team-member {
        padding: 25px;
    }

    .contact-panel-aside,
    .contact-panel-body {
        padding: 32px 26px;
    }

    .content-card {
        padding: 25px;
    }

    .feature-card {
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .navbar-nav .nav-link {
        padding: 12px 20px !important;
    }

    .footer {
        text-align: center;
        padding: 40px 0 20px;
    }

    .footer-lockup {
        justify-content: center;
    }

    .footer h5::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* === GOOGLE FONTS IMPORT (loaded in header) === */
/* Using Inter for body, plus fallbacks */

/* === STEP CARDS === */
.step-card {
    text-align: center;
    padding: 30px 25px;
}

.step-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--sage-green);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 auto 20px;
}

.step-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.step-card p {
    font-size: 0.95rem;
    color: var(--body-text);
}

/* === FULL-WIDTH BANNER === */
.banner-section {
    position: relative;
    min-height: 300px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(74, 122, 100, 0.8);
}

.banner-section .banner-content {
    position: relative;
    z-index: 2;
    color: var(--white);
    text-align: center;
    padding: 60px 20px;
    max-width: 700px;
}

.banner-section .banner-content h2 {
    color: var(--white);
    font-size: 2rem;
    margin-bottom: 15px;
}

.banner-section .banner-content p {
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.8;
}

/* === IMAGE TEXT SPLIT === */
.split-section {
    overflow: hidden;
}

.split-image {
    width: 100%;
    height: 100%;
    min-height: 350px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* === COMPARE CARDS === */
.compare-card {
    background: var(--light-sage);
    border-radius: var(--radius-md);
    padding: 40px;
    height: 100%;
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--sage-green);
    transition: var(--transition);
}

.compare-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.compare-card.alt {
    border-top-color: var(--slate-blue);
}

.compare-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
}

/* Key facts strip for the job summary on the careers page */
.role-facts {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 28px;
    padding-top: 24px;
}

.role-fact {
    text-align: center;
}

.role-fact-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--sage-green);
    margin-bottom: 3px;
}

.role-fact-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--earth-brown);
}

.compare-card .compare-icon {
    font-size: 2rem;
    color: var(--sage-green);
    margin-bottom: 15px;
}

.compare-card.alt .compare-icon {
    color: var(--slate-blue);
}

/* === NOTE CALLOUT === */
.note-callout {
    background: var(--warm-cream);
    border-left: 4px solid var(--earth-brown);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 20px 25px;
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 0.95rem;
}

.note-callout strong {
    color: var(--earth-brown);
}