/* ONEI-S premium product catalogue and feature detail pages */
:root {
    --p-ink:#18201d;
    --p-muted:#68736d;
    --p-dark:#111916;
    --p-sage-muted:#b7c9b7;
    --p-sage:#c5dda9;
    --p-paper:#f6f7f2;
    --p-line:#e2e7df
}

.oi-products-hero {
    position:relative;
    overflow:hidden;
    background:radial-gradient(ellipse at 82% 18%,
rgba(183,
201,
183,
.14),
transparent 34%),
linear-gradient(125deg,
#111916,
#1b2822 65%,
#25352b);
    color:#fff;
    padding:88px 0 0
}

.oi-product-hero-glow {
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    border:1px solid #c5dda919;
    right:-160px;
    top:-240px;
    box-shadow:0 0 0 55px #c5dda908,
0 0 0 110px #c5dda905;
    pointer-events:none
}

.oi-products-hero-grid {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr .92fr;
    align-items:center;
    gap:60px;
    padding-bottom:72px
}

.oi-products-hero-copy {
    max-width:650px
}

.oi-products-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#819781;
    font-size:10px;
    font-weight:850;
    letter-spacing:1.8px;
    text-transform:uppercase
}

.oi-products-hero .oi-products-eyebrow {
    color:var(--p-sage)
}

.oi-products-hero-copy h1 {
    font-size:clamp(42px,
5vw,
67px);
    line-height:1.07;
    letter-spacing:-2.5px;
    font-weight:780;
    margin:22px 0;
    color:#fff
}

.oi-products-hero-copy h1 em,
.oi-product-overview-copy h2 em {
    font-style:normal;
    color:var(--p-sage)
}

.oi-products-hero-copy>p {
    font-size:16px;
    line-height:1.85;
    color:#c4cec6;
    max-width:600px;
    margin:0
}

.oi-product-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px
}

.oi-product-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    padding:12px 20px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    transition:transform .2s,
background .2s;
    color:inherit
}

.oi-product-btn:hover {
    transform:translateY(-2px)
}

.oi-product-btn-primary {
    background:var(--p-sage);
    color:#182019;
    border:1px solid var(--p-sage)
}

.oi-product-btn-primary:hover {
    background:#d8e8cb;
    color:#182019
}

.oi-product-btn-outline {
    border:1px solid #ffffff40;
    color:#fff;
    background:#ffffff09
}

.oi-product-btn-outline:hover {
    background:#ffffff1c;
    color:#fff
}

.oi-products-hero-note {
    display:flex;
    align-items:center;
    gap:13px;
    margin-top:30px
}

.oi-products-hero-note>span {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border:1px solid #c5dda959;
    border-radius:14px;
    color:var(--p-sage);
    font-size:18px
}

.oi-products-hero-note strong,
.oi-products-hero-note small {
    display:block
}

.oi-products-hero-note strong {
    font-size:13px
}

.oi-products-hero-note small {
    font-size:11px;
    color:#9eada2;
    margin-top:3px
}

.oi-products-hero-visual,
.oi-product-hero-visual {
    position:relative;
    min-width:0
}

.oi-products-hero-visual>img,
.oi-product-hero-visual>img {
    display:block;
    width:100%;
    height:430px;
    object-fit:cover;
    border-radius:26px 8px 26px 8px;
    box-shadow:0 28px 80px #0005
}

.oi-products-hero-visual:after,
.oi-product-hero-visual:after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:26px 8px 26px 8px;
    background:linear-gradient(0deg,
#0d170766,
transparent 48%);
    pointer-events:none
}

.oi-products-visual-chip {
    position:absolute;
    z-index:2;
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    color:var(--p-ink);
    padding:13px 16px;
    border-radius:15px;
    box-shadow:0 15px 40px #0003
}

.oi-products-visual-chip>i {
    display:grid;
    place-items:center;
    width:39px;
    height:39px;
    background:#eff4e9;
    border-radius:12px;
    color:#526d52;
    font-size:19px
}

.oi-products-visual-chip small,
.oi-products-visual-chip strong {
    display:block
}

