/* site.css - responsive and touch-friendly styles for PicMeals */
body {
    padding-top: 64px;
}

/* Brand logo font (ensure this is in a CSS file that is loaded) */
@font-face {
    font-family: 'Pacifico';
    src: url('/static/fonts/Pacifico-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Larger touch targets and comfortable spacing for mobile/tablet */
.navbar .nav-link {
    padding: .625rem 1rem;
    font-size: 1rem;
}

.navbar-brand img {
    max-height: 40px;
}

.btn {
    min-height: 44px;
}

input.form-control, .form-select, textarea.form-control {
    min-height: 44px;
    font-size: 1rem;
}

/* Content padding adjustments */
.content-wrapper {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

@media (min-width: 576px) {
    .content-wrapper {
        padding-top: 1.5rem;
        padding-bottom: 2rem;
    }
}

/* Make cards take full width on small screens but remain centered with a max width */
.responsive-card {
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 576px) {
    .navbar-brand span {
        font-size: 1.05rem;
    }

    .responsive-card {
        max-width: 100%;
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .container {
        padding-left: .5rem;
        padding-right: .5rem;
    }
}

/* Minor tweaks */
.navbar-toggler {
    border: none;
}

#topbar, .btn-danger, bg-danger {
    background-color: var(--primary-color) !important;
}

.text-danger {
    color: var(--primary-color) !important;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-danger {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

    .btn-outline-danger:hover {
        background-color: var(--primary-color) !important;
        color: white !important;
        border-color: var(--primary-color) !important;
    }

#menuOpenCloseBtn {
    font-size: xx-large;
    border: none;
    padding: 0px;
    color: white;
    background-color: transparent;
}

.btn-circle {
    aspect-ratio: 1 / 1; /* Ensures perfect circle always */
    width: 38px; /* Sets base size (you can use em/rem if preferred) */
    max-width: 100%; /* Prevents overflow in responsive layouts */
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: x-small;
    border: none;
    color: white;
    text-decoration: none;
    box-sizing: border-box; /* Ensures padding/border don’t break circle */
    flex-shrink: 0; /* Prevents flex containers from squashing it */
}

/* Ensure nav-link contents are vertically centered (icons, text, badges) */
.nav.nav-pills .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* small space between icon and text */
}

    /* Keep icon line-height predictable */
    .nav.nav-pills .nav-link .fa,
    .nav.nav-pills .nav-link .fas,
    .nav.nav-pills .nav-link .fa-solid {
        line-height: 1;
    }

    /* Ensure badges center their content vertically */
    .nav.nav-pills .nav-link .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

/* Business image: fixed size, keep aspect, crop via object-fit */
.business-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: .375rem;
    flex: 0 0 64px; /* prevent flex from stretching the image */
    display: block;
}

/* Slightly smaller images on very small screens */
@media (max-width: 576px) {
    .business-img {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }
}

/* Horizontal card list for business search - one per row */
.business-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.business-card {
    display: flex;
    text-decoration: none;
    color: inherit;
    background: white;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.business-card:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    text-decoration: none;
}

.business-card-image-wrapper {
    position: relative;
    width: 120px;
    min-width: 120px;
    height: 120px;
    background: #f5f5f5;
    overflow: hidden;
    flex-shrink: 0;
}

@media (min-width: 576px) {
    .business-card-image-wrapper {
        width: 140px;
        min-width: 140px;
        height: 140px;
    }
}

/* Thumbnail for business view */
.menu-item-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Smaller thumbnail for mobile cards */
.menu-item-thumbnail-mobile {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Mobile card view for menu items */
.menu-item-mobile-card {
    border: 1px solid #dee2e6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease;
}

.menu-item-mobile-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.menu-item-mobile-card .card-body {
    padding: 0.5rem;
}

.menu-item-mobile-card h6 {
    font-size: 0.95rem;
    line-height: 1.3;
}

.menu-item-mobile-card .btn-sm {
    font-size: 0.8rem;
    line-height: 1.3;
}

.business-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.business-card-bookmark {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.business-card-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
}

.business-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

.business-card-cuisine {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.business-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.business-card-footer .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.business-card-address {
    font-size: 0.8rem;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ensure text truncation works for long names */
.business-title {
    max-width: calc(100% - 48px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Small spacing adjustments */
.business-info {
    min-width: 0;
}
/* allow text truncation inside flex */

/* Desktop: show offcanvas as persistent left sidebar and hide the toggle button */
@media (min-width: 992px) {
    /* Position the offcanvas as a fixed sidebar */
    #offcanvasLeft {
        position: fixed;
        top: 64px; /* match navbar height / body padding-top */
        left: 0;
        width: 240px;
        height: calc(100vh - 64px);
        visibility: visible !important;
        transform: none !important;
        background: var(--bs-body-bg, #fcfcfd);
        border-right: 1px solid rgba(0,0,0,.05);
        padding-top: 1rem;
        display: block !important;
        z-index: 1020;
        overflow-y: auto;
        background-color: #fcfcfd !important;
        -webkit-box-shadow: 3px 0px 10px 0px rgba(155, 155, 155, 0.25);
    }

        /* Make the offcanvas body use normal padding */
        #offcanvasLeft .offcanvas-body {
            padding: .5rem 1rem;
        }

    /* Hide the menu toggle button in navbar on larger screens */
    .navbar .btn[data-bs-toggle="offcanvas"] {
        display: none !important;
    }

    /* Shift main content to the right to make room for the sidebar */
    .content-wrapper {
        margin-left: 260px;
    }

    /* Ensure navbar sits above the fixed sidebar */
    .navbar {
        z-index: 1030;
    }
}

/* start left menu*/
/* Sidebar look */
.sidebar-nav.offcanvas {
    --bs-offcanvas-width: 280px;
    border-right: 1px solid rgba(0,0,0,.05);
    background: linear-gradient(180deg, #ffffff 0%, #f7f7fb 100%);
}

.offcanvas-header {
    border-bottom: 1px solid rgba(0,0,0,.05);
}

.nav-section-title {
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6c757d;
    margin: .75rem 0 .25rem;
    padding-left: .5rem;
}

.nav-sep {
    height: 1px;
    background: rgba(0,0,0,.06);
    margin: .75rem 0;
}

.sidebar-footer {
    font-size: .85rem;
    color: #6c757d;
    border-top: 1px solid rgba(0,0,0,.05);
    padding-top: .75rem;
}

/* On lg+ the offcanvas becomes static sidebar; add matching left space for page content */
@media (min-width: 992px) {
    body {
        padding-left: 240px; /* matches #offcanvasLeft width */
    }

    .sidebar-toggler {
        display: none; /* hide burger on desktop */
    }
}
/* end left menu*/

/* Scope to the sidebar nav to avoid global side effects */
.nav.nav-pills .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space between icon, label, badge */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

    /* Keep icons from increasing line-height */
    .nav.nav-pills .nav-link i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.1rem;
    }

    /* Hide badges by default; show only when element contains content */
    .nav.nav-pills .nav-link .badge {
        display: none;
        margin-left: auto; /* push badge to the far right if desired; remove if not wanted */
        align-items: center;
        justify-content: center;
        height: 1.5rem;
        min-width: 1.5rem;
        padding: 0 0.4rem;
        font-size: 0.75rem;
        line-height: 1;
        white-space: nowrap;
    }


        /* When badge has inner HTML/text, show it */
        .nav.nav-pills .nav-link .badge:not(:empty) {
            display: inline-flex;
        }

        /* Slight visual tweak for pill appearance */
        .nav.nav-pills .nav-link .badge.badge-pill {
            border-radius: 999px;
        }

    /* Ensure small buttons and forms in nav align with links */
    .nav.nav-pills .nav-link .btn,
    .nav.nav-pills .nav-link form {
        margin-left: 0.5rem;
    }

/* Top bell styling */
#notif-bell {
    position: relative;
}

#bell-count {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 0.65rem;
    line-height: 1;
}

/* Inbox simple panel */
#inbox {
    max-height: 50vh;
    overflow: auto;
}


/* Hover color: change both icon and text together to var(--primary-color) */
/* Target anchor links used across the UI: .lnk (generic) and .nav-link.lnk (nav items) */
a.nav-link {
    color: #4e4f4f;
}

.nav-link.lnk,
a.nav-link,
.navbar-brand.lnk {
    color: inherit;
    transition: color 0.15s ease-in-out;
}

    /* On hover or focus, set link color. Use specificity and !important to override Bootstrap defaults where needed. */
    a.nav-link:hover,
    .nav-link.lnk:hover {
        color: var(--primary-color) !important;
        text-decoration: none;
    }

    /* Ensure Font Awesome icons and inline <i> elements inside those links inherit the link color */
    .lnk .fa,
    .lnk .fa-solid,
    a.nav-link i,
    a.nav-link fa,
    a.nav-link .fa-solid,
    .nav-link.lnk i,
    .nav-link.lnk .fa,
    .nav-link.lnk .fa-solid {
        color: inherit !important;
        transition: color 0.15s ease-in-out;
    }

    /* Ensure spans inside links (text labels) also inherit color */
    a.nav-link span
    .nav-link.lnk span {
        color: inherit !important;
    }

    /* Avoid recoloring badges or important UI elements unintentionally:
           target only icon and immediate span/text inside the link; badges keep their own color. */

    a.nav-link .badge,
    .nav-link.lnk .badge {
        color: unset !important;
    }

    a.nav-link:focus, a.nav-link.lnk:focus {
        color: var(--primary-color) !important;
        text-decoration: none;
    }

/* Keep brand white and styled even on hover/focus, overriding generic .lnk rules */
#topbar .navbar-brand,
#topbar .navbar-brand span {
    font-family: 'Pacifico', cursive, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    text-decoration: none;
    font-size: xx-large;
    color: #fff !important;
}

    #topbar .navbar-brand:hover,
    #topbar .navbar-brand:focus,
    #topbar .navbar-brand:hover span,
    #topbar .navbar-brand:focus span {
        color: #fff !important;
        text-decoration: none;
    }

.transparent {
    background-color: transparent !important;
    border: none !important;
}

/* pure-css vertical bars */
.chart-weekday {
    align-items: stretch;
}

.chart-bar {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

    .chart-bar .bar-holder {
        flex: 1 1 auto;
        display: flex;
        align-items: flex-end;
    }

    .chart-bar .bar {
        background: linear-gradient(180deg,#ed9890,#ed7368);
        width: 100%;
        border-radius: 4px 4px 0 0;
    }

/* Menu item layout helpers */
.menu-item-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

/* Menu item image for preview - smaller with rounded corners */
.menu-item-image-container {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    background-color: #f5f5f5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.menu-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

.list-group-item:hover .menu-item-image {
    transform: scale(1.08);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 576px) {
    .menu-item-image-container {
        width: 60px;
        height: 60px;
    }
}

.menu-item-left {
    flex: 1 1 auto;
    min-width: 0;
}

.menu-item-right {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

.menu-item-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0;
}

    .menu-item-title .badge {
        white-space: nowrap;
    }

    .menu-item-title .btn {
        padding: .125rem .35rem;
        line-height: 1;
    }

.menu-item-desc {
    margin-top: .25rem;
    color: #6c757d;
    word-wrap: break-word;
}

/* Prevent overflowing controls on small screens */
.menu-qty-group {
    width: 150px;
}

.min-w-0 {
    min-width: 0 !important;
}

/* Bell highlight animation when new paid order arrives */
#notif-bell.new {
    border-color: #ffc107 !important;
    color: #ffc107;
    animation: bellpulse 0.9s ease-in-out 2;
}

@keyframes bellpulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}

.notif-item {
    text-decoration: none;
    color: white;
    display: block;
}

/* Start Apply template colors to business dashboard */
#topbar {
    background-color: var(--primary-color) !important;
}

.btn-danger {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

    .btn-danger:hover {
        background-color: var(--primary-hover) !important;
        border-color: var(--primary-hover) !important;
    }

.btn-outline-danger {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

    .btn-outline-danger:hover {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        color: white !important;
    }

.bg-danger {
    background-color: var(--primary-color) !important;
}

.badge.bg-danger {
    background-color: var(--primary-color) !important;
}

.text-danger {
    color: var(--primary-color) !important;
}

.border-danger {
    border-color: var(--primary-color) !important;
}

/* Navigation links hover */
.nav-link.lnk:hover,
a.lnk:hover {
    color: var(--primary-color) !important;
}
.nav-link.lnk:hover i,
a.lnk:hover i {
    color: var(--primary-color) !important;
}

a.btn-success, a.btn-success.lnk, a.btn-success :hover, a.btn-success {
    color: white !important;
}



/* Ensure outline-danger links (anchor buttons) show white text on hover */
a.btn.btn-outline-danger:hover,
.btn-outline-danger:hover {
    color: white !important;
}

/* Ensure btn-danger links (including btn-lg) have white text always, even on hover */
a.btn.btn-danger,
a.btn.btn-danger:hover,
a.btn.btn-danger:focus,
a.btn.btn-danger:active {
    color: white !important;
    text-decoration: none !important;
}

/* Cards and alerts */
.alert-danger {
    background-color: rgba(var(--primary-rgb), 0.1);
    border-color: var(--primary-color);
    color: var(--primary-hover);
}

/* Form controls focus */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
}

/* Sidebar active items */
.nav-link.active {
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color) !important;
}

/* Links */
a:not(.btn):not(.nav-link) {
    color: var(--primary-color);
}

    a:not(.btn):not(.nav-link):hover {
        color: var(--primary-hover);
    }
/* End template colors to business dashboard */

/* Anonymous home landing page */
.home-landing {
    --home-ink: #17252f;
    --home-muted: #607079;
    background: #ffffff;
    color: var(--home-ink);
    overflow: hidden;
}

.full-width-page {
    width: 100%;
    max-width: none !important;
    margin-top: 0 !important;
    padding-right: 0;
    padding-left: 0;
}

.full-width-page-card {
    width: 100%;
    max-width: none;
    margin: 0 !important;
}

.full-width-page-body {
    padding: 0;
}

/* Contact and partnership page */
.contact-page {
    --contact-ink: #17252f;
    --contact-muted: #64757e;
    --contact-soft: #f7faf9;
    --contact-border: rgba(23, 37, 47, .1);
    background: #fff;
    color: var(--contact-ink);
    overflow: hidden;
}

.contact-container {
    position: relative;
    z-index: 1;
}

.contact-hero {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    padding: 5.5rem 0 6rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 35%, rgba(var(--primary-rgb), .12), transparent 22rem),
        linear-gradient(130deg, #fffaf7 0%, #fff 54%, #f5faf8 100%);
}

.contact-hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(1px);
}

