/* ================================================================
   Oravine — header and homepage experience layer.
   Loaded after oravine-ui.css; every rule here is motion or layout
   for the header and the homepage sections below the hero.
   ================================================================ */

/* ── 1. Header ─────────────────────────────────────────────────── */

/* First-load entrance only: siteEnhance.js adds .os-intro-done once the
   intro has played, so Blazor re-rendering the header never replays it. */
html:not(.os-intro-done) .oravine-site .os-header-bar {
    animation: os-header-drop .8s var(--os-ease) both;
}

html:not(.os-intro-done) .oravine-site .os-header-nav .os-nav-link,
html:not(.os-intro-done) .oravine-site .os-header-tools {
    animation: os-rise-in .6s var(--os-ease) both;
    animation-delay: calc(.18s + var(--i, 9) * 45ms);
}

@keyframes os-header-drop {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes os-rise-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.oravine-site .os-header {
    background: rgba(255, 255, 255, .78);
    border-bottom-color: transparent;
    transition: transform .45s var(--os-ease),
                box-shadow var(--os-t-slow) var(--os-ease),
                background-color var(--os-t-slow) var(--os-ease),
                border-color var(--os-t-slow) var(--os-ease);
}

.oravine-site .os-header.is-scrolled,
.oravine-site .os-header.is-menu-open {
    background: rgba(255, 255, 255, .92);
    border-bottom-color: var(--os-line);
    box-shadow: 0 10px 30px -22px rgba(20, 33, 22, .55);
}

/* Scrolling down tucks the header away; any scroll up brings it back.
   siteEnhance.js never hides it while the menu or a popover is open. */
.oravine-site .os-header.is-hidden {
    transform: translateY(calc(-100% - 4px));
    box-shadow: none;
}

/* The bar compacts once the page scrolls. The header is fixed, so the
   content below never shifts. */
.oravine-site .os-header-bar {
    transition: height var(--os-t-slow) var(--os-ease);
}

.oravine-site .os-header-logo img {
    transition: height var(--os-t-slow) var(--os-ease), transform var(--os-t-base) var(--os-ease);
}

.oravine-site .os-header-logo:hover img { transform: scale(1.03); }

@media (min-width: 641px) {
    .oravine-site .os-header.is-scrolled .os-header-bar { height: 4.25rem; }
    .oravine-site .os-header.is-scrolled .os-header-logo img { height: 2.15rem; }
}

/* Reading-progress hairline under the header. */
.oravine-site .os-header-progress {
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--os-green-deep), var(--os-green), var(--os-green-on-dark));
    transform: scaleX(var(--os-scroll-progress, 0));
    transform-origin: left center;
    pointer-events: none;
}

html[dir="rtl"] .oravine-site .os-header-progress { transform-origin: right center; }

/* Desktop layout: the links start right after the logo, separated by a
   hairline, and the tools sit at the far end. */
@media (min-width: 1180px) {
    .oravine-site .os-header-logo { margin-inline-end: 0; }

    .oravine-site .os-header-nav {
        margin-inline-start: clamp(.75rem, 1.6vw, 1.5rem);
        padding-inline-start: clamp(.75rem, 1.6vw, 1.5rem);
        border-inline-start: 1px solid var(--os-line);
    }

    .oravine-site .os-header-tools { margin-inline-start: auto; }
}

/* Desktop nav: a soft pill glides to whichever link is hovered or focused. */
.oravine-site .os-header-nav {
    position: relative;
    gap: clamp(.1rem, .4vw, .3rem);
}

.oravine-site .os-nav-glide {
    position: absolute;
    top: 50%;
    left: 0;
    width: var(--glide-w, 0);
    height: 2.4rem;
    border-radius: var(--os-r-pill);
    background: var(--os-surface-sunk);
    opacity: 0;
    transform: translate(var(--glide-x, 0), -50%);
    transition: transform .42s var(--os-ease), width .42s var(--os-ease), opacity .25s var(--os-ease);
    pointer-events: none;
}

.oravine-site .os-header-nav.is-gliding .os-nav-glide { opacity: 1; }

/* Menu text: a touch larger, tighter tracking, muted until hovered. */
.oravine-site .os-header-nav .os-nav-link {
    z-index: 1;
    padding: .6rem clamp(.65rem, 1vw, .95rem);
    border-radius: var(--os-r-pill);
    color: var(--os-ink-body);
    font-size: .94rem;
    font-weight: 560;
    letter-spacing: -.008em;
    line-height: 1;
    transition: color var(--os-t-fast) var(--os-ease), background-color var(--os-t-base) var(--os-ease);
}

.oravine-site .os-header-nav .os-nav-link:hover { color: var(--os-ink); }

/* Active link: a green-tinted pill with a small dot beneath it. */
.oravine-site .os-header-nav .os-nav-link.is-active {
    background: var(--os-green-soft);
    color: var(--os-green-ink);
    font-weight: 680;
}