.oi-products-visual-chip small {
    font-size:9px;
    letter-spacing:1px;
    color:#718078;
    font-weight:800
}

.oi-products-visual-chip strong {
    font-size:12px;
    margin-top:3px
}

.oi-products-chip-top {
    top:24px;
    left:-25px
}

.oi-products-chip-bottom {
    bottom:24px;
    right:-20px
}

.oi-products-strip {
    border-top:1px solid #ffffff20;
    padding:20px 0
}

.oi-products-strip .container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px
}

.oi-products-strip>div>span {
    font-size:10px;
    letter-spacing:1.5px;
    color:#91a298;
    font-weight:800
}

.oi-products-strip>div>div {
    display:flex;
    align-items:center;
    gap:13px;
    flex-wrap:wrap
}

.oi-products-strip b {
    font-size:12px;
    color:#e6ece5
}

.oi-products-strip i {
    font-style:normal;
    color:var(--p-sage)
}

.oi-product-detail-hero {
    padding-bottom:72px
}

.oi-product-back {
    display:inline-flex;
    gap:8px;
    align-items:center;
    color:#b8c5bb;
    font-size:12px;
    text-decoration:none;
    margin-bottom:22px
}

.oi-product-back:hover {
    color:var(--p-sage)
}

.oi-product-assurance {
    display:flex;
    gap:8px;
    align-items:center;
    margin-top:21px;
    color:#bdc9c0;
    font-size:11px
}

.oi-product-assurance i {
    color:var(--p-sage);
    font-size:17px
}

.oi-product-hero-visual>img {
    height:455px
}

.oi-product-image-caption {
    position:absolute;
    z-index:2;
    left:17px;
    right:17px;
    bottom:17px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:15px;
    background:#101914d9;
    border:1px solid #ffffff29;
    border-radius:15px;
    backdrop-filter:blur(12px)
}

.oi-product-image-icon {
    display:grid;
    place-items:center;
    flex:0 0 44px;
    height:44px;
    background:var(--p-sage);
    border-radius:13px;
    color:#182019;
    font-size:20px
}

.oi-product-image-caption small,
.oi-product-image-caption strong {
    display:block
}

.oi-product-image-caption small {
    font-size:9px;
    letter-spacing:1.2px;
    color:#b6c4b9
}

.oi-product-image-caption strong {
    font-size:14px;
    color:#fff;
    margin-top:3px
}

.oi-products-catalogue {
    background:var(--p-paper);
    padding:80px 0 90px
}

.oi-products-section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:35px;
    margin-bottom:30px
}

.oi-products-section-heading h2,
.oi-product-section-heading h2,
.oi-related-heading h2 {
    font-size:clamp(29px,
3vw,
42px);
    line-height:1.15;
    letter-spacing:-1.3px;
    color:var(--p-ink);
    font-weight:780;
    margin:12px 0 0
}

.oi-products-section-heading>p {
    max-width:490px;
    color:var(--p-muted);
    font-size:13px;
    line-height:1.8;
    margin:0
}

.oi-product-category-nav {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin:0 0 42px
}

.oi-product-category-nav a {
    display:inline-flex;
    padding:10px 14px;
    border:1px solid #dce3d9;
    border-radius:999px;
    text-decoration:none;
    color:#44534a;
    font-size:11px;
    font-weight:750;
    background:#fff;
    transition:all .2s
}

.oi-product-category-nav a:hover {
    background:var(--p-dark);
    border-color:var(--p-dark);
    color:#fff
}

.oi-product-group {
    margin-top:43px;
    scroll-margin-top:110px
}

.oi-product-group-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:25px;
    margin-bottom:21px
}

.oi-product-group-heading h3 {
    font-size:26px;
    letter-spacing:-.7px;
    font-weight:780;
    color:var(--p-ink);
    margin:8px 0 0
}

.oi-product-group-heading>p {
    max-width:450px;
    color:var(--p-muted);
    font-size:12px;
    line-height:1.7;
    margin:0
}

.oi-product-card-grid {
    display:grid;
    grid-template-columns:repeat(3,
minmax(0,
1fr));
    gap:18px
}