.contact-hero-glow-primary {
    width: 28rem;
    height: 28rem;
    right: 4%;
    top: -14rem;
    border: 1px solid rgba(var(--primary-rgb), .15);
    box-shadow: 0 0 0 2.5rem rgba(var(--primary-rgb), .025), 0 0 0 5rem rgba(var(--primary-rgb), .018);
}

.contact-hero-glow-secondary {
    width: 15rem;
    height: 15rem;
    left: -7rem;
    bottom: -8rem;
    background: rgba(45, 154, 125, .08);
}

.contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1.2;
    text-transform: uppercase;
}

.contact-eyebrow span {
    display: inline-block;
    width: 2.2rem;
    height: 2px;
    background: currentColor;
}

.contact-eyebrow-dark {
    color: #238b70;
}

.contact-hero h1 {
    max-width: 780px;
    margin: 0;
    color: var(--contact-ink);
    font-size: clamp(3.1rem, 6vw, 5.7rem);
    font-weight: 800;
    letter-spacing: -.065em;
    line-height: .98;
}

.contact-hero-lead {
    max-width: 680px;
    margin: 2rem 0 0;
    color: var(--contact-muted);
    font-size: 1.18rem;
    line-height: 1.75;
}

.contact-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2.4rem;
}

.contact-primary-action,
.contact-submit-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--primary-color);
    box-shadow: 0 14px 28px rgba(var(--primary-rgb), .2);
    color: #fff !important;
    font-weight: 750;
    padding: .85rem 1.35rem;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.contact-primary-action:hover,
