@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Sora:wght@100..800&display=swap");
@import url(variable.css);

/* ---------- base ---------- */

body {
    margin: 0;
    padding: 0;
    color: var(--color-secondary);
    font-family: var(--font-primary);
    font-size: var(--font-body-lg);
    background: #ffffff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    font-feature-settings: "ss01" on, "ss02" on;
    letter-spacing: -0.012em;
}

a { color: var(--color-secondary); }

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

::selection {
    background: var(--color-primary);
    color: var(--color-secondary);
}

.container {
    @media (min-width: 1200px) { max-width: 1100px; }
}

/* shared eyebrow */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-primary);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--color-primary-deep);
    margin-bottom: 18px;
}

.section-eyebrow::before {
    content: "";
    width: 10px; height: 10px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.5 L13.6 10.4 L22.5 12 L13.6 13.6 L12 22.5 L10.4 13.6 L1.5 12 L10.4 10.4 Z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.5 L13.6 10.4 L22.5 12 L13.6 13.6 L12 22.5 L10.4 13.6 L1.5 12 L10.4 10.4 Z'/></svg>") no-repeat center / contain;
    opacity: .9;
    flex-shrink: 0;
}

/* ---------- top bar ---------- */

.topbarbgwrap {
    background: linear-gradient(90deg, var(--color-secondary-deep) 0%, var(--color-secondary) 50%, var(--color-secondary-light) 100%);
    color: var(--color-cream);
    border-bottom: 1px solid rgba(242, 179, 61, 0.14);
    position: relative;
    z-index: 5;
}

.contactinfo {
    font-family: var(--font-primary);
    font-size: var(--font-body-sm);
    color: var(--color-cream);
}

.contactinfo a {
    color: var(--color-cream);
    transition: color .3s ease;
}

.contactinfo a:hover { color: var(--color-primary-light); }

.toprightcol a:not(.btnstyleone),
.toprightcol p {
    color: var(--color-cream);
    margin-bottom: 0;
    font-family: var(--font-primary);
    font-size: var(--font-body-sm);
    font-weight: 400;
}

/* ---------- buttons ---------- */

.btnstyleone {
    border-radius: var(--bordert-radius-xl);
    border: 1px solid rgba(242, 179, 61, 0.5);
    padding: 8px 20px;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 12px;
    background: transparent;
    text-decoration: none;
    color: var(--color-cream);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: all .3s ease;
}

.btnstyleone:hover {
    background: var(--color-primary);
    color: var(--color-secondary);
    border-color: var(--color-primary);
}

/* primary CTA — gold pill, refined */
.btnstyletwo {
    padding: 16px 30px !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: var(--font-primary);
    font-weight: 600;
    line-height: 1;
    color: var(--color-secondary);
    font-size: 12px;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--bordert-radius-xl);
    text-decoration: none;
    transition: transform .25s ease, background .35s ease, color .35s ease, border-color .35s ease;
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
}

.btnstyletwo::after {
    content: "";
    width: 12px; height: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h14M13 6l6 6-6 6' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat center / contain;
    transition: transform .25s ease;
}

.btnstyletwo:hover {
    color: var(--color-cream);
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

.btnstyletwo:hover::after { transform: translateX(4px); }

/* outline ghost button */
.btnstyleghost {
    padding: 16px 28px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 12px;
    color: var(--color-cream);
    border: 1px solid rgba(255, 247, 229, 0.4);
    border-radius: var(--bordert-radius-xl);
    text-decoration: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all .3s ease;
}

.btnstyleghost:hover {
    background: var(--color-cream);
    color: var(--color-secondary);
    border-color: var(--color-cream);
}

/* on cream sections, ghost flips */
.on-cream .btnstyleghost {
    color: var(--color-secondary);
    border-color: rgba(14, 30, 71, 0.25);
}
.on-cream .btnstyleghost:hover {
    background: var(--color-secondary);
    color: var(--color-cream);
    border-color: var(--color-secondary);
}

/* ---------- cart pill ---------- */

.cart-count {
    position: absolute;
    top: 6px; right: 0;
    line-height: 22px;
    height: 22px; width: 22px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-secondary);
    text-align: center;
    font-family: var(--font-primary);
}