.oi-product-card {
    overflow:hidden;
    border:1px solid #e4e8e0;
    background:#fff;
    border-radius:18px;
    transition:transform .25s,
box-shadow .25s,
border-color .25s
}

.oi-product-card:hover {
    transform:translateY(-5px);
    box-shadow:0 20px 48px #1c2a1f17;
    border-color:#c8d5c4
}

.oi-product-card-image {
    display:block;
    position:relative;
    overflow:hidden;
    height:200px;
    background:#dce4d8
}

.oi-product-card-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s
}

.oi-product-card:hover .oi-product-card-image img {
    transform:scale(1.04)
}

.oi-product-card-image>span {
    position:absolute;
    left:15px;
    bottom:14px;
    display:grid;
    place-items:center;
    width:43px;
    height:43px;
    border-radius:13px;
    background:var(--p-sage);
    color:#172019;
    font-size:20px
}

.oi-product-card-body {
    padding:21px 21px 18px
}

.oi-product-card-category {
    font-size:9px;
    letter-spacing:1.1px;
    text-transform:uppercase;
    font-weight:800;
    color:#6f876f
}

.oi-product-card-body h4 {
    font-size:18px;
    line-height:1.35;
    font-weight:780;
    margin:9px 0
}

.oi-product-card-body h4 a {
    color:var(--p-ink);
    text-decoration:none
}

.oi-product-card-body>p {
    min-height:76px;
    font-size:12px;
    line-height:1.75;
    color:var(--p-muted);
    margin:0
}

.oi-product-card-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-top:15px;
    margin-top:16px;
    border-top:1px solid #edf0e9
}

.oi-product-card-footer>a {
    font-size:11px;
    font-weight:800;
    color:#344b3a;
    text-decoration:none
}

.oi-product-card-footer>span {
    font-size:9px;
    color:#738076;
    white-space:nowrap
}

.oi-products-bottom-cta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    margin-top:65px;
    padding:34px 37px;
    border-radius:20px;
    background:var(--p-dark);
    color:#fff
}

.oi-products-bottom-cta .oi-products-eyebrow {
    color:var(--p-sage)
}

.oi-products-bottom-cta h2 {
    font-size:25px;
    margin:10px 0;
    color:#fff
}

.oi-products-bottom-cta p {
    font-size:12px;
    color:#b9c6bc;
    margin:0;
    max-width:660px;
    line-height:1.7
}

.oi-product-overview-section {
    padding:88px 0;
    background:#fff
}

.oi-product-overview-grid {
    display:grid;
    grid-template-columns:1.02fr .98fr;
    gap:70px;
    align-items:center
}

.oi-product-overview-copy h2 {
    font-size:clamp(33px,
3.4vw,
47px);
    line-height:1.12;
    letter-spacing:-1.6px;
    font-weight:780;
    color:var(--p-ink);
    margin:15px 0 19px
}

.oi-product-overview-copy>p {
    font-size:14px;
    line-height:1.95;
    color:var(--p-muted);
    margin:0;
    max-width:620px
}

.oi-product-audience {
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    margin-top:26px;
    background:var(--p-paper);
    border:1px solid #e8ece5;
    border-radius:15px;
    max-width:570px
}

.oi-product-audience>i {
    display:grid;
    place-items:center;
    width:43px;
    height:43px;
    flex:0 0 43px;
    border-radius:13px;
    background:#e4eddd;
    color:#49674c;
    font-size:20px
}

.oi-product-audience small,
.oi-product-audience strong {
    display:block
}

.oi-product-audience small {
    font-size:9px;
    font-weight:800;
    letter-spacing:1.2px;
    color:#829084
}

.oi-product-audience strong {
    font-size:12px;
    color:var(--p-ink);
    margin-top:4px
}

.oi-product-overview-image {
    position:relative;
    min-width:0
}

.oi-product-overview-image>img {
    display:block;
    width:100%;
    height:400px;
    object-fit:cover;
    border-radius:8px 25px
}