.contact-submit-action:hover {
    background: var(--primary-hover);
    box-shadow: 0 18px 34px rgba(var(--primary-rgb), .28);
    color: #fff !important;
    transform: translateY(-2px);
}

.contact-text-link {
    color: var(--contact-ink);
    font-size: .94rem;
    font-weight: 750;
    text-decoration: none;
}

.contact-text-link:hover {
    color: var(--primary-color);
}

.contact-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    margin-top: 2.75rem;
    color: #718087;
    font-size: .8rem;
    font-weight: 650;
}

.contact-trust-row i {
    margin-right: .35rem;
    color: #2eaa87;
}

.contact-hero-card {
    position: relative;
    min-height: 430px;
    padding: 3rem 2.75rem 2.5rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 2.1rem;
    background: linear-gradient(145deg, #18343a 0%, #145b58 58%, #218f72 100%);
    box-shadow: 0 28px 70px rgba(19, 65, 62, .22);
    color: #fff;
}

.contact-hero-card::after {
    position: absolute;
    right: -5rem;
    bottom: -6rem;
    width: 19rem;
    height: 19rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    box-shadow: 0 0 0 2rem rgba(255, 255, 255, .04), 0 0 0 4rem rgba(255, 255, 255, .025);
    content: '';
}

.contact-hero-card-orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    transform: rotate(-25deg);
}

.contact-hero-card-orbit-one {
    width: 18rem;
    height: 7rem;
    right: -3rem;
    top: 3rem;
}

.contact-hero-card-orbit-two {
    width: 23rem;
    height: 9rem;
    right: -5rem;
    top: 2rem;
}

.contact-hero-card-icon,
.contact-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.7rem;
    height: 3.7rem;
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 1.4rem;
}