/* ---------- nav ---------- */

.tw-bg-primary {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(14, 30, 71, 0.08);
    box-shadow: 0 1px 0 rgba(14, 30, 71, 0.03);
    position: relative;
}

.navbar-wrapper .dropdown {
    display: flex;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    align-items: center;
}

.navbar { padding: 18px 0 !important; z-index: 9999; }
.navbar-nav { align-items: center; }
li.nav-item { margin-right: 5px; }
ul.navbar-nav li:last-child { margin-right: 0; }

.navbar-wrapper a.active,
.nav-item a.active { position: relative; }

.navbar-wrapper a.active:after,
.nav-item a.active:after {
    height: 1.5px;
    width: 100%;
    content: " ";
    background: var(--color-primary);
    position: absolute;
    bottom: -8px;
    left: 0;
}

.navbar-wrapper a,
.nav-item a {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-secondary);
    padding: 16px 14px !important;
    font-family: var(--font-primary);
    border-bottom: 2.5px solid transparent;
    display: block;
    letter-spacing: 0.04em;
    transition: color .25s ease;
}

.navbar-wrapper a:hover { color: var(--color-primary-deep); }

.navbar-wrapper ul li { position: relative; }

.navbar-wrapper ul li > ul {
    list-style: none;
    display: none;
    position: absolute;
    left: 0;
    top: 42px;
    margin: 0 0 0 10px;
    background: var(--color-cream);
    padding: 8px 0;
    border-top: 1px solid var(--color-primary);
    border-radius: 0 0 var(--bordert-radius-md) var(--bordert-radius-md);
    min-width: 220px;
    z-index: 1;
    box-shadow: 0 18px 40px -20px rgba(14, 30, 71, 0.4);
}

.navbar-wrapper ul li > ul a {
    white-space: nowrap;
    display: block;
    padding: 8px 16px !important;
    color: var(--color-secondary);
    font-weight: 500;
}

.navbar-wrapper ul li > ul a:hover {
    color: var(--color-primary-deep);
    background: rgba(242, 179, 61, 0.08);
}

.navbar-wrapper ul li:hover > ul { display: block; }

.navbar-toggler {
    color: var(--color-secondary);
    border-color: rgba(14, 30, 71, 0.18);
}

/* cart icon — invert to navy on white nav */
.nav-link.cart-countwrap {
    padding: 16px 8px 16px 14px !important;
}
.nav-link.cart-countwrap img {
    filter: brightness(0) saturate(100%) invert(11%) sepia(48%) saturate(2400%) hue-rotate(218deg) brightness(95%) contrast(95%);
    opacity: .9;
    transition: opacity .25s ease;
}
.nav-link.cart-countwrap:hover img { opacity: 1; }
.nav-link.cart-countwrap .cart-count {
    top: 4px;
    right: -4px;
}

/* ---------- hero ---------- */

.welcometext h1 {
    font-family: var(--display-font);
    font-size: var(--h1);
    color: var(--color-cream);
    line-height: 1;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    letter-spacing: -0.025em;
    margin: 0 0 18px;
}

.welcometext h1 em {
    font-style: italic;
    color: var(--color-primary-light);
    font-variation-settings: "opsz" 144, "SOFT" 100;
}

.welcometext h6 {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: var(--font-body-xl);
    color: rgba(255, 247, 229, 0.78);
    line-height: 1.6;
    margin: 0 0 32px;
    max-width: 32em;
}

/* ---------- premium promise (USP strip) ---------- */

.product-service-wrap {
    background: #ffffff;
    padding: 130px 0;
    position: relative;
}

.product-service-wrap .section-head {
    text-align: center;
    margin-bottom: 80px;
}

.product-service-wrap .section-eyebrow {
    margin-left: auto;
    margin-right: auto;
}

