/* Homepage sections use the common site shell and brand palette. */
.vreflex-home-page {
    --vr-home-accent: var(--vreflex-brand, #006400);
    --vr-home-accent-hover: var(--vreflex-brand-hover, #004d00);
    --vr-home-ink: #171719;
    --vr-home-muted: #737377;
    background: #fafafa;
    color: var(--vr-home-ink);
    font: 400 16px/1.6 Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.vreflex-home-page .body-wrapper,
.vreflex-home-page .body-innerwrapper { background: #fafafa; }
.vreflex-home-page .sp-pre-loader { display: none; }
.vreflex-home-page :is(h1,h2,h3,p,figure) { margin: 0; }
.vreflex-home-page :is(h1,h2,h3) { color: var(--vr-home-ink); font-family: Helvetica, Arial, sans-serif; font-weight: 700; }
.vreflex-home-page a { text-decoration: none; }
.vreflex-home-page a:focus-visible { outline: 3px solid var(--vr-home-accent); outline-offset: 5px; }
.vr-home-skip { position: fixed; z-index: 1000; inset: 10px auto auto 16px; padding: 10px 20px; background: white; opacity: 0; pointer-events: none; transform: translateY(-160%); }
.vr-home-skip:focus { opacity: 1; pointer-events: auto; transform: translateY(0); }
.vreflex-home-page .vr-home-skip { color: var(--vr-home-accent); }
.vr-home-eyebrow { color: var(--vr-home-ink); font-size: 13px; line-height: 1.5; font-weight: 500; letter-spacing: 1.1px; }
.vr-home-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 16px;
    min-height: 58px; padding: 15px 28px; border: 1px solid var(--vr-home-accent);
    border-radius: 100px; background: var(--vr-home-accent); color: #fff;
    font-size: 16px; font-weight: 500; line-height: 1.5;
    transition: background-color 180ms, transform 180ms, box-shadow 180ms;
}
.vr-home-button svg,
.vr-home-product svg { width: 20px; height: 20px; flex: 0 0 20px; vertical-align: middle; }
.vr-home-button:hover { background: var(--vr-home-accent-hover); border-color: var(--vr-home-accent-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 7px 20px #0064001a; }
.vr-home-hero { position: relative; isolation: isolate; max-width: 1920px; min-height: 850px; margin-inline: auto; padding: 118px 24px 96px; overflow: hidden; }
.vr-home-hero-copy { position: relative; z-index: 1; width: min(650px, 100%); margin-inline: auto; text-align: center; }
.vr-home-hero h1 { margin-top: 24px; font-size: clamp(64px, 5.8vw, 96px); line-height: 1.04; letter-spacing: -.058em; }
.vr-home-hero h1 span { color: var(--vr-home-accent); }
.vr-home-intro { margin-top: 32px !important; color: var(--vr-home-muted); font-size: 19px; line-height: 1.65; letter-spacing: -.25px; }
.vr-home-hero-copy > .vr-home-button { margin-top: 36px; }
.vr-home-collage { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.vr-home-float { position: absolute; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 16px 48px -12px #17171924; }
.vr-home-float img { width: 100%; height: 100%; border-radius: 11px; object-fit: cover; }
.vr-home-float figcaption { position: absolute; inset: auto auto -14px 50%; width: max-content; max-width: 125%; padding: 7px 17px; border-radius: 30px; background: #171719; color: #fff; font-size: 14px; line-height: 1.5; transform: translateX(-50%); }
.vr-home-float-fabric { top: 72px; left: 3%; width: 16.3%; height: 205px; transform: rotate(-6deg); }
.vr-home-float-runner { top: 362px; left: -2.2%; width: 18%; height: 220px; transform: rotate(4deg); }
.vr-home-float-runner img { object-position: center 40%; }
.vr-home-float-silver { top: 642px; left: 8.2%; width: 16.5%; height: 160px; transform: rotate(-4deg); }
.vr-home-float-jacket { top: 92px; right: 5%; width: 13.4%; height: 225px; transform: rotate(5deg); }
.vr-home-float-patterns { top: 376px; right: -3%; width: 20%; height: 170px; transform: rotate(-4deg); }
.vr-home-float-glow { top: 616px; right: 7%; width: 15.6%; height: 180px; transform: rotate(5deg); }
.vr-home-materials { position: relative; z-index: 1; display: flex; justify-content: center; gap: 40px; margin: 54px auto 0; }
.vr-home-materials > div { display: grid; gap: 2px; color: var(--vr-home-ink); text-align: center; }
.vr-home-materials strong { font-size: 18px; font-weight: 600; letter-spacing: -.4px; }
.vr-home-materials span { color: var(--vr-home-muted); font-size: 14px; }
.vr-home-features { background: #fff; padding: 108px 40px 104px; }
.vr-home-section-heading { max-width: 1100px; margin-inline: auto; text-align: center; }
.vr-home-section-heading h2 { margin-top: 22px; font-size: clamp(42px, 4.65vw, 74px); line-height: 1.1; letter-spacing: -.048em; }
.vr-home-section-heading > p:not(.vr-home-eyebrow) { margin-top: 26px; color: var(--vr-home-muted); font-size: 20px; line-height: 1.65; letter-spacing: -.25px; }
.vr-home-section-heading > .vr-home-button { margin-top: 34px; }
.vr-home-feature-visual { position: relative; max-width: 1360px; height: auto; aspect-ratio: 2.12; margin: 64px auto 0 !important; overflow: hidden; border-radius: 16px; background: #050608; }
.vr-home-feature-visual > img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.vr-home-products { padding: 112px 32px 108px; text-align: center; scroll-margin-top: 90px; }
.vr-home-count { display: inline-block; margin-left: 8px; padding: 1px 10px; border: 1px solid #d9d8dc; border-radius: 30px; font-size: 14px; letter-spacing: .6px; }
.vr-home-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 1520px; margin: 56px auto 0; text-align: left; }
.vr-home-product { min-width: 0; padding: 6px; border: 1px solid #e9e7e6; border-radius: 16px; background: #f5f4f2; color: var(--vr-home-ink); transition: background-color 180ms, border-color 180ms, box-shadow 180ms, transform 180ms; }
.vr-home-product-image { position: relative; aspect-ratio: 1 / 1.13; overflow: hidden; border-radius: 11px; background: #fff; }
.vr-home-product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms; }
.vr-home-product-action { position: absolute; bottom: 20px; left: 50%; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 24px); padding: 10px 18px; border-radius: 30px; background: var(--vr-home-accent); color: #fff; font-size: 13px; opacity: 0; transform: translate(-50%, 8px); transition: opacity 180ms, transform 180ms; }
.vr-home-product-copy { padding: 22px 16px 16px; }
.vr-home-product h3 { overflow-wrap: anywhere; font-size: 19px; line-height: 1.35; letter-spacing: -.5px; }
.vr-home-product p { display: -webkit-box; min-height: 3.2em; margin-top: 8px; overflow: hidden; color: var(--vr-home-muted); font-size: 16px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.vr-home-product-link { display: flex; align-items: center; gap: 7px; margin-top: 18px; color: var(--vr-home-accent); font-size: 14px; font-weight: 500; }
.vr-home-product-link svg { width: 16px; height: 16px; flex-basis: 16px; }
.vr-home-product:hover,
.vr-home-product:focus-visible { border-color: #c5dbc5; background: #fff; color: var(--vr-home-ink); box-shadow: 0 12px 28px -12px #12351229; transform: translateY(-4px); }
.vr-home-product:hover .vr-home-product-image img { transform: scale(1.035); }
.vr-home-product:hover .vr-home-product-action,
.vr-home-product:focus-visible .vr-home-product-action { opacity: 1; transform: translate(-50%, 0); }
.vr-home-button-outline { margin-top: 48px; border-color: #d4d9d3; background: transparent; color: var(--vr-home-ink); }
.vr-home-button-outline:hover { background: var(--vr-home-accent); border-color: var(--vr-home-accent); }
.vr-home-mobile-break { display: none; }

/* Brand introduction and project invitation follow the materials grid. */
.vr-home-about { padding: 100px 40px 96px; background: #fff; }
.vr-home-about .vr-home-section-heading { max-width: 1160px; }
.vr-home-about .vr-home-section-heading h2 { font-size: clamp(38px, 4vw, 60px); }
.vr-home-families { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1200px; margin: 64px auto 0; }
.vr-home-families > div { padding: 8px 32px; border-inline-start: 1px solid #dededf; }
.vr-home-families > div:first-child { padding-inline-start: 0; border: 0; }
.vr-home-families h3 { font-size: 34px; font-weight: 500; line-height: 1.3; letter-spacing: -1px; }
.vr-home-families p { margin-top: 8px; color: var(--vr-home-muted); font-size: 18px; }
.vr-home-about-details { display: grid; grid-template-columns: 1fr 1.15fr; gap: 100px; max-width: 1200px; margin: 64px auto 0; padding-top: 56px; border-top: 1px solid #dededf; }
.vr-home-about-statement > p { color: #5c5d61; font-size: 34px; font-weight: 600; line-height: 1.25; letter-spacing: -.8px; }
.vr-home-about-statement > a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 20px; color: var(--vr-home-accent); font-size: 16px; }
.vr-home-about-statement svg, .vr-home-project-link svg { width: 20px; height: 20px; }
.vr-home-about-points { display: grid; gap: 28px; }
.vr-home-about-points > div { display: flex; align-items: flex-start; gap: 18px; }
.vr-home-about-points svg { width: 26px; height: 26px; flex: 0 0 26px; color: var(--vr-home-accent); }
.vr-home-about-points h3 { font-size: 18px; font-weight: 600; line-height: 1.4; }
.vr-home-about-points p { margin-top: 8px; color: var(--vr-home-muted); font-size: 16px; line-height: 1.8; }
.vr-home-project { padding: 64px 40px 100px; background: #fafafa; }
.vr-home-project-card { position: relative; isolation: isolate; max-width: 1200px; margin-inline: auto; overflow: hidden; padding: 96px 32px; border: 1px solid #e5e5e7; border-radius: 18px; background: #fff; text-align: center; }
.vr-home-project-card::before { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .5; background-image: linear-gradient(#e9ece9 1px, transparent 1px), linear-gradient(90deg, #e9ece9 1px, transparent 1px); background-size: 120px 120px; transform: perspective(700px) rotateX(20deg) scale(1.3); pointer-events: none; }
.vr-home-project-card h2 { font-size: clamp(44px, 5.3vw, 78px); line-height: 1.05; letter-spacing: -.055em; }
.vr-home-project-tagline { margin-top: 28px !important; font-size: 24px; font-weight: 500; }
.vr-home-project-card > p:not(.vr-home-project-tagline) { margin-top: 18px; color: #636367; font-size: 18px; line-height: 1.7; }
.vr-home-project-card > .vr-home-button { margin-top: 32px; }
.vr-home-project-link { display: flex; align-items: center; justify-content: center; gap: 12px; width: fit-content; min-height: 44px; margin: 18px auto 0; color: var(--vr-home-accent); font-size: 16px; }

@media (min-width: 1700px) {
    .vr-home-hero { min-height: 1000px; padding-top: 152px; }
    .vr-home-float-fabric { top: 90px; height: 250px; }
    .vr-home-float-runner { top: 450px; height: 260px; }
    .vr-home-float-silver { top: 760px; height: 190px; }
    .vr-home-float-jacket { top: 118px; height: 280px; }
    .vr-home-float-patterns { top: 465px; height: 210px; }
    .vr-home-float-glow { top: 745px; height: 210px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .vr-home-hero { min-height: 790px; padding-top: 104px; padding-bottom: 80px; }
    .vr-home-hero-copy { width: 570px; }
    .vr-home-hero h1 { font-size: 68px; }
    .vr-home-intro { font-size: 17px; }
    .vr-home-float-fabric { left: 1%; width: 17%; height: 170px; }
    .vr-home-float-jacket { right: 2%; width: 16%; height: 200px; }
    .vr-home-float-silver { top: 580px; left: 3%; height: 150px; }
    .vr-home-float-glow { top: 580px; right: 3%; height: 150px; }
    .vr-home-float-runner { top: 335px; left: -5%; }
    .vr-home-float-patterns { top: 355px; right: -5%; }
    .vr-home-materials { gap: 30px; }
    .vr-home-product-grid { gap: 18px; }
    .vr-home-product-copy { padding-inline: 10px; }
    .vr-home-product h3 { font-size: 17px; }
}
@media (max-width: 991px) {
    .vr-home-about { padding: 72px 28px; }
    .vr-home-families > div { padding-inline: 20px; }
    .vr-home-families h3 { font-size: 28px; }
    .vr-home-families p { font-size: 16px; }
    .vr-home-about-details { gap: 40px; }
    .vr-home-about-statement > p { font-size: 30px; }
    .vr-home-project { padding: 40px 24px 72px; }
    .vr-home-project-card { padding: 72px 28px; }
    .vr-home-hero { min-height: 0; padding: 72px 24px 64px; }
    .vr-home-hero h1 { font-size: clamp(58px, 8.6vw, 78px); }
    .vr-home-hero-copy { max-width: 620px; }
    .vr-home-collage { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 22px; max-width: 680px; margin: 56px auto 0; padding: 0 8px 14px; }
    .vr-home-float { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1.15; }
    .vr-home-float-fabric { transform: rotate(-5deg); }
    .vr-home-float-jacket { transform: rotate(5deg); }
    .vr-home-float-silver { transform: rotate(0); }
    .vr-home-float-runner,
    .vr-home-float-patterns,
    .vr-home-float-glow { display: none; }
    .vr-home-float figcaption { padding: 5px 12px; font-size: 13px; }
    .vr-home-materials { margin-top: 40px; gap: 48px; }
    .vr-home-features { padding: 80px 28px 72px; }
    .vr-home-section-heading h2 { font-size: clamp(38px, 5.6vw, 54px); }
    .vr-home-section-heading > p:not(.vr-home-eyebrow) { font-size: 17px; }
    .vr-home-feature-visual { margin-top: 44px !important; aspect-ratio: 1.65; }
    .vr-home-products { padding: 80px 24px 72px; }
    .vr-home-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
}
@media (max-width: 575px) {
    .vr-home-about { padding: 64px 24px; }
    .vr-home-about .vr-home-section-heading h2 { font-size: 34px; }
    .vr-home-families { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; margin-top: 40px; }
    .vr-home-families > div, .vr-home-families > div:first-child { padding: 0; border: 0; }
    .vr-home-families h3 { font-size: 28px; }
    .vr-home-families p { font-size: 16px; }
    .vr-home-about-details { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 40px; padding-top: 36px; }
    .vr-home-about-statement > p { font-size: 30px; }
    .vr-home-project { padding: 24px 16px 64px; }
    .vr-home-project-card { padding: 60px 20px; border-radius: 12px; }
    .vr-home-project-card h2 { font-size: clamp(35px, 9vw, 48px); }
    .vr-home-project-tagline { font-size: 20px; line-height: 1.4; }
    .vr-home-project-card > p:not(.vr-home-project-tagline) { font-size: 16px; }
    .vr-home-hero { padding: 58px 20px 48px; }
    .vr-home-eyebrow { font-size: 13px; letter-spacing: 1px; }
    .vr-home-hero h1 { margin-top: 24px; font-size: clamp(48px, 12vw, 64px); line-height: 1.06; letter-spacing: -.055em; }
    .vr-home-intro { margin-top: 24px !important; font-size: 16px; line-height: 1.65; }
    .vr-home-desktop-break { display: none; }
    .vr-home-button { min-height: 52px; padding: 13px 23px; gap: 14px; font-size: 16px; }
    .vr-home-hero-copy > .vr-home-button { margin-top: 28px; }
    .vr-home-collage { gap: 12px; margin-top: 42px; padding-inline: 0; }
    .vr-home-float { padding: 4px; border-radius: 10px; aspect-ratio: .83; box-shadow: 0 10px 22px -10px #17171938; }
    .vr-home-float img { border-radius: 7px; }
    .vr-home-float figcaption { bottom: -9px; max-width: 120%; padding: 4px 7px; font-size: 12px; white-space: nowrap; }
    .vr-home-materials { gap: 10px; margin-top: 32px; }
    .vr-home-materials > div { flex: 1; }
    .vr-home-materials strong { font-size: 13px; letter-spacing: -.3px; }
    .vr-home-materials span { max-width: 100px; margin-inline: auto; font-size: 13px; line-height: 1.4; }
    .vr-home-features { padding: 64px 20px 56px; }
    .vr-home-section-heading h2 { margin-top: 18px; font-size: clamp(32px, 8.2vw, 44px); line-height: 1.12; }
    .vr-home-features .vr-home-section-heading h2 { font-size: clamp(26px, 7.35vw, 38px); }
    .vr-home-section-heading > p:not(.vr-home-eyebrow) { margin-top: 22px; font-size: 16px; line-height: 1.65; }
    .vr-home-section-heading > .vr-home-button { margin-top: 26px; }
    .vr-home-feature-visual { aspect-ratio: 1.12; margin-top: 36px !important; border-radius: 12px; }
    .vr-home-feature-visual > img { object-position: 70% center; }
    .vr-home-products { padding: 64px 16px 60px; scroll-margin-top: 75px; }
    .vr-home-products .vr-home-section-heading { padding-inline: 4px; }
    .vr-home-products .vr-home-section-heading h2 { font-size: 34px; }
    .vr-home-product-grid { gap: 12px; margin-top: 32px; }
    .vr-home-product { padding: 4px; border-radius: 12px; }
    .vr-home-product-image { aspect-ratio: 1 / 1.13; border-radius: 8px; }
    .vr-home-product-copy { padding: 15px 8px 10px; }
    .vr-home-product h3 { font-size: 16px; line-height: 1.4; letter-spacing: -.3px; }
    .vr-home-product p { margin-top: 7px; font-size: 14px; }
    .vr-home-product-link { margin-top: 14px; gap: 4px; font-size: 13px; }
    .vr-home-product-action { display: none; }
    .vr-home-button-outline { margin-top: 32px; }
    .vr-home-mobile-break { display: inline; }
    .vr-home-count { margin-left: 5px; padding-inline: 7px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .vreflex-home-page *, .vreflex-home-page *::after { transition: none !important; scroll-behavior: auto !important; }
}