.contact-card-kicker,
.contact-form-kicker {
    margin: 2.5rem 0 .85rem;
    color: rgba(255, 255, 255, .7);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.contact-hero-card h2 {
    position: relative;
    z-index: 1;
    max-width: 360px;
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.05;
}

.contact-hero-card > p:not(.contact-card-kicker) {
    position: relative;
    z-index: 1;
    max-width: 360px;
    margin: 1.2rem 0 0;
    color: rgba(255, 255, 255, .76);
    line-height: 1.65;
}

.contact-card-stat-row {
    position: absolute;
    z-index: 1;
    right: 2.75rem;
    bottom: 2.5rem;
    left: 2.75rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.contact-card-stat-row div {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.contact-card-stat-row strong {
    color: #b8f1d9;
    font-size: 1.4rem;
    line-height: 1;
}

.contact-card-stat-row span {
    color: rgba(255, 255, 255, .65);
    font-size: .68rem;
    line-height: 1.35;
}

.contact-opportunities {
    padding: 7rem 0;
    background: #fff;
}

.contact-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    align-items: end;
    gap: 4rem;
    margin-bottom: 3.3rem;
}

.contact-section-heading h2,
.contact-conversation h2,
.contact-bottom-cta h2 {
    max-width: 680px;
    margin: 0;
    color: var(--contact-ink);
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 780;
    letter-spacing: -.06em;
    line-height: 1.02;
}

.contact-section-heading > p {
    margin: 0 0 .25rem;
    color: var(--contact-muted);
    line-height: 1.75;
}

.contact-opportunity-card {
    position: relative;
    min-height: 300px;
    padding: 1.8rem;
    overflow: hidden;
    border: 1px solid var(--contact-border);
    border-radius: 1.4rem;
    background: #fff;
    box-shadow: 0 12px 35px rgba(23, 37, 47, .045);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.contact-opportunity-card:hover {
    border-color: rgba(var(--primary-rgb), .3);
    box-shadow: 0 20px 45px rgba(23, 37, 47, .1);
    transform: translateY(-5px);
}

.contact-opportunity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    margin-bottom: 2.8rem;
    border-radius: 1rem;
    background: rgba(var(--primary-rgb), .1);
    color: var(--primary-color);
    font-size: 1.15rem;
}

.contact-opportunity-card h3 {
    max-width: 205px;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 750;
    letter-spacing: -.02em;
}

.contact-opportunity-card p {
    margin: .85rem 0 0;
    color: var(--contact-muted);
    font-size: .9rem;
    line-height: 1.65;
}

.contact-opportunity-number {
    position: absolute;
    right: 1.5rem;
    bottom: 1.25rem;
    color: rgba(var(--primary-rgb), .3);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.contact-conversation {
    padding: 7rem 0;
    background: var(--contact-soft);
}

.contact-conversation h2 {
    max-width: 500px;
}

.contact-conversation-intro {
    max-width: 500px;
    margin: 1.5rem 0 0;
    color: var(--contact-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

.contact-conversation-list {
    display: grid;
    gap: 1.2rem;
    max-width: 520px;
    margin: 2.3rem 0 0;
    padding: 0;
    list-style: none;
}

.contact-conversation-list li {
    display: flex;
    gap: .8rem;
    color: var(--contact-muted);
    line-height: 1.65;
}

.contact-conversation-list i {
    flex: 0 0 auto;
    margin-top: .25rem;
    color: #2a9f7d;
}

.contact-conversation-list strong {
    color: var(--contact-ink);
}

.contact-response-note {
    display: flex;
    gap: .75rem;
    max-width: 500px;
    margin-top: 2.6rem;
    padding: 1.1rem 1.2rem;
    border-left: 3px solid var(--primary-color);
    background: rgba(255, 255, 255, .8);
    color: #718087;
    font-size: .84rem;
    line-height: 1.55;
}

.contact-response-note i {
    margin-top: .2rem;
    color: var(--primary-color);
}

.contact-form-card {
    min-height: 640px;
    padding: 2.5rem;
    border: 1px solid rgba(23, 37, 47, .08);
    border-radius: 1.8rem;
    background: #fff;
    box-shadow: 0 25px 70px rgba(23, 37, 47, .08);
}

.contact-form-heading .contact-form-kicker,
.contact-success-state .contact-form-kicker {
    margin: 0 0 .9rem;
    color: var(--primary-color);
}

.contact-form-heading h2,
.contact-success-state h2 {
    margin: 0;
    color: var(--contact-ink);
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -.05em;
}

.contact-form-heading > p:last-child,
.contact-success-state > p:not(.contact-form-kicker) {
    margin: .9rem 0 0;
    color: var(--contact-muted);
    line-height: 1.65;
}

.contact-form {
    margin-top: 2rem;
}

.contact-form .form-label {
    margin-bottom: .45rem;
    color: var(--contact-ink);
    font-size: .82rem;
    font-weight: 750;
}

.contact-form .form-label span {
    color: #9aa6aa;
    font-weight: 500;
}

.contact-form .form-control,
.contact-form .form-select {
    min-height: 3.15rem;
    border: 1px solid #dfe7e5;
    border-radius: .8rem;
    background-color: #fbfdfc;
    color: var(--contact-ink);
    font-size: .9rem;
    padding: .75rem .9rem;
}

.contact-form textarea.form-control {
    min-height: 9.5rem;
    resize: vertical;
}

.contact-form .form-control::placeholder {
    color: #a7b1b3;
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
    border-color: rgba(var(--primary-rgb), .65);
    background: #fff;
    box-shadow: 0 0 0 .22rem rgba(var(--primary-rgb), .1);
}

.contact-validation {
    margin-bottom: 1rem;
    color: #bf4d43;
    font-size: .82rem;
}

.contact-validation:empty {
    display: none;
}

.contact-validation ul {
    margin: 0;
    padding-left: 1.2rem;
}

.contact-field-error {
    display: block;
    margin-top: .35rem;
    color: #bf4d43;
    font-size: .75rem;
}

.contact-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.contact-form-privacy {
    margin: 0;
    color: #879398;
    font-size: .76rem;
    line-height: 1.4;
}

.contact-form-privacy i {
    margin-right: .3rem;
    color: #3ba181;
}

.contact-success-state {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    min-height: 580px;
    max-width: 470px;
    margin: 0 auto;
}

.contact-success-icon {
    margin-bottom: 2rem;
    background: rgba(var(--primary-rgb), .12);
    color: var(--primary-color);
}

.contact-success-state .contact-primary-action {
    margin-top: 2rem;
}

.contact-bottom-cta {
    padding: 2rem 0 6rem;
    background: var(--contact-soft);
}

.contact-bottom-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.8rem 3rem;
    border-radius: 1.7rem;
    background: #17383c;
    box-shadow: 0 20px 55px rgba(23, 56, 60, .16);
    color: #fff;
}

.contact-bottom-cta .contact-form-kicker {
    margin: 0 0 .7rem;
    color: #a4e4c9;
}

.contact-bottom-cta h2 {
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.contact-bottom-cta p:last-child {
    margin: .75rem 0 0;
    color: rgba(255, 255, 255, .7);
}

.contact-bottom-cta p a {
    color: #b8f1d9;
    font-weight: 700;
}

.contact-outline-action {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    color: #fff;
    font-size: .88rem;
    font-weight: 750;
    padding: .85rem 1.25rem;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.contact-outline-action:hover {
    border-color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 991.98px) {
    .contact-hero {
        min-height: 0;
        padding: 4.5rem 0 5rem;
    }

    .contact-hero-card {
        max-width: 600px;
        margin: 0 auto;
    }

    .contact-opportunities,
    .contact-conversation {
        padding: 5rem 0;
    }

    .contact-section-heading {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .contact-hero h1 {
        font-size: clamp(2.9rem, 12vw, 4.5rem);
    }

    .contact-hero-lead {
        font-size: 1.05rem;
    }

    .contact-hero-card {
        min-height: 390px;
        padding: 2.2rem 1.75rem 2rem;
        border-radius: 1.6rem;
    }

    .contact-card-stat-row {
        right: 1.75rem;
        bottom: 2rem;
        left: 1.75rem;
    }

    .contact-form-card {
        padding: 1.6rem;
        border-radius: 1.4rem;
    }

    .contact-bottom-cta-inner {
        align-items: flex-start;
        flex-direction: column;
        padding: 2rem 1.5rem;
    }

    .contact-outline-action {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .contact-hero {
        padding: 3.5rem 0 4rem;
    }

    .contact-hero-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 1rem;
    }

    .contact-primary-action {
        width: 100%;
    }

    .contact-text-link {
        text-align: center;
    }

    .contact-trust-row {
        align-items: flex-start;
        flex-direction: column;
        gap: .55rem;
        margin-top: 2rem;
    }

    .contact-hero-card h2 {
        font-size: 2rem;
    }

    .contact-card-stat-row {
        gap: .4rem;
    }

    .contact-card-stat-row strong {
        font-size: 1.15rem;
    }

    .contact-card-stat-row span {
        font-size: .62rem;
    }

    .contact-opportunities,
    .contact-conversation {
        padding: 4rem 0;
    }

    .contact-opportunity-card {
        min-height: 0;
    }

    .contact-opportunity-icon {
        margin-bottom: 1.8rem;
    }

    .contact-bottom-cta {
        padding-bottom: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-primary-action,
    .contact-submit-action,
    .contact-opportunity-card,
    .contact-outline-action {
        transition: none;
    }
}

@media (min-width: 992px) {
    .home-landing > section > .container {
        max-width: 1380px;
    }
}

.home-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(760px, calc(100vh - 64px));
    padding: 5.5rem 0 6.5rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 18%, rgba(var(--primary-rgb), .08), transparent 26rem),
        linear-gradient(120deg, #fff9f7 0%, #ffffff 55%, rgba(var(--primary-rgb), .06) 100%);
}

.home-hero-container {
    position: relative;
    z-index: 1;
}

.home-hero-glow {
    position: absolute;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    pointer-events: none;
    opacity: .7;
    filter: blur(2px);
}

.home-hero-glow-one {
    right: -9rem;
    top: -10rem;
    background: rgba(var(--primary-rgb), .11);
}

.home-hero-glow-two {
    left: 38%;
    bottom: -19rem;
    background: rgba(var(--primary-rgb), .07);
}

.home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.25rem;
    color: var(--primary-color);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.home-eyebrow-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0 .35rem rgba(var(--primary-rgb), .12);
}

.home-title {
    max-width: 730px;
    margin: 0 0 1.5rem;
    color: var(--home-ink);
    font-size: clamp(3.1rem, 6vw, 5.8rem);
    font-weight: 800;
    letter-spacing: -.065em;
    line-height: .98;
}

.home-title span {
    display: block;
    color: var(--primary-color);
}

.home-lead {
    max-width: 635px;
    margin: 0;
    color: var(--home-muted);
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    line-height: 1.75;
}

.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2rem;
}

.home-primary-action,
.home-secondary-action {
    min-width: 145px;
    padding: .8rem 1.35rem;
    border-radius: 999px;
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.home-primary-action {
    box-shadow: 0 12px 25px rgba(var(--primary-rgb), .22);
}

.home-primary-action:hover,
.home-secondary-action:hover {
    transform: translateY(-2px);
}

.home-primary-action:hover {
    box-shadow: 0 16px 30px rgba(var(--primary-rgb), .3);
}

.home-secondary-action {
    border: 1px solid rgba(23, 37, 47, .17);
    background: rgba(255, 255, 255, .76);
    color: var(--home-ink) !important;
}

.home-secondary-action:hover {
    border-color: var(--primary-color);
    background: #ffffff;
    color: var(--primary-color) !important;
}

.home-trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1.35rem;
    margin-top: 2.35rem;
    color: var(--home-muted);
    font-size: .88rem;
}

.home-trust-points span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.home-trust-points i {
    color: var(--primary-color);
}

.home-showcase {
    position: relative;
    max-width: 515px;
    min-height: 475px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.home-showcase-window {
    position: relative;
    z-index: 1;
    padding: 2rem;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 2rem;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 30px 75px rgba(23, 37, 47, .14), 0 8px 25px rgba(var(--primary-rgb), .08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.home-showcase-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.7rem;
}

.home-showcase-kicker {
    display: block;
    margin-bottom: .45rem;
    color: var(--primary-color);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.home-showcase-heading h2 {
    margin: 0;
    color: var(--home-ink);
    font-size: clamp(1.8rem, 3vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -.05em;
}

.home-showcase-bowl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    border-radius: 1rem;
    background: rgba(var(--primary-rgb), .1);
    color: var(--primary-color);
    font-size: 1.25rem;
}

.home-meal-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem;
    border: 1px solid rgba(23, 37, 47, .08);
    border-radius: 1.15rem;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(23, 37, 47, .07);
}

.home-meal-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.35rem;
    height: 4.35rem;
    flex: 0 0 4.35rem;
    border-radius: .9rem;
    background: linear-gradient(145deg, var(--primary-light), var(--primary-hover));
    color: #ffffff;
    font-size: 1.65rem;
    transform: rotate(-4deg);
}

.home-meal-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: .16rem;
}

.home-meal-copy span {
    color: var(--primary-color);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.home-meal-copy strong {
    overflow: hidden;
    color: var(--home-ink);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-meal-copy small,
.home-floating-card small,
.home-showcase-feature small {
    color: var(--home-muted);
    font-size: .76rem;
}

.home-meal-copy small i {
    margin-right: .2rem;
    color: #f2ae3d;
}

.home-meal-arrow {
    color: var(--primary-color);
    font-size: .9rem;
}

.home-showcase-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.35rem;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(23, 37, 47, .09);
}

.home-showcase-feature {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.home-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 2.15rem;
    border-radius: .7rem;
    background: rgba(var(--primary-rgb), .1);
    color: var(--primary-color);
    font-size: .8rem;
}

.home-showcase-feature div,
.home-floating-card span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .12rem;
}

.home-showcase-feature strong,
.home-floating-card strong {
    color: var(--home-ink);
    font-size: .82rem;
}

.home-showcase-orbit {
    position: absolute;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 50%;
    pointer-events: none;
}

.home-showcase-orbit-one {
    top: 0;
    right: -1rem;
    width: 16rem;
    height: 16rem;
}

.home-showcase-orbit-two {
    bottom: 0;
    left: -1rem;
    width: 11rem;
    height: 11rem;
    border-color: rgba(var(--primary-rgb), .1);
}

.home-floating-card {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem .9rem;
    border: 1px solid rgba(var(--primary-rgb), .14);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 16px 32px rgba(23, 37, 47, .13);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.home-floating-card-top {
    top: 7%;
    right: -2%;
}

.home-floating-card-bottom {
    bottom: 6%;
    left: -4%;
}

.home-floating-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    border-radius: .7rem;
    background: rgba(var(--primary-rgb), .1);
    color: var(--primary-color);
    font-size: .85rem;
}

.home-business {
    position: relative;
    padding: 7rem 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 12%, rgba(var(--primary-rgb), .3), transparent 24rem),
        linear-gradient(125deg, #17252f 0%, #203843 58%, #17252f 100%);
    color: #ffffff;
}

.home-business::before {
    position: absolute;
    right: -8rem;
    bottom: -13rem;
    width: 30rem;
    height: 30rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    box-shadow: 0 0 0 2rem rgba(255, 255, 255, .025), 0 0 0 5rem rgba(255, 255, 255, .02);
    content: "";
}

.home-business > .container {
    position: relative;
    z-index: 1;
}

.home-business-heading {
    max-width: 900px;
    margin-bottom: 3.5rem;
}

.home-business-heading h2 {
    margin: 0 0 1.25rem;
    color: #ffffff;
    font-size: clamp(2.25rem, 4.5vw, 4rem);
    font-weight: 800;
    letter-spacing: -.06em;
    line-height: 1.03;
}

.home-business-heading h2 span {
    display: block;
    color: var(--primary-light);
}

.home-business-heading p {
    max-width: 820px;
    margin: 0;
    color: rgba(255, 255, 255, .74);
    font-size: 1.1rem;
    line-height: 1.75;
}

.home-white-label-panel {
    height: 100%;
    padding: 2.25rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 1.6rem;
    background: #ffffff;
    box-shadow: 0 24px 50px rgba(0, 0, 0, .2);
    color: var(--home-ink);
}

.home-white-label-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.5rem;
    padding: .5rem .75rem;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), .1);
    color: var(--primary-color);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.home-white-label-panel h3 {
    margin: 0 0 .9rem;
    color: var(--home-ink);
    font-size: clamp(1.65rem, 2.4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.08;
}

.home-white-label-panel > p {
    margin: 0;
    color: var(--home-muted);
    line-height: 1.7;
}

.home-direct-url {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.65rem 0;
    padding: .9rem;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 1rem;
    background: #f8fafb;
}

.home-direct-url-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    flex: 0 0 2.7rem;
    border-radius: .8rem;
    background: var(--primary-color);
    color: #ffffff;
}

.home-direct-url > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .18rem;
}

.home-direct-url strong {
    overflow-wrap: anywhere;
    color: var(--home-ink);
    font-size: .9rem;
}

.home-direct-url small {
    color: var(--home-muted);
    font-size: .76rem;
}

.home-white-label-points {
    display: grid;
    gap: .75rem;
}

.home-white-label-points span {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--home-ink);
    font-size: .88rem;
    font-weight: 700;
}

.home-white-label-points i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), .12);
    color: var(--primary-color);
    font-size: .62rem;
}