.product-service-wrap .section-head h2 {
    font-family: var(--display-font);
    font-size: clamp(1.85rem, 3vw, 2.6rem);
    line-height: 1.12;
    color: var(--color-secondary);
    margin: 0 auto;
    max-width: 22ch;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.product-service-wrap .section-head h2 em {
    font-style: italic;
    color: var(--color-primary-deep);
    font-variation-settings: "opsz" 144, "SOFT" 100;
}

.prodsercol1_3 {
    text-align: left;
    background: transparent;
    padding: 0 28px 0 0;
    border: 0;
    border-left: 1px solid rgba(14, 30, 71, 0.08);
    padding-left: 32px;
    box-shadow: none;
    height: 100%;
    position: relative;
    transition: border-color .4s ease;
}

.prodsercol1_3::before { display: none; }

.prodsercol1_3:hover {
    border-left-color: var(--color-primary);
}

.prodsercol1_3 .feature-icon {
    width: 44px; height: 44px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--color-primary-deep);
    margin-bottom: 26px;
    border: 0;
    padding-left: 0;
}

.prodsercol1_3 .feature-icon svg { width: 32px; height: 32px; stroke-width: 1.4; }

.prodsercol1_3 h4 {
    font-family: var(--display-font);
    color: var(--color-secondary);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 500;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}

.prodsercol1_3 p {
    color: rgba(14, 30, 71, 0.65);
    font-family: var(--font-primary);
    line-height: 1.7;
    font-size: 15px;
    font-weight: 400;
    margin: 0;
}

.prodsercol1_3 > img { display: none; }

/* first column gets no left border */
.product-service-wrap .row > div:first-child .prodsercol1_3 {
    border-left: 0;
    padding-left: 0;
}

/* ---------- brand story (editorial) ---------- */

.brand-story {
    background: var(--color-cream-soft);
    padding: 130px 0;
    position: relative;
    overflow: hidden;
}

.brand-story::before { display: none; }

.brand-story .container { max-width: 1080px; }

.brand-story-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 100px;
    align-items: start;
    position: relative;
}

.brand-story h2 {
    font-family: var(--display-font);
    font-size: clamp(2rem, 3.4vw, 2.85rem);
    line-height: 1.05;
    color: var(--color-secondary);
    font-weight: 400;
    margin: 0;
    letter-spacing: -0.022em;
    max-width: 14ch;
}

.brand-story h2 em {
    font-style: italic;
    color: var(--color-primary-deep);
    font-variation-settings: "opsz" 144, "SOFT" 100;
}

.brand-story-copy {
    border-left: 1px solid rgba(14, 30, 71, 0.1);
    padding-left: 56px;
}

.brand-story p {
    color: rgba(14, 30, 71, 0.72);
    line-height: 1.75;
    font-size: 16px;
    margin-bottom: 18px;
}

.brand-story p:last-child { margin-bottom: 0; }

.brand-story p strong {
    color: var(--color-secondary);
    font-weight: 600;
}

.brand-story .pullquote {
    font-family: var(--display-font);
    font-style: italic;
    font-size: 19px;
    color: var(--color-secondary);
    line-height: 1.5;
    padding: 0;
    margin: 40px 0 0;
    border-top: 0;
    position: relative;
}

.brand-story .pullquote::before {
    content: "";
    display: block;
    width: 80px;
    height: 12px;
    background: var(--color-primary-deep);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12' preserveAspectRatio='xMinYMid meet'><rect x='0' y='5.5' width='28' height='1' opacity='.6'/><path d='M40 1 L41.4 5 L46 6 L41.4 7 L40 11 L38.6 7 L34 6 L38.6 5 Z'/><rect x='52' y='5.5' width='28' height='1' opacity='.6'/></svg>") no-repeat left center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12' preserveAspectRatio='xMinYMid meet'><rect x='0' y='5.5' width='28' height='1' opacity='.6'/><path d='M40 1 L41.4 5 L46 6 L41.4 7 L40 11 L38.6 7 L34 6 L38.6 5 Z'/><rect x='52' y='5.5' width='28' height='1' opacity='.6'/></svg>") no-repeat left center / contain;
    margin-bottom: 24px;
}

/* ---------- product categories ---------- */