.oravine-site .os-header-nav .os-nav-link::after {
    left: 50%;
    right: auto;
    bottom: .12rem;
    width: .3rem;
    height: .3rem;
    margin-left: -.15rem;
    border-radius: 50%;
    transform: scale(0);
}

.oravine-site .os-header-nav .os-nav-link:hover::after { transform: scale(0); }
.oravine-site .os-header-nav .os-nav-link.is-active::after { transform: scale(1); }

.oravine-site .os-header-tools .os-header-btn {
    border-color: var(--os-line);
    border-radius: var(--os-r-pill);
    padding-inline: .9rem;
    font-size: .88rem;
    font-weight: 600;
}

/* Mobile drawer links get the same type treatment. */
.oravine-site .os-nav-mobile-link {
    font-size: 1rem;
    font-weight: 580;
    letter-spacing: -.008em;
}

/* Mobile drawer: links cascade in when it opens. */
@media (max-width: 1179.98px) {
    .oravine-site .os-nav-drawer .os-nav-mobile-link,
    .oravine-site .os-nav-drawer .os-nav-drawer-langs {
        opacity: 0;
        transform: translateX(18px);
        transition: opacity .35s var(--os-ease), transform .45s var(--os-ease),
                    background-color var(--os-t-fast) var(--os-ease), color var(--os-t-fast) var(--os-ease);
    }

    html[dir="rtl"] .oravine-site .os-nav-drawer .os-nav-mobile-link,
    html[dir="rtl"] .oravine-site .os-nav-drawer .os-nav-drawer-langs { transform: translateX(-18px); }

    .oravine-site .os-nav-drawer.is-open .os-nav-mobile-link,
    .oravine-site .os-nav-drawer.is-open .os-nav-drawer-langs,
    html[dir="rtl"] .oravine-site .os-nav-drawer.is-open .os-nav-mobile-link,
    html[dir="rtl"] .oravine-site .os-nav-drawer.is-open .os-nav-drawer-langs {
        opacity: 1;
        transform: none;
        transition-delay: calc(.08s + var(--i, 10) * 40ms);
    }
}

/* ── 2. Shared section motion ──────────────────────────────────── */

/* Section headings cascade in after their section is revealed. */
.oravine-site [data-reveal] .home-section-head > *,
.oravine-site [data-reveal] .home-section-head > div > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--os-ease), transform .8s var(--os-ease);
}

.oravine-site [data-reveal].is-visible .home-section-head > *,
.oravine-site [data-reveal].is-visible .home-section-head > div > * {
    opacity: 1;
    transform: none;
}

.oravine-site [data-reveal].is-visible .home-section-head > :nth-child(2),
.oravine-site [data-reveal].is-visible .home-section-head > div > :nth-child(2) { transition-delay: .1s; }
.oravine-site [data-reveal].is-visible .home-section-head > :nth-child(3) { transition-delay: .2s; }

/* Stagger more than six children (pillars, product lines, feedback…). */
.oravine-site [data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: .48s; }
.oravine-site [data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: .56s; }
.oravine-site [data-reveal-stagger].is-visible > *:nth-child(n+9) { transition-delay: .64s; }

/* Revealed cards also animate their hover lift; once the entrance has
   finished (.is-settled, set by siteEnhance.js) the stagger delay is
   dropped so hover responds instantly. */
.oravine-site [data-reveal-stagger].is-visible > * {
    transition-property: opacity, transform, box-shadow, border-color;
    transition-duration: .6s, .45s, .45s, .35s;
    transition-timing-function: var(--os-ease);
}

.oravine-site [data-reveal-stagger].is-visible.is-settled > *:nth-child(n) { transition-delay: 0s; }

/* ── 3. Brand pillars ──────────────────────────────────────────── */

.oravine-site .home-pillars { position: relative; overflow: hidden; }

.oravine-site .pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.oravine-site .pillar-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
    padding: clamp(1.6rem, 2.6vw, 2.1rem) clamp(1.35rem, 2vw, 1.75rem);
    overflow: hidden;
    border: 1px solid var(--os-line);
    border-radius: 1.35rem;
    background: var(--os-surface);
    box-shadow: 0 14px 38px -34px rgba(30, 48, 20, .45);
}

/* Reveal transition comes from [data-reveal-stagger]; hover is layered on top. */
.oravine-site .pillar-card::before {
    content: "";
    position: absolute;
    inset: -40% -40% auto auto;
    width: 14rem;
    height: 14rem;
    border-radius: 50%;
    background: radial-gradient(circle, var(--os-green-soft-strong), transparent 70%);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .5s var(--os-ease), transform .7s var(--os-ease);
    pointer-events: none;
}

.oravine-site .pillar-card:hover {
    transform: translateY(-6px);
    border-color: var(--os-green-line);
    box-shadow: 0 26px 50px -34px rgba(30, 48, 20, .55);
}

.oravine-site .pillar-card:hover::before { opacity: 1; transform: scale(1); }

.oravine-site .pillar-card h3 {
    position: relative;
    margin: .6rem 0 0;
    color: var(--os-ink);
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -.02em;
}