.home-business-options {
    height: 100%;
    padding: 2.25rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 1.6rem;
    background: rgba(255, 255, 255, .07);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.home-business-options-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.home-business-options-heading .home-eyebrow {
    margin-bottom: .7rem;
}

.home-business-options-heading h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.65rem, 2.5vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.045em;
}

.home-business-options-heading > i {
    margin-top: .35rem;
    color: var(--primary-light);
    font-size: 1.7rem;
}

.home-business-option {
    height: 100%;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, .06);
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.home-business-option:hover {
    border-color: rgba(var(--primary-rgb), .65);
    background: rgba(255, 255, 255, .1);
    transform: translateY(-3px);
}

.home-business-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    margin-bottom: 1rem;
    border-radius: .8rem;
    background: rgba(var(--primary-rgb), .2);
    color: var(--primary-light);
    font-size: 1rem;
}

.home-business-option h4 {
    margin: 0 0 .5rem;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
}

.home-business-option p {
    margin: 0;
    color: rgba(255, 255, 255, .66);
    font-size: .86rem;
    line-height: 1.6;
}

.home-business-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1.2rem;
    background: rgba(0, 0, 0, .14);
}

.home-business-cta > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .25rem;
}

.home-business-cta strong {
    color: #ffffff;
    font-size: 1rem;
}