.prodcatmainwrap {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 0;
    position: relative;
    z-index: 2;
    box-shadow: none;
    border: 0;
    border-top: 1px solid rgba(14, 30, 71, 0.06);
}

.prodcatwrap { padding: 130px 0 110px; }

.prodcatwrap .section-eyebrow {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
}

.prodcatwrap .section-title {
    color: var(--color-secondary);
    font-family: var(--display-font);
    line-height: 1.1;
    font-size: clamp(1.85rem, 3vw, 2.6rem);
    font-weight: 400;
    text-align: center;
    margin: 0 auto 16px;
    letter-spacing: -0.02em;
}

.prodcatwrap .section-title em {
    font-style: italic;
    color: var(--color-primary-deep);
}

.prodcatwrap .section-sub {
    text-align: center;
    color: rgba(14, 30, 71, 0.6);
    font-size: 16px;
    margin: 0 auto 64px;
    max-width: 56ch;
    line-height: 1.65;
}

.prodcatwrap .prod-info {
    padding: 14px;
    border-radius: 6px;
    border: 1px solid rgba(14, 30, 71, 0.08);
    margin-bottom: 24px;
    text-decoration: none;
    display: block;
    background: #fff;
    transition: all .35s ease;
}

.prodcatwrap .prod-info h6 {
    font-size: 15px;
    color: var(--color-secondary);
    font-weight: 500;
    font-family: var(--font-primary);
    line-height: 1.35;
    text-align: center;
    padding: 16px 8px 10px;
    margin-bottom: 0;
    height: auto;
    min-height: 64px;
    letter-spacing: 0.01em;
}

/* ---------- let us help you (services) ---------- */

.letushelpyouwrap {
    position: relative;
    text-align: center;
    background: var(--color-secondary);
    padding: 130px 0;
    overflow: hidden;
    color: var(--color-cream);
}

.letushelpyouwrap::before { display: none; }

.letushelpyouwrap .container { max-width: 920px; width: 96%; margin: 0 auto; position: relative; }

.letushelpyouwrap .section-eyebrow {
    color: var(--color-primary-light);
    margin-left: auto;
    margin-right: auto;
}

.letushelpyouwrap h2 {
    font-size: clamp(1.85rem, 3vw, 2.6rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-cream);
    margin: 0 auto 20px;
    font-family: var(--display-font);
    letter-spacing: -0.02em;
    max-width: 22ch;
}

.letushelpyouwrap h2 em {
    font-style: italic;
    color: var(--color-primary-light);
}

.letushelpyouwrap p {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: rgba(255, 247, 229, .7);
    margin: 0 auto;
    max-width: 56ch;
}

.height91 { height: 91px; }

.listbtnstyle {
    padding: 0;
    column-count: 3;
    column-gap: 40px;
    margin-top: 64px;
    margin-bottom: 0;
    list-style: none;
}

.listbtnstyle li {
    list-style: none;
    background: transparent;
    padding: 18px 0;
    margin-bottom: 0;
    border: 0;
    border-top: 1px solid rgba(242, 179, 61, 0.18);
    border-radius: 0;
    text-align: left;
    display: block;
    width: 100%;
    transition: all .3s ease;
    overflow: visible;
    position: relative;
}

.listbtnstyle li::before { display: none; }

.listbtnstyle li:last-child {
    border-bottom: 1px solid rgba(242, 179, 61, 0.18);
}

.listbtnstyle li a {
    font-size: 15px;
    font-family: var(--font-primary);
    color: var(--color-cream);
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    letter-spacing: 0.01em;
    display: block;
    transition: color .25s ease, transform .25s ease;
}

.listbtnstyle li a:hover {
    color: var(--color-primary-light);
    transform: translateX(4px);
}

/* ---------- featured products ---------- */

.featuredproductswrap {
    background: #ffffff;
    padding: 130px 0;
}

.featuredproductswrap .container { max-width: 1100px; }

.featuredproductswrap .section-head {
    text-align: center;
    margin-bottom: 64px;
}

.featuredproductswrap .section-head .section-eyebrow {
    margin-left: auto;
    margin-right: auto;
}