.oi-overview-image-note {
    position:absolute;
    left:-23px;
    bottom:22px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 19px;
    background:#fff;
    border-radius:15px;
    box-shadow:0 15px 40px #15271b24;
    font-size:11px;
    color:#68746a;
    line-height:1.6
}

.oi-overview-image-note i {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:12px;
    background:#edf3e6;
    color:#526d4e;
    font-size:20px
}

.oi-overview-image-note strong {
    color:var(--p-ink)
}

.oi-product-benefits-section {
    padding:78px 0;
    background:var(--p-paper)
}

.oi-product-section-heading {
    text-align:center;
    max-width:760px;
    margin:0 auto 38px
}

.oi-product-section-heading h2 {
    margin-top:12px
}

.oi-product-section-heading>p {
    font-size:13px;
    line-height:1.8;
    color:var(--p-muted);
    margin:15px auto 0;
    max-width:650px
}

.oi-product-benefits-grid {
    display:grid;
    grid-template-columns:repeat(3,
minmax(0,
1fr));
    gap:17px
}

.oi-product-benefit-card {
    position:relative;
    min-height:200px;
    padding:24px;
    background:#fff;
    border:1px solid #e5e9e1;
    border-radius:18px;
    overflow:hidden
}

.oi-product-benefit-icon {
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    background:#eaf1e3;
    border-radius:14px;
    color:#4e6c4f;
    font-size:21px
}

.oi-product-benefit-number {
    position:absolute;
    right:20px;
    top:18px;
    font-size:33px;
    font-weight:850;
    color:#edf0e9
}

.oi-product-benefit-card h3 {
    position:relative;
    z-index:1;
    font-size:16px;
    line-height:1.45;
    color:var(--p-ink);
    font-weight:780;
    margin:19px 0 8px
}

.oi-product-benefit-card p {
    font-size:11px;
    line-height:1.7;
    color:var(--p-muted);
    margin:0
}

.oi-product-capabilities-section {
    padding:90px 0;
    background:#fff
}

.oi-product-section-heading-wide {
    max-width:800px
}

.oi-product-feature-sections {
    display:flex;
    flex-direction:column;
    gap:30px;
    margin-top:45px
}

.oi-product-feature-section {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:center;
    padding:22px;
    border:1px solid #e8ece5;
    border-radius:23px;
    background:#fff;
    box-shadow:0 12px 35px #1a2a1d09
}

.oi-product-feature-section.oi-feature-reverse .oi-product-feature-image {
    order:2
}

.oi-product-feature-section.oi-feature-reverse .oi-product-feature-content {
    order:1
}

.oi-product-feature-image {
    position:relative;
    min-width:0
}

.oi-product-feature-image>img {
    display:block;
    width:100%;
    height:340px;
    object-fit:cover;
    border-radius:16px
}

.oi-product-feature-image-number {
    position:absolute;
    top:14px;
    left:14px;
    display:grid;
    place-items:center;
    width:47px;
    height:47px;
    border-radius:14px;
    background:var(--p-sage);
    color:#172019;
    font-size:15px;
    font-weight:850
}

.oi-product-feature-image-label {
    position:absolute;
    left:13px;
    bottom:13px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 13px;
    border-radius:999px;
    background:#111916d9;
    color:#fff;
    font-size:10px;
    font-weight:750;
    backdrop-filter:blur(8px)
}

.oi-product-feature-image-label i {
    color:var(--p-sage);
    font-size:13px
}

.oi-product-feature-content {
    padding:14px 16px 14px 0
}

.oi-feature-reverse .oi-product-feature-content {
    padding:14px 0 14px 16px
}

.oi-product-feature-kicker {
    font-size:9px;
    font-weight:850;
    letter-spacing:1.5px;
    color:#81957e
}

.oi-product-feature-content h3 {
    font-size:clamp(24px,
2.5vw,
31px);
    line-height:1.2;
    letter-spacing:-.7px;
    font-weight:780;
    color:var(--p-ink);
    margin:12px 0
}

.oi-product-feature-content>p {
    font-size:12px;
    line-height:1.9;
    color:var(--p-muted);
    margin:0 0 18px
}