.home-business-cta span {
    color: rgba(255, 255, 255, .68);
    font-size: .87rem;
}

.home-business-action {
    flex: 0 0 auto;
    padding: .8rem 1.2rem;
    border-radius: 999px;
    background: #ffffff;
    color: var(--home-ink) !important;
    font-weight: 800;
    transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}

.home-business-action:hover {
    color: var(--primary-color) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
    transform: translateY(-2px);
}

.home-services,
.home-steps {
    padding: 7rem 0;
}

.home-services {
    position: relative;
    background: #ffffff;
}

.home-section-heading {
    max-width: 680px;
    margin: 0 auto 3.5rem;
}

.home-section-heading h2,
.home-steps h2,
.home-cta h2 {
    margin: 0 0 1rem;
    color: var(--home-ink);
    font-size: clamp(2.15rem, 4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1.05;
}

.home-section-heading p,
.home-steps > .container p,
.home-cta p {
    margin: 0;
    color: var(--home-muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.home-service-card {
    position: relative;
    height: 100%;
    padding: 2rem;
    overflow: hidden;
    border: 1px solid rgba(23, 37, 47, .09);
    border-radius: 1.4rem;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(23, 37, 47, .06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.home-service-card::after {
    position: absolute;
    right: -3rem;
    bottom: -4rem;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), .05);
    content: "";
}

.home-service-card:hover {
    border-color: rgba(var(--primary-rgb), .25);
    box-shadow: 0 20px 40px rgba(23, 37, 47, .1);
    transform: translateY(-6px);
}

.home-service-card-featured {
    border-color: rgba(var(--primary-rgb), .32);
    background: linear-gradient(160deg, #ffffff 0%, rgba(var(--primary-rgb), .06) 100%);
    transform: translateY(-10px);
}

.home-service-card-featured:hover {
    transform: translateY(-16px);
}

.home-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1.45rem;
    border-radius: 1rem;
    background: rgba(var(--primary-rgb), .1);
    color: var(--primary-color);
    font-size: 1.2rem;
}

.home-service-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 .75rem;
    color: var(--home-ink);
    font-size: 1.25rem;
    font-weight: 800;
}

.home-service-card p {
    position: relative;
    z-index: 1;
    min-height: 5rem;
    margin: 0 0 1.35rem;
    color: var(--home-muted);
    line-height: 1.65;
}

.home-service-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--primary-color);
    font-size: .82rem;
    font-weight: 800;
}