.featuredproductswrap .section-title {
    color: var(--color-secondary);
    line-height: 1.1;
    font-family: var(--display-font);
    font-size: clamp(1.85rem, 3vw, 2.6rem);
    font-weight: 400;
    margin: 0 auto 16px !important;
    letter-spacing: -0.02em;
}

.featuredproductswrap .section-title em {
    font-style: italic;
    color: var(--color-primary-deep);
}

.featuredproductswrap .section-sub {
    text-align: center;
    color: rgba(14, 30, 71, 0.6);
    font-size: 16px;
    margin: 0 auto;
    max-width: 56ch;
    line-height: 1.65;
}

/* ---------- service area (refined prose) ---------- */

.service-area {
    background: var(--color-cream-soft);
    padding: 130px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.service-area .container { max-width: 880px; }

.service-area .section-eyebrow {
    margin-left: auto;
    margin-right: auto;
}

.service-area h2 {
    font-family: var(--display-font);
    font-size: clamp(1.85rem, 3vw, 2.6rem);
    color: var(--color-secondary);
    line-height: 1.1;
    font-weight: 400;
    margin: 0 0 28px;
    letter-spacing: -0.02em;
}

.service-area h2 em {
    font-style: italic;
    color: var(--color-primary-deep);
}

.service-area .area-prose {
    color: rgba(14, 30, 71, 0.7);
    font-size: 17px;
    line-height: 1.8;
    margin: 0 auto;
    max-width: 64ch;
    font-family: var(--font-primary);
}

.service-area .area-cities {
    color: var(--color-secondary);
    font-family: var(--display-font);
    font-style: italic;
    font-size: 19px;
    line-height: 1.7;
    margin: 36px auto 0;
    max-width: 64ch;
    letter-spacing: 0.005em;
}

.service-area .area-cities span {
    white-space: nowrap;
}

.service-area .area-cities .sep {
    color: var(--color-primary);
    font-style: normal;
    margin: 0 6px;
    opacity: .7;
}

/* ---------- hours of operation ---------- */

.operationhourswrap {
    padding: 130px 0;
    position: relative;
    background: #ffffff;
    color: var(--color-secondary);
    overflow: hidden;
    text-align: center;
}

.operationhourswrap::before { display: none; }

.operationhourswrap .container { max-width: 720px; }

.operationhourswrap .section-eyebrow {
    color: var(--color-primary-deep);
    margin-left: auto;
    margin-right: auto;
}

.operationhourswrap h2 {
    font-weight: 400;
    font-size: clamp(1.85rem, 3vw, 2.6rem);
    color: var(--color-secondary);
    text-align: center;
    margin: 0 0 56px;
    font-family: var(--display-font);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.operationhourswrap h2 em {
    font-style: italic;
    color: var(--color-primary-deep);
}

.operationhourscol {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    backdrop-filter: none;
    position: relative;
    z-index: 1;
}

.operationhourscol h5 {
    font-family: var(--font-primary);
    font-size: var(--font-body-2xl);
    color: var(--color-secondary);
    margin-bottom: 20px;
    text-align: center;
}

.operationhourscol ul { padding: 0; margin: 0; }

.operationhourscol ul li {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    border-top: 1px solid rgba(14, 30, 71, 0.1);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    font-family: var(--font-primary);
    color: var(--color-secondary);
}

.operationhourscol ul li:first-of-type { border-top: none; }

.operationhourscol ul li:last-of-type {
    border-bottom: 1px solid rgba(14, 30, 71, 0.1);
}

.operationhourscol ul li .daycol {
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 13px;
}

.operationhourscol ul li .timecol {
    font-feature-settings: "tnum" on;
    color: rgba(14, 30, 71, 0.7);
    font-family: var(--display-font);
    font-style: italic;
    font-size: 18px;
}

span.line {
    width: 22px;
    display: inline-block;
    background: var(--color-primary);
    height: 1.5px;
    vertical-align: middle;
    margin: 0 8px;
}

.btnstylethree {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 14px 28px;
    font-size: 12px;
    color: var(--color-secondary);
    text-decoration: none;
    text-align: center;
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: inline-block;
    margin: 50px auto 0;
    transition: all .3s ease;
    border-radius: var(--bordert-radius-xl);
    box-shadow: none;
}

.btnstylethree:hover {
    background: var(--color-secondary);
    color: var(--color-cream);
    border-color: var(--color-secondary);
}

/* ---------- testimonials ---------- */

.testinobualwrap {
    padding: 130px 0;
    text-align: center;
    position: relative;
    background: var(--color-cream-soft);
    overflow: hidden;
}

.testinobualwrap::before { display: none; }

.testinobualwrap .container { max-width: 820px; }

.testinobualwrap .carousel-item img {
    margin-bottom: 36px;
    filter: none;
    width: auto;
    height: 18px;
    opacity: .9;
}

.testinobualwrap .carousel-caption {
    position: inherit;
    right: auto; bottom: auto; left: auto;
    padding: 0;
    color: var(--color-secondary);
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    z-index: 1;
}

.carousel-caption .line {
    display: block;
    margin: 32px auto;
    width: 90px;
    height: 12px;
    background: var(--color-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 12'><rect x='0' y='5.5' width='32' height='1' opacity='.6'/><path d='M45 1 L46.4 5 L51 6 L46.4 7 L45 11 L43.6 7 L39 6 L43.6 5 Z'/><rect x='58' y='5.5' width='32' height='1' opacity='.6'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 12'><rect x='0' y='5.5' width='32' height='1' opacity='.6'/><path d='M45 1 L46.4 5 L51 6 L46.4 7 L45 11 L43.6 7 L39 6 L43.6 5 Z'/><rect x='58' y='5.5' width='32' height='1' opacity='.6'/></svg>") no-repeat center / contain;
}

.testinobualwrap .carousel-control-next,
.testinobualwrap .carousel-control-prev {
    width: 4% !important;
    opacity: .7;
}

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

.carousel-caption h5,
.carousel-caption h5 p {
    font-size: clamp(1.25rem, 2.1vw, 1.65rem);
    font-family: var(--display-font);
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-secondary);
    letter-spacing: -0.005em;
}

.carousel-caption p {
    font-size: 11px;
    font-family: var(--font-primary);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-primary-deep);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-top: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none !important;
    width: 36px; height: 36px;
    border-radius: 50%;
    background-color: transparent !important;
    border: 1px solid rgba(14, 30, 71, 0.2);
    position: relative;
    transition: all .25s ease;
}

.testinobualwrap .carousel-control-prev:hover .carousel-control-prev-icon,
.testinobualwrap .carousel-control-next:hover .carousel-control-next-icon {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary);
}