.oi-product-feature-content ul {
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:11px
}

.oi-product-feature-content li {
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:#445148;
    font-size:11px;
    line-height:1.7
}

.oi-product-feature-content li i {
    flex:0 0 auto;
    color:#71966a;
    font-size:15px;
    margin-top:1px
}

.oi-product-approach-section {
    padding:82px 0;
    background:var(--p-dark);
    color:#fff
}

.oi-product-approach-grid {
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:75px;
    align-items:start
}

.oi-product-approach-copy .oi-products-eyebrow {
    color:var(--p-sage)
}

.oi-product-approach-copy h2 {
    font-size:clamp(31px,
3.3vw,
44px);
    line-height:1.13;
    letter-spacing:-1.4px;
    color:#fff;
    margin:15px 0
}

.oi-product-approach-copy>p {
    font-size:12px;
    line-height:1.9;
    color:#b9c5bc
}

.oi-product-text-link {
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:var(--p-sage);
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    margin-top:13px
}

.oi-product-text-link:hover {
    color:#fff
}

.oi-product-approach-steps {
    display:grid
}

.oi-product-approach-steps article {
    display:grid;
    grid-template-columns:53px 1fr;
    gap:18px;
    padding:19px 0;
    border-bottom:1px solid #ffffff21
}

.oi-product-approach-steps article:first-child {
    padding-top:0
}

.oi-product-approach-steps article:last-child {
    border-bottom:0
}

.oi-product-approach-steps article>span {
    display:grid;
    place-items:center;
    width:47px;
    height:47px;
    border:1px solid #c5dda961;
    border-radius:15px;
    color:var(--p-sage);
    font-size:12px;
    font-weight:850
}

.oi-product-approach-steps h3 {
    font-size:15px;
    font-weight:780;
    color:#fff;
    margin:1px 0 6px
}

.oi-product-approach-steps p {
    font-size:11px;
    line-height:1.8;
    color:#aebbb1;
    margin:0
}

.oi-product-detail-cta-section {
    padding:52px 0;
    background:#fff
}

.oi-product-detail-cta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:35px 38px;
    background:#f1f4ed;
    border:1px solid #e1e8dc;
    border-radius:22px
}

.oi-product-detail-cta .oi-products-eyebrow {
    color:#758c70
}

.oi-product-detail-cta h2 {
    font-size:28px;
    line-height:1.2;
    letter-spacing:-.8px;
    color:var(--p-ink);
    font-weight:780;
    margin:10px 0
}

.oi-product-detail-cta p {
    max-width:690px;
    color:var(--p-muted);
    font-size:12px;
    line-height:1.8;
    margin:0
}

.oi-product-detail-cta .oi-product-btn {
    flex:0 0 auto
}

.oi-related-products-section {
    padding:55px 0 85px;
    background:#fff
}

.oi-related-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:23px
}

.oi-related-heading h2 {
    font-size:30px
}

.oi-related-heading>a {
    font-size:11px;
    font-weight:800;
    color:#425847;
    text-decoration:none;
    white-space:nowrap
}

.oi-related-grid {
    display:grid;
    grid-template-columns:repeat(3,
minmax(0,
1fr));
    gap:16px
}

.oi-related-card {
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid #e4e9e1;
    border-radius:16px;
    text-decoration:none;
    background:#fff;
    transition:transform .2s,
box-shadow .2s
}

.oi-related-card:hover {
    transform:translateY(-4px);
    box-shadow:0 16px 36px #14281917
}

.oi-related-card>img {
    display:block;
    width:100%;
    height:155px;
    object-fit:cover
}

.oi-related-card-copy {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:17px;
    gap:7px
}

.oi-related-card-copy small {
    font-size:9px;
    letter-spacing:1px;
    text-transform:uppercase;
    font-weight:800;
    color:#71856f
}

.oi-related-card-copy strong {
    font-size:14px;
    line-height:1.4;
    color:var(--p-ink)
}

.oi-related-card-copy>span {
    font-size:10px;
    color:#506a51;
    font-weight:800;
    margin-top:4px
}