.oravine-site .pillar-card p {
    position: relative;
    margin: 0;
    color: var(--os-ink-muted);
    font-size: .92rem;
    line-height: 1.65;
}

.oravine-site .pillar-line {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--os-green), var(--os-green-on-dark));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .55s var(--os-ease);
}

html[dir="rtl"] .oravine-site .pillar-line { transform-origin: right center; }
.oravine-site .pillar-card:hover .pillar-line { transform: scaleX(1); }

@media (max-width: 1024px) {
    .oravine-site .pillars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .oravine-site .pillars-grid { grid-template-columns: 1fr; gap: .75rem; }
}

/* ── 4. Product lines ──────────────────────────────────────────── */

.oravine-site .home-product-lines::before {
    content: "";
    position: absolute;
    top: -12rem;
    right: -10rem;
    width: 32rem;
    height: 32rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(154, 182, 26, .14), transparent 68%);
    animation: os-drift 18s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes os-drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-6rem, 5rem) scale(1.15); }
}

.oravine-site .home-product-lines > div { position: relative; }

.oravine-site .product-lines-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
}

.oravine-site .product-line-card {
    display: flex;
    flex-direction: column;
    background: var(--os-surface);
    color: var(--os-ink);
}

/* Copy fills the card so every "View collection" link lines up at the bottom. */
.oravine-site .product-line-copy { flex: 1; }

/* Accent bar grows across the top on hover. */
.oravine-site .product-line-card::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .6s var(--os-ease);
}

html[dir="rtl"] .oravine-site .product-line-card::before { transform-origin: right center; }
.oravine-site .product-line-card:hover::before { transform: scaleX(1); }

/* A light sheen sweeps across the card on hover. */
.oravine-site .product-line-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(115deg, transparent 35%, rgba(154, 182, 26, .1) 50%, transparent 65%);
    transform: translateX(-100%);
    transition: transform .9s var(--os-ease);
    pointer-events: none;
}

.oravine-site .product-line-card:hover::after { transform: translateX(100%); }

.oravine-site .product-line-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 52px -36px rgba(30, 48, 20, .55);
}

.oravine-site .product-line-copy p {
    margin-top: .1rem;
    font-size: .9rem;
    line-height: 1.65;
}