.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-secondary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6l6 6-6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat center / 14px 14px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6l6 6-6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat center / 14px 14px;
    transition: background .25s ease;
}

.carousel-control-prev-icon::after {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15 6l-6 6 6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat center / 14px 14px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15 6l-6 6 6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat center / 14px 14px;
}

.testinobualwrap .carousel-control-prev:hover .carousel-control-prev-icon::after,
.testinobualwrap .carousel-control-next:hover .carousel-control-next-icon::after {
    background: var(--color-cream);
}

/* ---------- final CTA (refined, on cream) ---------- */

.final-cta {
    background: #ffffff;
    padding: 140px 0;
    text-align: center;
    color: var(--color-secondary);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(14, 30, 71, 0.06);
}

.final-cta::before { display: none; }

.final-cta .container { max-width: 720px; position: relative; }

.final-cta .section-eyebrow {
    color: var(--color-primary-deep);
    margin-left: auto;
    margin-right: auto;
}

.final-cta h2 {
    font-family: var(--display-font);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    color: var(--color-secondary);
    line-height: 1.05;
    font-weight: 400;
    margin: 0 0 22px;
    letter-spacing: -0.022em;
}

.final-cta h2 em {
    font-style: italic;
    color: var(--color-primary-deep);
}

.final-cta p {
    color: rgba(14, 30, 71, 0.65);
    font-size: 17px;
    line-height: 1.7;
    margin: 0 auto 40px;
    max-width: 56ch;
}