.home-service-link i {
    transition: transform .2s ease;
}

.home-service-card:hover .home-service-link i {
    transform: translateX(3px);
}

.home-steps {
    background: #f7fafb;
}

.home-steps h2 {
    max-width: 520px;
}

.home-steps > .container p {
    max-width: 500px;
}

.home-step-list {
    position: relative;
    display: grid;
    gap: 0;
}

.home-step-list::before {
    position: absolute;
    top: 2.35rem;
    bottom: 2.35rem;
    left: 1.1rem;
    border-left: 1px dashed rgba(var(--primary-rgb), .35);
    content: "";
}

.home-step {
    position: relative;
    display: flex;
    gap: 1.35rem;
    padding: 1.2rem 0;
}

.home-step-number {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    flex: 0 0 2.2rem;
    border: 5px solid #f7fafb;
    border-radius: 50%;
    background: var(--primary-color);
    color: #ffffff;
    font-size: .63rem;
    font-weight: 800;
}

.home-step h3 {
    margin: .05rem 0 .35rem;
    color: var(--home-ink);
    font-size: 1.05rem;
    font-weight: 800;
}

.home-step p {
    color: var(--home-muted) !important;
    font-size: .92rem !important;
    line-height: 1.6 !important;
}

.home-faq {
    padding: 7rem 0;
    background: #ffffff;
}