@media(max-width:991px) {
    .oi-products-hero-grid {
    gap:32px
}

.oi-products-hero-visual>img,
.oi-product-hero-visual>img {
    height:370px
}

.oi-product-card-grid {
    grid-template-columns:repeat(2,
minmax(0,
1fr))
}

.oi-product-overview-grid {
    gap:40px
}

.oi-product-feature-section {
    gap:28px
}

.oi-product-feature-image>img {
    height:300px
}

.oi-product-approach-grid {
    gap:42px
}


}

@media(max-width:767px) {
    .oi-products-hero {
    padding-top:55px
}

.oi-products-hero-grid {
    grid-template-columns:1fr;
    padding-bottom:48px
}

.oi-products-hero-copy h1 {
    font-size:42px;
    letter-spacing:-1.7px
}

.oi-products-hero-copy>p {
    font-size:14px
}

.oi-products-hero-visual>img,
.oi-product-hero-visual>img {
    height:300px
}

.oi-products-chip-top {
    left:8px;
    top:10px
}

.oi-products-chip-bottom {
    right:8px;
    bottom:10px
}

.oi-products-strip .container,
.oi-products-section-heading,
.oi-product-group-heading,
.oi-products-bottom-cta,
.oi-product-detail-cta,
.oi-related-heading {
    align-items:flex-start;
    flex-direction:column
}

.oi-products-strip>div>div {
    gap:8px
}

.oi-products-strip b {
    font-size:10px
}

.oi-products-catalogue,
.oi-product-overview-section,
.oi-product-capabilities-section {
    padding:58px 0
}

.oi-product-group {
    margin-top:34px
}

.oi-product-group-heading h3 {
    font-size:23px
}

.oi-product-card-grid,
.oi-product-benefits-grid,
.oi-related-grid {
    grid-template-columns:1fr
}

.oi-product-card-image {
    height:215px
}

.oi-product-card-body>p {
    min-height:0
}

.oi-products-bottom-cta {
    padding:27px 22px
}

.oi-product-overview-grid {
    grid-template-columns:1fr;
    gap:28px
}

.oi-product-overview-copy h2 {
    font-size:35px
}

.oi-product-overview-image>img {
    height:300px
}

.oi-overview-image-note {
    left:8px;
    bottom:10px
}

.oi-product-benefit-card {
    min-height:0
}

.oi-product-feature-section {
    grid-template-columns:1fr;
    padding:12px;
    gap:8px
}

.oi-product-feature-section.oi-feature-reverse .oi-product-feature-image,
.oi-product-feature-section.oi-feature-reverse .oi-product-feature-content {
    order:initial
}

.oi-product-feature-image>img {
    height:235px
}

.oi-product-feature-content,
.oi-feature-reverse .oi-product-feature-content {
    padding:17px 8px 11px
}

.oi-product-feature-content h3 {
    font-size:24px
}

.oi-product-approach-grid {
    grid-template-columns:1fr;
    gap:32px
}

.oi-product-approach-section {
    padding:60px 0
}

.oi-product-detail-cta {
    padding:26px 22px
}

.oi-product-detail-cta h2 {
    font-size:24px
}

.oi-related-card {
    display:grid;
    grid-template-columns:120px 1fr
}

.oi-related-card>img {
    height:100%;
    min-height:145px
}

.oi-related-card-copy {
    padding:14px
}

.oi-product-category-nav {
    margin-bottom:32px
}


}

@media(prefers-reduced-motion:reduce) {
    .oi-product-btn,
.oi-product-card,
.oi-product-card-image img,
.oi-related-card {
    transition:none
}


}

/* Shared product catalogue and detail styling aligned with Travel Booking Portal */
.oi-products-hero {
    background: #eaf0e9;
    color: #1b3029;
    padding-top: 58px;
}

.oi-product-hero-glow {
    border-color: #668c6c20;
    box-shadow: 0 0 0 55px #668c6c08,
0 0 0 110px #668c6c05;
}

.oi-products-eyebrow,
.oi-products-hero .oi-products-eyebrow {
    color: #5d8069;
}