.final-cta .cta-row {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.final-cta .btnstyleghost {
    color: var(--color-secondary);
    border-color: rgba(14, 30, 71, 0.25);
}

.final-cta .btnstyleghost:hover {
    background: var(--color-secondary);
    color: var(--color-cream);
    border-color: var(--color-secondary);
}

/* ---------- footer ---------- */

footer.tw-bg-primary {
    background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-secondary-deep) 100%) !important;
    position: relative;
    overflow: hidden;
}

footer.tw-bg-primary::before { display: none; }

.footernav {
    border-color: rgba(242, 179, 61, 0.2) !important;
}

.footernav ul li a {
    color: var(--color-cream);
    font-size: var(--font-body-sm);
    font-family: var(--font-primary);
    text-decoration: none;
}

.copyright {
    color: rgba(255, 247, 229, 0.6);
    font-size: var(--font-body-sm);
    font-family: var(--font-primary);
}

.copyright a { color: rgba(255, 247, 229, 0.78); }

/* ---------- subpages ---------- */

.subprspage {
    background: #fff;
    border-radius: var(--bordert-radius-md);
    padding: 40px;
    border: 1px solid rgba(14, 30, 71, 0.06);
}

/* ---------- logo motifs (sparkle + laurel) ---------- */

.hero-sparkle {
    position: absolute;
    color: var(--color-primary-light);
    pointer-events: none;
    z-index: 1;
    filter:
        drop-shadow(0 0 18px rgba(242, 179, 61, .7))
        drop-shadow(0 0 4px rgba(255, 213, 107, .9));
    transform-origin: center;
    animation: jnj-twinkle 3.6s ease-in-out infinite;
}

.hero-sparkle--1 {
    top: 16%; right: 10%; width: 42px; height: 42px;
    --sparkle-min: .65; --sparkle-max: 1;
    animation-delay: 0s;
    animation-duration: 3.8s;
}
.hero-sparkle--2 {
    top: 66%; right: 5%; width: 24px; height: 24px;
    --sparkle-min: .4; --sparkle-max: .9;
    animation-delay: -1.4s;
    animation-duration: 4.4s;
}
.hero-sparkle--3 {
    top: 34%; left: 3%; width: 30px; height: 30px;
    --sparkle-min: .35; --sparkle-max: .85;
    animation-delay: -2.5s;
    animation-duration: 5.2s;
}
.hero-sparkle--4 {
    top: 52%; right: 32%; width: 18px; height: 18px;
    --sparkle-min: .3; --sparkle-max: .8;
    animation-delay: -.8s;
    animation-duration: 4.8s;
}
.hero-sparkle--5 {
    top: 24%; left: 24%; width: 14px; height: 14px;
    --sparkle-min: .35; --sparkle-max: .75;
    animation-delay: -3.2s;
    animation-duration: 4s;
}

@keyframes jnj-twinkle {
    0%, 100% {
        opacity: var(--sparkle-min, .4);
        transform: scale(.7) rotate(0deg);
    }
    50% {
        opacity: var(--sparkle-max, 1);
        transform: scale(1.25) rotate(60deg);
    }
}

.ornament-laurel {
    display: block;
    width: 130px;
    height: 18px;
    margin: 0 auto 28px;
    color: var(--color-primary-deep);
}

.final-cta .ornament-laurel + .section-eyebrow {
    margin-top: 0;
}

/* ---------- motion ---------- */

@keyframes jnj-rise {
    to { opacity: 1; transform: translateY(0); }
}

/* scroll reveal — applied via IntersectionObserver */
.jnj-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .9s cubic-bezier(.2, .65, .3, 1),
        transform .9s cubic-bezier(.2, .65, .3, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}

.jnj-reveal.jnj-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* lateral variants (small accent moves) */
.jnj-reveal--left  { transform: translateX(-28px); }
.jnj-reveal--right { transform: translateX(28px); }
.jnj-reveal--left.jnj-in-view,
.jnj-reveal--right.jnj-in-view { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}