.home-faq-heading {
    max-width: 700px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.home-faq-heading h2 {
    margin: 0 0 1rem;
    color: var(--home-ink);
    font-size: clamp(2.15rem, 4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1.05;
}

.home-faq-heading p {
    margin: 0;
    color: var(--home-muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.home-faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.home-faq-item {
    border-bottom: 1px solid rgba(23, 37, 47, .12);
}

.home-faq-item:first-child {
    border-top: 1px solid rgba(23, 37, 47, .12);
}

.home-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 0;
    cursor: pointer;
    list-style: none;
    color: var(--home-ink);
    font-size: 1.05rem;
    font-weight: 800;
}

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

.home-faq-item summary::after {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 1.7rem;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), .1);
    color: var(--primary-color);
    content: "+";
    font-size: 1.2rem;
    font-weight: 400;
}

.home-faq-item[open] summary {
    color: var(--primary-color);
}

.home-faq-item[open] summary::after {
    content: "?";
}

.home-faq-item summary:focus-visible {
    outline: 3px solid rgba(var(--primary-rgb), .28);
    outline-offset: 5px;
}

.home-faq-item p {
    max-width: 800px;
    margin: 0 3rem 1.35rem 0;
    color: var(--home-muted);
    line-height: 1.75;
}

.home-cta {
    padding: 0 0 7rem;
    background: #f7fafb;
}

.home-cta-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 3.5rem 4rem;
    overflow: hidden;
    border-radius: 2rem;
    background: linear-gradient(125deg, #17252f 0%, #29414b 65%, var(--primary-hover) 100%);
    box-shadow: 0 24px 45px rgba(23, 37, 47, .18);
}

.home-cta-inner::after {
    position: absolute;
    right: -4rem;
    bottom: -7rem;
    width: 19rem;
    height: 19rem;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 2rem rgba(255, 255, 255, .035), 0 0 0 4rem rgba(255, 255, 255, .025);
    content: "";
}

.home-cta-inner > div {
    position: relative;
    z-index: 1;
}

.home-eyebrow-light {
    color: var(--primary-light);
}

.home-cta h2 {
    max-width: 600px;
    margin-bottom: .65rem;
    color: #ffffff;
}

.home-cta p {
    color: rgba(255, 255, 255, .74);
}

.home-cta-action {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding: .9rem 1.45rem;
    border-radius: 999px;
    background: #ffffff;
    color: var(--home-ink) !important;
    font-weight: 800;
    box-shadow: 0 12px 25px rgba(0, 0, 0, .14);
    transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}

.home-cta-action:hover {
    color: var(--primary-color) !important;
    box-shadow: 0 16px 30px rgba(0, 0, 0, .2);
    transform: translateY(-2px);
}

@media (max-width: 1199.98px) {
    .home-hero {
        padding: 4.5rem 0 5.5rem;
    }

    .home-showcase {
        padding-right: 0;
    }

    .home-floating-card-top {
        right: -5%;
    }

    .home-floating-card-bottom {
        left: -7%;
    }
}

@media (max-width: 991.98px) {
    .home-hero {
        min-height: auto;
        padding: 4.5rem 0 5rem;
    }

    .home-title {
        max-width: 680px;
    }

    .home-showcase {
        max-width: 590px;
        margin-top: 1rem;
        padding: 2rem 1.5rem;
    }

    .home-services,
    .home-steps {
        padding: 5.5rem 0;
    }

    .home-business {
        padding: 5.5rem 0;
    }

    .home-faq {
        padding: 5.5rem 0;
    }

    .home-business-heading {
        margin-bottom: 2.5rem;
    }

    .home-section-heading {
        margin-bottom: 2.5rem;
    }

    .home-service-card-featured {
        transform: none;
    }

    .home-service-card-featured:hover {
        transform: translateY(-6px);
    }

    .home-cta {
        padding-bottom: 5.5rem;
    }

    .home-cta-inner {
        align-items: flex-start;
        flex-direction: column;
        padding: 3rem;
    }
}

@media (max-width: 575.98px) {
    .home-hero {
        padding: 3.5rem 0 4rem;
    }

    .home-title {
        font-size: clamp(2.75rem, 14vw, 4.2rem);
    }

    .home-lead {
        font-size: 1rem;
        line-height: 1.65;
    }

    .home-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .home-primary-action,
    .home-secondary-action {
        width: 100%;
        text-align: center;
    }

    .home-trust-points {
        align-items: flex-start;
        flex-direction: column;
        gap: .55rem;
        margin-top: 1.6rem;
    }

    .home-showcase {
        min-height: 395px;
        padding: 1.35rem .75rem;
    }

    .home-showcase-window {
        padding: 1.35rem;
        border-radius: 1.4rem;
    }

    .home-showcase-heading {
        margin-bottom: 1.25rem;
    }

    .home-showcase-heading h2 {
        font-size: 1.7rem;
    }

    .home-showcase-bowl {
        width: 2.55rem;
        height: 2.55rem;
        flex-basis: 2.55rem;
    }

    .home-meal-card {
        gap: .6rem;
        padding: .65rem;
    }

    .home-meal-image {
        width: 3.4rem;
        height: 3.4rem;
        flex-basis: 3.4rem;
        font-size: 1.25rem;
    }

    .home-meal-copy strong {
        font-size: .86rem;
    }

    .home-meal-copy small {
        font-size: .68rem;
    }

    .home-showcase-features {
        gap: .65rem;
    }

    .home-showcase-feature {
        align-items: flex-start;
        flex-direction: column;
        gap: .35rem;
    }

    .home-floating-card {
        padding: .55rem .65rem;
    }

    .home-floating-card-top {
        top: 0;
        right: -1rem;
    }

    .home-floating-card-bottom {
        bottom: 0;
        left: -1rem;
    }

    .home-floating-icon {
        width: 1.9rem;
        height: 1.9rem;
        flex-basis: 1.9rem;
        font-size: .72rem;
    }

    .home-floating-card strong {
        font-size: .72rem;
    }

    .home-floating-card small {
        font-size: .65rem;
    }

    .home-services,
    .home-steps {
        padding: 4rem 0;
    }

    .home-business {
        padding: 4rem 0;
    }

    .home-faq {
        padding: 4rem 0;
    }

    .home-business-heading {
        margin-bottom: 2rem;
    }

    .home-white-label-panel,
    .home-business-options {
        padding: 1.5rem;
        border-radius: 1.3rem;
    }

    .home-business-cta {
        align-items: stretch;
        flex-direction: column;
        padding: 1.35rem;
    }

    .home-business-action {
        width: 100%;
        text-align: center;
    }

    .home-faq-heading {
        margin-bottom: 2rem;
    }

    .home-faq-item summary {
        font-size: .96rem;
    }

    .home-faq-item p {
        margin-right: 0;
        font-size: .94rem;
    }

    .home-section-heading {
        margin-bottom: 2rem;
    }

    .home-service-card {
        padding: 1.5rem;
    }

    .home-service-card p {
        min-height: 0;
    }

    .home-cta {
        padding-bottom: 4rem;
    }

    .home-cta-inner {
        padding: 2.25rem 1.5rem;
        border-radius: 1.4rem;
    }

    .home-cta-action {
        width: 100%;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-primary-action,
    .home-secondary-action,
    .home-service-card,
    .home-service-link i,
    .home-cta-action,
    .home-business-option,
    .home-business-action {
        transition: none;
    }
}