.oravine-site .product-line-action {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    text-decoration: none;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.oravine-site .product-line-action b {
    display: inline-grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    border-radius: 50%;
    background: var(--os-green-soft);
    font-size: .85rem;
    transition: transform .35s var(--os-ease), background-color .3s var(--os-ease), color .3s var(--os-ease);
}

.oravine-site .product-line-card:hover .product-line-action b {
    background: var(--os-green);
    color: #fff;
    transform: translateX(4px);
}

html[dir="rtl"] .oravine-site .product-line-action b { transform: scaleX(-1); }
html[dir="rtl"] .oravine-site .product-line-card:hover .product-line-action b { transform: scaleX(-1) translateX(4px); }

/* ── 5. Solutions marquee ──────────────────────────────────────── */

.oravine-site .home-solutions .solutions-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

.oravine-site .home-solutions .solutions-heading h2 { max-width: 16ch; }

.oravine-site .marquee-toggle {
    position: relative;
    display: inline-grid;
    flex-shrink: 0;
    width: 2.9rem;
    height: 2.9rem;
    place-items: center;
    border: 1px solid var(--os-line-strong);
    border-radius: 50%;
    background: var(--os-surface);
    color: var(--os-ink);
    cursor: pointer;
    transition: background-color .25s var(--os-ease), border-color .25s var(--os-ease), transform .25s var(--os-ease);
}

.oravine-site .marquee-toggle:hover {
    border-color: var(--os-green);
    background: var(--os-green-soft);
    transform: scale(1.06);
}

.oravine-site .marquee-toggle:focus-visible { outline: none; box-shadow: var(--os-focus-ring); }

/* Pause glyph: two bars. Play glyph: a CSS triangle. */
.oravine-site .marquee-toggle-pause {
    width: .7rem;
    height: .8rem;
    border-inline: .22rem solid currentColor;
}

.oravine-site .marquee-toggle-play {
    display: none;
    width: 0;
    height: 0;
    margin-inline-start: .2rem;
    border-block: .45rem solid transparent;
    border-inline-start: .7rem solid currentColor;
}

.oravine-site .marquee-toggle[aria-pressed="true"] .marquee-toggle-pause { display: none; }
.oravine-site .marquee-toggle[aria-pressed="true"] .marquee-toggle-play { display: block; }

/* The strip is a real horizontal scroller: siteEnhance.js drifts it along and
   wraps it at the halfway point, while visitors can swipe, drag, use the
   wheel/trackpad, the arrow keys, or the prev/next buttons to go either way. */
.oravine-site .solutions-rail { position: relative; }

.oravine-site .solutions-marquee {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: .6rem 1.6rem;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.oravine-site .solutions-marquee::-webkit-scrollbar { display: none; }
.oravine-site .solutions-marquee:focus-visible { outline: none; box-shadow: inset var(--os-focus-ring); }

.oravine-site .solutions-marquee.is-dragging { cursor: grabbing; user-select: none; }
.oravine-site .solutions-marquee.is-dragging .solution-slide { pointer-events: none; }

.oravine-site .solutions-marquee-track {
    display: flex;
    align-items: stretch;
    width: max-content;
}

.oravine-site .solutions-marquee-track img { -webkit-user-drag: none; user-select: none; }

/* Prev / next buttons float over the faded edges of the strip. */
.oravine-site .solutions-nav {
    position: absolute;
    z-index: 2;
    /* Centered on the card photos so the buttons never cover the card text. */
    top: 7.1rem;
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid var(--os-line-strong);
    border-radius: 50%;
    background: var(--os-surface);
    color: var(--os-ink);
    box-shadow: 0 14px 30px -18px rgba(30, 48, 20, .55);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .25s var(--os-ease), border-color .25s var(--os-ease), color .25s var(--os-ease), transform .25s var(--os-ease);
}

.oravine-site .solutions-nav--prev { inset-inline-start: max(.5rem, calc(var(--os-gutter) - .5rem)); }
.oravine-site .solutions-nav--next { inset-inline-end: max(.5rem, calc(var(--os-gutter) - .5rem)); }

.oravine-site .solutions-nav:hover {
    border-color: var(--os-green);
    background: var(--os-green);
    color: #fff;
    transform: translateY(-50%) scale(1.06);
}

.oravine-site .solutions-nav:active { transform: translateY(-50%) scale(.96); }
.oravine-site .solutions-nav:focus-visible { outline: none; box-shadow: var(--os-focus-ring); }

/* Chevron drawn with two borders; points toward the reading direction. */
.oravine-site .solutions-nav > span {
    width: .62rem;
    height: .62rem;
    border-top: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    transform: rotate(45deg);
    margin-inline-end: .2rem;
}

.oravine-site .solutions-nav--prev > span { transform: rotate(-135deg); margin-inline: .2rem 0; }
html[dir="rtl"] .oravine-site .solutions-nav--next > span { transform: rotate(-45deg); }
html[dir="rtl"] .oravine-site .solutions-nav--prev > span { transform: rotate(135deg); }

@media (max-width: 640px) {
    .oravine-site .solutions-nav { width: 2.5rem; height: 2.5rem; top: 5.15rem; }
    .oravine-site .solutions-nav > span { width: .5rem; height: .5rem; }
}

/* Spacing lives on each card (not `gap`) so both halves of the track are
   exactly equal and the -50% loop point is seamless. */
.oravine-site .solutions-marquee-track > .solution-slide {
    display: flex;
    flex: 0 0 clamp(16.5rem, 24vw, 21rem);
    flex-direction: column;
    min-height: 0;
    margin-inline-end: 1.15rem;
}

.oravine-site .solutions-marquee-track .solution-slide-copy {
    flex: 1;
    min-height: 0;
}

.oravine-site .solution-slide-label { line-height: 1.45; }

/* Descriptions are authored as several short lines; keep those breaks. */
.oravine-site .solution-slide p,
.oravine-site .product-line-copy p { white-space: pre-line; }

.oravine-site .solution-slide-action b {
    display: inline-grid;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    border-radius: 50%;
    background: var(--os-green-soft);
    transition: transform .35s var(--os-ease), background-color .3s var(--os-ease), color .3s var(--os-ease);
}

.oravine-site .solution-slide:hover .solution-slide-action b { background: var(--os-green); color: #fff; }

@media (max-width: 600px) {
    .oravine-site .solutions-marquee-track > .solution-slide {
        flex-basis: min(78vw, 18rem);
        margin-inline-end: .85rem;
    }
}

/* ── 6. Remaining homepage blocks ──────────────────────────────── */

.oravine-site .feedback-card:hover,
.oravine-site .result-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 50px -36px rgba(30, 48, 20, .5);
}

/* ── 7. Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .oravine-site .os-header { transition: none; }

    html:not(.os-intro-done) .oravine-site .os-header-bar,
    html:not(.os-intro-done) .oravine-site .os-header-nav .os-nav-link,
    html:not(.os-intro-done) .oravine-site .os-header-tools { animation: none; }

    .oravine-site .home-product-lines::before { animation: none; }

    .oravine-site [data-reveal] .home-section-head > *,
    .oravine-site [data-reveal] .home-section-head > div > * { opacity: 1; transform: none; transition: none; }

    /* The strip never drifts on its own (siteEnhance.js skips autoplay), so the
       pause control has nothing to do. Manual scrolling still works. */
    .oravine-site .marquee-toggle { display: none; }
    .oravine-site .solutions-nav { transition: none; }

    .oravine-site .pillar-card,
    .oravine-site .product-line-card,
    .oravine-site .product-line-card::after,
    .oravine-site .feedback-card,
    .oravine-site .result-card { transition: none; }
}

/* ── 8. Home refresh: consistent headings, icons, richer cards ──── */

/* Every section heading gets the same kicker treatment. */
.oravine-site .os-head--center.home-section-head .section-kicker { margin-bottom: .9rem; }

/* Pointer spotlight (position written by siteEnhance.js). */
.oravine-site [data-spotlight] { --spot-x: 50%; --spot-y: 0%; }
.oravine-site .pillar-card::after,
.oravine-site .why-value-card::after,
.oravine-site .product-line-card .product-line-copy::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(18rem circle at var(--spot-x) var(--spot-y), rgba(154, 182, 26, .13), transparent 65%);
    opacity: 0;
    transition: opacity .4s var(--os-ease);
    pointer-events: none;
}
.oravine-site .pillar-card:hover::after,
.oravine-site .why-value-card:hover::after,
.oravine-site .product-line-card:hover .product-line-copy::before { opacity: 1; }
.oravine-site .product-line-copy { position: relative; }
.oravine-site .product-line-copy > * { position: relative; z-index: 1; }