.oi-products-hero-copy h1 {
    color: #1b3029;
    font-family: var(--oi-display,
'Manrope',
sans-serif);
    font-weight: 750;
    letter-spacing: -.065em;
}

.oi-products-hero-copy h1 em,
.oi-product-overview-copy h2 em {
    color: #668c6c;
}

.oi-products-hero-copy > p {
    color: #64766d;
}

.oi-products-hero-note > span {
    border-color: #b7c8ba;
    color: #4f795b;
}

.oi-products-hero-note strong {
    color: #263d30;
}

.oi-products-hero-note small {
    color: #64766d;
}

.oi-product-btn-primary {
    background: #203b30;
    color: #fff;
    border-color: #203b30;
}

.oi-product-btn-primary:hover {
    background: #315b45;
    color: #fff;
    border-color: #315b45;
}

.oi-product-btn-outline {
    border-color: #b7c8ba;
    color: #314b3d;
    background: transparent;
}

.oi-product-btn-outline:hover {
    background: #fff;
    color: #203b30;
}

.oi-products-strip {
    background: #20372e;
    border-top-color: #ffffff20;
}

.oi-products-strip i {
    color: #91aa98;
}

.oi-product-back {
    color: #64796d;
}

.oi-product-back:hover {
    color: #254d38;
}

.oi-product-overview-copy h2,
.oi-product-section-heading h2,
.oi-product-feature-content h3,
.oi-product-approach-copy h2,
.oi-product-detail-cta h2,
.oi-related-heading h2,
.oi-product-group-heading h3,
.oi-product-card-body h4 {
    font-family: var(--oi-display,
'Manrope',
sans-serif);
    letter-spacing: -.04em;
}

.oi-product-overview-section,
.oi-product-benefits-section,
.oi-product-capabilities-section,
.oi-product-approach-section,
.oi-related-products-section {
    color: #1b3029;
}

.oi-product-benefits-section,
.oi-product-capabilities-section,
.oi-product-approach-section,
.oi-related-products-section {
    background-color: #f5f7f1;
}

.oi-product-benefit-card,
.oi-product-feature-section,
.oi-product-card,
.oi-related-card {
    border-color: #e2e8df;
}

.oi-product-benefit-icon,
.oi-product-feature-image-label,
.oi-product-card-image > span {
    background-color: #eaf1e8;
    color: #4f795b;
}

.oi-product-feature-content ul li i,
.oi-product-text-link,
.oi-related-heading > a,
.oi-product-card-footer > a {
    color: #5b8067;
}

.oi-product-detail-cta {
    background: #eaf0e9;
    border: 1px solid #e2e8df;
}

.oi-product-detail-cta .oi-products-eyebrow {
    color: #5d8069;
}

.oi-product-detail-cta p {
    color: #64766d;
}

.oi-product-card-body > p,
.oi-product-group-heading > p,
.oi-products-section-heading > p {
    color: #687a70;
}

.oi-product-category-nav a {
    border-color: #d5e0d4;
    color: #314b3d;
    background: #fff;
}

.oi-product-category-nav a:hover {
    border-color: #668c6c;
    background: #eaf0e9;
    color: #203b30;
}

.oi-product-card:hover,
.oi-related-card:hover {
    box-shadow: 0 18px 45px #1d3c2b12;
}

@media (max-width: 767.98px) {
    .oi-products-hero {
    padding-top: 35px;
}


}


/* Keep product hero imagery consistent with the tall, softly arched portal layout. */
.oi-products-hero-visual > img,
.oi-product-hero-visual > img {
    height: 520px;
    border-radius: 180px 180px 18px 18px;
}

.oi-products-hero-visual::after,
.oi-product-hero-visual::after {
    border-radius: 180px 180px 18px 18px;
}

@media (max-width: 767.98px) {
    .oi-products-hero-visual > img,
    .oi-product-hero-visual > img {
        height: 390px;
        border-radius: 130px 130px 15px 15px;
    }

    .oi-products-hero-visual::after,
    .oi-product-hero-visual::after {
        border-radius: 130px 130px 15px 15px;
    }
}