/* Pillars: text only, centred. */
.oravine-site .pillar-card { align-items: center; text-align: center; }
.oravine-site .pillar-card h3 { margin-top: 0; }
.oravine-site .pillar-line,
html[dir="rtl"] .oravine-site .pillar-line { transform-origin: center; }
.oravine-site .pillar-card h3,
.oravine-site .pillar-card p { z-index: 1; }

/* Product lines: the count number animates (see [data-count-to]). */
.oravine-site .product-line-count b { font-weight: inherit; font-variant-numeric: tabular-nums; }

/* Solutions heading: title left, subtitle + pause control right. */
.oravine-site .home-solutions .solutions-heading-side { display: flex; align-items: flex-end; gap: 1.25rem; max-width: 30rem; }
.oravine-site .home-solutions .solutions-heading-side p { margin: 0; color: var(--os-ink-muted); font-size: 1rem; line-height: 1.7; text-wrap: pretty; }
.oravine-site .home-solutions .solutions-heading h2 { margin-top: .7rem; }

/* Solution cards without a photo: a designed brand panel instead of a bare number. */
.oravine-site .solution-slide-media.is-placeholder {
    background:
        radial-gradient(circle, rgba(255, 255, 255, .22) 1px, transparent 1.5px) 0 0 / 16px 16px,
        radial-gradient(circle at 78% 18%, rgba(255, 255, 255, .45), transparent 34%),
        linear-gradient(140deg, color-mix(in srgb, var(--os-green), #16240a 18%), var(--os-green) 55%, color-mix(in srgb, var(--os-green), #fff 35%));
}
.oravine-site .solution-slide-media > .solution-placeholder-mark {
    display: grid;
    width: 6.5rem;
    height: 6.5rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 20px 40px -24px rgba(22, 36, 10, .6), inset 0 1px 0 rgba(255, 255, 255, .5);
    color: #fff;
    font-size: 2.9rem;
    font-weight: 760;
    letter-spacing: -.04em;
    backdrop-filter: blur(6px);
    transition: transform .6s var(--os-ease);
}
.oravine-site .solution-slide:hover .solution-slide-media > .solution-placeholder-mark { transform: scale(1.08) rotate(-4deg); }
.oravine-site .solution-slide-media > .solution-placeholder-index {
    position: absolute;
    top: 1rem;
    inset-inline-start: 1rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .12em;
}

/* Multi-line descriptions become a short checklist. */
.oravine-site .solution-points { display: grid; gap: .45rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.oravine-site .solution-points li { position: relative; padding-inline-start: 1.45rem; color: var(--os-ink-muted); font-size: .88rem; line-height: 1.5; }
.oravine-site .solution-points li::before {
    content: "";
    position: absolute;
    top: .32rem;
    inset-inline-start: 0;
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4.5 8.4l2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / 100% no-repeat,
        var(--os-green);
}

/* Featured products: split heading with a "View all" link. */
.oravine-site .featured-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 30rem);
    gap: 2rem;
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.oravine-site .featured-heading .os-title { margin: .7rem 0 0; }
.oravine-site .featured-heading-side { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.oravine-site .featured-heading-side p { margin: 0; color: var(--os-ink-muted); font-size: 1rem; line-height: 1.7; }
.oravine-site .home-view-all {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .45rem .5rem .45rem 1.15rem;
    border: 1px solid var(--os-ink);
    border-radius: 999px;
    color: var(--os-ink);
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .3s var(--os-ease), color .3s var(--os-ease);
}
html[dir="rtl"] .oravine-site .home-view-all { padding: .45rem 1.15rem .45rem .5rem; }
.oravine-site .home-view-all b {
    display: grid;
    width: 1.9rem;
    height: 1.9rem;
    place-items: center;
    border-radius: 50%;
    background: var(--os-green);
    color: #fff;
    transition: transform .35s var(--os-ease);
}
html[dir="rtl"] .oravine-site .home-view-all b { transform: scaleX(-1); }
.oravine-site .home-view-all:hover { background: var(--os-ink); color: #fff; }
.oravine-site .home-view-all:hover b { transform: translateX(3px); }
html[dir="rtl"] .oravine-site .home-view-all:hover b { transform: scaleX(-1) translateX(3px); }

/* Featured cards: gentle zoom and a "View details" cue that slides in. */
.oravine-site .os-featured-card:hover .os-featured-media.has-product-image img { transform: scale(1.05); }
.oravine-site .os-featured-cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .7rem;
    color: var(--os-green-ink);
    font-size: .76rem;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .0;
    transform: translateY(6px);
    transition: opacity .35s var(--os-ease), transform .35s var(--os-ease);
}
html[dir="rtl"] .oravine-site .os-featured-cta b { display: inline-block; transform: scaleX(-1); }
.oravine-site .os-featured-card:hover .os-featured-cta,
.oravine-site .os-featured-card:focus-visible .os-featured-cta { opacity: 1; transform: none; }
@media (hover: none) {
    .oravine-site .os-featured-cta { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
    .oravine-site .featured-heading { grid-template-columns: 1fr; gap: 1rem; }
    .oravine-site .home-solutions .solutions-heading { flex-direction: column; align-items: flex-start; }
    .oravine-site .home-solutions .solutions-heading-side { max-width: none; width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    .oravine-site .solution-slide-media > .solution-placeholder-mark,
    .oravine-site .os-featured-cta,
    .oravine-site .home-view-all b { transition: none; }
    .oravine-site .solution-slide:hover .solution-slide-media > .solution-placeholder-mark { transform: none; }
}

/* Why Oravine value cards share the pointer spotlight. */
.oravine-site .why-value-card { position: relative; overflow: hidden; }
.oravine-site .why-value-card > * { position: relative; z-index: 1; }

/* ── Hero: "Immersive" style — cinematic photo slide ────────────────
   Dark, photo-led slides (Admin → Hero designer → Visual style). The
   shading follows the text position so the copy always sits on the
   darkest part of the photo, and the controls switch to light colours. */

.oravine-site .hero-style-immersive .hero-slide-wash {
    background:
        linear-gradient(90deg,
            rgba(7, 12, 9, calc(var(--hero-overlay, .82) * .92)) 0%,
            rgba(7, 12, 9, calc(var(--hero-overlay, .82) * .62)) 45%,
            rgba(7, 12, 9, calc(var(--hero-overlay, .82) * .18)) 80%,
            rgba(7, 12, 9, .05) 100%),
        linear-gradient(180deg, rgba(7, 12, 9, .32) 0%, transparent 26%, transparent 62%, rgba(7, 12, 9, .58) 100%);
}

/* Centred copy: a soft spotlight of shade behind the text instead of a left fade. */
.oravine-site .hero-style-immersive.hero-content-center .hero-slide-wash {
    background:
        radial-gradient(ellipse 62% 72% at 50% 50%,
            rgba(7, 12, 9, calc(var(--hero-overlay, .82) * .88)) 0%,
            rgba(7, 12, 9, calc(var(--hero-overlay, .82) * .58)) 55%,
            rgba(7, 12, 9, calc(var(--hero-overlay, .82) * .34)) 100%),
        linear-gradient(180deg, rgba(7, 12, 9, .3) 0%, transparent 30%, transparent 62%, rgba(7, 12, 9, .6) 100%);
}

/* A low accent-coloured glow rising from the bottom edge. */
.oravine-site .hero-style-immersive .hero-slide-wash::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 60%;
    background: radial-gradient(ellipse 55% 100% at 50% 100%, color-mix(in srgb, var(--hero-accent), transparent 70%), transparent 72%);
    opacity: .85;
    pointer-events: none;
}

/* Slow "Ken Burns" drift on the photo while the slide is showing. */
.oravine-site .hero-style-immersive.is-active .hero-slide-media img {
    animation: hero-kenburns 11s cubic-bezier(.25, .46, .45, .94) both;
}

@keyframes hero-kenburns {
    from { transform: scale(1.14) translate3d(1.5%, 1%, 0); }
    to   { transform: scale(1.03) translate3d(0, 0, 0); }
}

/* Eyebrow becomes a frosted-glass pill with a softly pulsing accent dot. */
.oravine-site .hero-style-immersive .hero-eyebrow {
    display: inline-flex;
    gap: .6rem;
    padding: .5rem 1rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
            backdrop-filter: blur(12px) saturate(140%);
    color: #fff;
    letter-spacing: .18em;
}

.oravine-site .hero-style-immersive .hero-eyebrow::before {
    content: "";
    width: .45rem;
    height: .45rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--hero-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--hero-accent), transparent 70%);
    animation: hero-pulse 2.4s ease-in-out infinite;
}

@keyframes hero-pulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hero-accent), transparent 68%); }
    50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--hero-accent), transparent 88%); }
}

/* Headline: crisp white with a gradient highlight, and a blur-in entrance. */
.oravine-site .hero-style-immersive .hero-copy h1 {
    max-width: 15ch;
    color: #fff;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
    filter: blur(10px);
    transition: opacity .55s ease, transform .7s cubic-bezier(.22, 1, .36, 1), filter .9s cubic-bezier(.22, 1, .36, 1);
}

.oravine-site .hero-style-immersive.is-active .hero-copy h1 { filter: none; }

.oravine-site .hero-style-immersive .hero-copy h1 span {
    background: linear-gradient(100deg, color-mix(in srgb, var(--hero-accent), #fff 38%) 0%, var(--hero-accent) 60%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    text-shadow: none;
}

.oravine-site .hero-style-immersive .hero-copy > p {
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .35);
}

/* Buttons: a glowing primary and a glass secondary. */
.oravine-site .hero-style-immersive .hero-btn-primary {
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--hero-accent), transparent 20%), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.oravine-site .hero-style-immersive .hero-btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.oravine-site .hero-style-immersive .hero-btn-primary:hover::after { transform: translateX(120%); }

.oravine-site .hero-style-immersive .hero-btn-secondary {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    color: #fff;
}

.oravine-site .hero-style-immersive .hero-btn-secondary:hover { background: #fff; color: #111; }

/* Slide indicators and arrows switch to light colours over a dark slide. */
.oravine-site .hero-carousel:has(.hero-slide.is-active.hero-style-immersive) .hero-dot span { background: rgba(255, 255, 255, .3); }
.oravine-site .hero-carousel:has(.hero-slide.is-active.hero-style-immersive) .hero-arrows button {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.oravine-site .hero-carousel:has(.hero-slide.is-active.hero-style-immersive) .hero-arrows button:hover {
    border-color: transparent;
    background: var(--hero-accent);
}

/* Phones: the page-wide mobile rule paints every slide's shading white,
   which hid the white Immersive text. Keep it dark, fading downwards. */
@media (max-width: 760px) {
    .oravine-site .hero-style-immersive .hero-slide-wash,
    .oravine-site .hero-style-immersive.hero-content-center .hero-slide-wash {
        background: linear-gradient(180deg,
            rgba(7, 12, 9, calc(.35 + var(--hero-overlay, .82) * .5)) 0%,
            rgba(7, 12, 9, calc(.2 + var(--hero-overlay, .82) * .4)) 55%,
            rgba(7, 12, 9, .25) 100%);
        transform: none;
    }

    .oravine-site .hero-style-immersive .hero-copy h1 { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .oravine-site .hero-style-immersive.is-active .hero-slide-media img,
    .oravine-site .hero-style-immersive .hero-eyebrow::before { animation: none; }
    .oravine-site .hero-style-immersive .hero-copy h1 { filter: none; }
    .oravine-site .hero-style-immersive .hero-btn-primary::after { display: none; }
}

/* ── Hero: always edge to edge ──────────────────────────────────────
   The Themes admin injects `.oravine-site section { padding: … }` for page
   sections. On the hero carousel that padding shrank the first slide (laid
   out in flow) but not the others (absolutely positioned), so slide 1 showed
   empty bands above and below its photo. The hero handles its own spacing. */
.oravine-site .hero-carousel { padding: 0; }

/* ── Hero: same visual style on phones, tablets and desktops ─────────
   The original phone rules (site-enhance.css, ≤ 760 px) replaced each slide's
   design with one fixed look: a ~96% white shade whatever the admin chose,
   text forced to the left, and the 3D product faded to 25%. These rules make
   the Hero designer settings (style, text position, overlay) apply on phones
   too. Tablets already use the desktop layout. */
@media (max-width: 760px) {
    /* Editorial / 3D product: respect the admin's "Content overlay" amount. */
    .oravine-site .hero-slide-wash {
        background: linear-gradient(180deg,
            rgba(249, 250, 247, var(--hero-overlay, .82)) 0%,
            rgba(249, 250, 247, calc(var(--hero-overlay, .82) * .88)) 55%,
            rgba(249, 250, 247, calc(var(--hero-overlay, .82) * .3)) 100%);
    }

    /* Centred text stays centred. */
    .oravine-site .hero-content-center .hero-copy { text-align: center; }
    .oravine-site .hero-content-center .hero-copy h1,
    .oravine-site .hero-content-center .hero-copy > p { margin-inline: auto; }
    .oravine-site .hero-content-center .hero-eyebrow,
    .oravine-site .hero-content-center .hero-actions { justify-content: center; }

    /* Right-aligned text stays on the right. */
    .oravine-site .hero-content-right .hero-copy { text-align: end; }
    .oravine-site .hero-content-right .hero-copy h1,
    .oravine-site .hero-content-right .hero-copy > p { margin-inline-start: auto; margin-inline-end: 0; }
    .oravine-site .hero-content-right .hero-eyebrow,
    .oravine-site .hero-content-right .hero-actions { justify-content: flex-end; }

    /* 3D product (and editorial cut-outs): fully visible, centred in the lower
       part of the slide below the text, instead of a faint shape behind it. */
    .oravine-site .hero-carousel:has(.hero-visual-stage) { min-height: 46rem; }
    .oravine-site .hero-slide .hero-visual-stage,
    .oravine-site .hero-content-right .hero-visual-stage,
    .oravine-site .hero-content-center .hero-visual-stage {
        top: auto;
        bottom: 4.25rem;
        left: 0;
        right: 0;
        width: min(82vw, 22rem);
        height: min(32%, 14rem);
        margin-inline: auto;
        opacity: 1;
        transform: none;
    }
    .oravine-site .hero-foreground-product { width: 80%; height: 90%; }
}

/* ── Hero: keep the photo's subject in view on every screen ─────────
   Narrower screens crop the sides of a wide photo. Cropping from the centre
   lost the subject (the text side is usually empty space), so the crop leans
   towards the side opposite the text. A dedicated mobile photo is composed
   for phones already, so it stays centred. */
.oravine-site .hero-content-left .hero-slide-media img { object-position: 80% 50%; }
.oravine-site .hero-content-right .hero-slide-media img { object-position: 20% 50%; }

@media (max-width: 760px) {
    .oravine-site .hero-slide-media:has(source) img { object-position: 50% 50%; }
}

/* Phones, light styles, no dedicated mobile photo: the wide desktop photo
   would sit right under the text. Stack instead — text on a clean band at the
   top, the photo filling the lower part and fading into it. (Immersive slides
   keep their dark full-bleed look; slides with a mobile photo are composed
   for phones and stay full-bleed.) */
@media (max-width: 760px) {
    .oravine-site .hero-slide:not(.hero-style-immersive) .hero-slide-media:not(:has(source)) {
        top: auto;
        bottom: 0;
        height: 60%;
    }

    .oravine-site .hero-slide:not(.hero-style-immersive):has(.hero-slide-media:not(:has(source))) .hero-slide-wash {
        background: linear-gradient(180deg,
            var(--os-surface-soft) 0%,
            var(--os-surface-soft) 40%,
            color-mix(in srgb, var(--os-surface-soft), transparent 100%) 56%);
    }
}

/* Tablets (761–1023 px) always show the wide desktop photo in an almost
   square frame, so the same stacked layout applies to light photo slides. */
@media (min-width: 761px) and (max-width: 1023px) {
    .oravine-site .hero-slide:not(.hero-style-immersive) .hero-slide-media {
        top: auto;
        bottom: 0;
        height: 58%;
    }

    .oravine-site .hero-slide:not(.hero-style-immersive):has(.hero-slide-media) .hero-slide-wash {
        background: linear-gradient(180deg,
            var(--os-surface-soft) 0%,
            var(--os-surface-soft) 42%,
            color-mix(in srgb, var(--os-surface-soft), transparent 100%) 56%);
    }

    .oravine-site .hero-slide:not(.hero-style-immersive):has(.hero-slide-media) .hero-slide-inner {
        align-items: flex-start;
        padding-top: clamp(3.5rem, 7vw, 4.5rem);
    }

    .oravine-site .hero-slide:not(.hero-style-immersive):has(.hero-slide-media) .hero-copy { width: min(40rem, 92%); }
}

/* ── Solutions heading: one line on every screen ─────────────────────
   The title stays on a single line (it used to break after "for"), with the
   pause control on the same row. Phones scale the type with the screen width
   so the full title always fits. */
.oravine-site .home-solutions .solutions-heading {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.oravine-site .home-solutions .solutions-heading > div:first-child { flex: 1; min-width: 0; }

.oravine-site .home-solutions .solutions-heading h2 {
    max-width: none;
    white-space: nowrap;
    text-wrap: nowrap;
}

.oravine-site .home-solutions .solutions-heading-side {
    flex-shrink: 0;
    width: auto;
    max-width: 30rem;
}

/* With an optional subtitle there is too much for one row on narrow screens. */
@media (max-width: 900px) {
    .oravine-site .home-solutions .solutions-heading:has(.solutions-heading-side p) {
        flex-direction: column;
        align-items: flex-start;
    }
    .oravine-site .home-solutions .solutions-heading:has(.solutions-heading-side p) .solutions-heading-side {
        width: 100%;
        max-width: none;
        justify-content: space-between;
    }
}

@media (max-width: 640px) {
    .oravine-site .home-solutions { padding-block: 3.25rem 2.5rem; }
    .oravine-site .home-solutions .solutions-heading { gap: .75rem; margin-bottom: 1.25rem; }
    .oravine-site .home-solutions .solutions-heading h2 {
        margin-top: .5rem;
        font-size: clamp(1.3rem, 6.1vw, 2.2rem);
        letter-spacing: -.04em;
    }
    .oravine-site .marquee-toggle { width: 2.6rem; height: 2.6rem; }

    /* Cards: a shorter image and tighter copy so more of each card fits on screen. */
    .oravine-site .solutions-marquee { padding-block: .4rem 1.2rem; }
    .oravine-site .solutions-marquee-track .solution-slide-media { height: 9.5rem; }
    .oravine-site .solutions-marquee-track .solution-slide-copy { padding: 1.1rem 1.15rem 1.2rem; }
    .oravine-site .solutions-marquee-track .solution-slide h3 { font-size: 1.25rem; }
}