/* One International Station — bespoke IT services design system */
:root {
    --oi-ink:#15252b;
    --oi-ink-2:#253b43;
    --oi-muted:#64767b;
    --oi-paper:#f7f8f5;
    --oi-white:#fff;
    --oi-line:#dfe6e2;
    --oi-lime:#d5f36a;
    --oi-teal:#a9e8d2;
    --oi-blue:#d9e9f5;
    --oi-violet:#e7defa;
    --oi-radius:22px;
    --oi-font:'DM Sans',sans-serif;
    --oi-display:'Manrope',sans-serif;
}
* {
    box-sizing:border-box;
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:100px;
}
body {
    margin:0;
    background:var(--oi-paper);
    color:var(--oi-ink);
    font-family:var(--oi-font);
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}
img {
    max-width:100%;
    display:block;
}
a {
    color:inherit;
    text-decoration:none;
}
a:hover {
    color:inherit;
}
.container {
    max-width:1240px;
}
.oi-topline {
    background:var(--oi-ink);
    color:#d3dfdc;
    font-size:11px;
    letter-spacing:.03em;
}
.oi-topline>.container {
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.oi-topline .container>div,.oi-topline .container>span,.oi-topline a {
    display:flex;
    align-items:center;
    gap:8px;
}
.oi-topline .container>div {
    gap:24px;
}
.oi-topline a {
    color:#d3dfdc;
}
.oi-topline a:hover {
    color:var(--oi-lime);
}
.oi-topline-social {
    display:flex;
    gap:12px;
}
.oi-header {
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(247,248,245,.94);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(21,37,43,.08);
}
.oi-header .navbar {
    padding:0;
    min-height:84px;
}
.oi-brand {
    display:flex;
    align-items:center;
    gap:12px;
    margin:0;
}
.oi-logo {
    width:44px;
    height:44px;
    object-fit:contain;
}
.oi-brand span {
    display:flex;
    flex-direction:column;
    line-height:1.3;
}
.oi-brand strong {
    font-family:var(--oi-display);
    font-size:13px;
    letter-spacing:.06em;
    font-weight:800;
}
.oi-brand small {
    font-size:9px;
    letter-spacing:.15em;
    color:var(--oi-muted);
    margin-top:4px;
}
.oi-header .navbar-nav {
    gap:6px;
}
.oi-header .nav-link {
    padding:14px 13px!important;
    color:#4b5d61;
    font-size:13px;
    font-weight:600;
}
.oi-header .nav-link:hover,.oi-header .nav-link.active {
    color:var(--oi-ink);
}
.oi-header .dropdown-menu {
    border:1px solid var(--oi-line);
    border-radius:14px;
    padding:10px;
    box-shadow:0 18px 50px #15252b18;
    min-width:235px;
}
.oi-header .dropdown-item {
    font-size:13px;
    padding:10px 12px;
    border-radius:8px;
    color:var(--oi-ink);
}
.oi-header .dropdown-item:hover {
    background:#eff4ed;
}
.oi-nav-cta {
    display:inline-flex;
    align-items:center;
    gap:18px;
    background:var(--oi-ink);
    color:#fff;
    padding:13px 17px;
    border-radius:8px;
    font-size:12px;
    font-weight:700;
    transition:transform .2s,background .2s;
}
.oi-nav-cta:hover {
    background:#29454a;
    color:var(--oi-lime);
    transform:translateY(-2px);
}
.oi-toggler {
    border:0;
    padding:8px;
}
.oi-toggler span {
    display:block;
    width:24px;
    height:2px;
    background:var(--oi-ink);
    margin:5px;
}
.oi-hero {
    position:relative;
    overflow:hidden;
    background:#eaf0e9;
    padding:72px 0 0;
}
.oi-hero-grid {
    position:absolute;
    inset:0 0 80px 48%;
    opacity:.34;
    background-image:linear-gradient(rgba(21,37,43,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(21,37,43,.08) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(90deg,transparent,#000 40%,#000);
}
.oi-hero-inner {
    position:relative;
    z-index:1;
    padding-bottom:76px;
}
.oi-kicker,.oi-section-tag {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:10px;
    letter-spacing:.16em;
    font-weight:800;
    color:#60766e;
}
.oi-kicker span {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#5f8c68;
    box-shadow:0 0 0 5px #5f8c681b;
}
.oi-hero h1 {
    font-family:var(--oi-display);
    font-size:clamp(48px,5.4vw,76px);
    line-height:1.045;
    letter-spacing:-.075em;
    font-weight:700;
    max-width:660px;
    margin:26px 0 22px;
}
.oi-hero h1 em,.oi-contact-cta h2 em {
    font-style:normal;
    color:#4e7865;
}
.oi-hero-copy {
    font-size:17px;
    line-height:1.8;
    color:#52666a;
    max-width:530px;
}
.oi-hero-actions {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:30px;
}
.oi-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    padding:15px 19px;
    border-radius:8px;
    font-size:12px;
    font-weight:700;
    transition:transform .2s,background .2s;
}
.oi-btn:hover {
    transform:translateY(-2px);
}
.oi-btn-primary {
    background:var(--oi-ink);
    color:#fff;
}
.oi-btn-primary:hover {
    background:#34534a;
    color:var(--oi-lime);
}
.oi-btn-quiet {
    color:var(--oi-ink);
    padding-left:10px;
}
.oi-btn-quiet:hover {
    color:#4e7865;
}
.oi-hero-note {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:38px;
}
.oi-note-mark {
    width:35px;
    height:35px;
    display:grid;
    place-items:center;
    border:1px solid #cad7cd;
    border-radius:50%;
    color:#4e7865;
}
.oi-hero-note>span:last-child {
    display:flex;
    flex-direction:column;
}
.oi-hero-note strong {
    font-size:12px;
}
.oi-hero-note small {
    font-size:11px;
    color:var(--oi-muted);
    margin-top:2px;
}
.oi-hero-art {
    position:relative;
    min-height:500px;
    margin-left:20px;
}
.oi-hero-image {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:190px 190px 20px 20px;
    box-shadow:0 25px 70px #1b37321a;
}
.oi-art-shade {
    position:absolute;
    inset:0;
    border-radius:190px 190px 20px 20px;
    background:linear-gradient(180deg,transparent 40%,#10282380 100%);
}
.oi-art-label {
    position:absolute;
    left:27px;
    right:27px;
    bottom:25px;
    color:white;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:10px;
    letter-spacing:.09em;
    font-weight:700;
}
.oi-art-label>span:last-child {
    margin-left:auto;
    opacity:.75;
}
.oi-live-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--oi-lime);
    display:inline-block;
    box-shadow:0 0 0 5px #d5f36a26;
}
.oi-floating-panel {
    position:absolute;
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    border:1px solid #ffffffa8;
    padding:13px 15px;
    border-radius:12px;
    box-shadow:0 18px 50px #142e271c;
    min-width:245px;
}
.oi-panel-top {
    top:85px;
    left:-36px;
}
.oi-panel-bottom {
    right:-22px;
    bottom:90px;
}
.oi-panel-icon {
    width:39px;
    height:39px;
    border-radius:10px;
    display:grid;
    place-items:center;
    font-size:18px;
}
.oi-panel-violet {
    background:var(--oi-violet);
    color:#65549b;
}
.oi-floating-panel div:nth-child(2) {
    display:flex;
    flex-direction:column;
    line-height:1.5;
}
.oi-floating-panel small {
    font-size:8px;
    letter-spacing:.12em;
    color:#84918e;
}
.oi-floating-panel strong {
    font-size:12px;
}
.oi-mini-bars {
    height:34px;
    display:flex;
    align-items:end;
    gap:3px;
    padding:0 5px;
}
.oi-mini-bars i {
    width:4px;
    border-radius:3px;
    background:#87b5a0;
    height:40%;
}
.oi-mini-bars i:nth-child(2) {
    height:65%;
}
.oi-mini-bars i:nth-child(3) {
    height:52%;
}
.oi-mini-bars i:nth-child(4) {
    height:85%;
}
.oi-mini-bars i:nth-child(5) {
    height:60%;
}
.oi-mini-bars i:nth-child(6) {
    height:100%;
    background:#4f806b;
}
.oi-mini-bars i:nth-child(7) {
    height:74%;
}
.oi-panel-arrow {
    margin-left:auto;
    color:#5b7b6c;
}
.oi-art-index {
    position:absolute;
    top:34px;
    right:22px;
    color:#fff;
    font-family:var(--oi-display);
    font-weight:800;
    font-size:10px;
    letter-spacing:.18em;
    writing-mode:vertical-rl;
}
.oi-art-index span {
    font-size:7px;
}
.oi-hero-bottom {
    background:var(--oi-ink);
    color:#fff;
    position:relative;
    z-index:2;
}
.oi-hero-bottom .container {
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}
.oi-hero-bottom .container>span {
    font-size:9px;
    letter-spacing:.16em;
    color:#9ab0a6;
    font-weight:800;
}
.oi-marquee-items {
    display:flex;
    align-items:center;
    gap:23px;
    font-size:12px;
    font-weight:600;
}
.oi-marquee-items b {
    font-size:14px;
    color:var(--oi-lime);
}
.oi-section {
    padding:110px 0;
}
.oi-intro {
    background:var(--oi-paper);
}
.oi-intro .oi-section-tag {
    margin-bottom:25px;
}
.oi-intro-stamp {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:11px 14px;
    border:1px solid var(--oi-line);
    border-radius:8px;
    color:#4c6860;
    font-size:11px;
    font-weight:700;
}
.oi-intro-stamp i {
    font-size:17px;
}
.oi-display {
    font-family:var(--oi-display);
    font-size:clamp(36px,4.3vw,57px);
    line-height:1.12;
    letter-spacing:-.065em;
    font-weight:700;
    margin:18px 0 22px;
}
.oi-intro .oi-display {
    max-width:800px;
}
.oi-intro-bottom {
    display:flex;
    align-items:flex-end;
    gap:40px;
}
.oi-intro-bottom p {
    max-width:630px;
    color:var(--oi-muted);
    font-size:15px;
    line-height:1.9;
    margin:0;
}
.oi-text-link {
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:16px;
    font-size:12px;
    font-weight:800;
    padding-bottom:6px;
    border-bottom:1px solid #7e9b8a;
}
.oi-text-link i {
    font-size:15px;
    transition:transform .2s;
}
.oi-text-link:hover i {
    transform:translate(3px,-3px);
}
.oi-solutions {
    background:#fff;
}
.oi-section-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:42px;
}
.oi-section-heading .oi-display {
    margin-bottom:0;
}
.oi-section-heading>p {
    max-width:370px;
    color:var(--oi-muted);
    font-size:14px;
    line-height:1.9;
    margin:0 0 5px;
}
.oi-product-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}
.oi-product {
    display:flex;
    flex-direction:column;
    min-width:0;
    border:1px solid var(--oi-line);
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    transition:transform .25s,box-shadow .25s,border-color .25s;
}
.oi-product:hover {
    transform:translateY(-5px);
    box-shadow:0 20px 50px #1a393014;
    border-color:#b8cbbd;
}
.oi-product-feature {
    grid-column:span 2;
    display:grid;
    grid-template-columns:1.1fr 1fr;
}
.oi-product-visual {
    position:relative;
    min-height:220px;
    overflow:hidden;
    background:#e4ebe5;
}
.oi-product-feature .oi-product-visual {
    height:100%;
    min-height:340px;
}
.oi-product-visual img {
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
    object-fit:cover;
    transition:transform .5s;
}
.oi-product:hover .oi-product-visual img {
    transform:scale(1.045);
}
.oi-product-visual:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 50%,#10251e73);
}
.oi-visual-badge {
    position:absolute;
    left:17px;
    bottom:17px;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#ffffffed;
    padding:9px 11px;
    border-radius:6px;
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
}
.oi-product-copy {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:15px;
    padding:24px;
    flex:1;
}
.oi-product-number {
    font-size:9px;
    letter-spacing:.13em;
    color:#7a9086;
    font-weight:800;
}
.oi-product h3 {
    font-family:var(--oi-display);
    font-size:23px;
    line-height:1.25;
    letter-spacing:-.045em;
    margin:10px 0;
}
.oi-product p {
    font-size:12px;
    color:var(--oi-muted);
    line-height:1.8;
    margin:0;
    max-width:450px;
}
.oi-circle-link {
    flex:0 0 37px;
    width:37px;
    height:37px;
    display:grid;
    place-items:center;
    border:1px solid var(--oi-line);
    border-radius:50%;
    transition:background .2s,color .2s;
    align-self:flex-end;
}
.oi-product:hover .oi-circle-link {
    background:var(--oi-ink);
    color:var(--oi-lime);
    border-color:var(--oi-ink);
}
.oi-section-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-top:25px;
    margin-top:15px;
    border-top:1px solid var(--oi-line);
    font-size:11px;
    color:var(--oi-muted);
}
.oi-services {
    background:#eaf0e9;
}
.oi-service-list {
    border-top:1px solid #cbd8cf;
}
.oi-service-row {
    display:grid;
    grid-template-columns:50px 55px minmax(0,1fr) 130px 40px;
    align-items:center;
    gap:20px;
    padding:23px 12px;
    border-bottom:1px solid #cbd8cf;
    transition:background .2s,padding .2s;
}
.oi-service-row:hover {
    background:#f7faf6;
    padding-left:20px;
    padding-right:20px;
}
.oi-service-no {
    font-size:10px;
    color:#82968b;
    font-weight:800;
}
.oi-service-icon {
    width:48px;
    height:48px;
    border:1px solid #c6d6cb;
    border-radius:12px;
    display:grid;
    place-items:center;
    font-size:20px;
    color:#476e5c;
    background:#f5f8f4;
}
.oi-service-main {
    display:flex;
    flex-direction:column;
}
.oi-service-main strong {
    font-family:var(--oi-display);
    font-size:19px;
    letter-spacing:-.03em;
}
.oi-service-main small {
    font-size:12px;
    color:var(--oi-muted);
    margin-top:4px;
}
.oi-service-type {
    font-size:9px;
    letter-spacing:.13em;
    font-weight:800;
    color:#789084;
}
.oi-service-arrow {
    width:35px;
    height:35px;
    border:1px solid #cbd8cf;
    border-radius:50%;
    display:grid;
    place-items:center;
    justify-self:end;
    transition:background .2s,color .2s;
}
.oi-service-row:hover .oi-service-arrow {
    background:var(--oi-ink);
    color:var(--oi-lime);
}
.oi-capabilities {
    background:#fff;
}
.oi-capability-image {
    position:relative;
    padding:0 25px 30px 0;
}
.oi-capability-image>img {
    width:100%;
    height:550px;
    object-fit:cover;
    border-radius:15px;
}
.oi-capability-caption {
    position:absolute;
    left:20px;
    right:45px;
    bottom:50px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:18px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 15px 40px #15252b1b;
}
.oi-capability-caption>div {
    display:flex;
    flex-direction:column;
}
.oi-capability-caption strong {
    font-size:12px;
}
.oi-capability-caption small {
    font-size:10px;
    color:var(--oi-muted);
    margin-top:4px;
}
.oi-image-side-label {
    position:absolute;
    right:0;
    top:30px;
    writing-mode:vertical-rl;
    letter-spacing:.18em;
    font-size:8px;
    font-weight:800;
    color:#70887b;
}
.oi-capability-lead {
    color:var(--oi-muted);
    font-size:14px;
    line-height:1.9;
    max-width:550px;
    margin-bottom:28px;
}
.oi-reasons {
    border-top:1px solid var(--oi-line);
}
.oi-reasons>div {
    display:flex;
    gap:20px;
    padding:17px 0;
    border-bottom:1px solid var(--oi-line);
}
.oi-reasons>div>span {
    font-size:10px;
    color:#759081;
    font-weight:800;
    padding-top:4px;
}
.oi-reasons section h3 {
    font-size:14px;
    font-weight:800;
    margin:0 0 4px;
}
.oi-reasons section p {
    font-size:12px;
    color:var(--oi-muted);
    margin:0;
}
.oi-projects {
    background:#f2f4ef;
}
.oi-project-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}
.oi-project-card {
    position:relative;
    min-height:330px;
    border-radius:13px;
    overflow:hidden;
    background:#243c36;
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:21px;
}
.oi-project-card:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,#12271d05 15%,#10251de8 100%);
    transition:background .25s;
}
.oi-project-card img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s;
}
.oi-project-card:hover img {
    transform:scale(1.05);
}
.oi-project-card>span,.oi-project-card>strong,.oi-project-card>i {
    position:relative;
    z-index:1;
}
.oi-project-card>span {
    font-size:8px;
    letter-spacing:.13em;
    color:#d5f36a;
    font-weight:800;
}
.oi-project-card>strong {
    font-family:var(--oi-display);
    font-size:19px;
    line-height:1.3;
    margin-top:8px;
    max-width:180px;
}
.oi-project-card>i {
    position:absolute;
    right:18px;
    bottom:20px;
    width:34px;
    height:34px;
    border:1px solid #ffffff65;
    border-radius:50%;
    display:grid;
    place-items:center;
}
.oi-contact-cta {
    padding:25px 0 95px;
    background:#f2f4ef;
}
.oi-cta-panel {
    position:relative;
    overflow:hidden;
    background:var(--oi-ink);
    border-radius:18px;
    padding:70px 65px 22px;
    color:#fff;
}
.oi-cta-panel .oi-section-tag {
    color:#b3c8b9;
}
.oi-cta-panel h2 {
    font-family:var(--oi-display);
    font-size:clamp(40px,5vw,64px);
    line-height:1.1;
    letter-spacing:-.065em;
    margin:24px 0 18px;
}
.oi-cta-panel h2 em {
    color:var(--oi-lime);
}
.oi-cta-panel p {
    font-size:13px;
    color:#b4c4be;
    max-width:480px;
    line-height:1.8;
}
.oi-btn-light {
    background:var(--oi-lime);
    color:var(--oi-ink);
}
.oi-btn-light:hover {
    background:#e5ff9b;
    color:var(--oi-ink);
}
.oi-cta-secondary {
    display:block;
    color:#d2dfd7;
    font-size:11px;
    font-weight:700;
    margin-top:18px;
}
.oi-cta-secondary i {
    margin-left:8px;
}
.oi-cta-orb {
    position:absolute;
    border:1px solid #ffffff15;
    border-radius:50%;
    pointer-events:none;
}
.oi-cta-orb-one {
    width:430px;
    height:430px;
    right:5%;
    top:-220px;
}
.oi-cta-orb-two {
    width:600px;
    height:600px;
    right:-1%;
    top:-300px;
}
.oi-cta-footer {
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-top:65px;
    padding-top:18px;
    border-top:1px solid #ffffff20;
    color:#93aaa0;
    font-size:8px;
    letter-spacing:.14em;
    font-weight:800;
    position:relative;
}
.oi-footer {
    background:#14252a;
    color:#fff;
    padding:75px 0 0;
}
.oi-footer-brand strong {
    color:#fff;
}
.oi-footer-brand small {
    color:#9bb0a6;
}
.oi-footer-about {
    max-width:380px;
    color:#9fb1ac;
    font-size:12px;
    line-height:1.9;
    margin:22px 0;
}
.oi-footer-social {
    display:flex;
    gap:9px;
}
.oi-footer-social a {
    width:35px;
    height:35px;
    border:1px solid #ffffff26;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#d8e3dc;
    font-size:14px;
}
.oi-footer-social a:hover {
    background:var(--oi-lime);
    color:var(--oi-ink);
    border-color:var(--oi-lime);
}
.oi-footer h6 {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    margin:6px 0 20px;
    color:#e6f0e9;
}
.oi-footer .col-6>a,.oi-footer .col-lg-3>p {
    display:block;
    font-size:11px;
    color:#9fb1ac;
    margin:0 0 12px;
}
.oi-footer .col-6>a:hover,.oi-footer a:hover {
    color:var(--oi-lime);
}
.oi-footer .col-lg-3>p {
    display:flex;
    gap:9px;
    align-items:center;
}
.oi-footer-contact {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--oi-lime);
    font-size:11px;
    font-weight:700;
    margin-top:5px;
}
.oi-footer-bottom {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:60px;
    padding:22px 55px 22px 0;
    border-top:1px solid #ffffff19;
    color:#8fa49a;
    font-size:10px;
}
.oi-back-top {
    position:fixed;
    right:24px;
    bottom:24px;
    top:auto;
    transform:none;
    z-index:1100;
    width:44px;
    height:44px;
    border:1px solid #ffffff30;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    background:var(--oi-ink);
    box-shadow:0 8px 24px #15252b30;
}
.oi-back-top:hover {
    background:var(--oi-lime);
    color:var(--oi-ink);
}
@media(max-width:991.98px) {
    .oi-header .navbar {
        min-height:74px;
    }
    .oi-header .navbar-collapse {
        padding:10px 0 22px;
    }
    .oi-header .navbar-nav {
        align-items:stretch!important;
    }
    .oi-header .nav-link {
        padding:10px 0!important;
    }
    .oi-nav-cta {
        margin-top:10px;
    }
    .oi-hero {
        padding-top:55px;
    }
    .oi-hero-art {
        margin:10px 12px 0;
        min-height:450px;
    }
    .oi-panel-top {
        left:-10px;
    }
    .oi-panel-bottom {
        right:-12px;
    }
    .oi-section {
        padding:85px 0;
    }
    .oi-intro-bottom {
        display:block;
    }
    .oi-intro-bottom .oi-text-link {
        margin-top:20px;
    }
    .oi-capability-image>img {
        height:470px;
    }
    .oi-project-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .oi-cta-panel {
        padding:55px 40px 22px;
    }
}
@media(max-width:767.98px) {
    .oi-topline .container {
        justify-content:center;
    }
    .oi-topline .container>span,.oi-topline-social {
        display:none!important;
    }
    .oi-topline .container>div {
        justify-content:center;
        gap:15px;
    }
    .oi-topline .container>div>a {
        font-size:10px;
    }
    .oi-brand strong {
        font-size:11px;
    }
    .oi-logo {
        width:38px;
        height:38px;
    }
    .oi-hero {
        padding-top:45px;
    }
    .oi-hero h1 {
        font-size:clamp(43px,12vw,62px);
    }
    .oi-hero-copy {
        font-size:15px;
    }
    .oi-hero-inner {
        padding-bottom:50px;
    }
    .oi-hero-art {
        min-height:370px;
        margin:5px 8px 0;
    }
    .oi-hero-image,.oi-art-shade {
        border-radius:130px 130px 15px 15px;
    }
    .oi-panel-top {
        top:55px;
        left:-12px;
        min-width:210px;
        padding:10px;
    }
    .oi-panel-bottom {
        bottom:65px;
        right:-12px;
        min-width:215px;
        padding:10px;
    }
    .oi-floating-panel strong {
        font-size:10px;
    }
    .oi-floating-panel small {
        font-size:7px;
    }
    .oi-panel-icon {
        width:33px;
        height:33px;
    }
    .oi-hero-bottom .container {
        padding-top:18px;
        padding-bottom:18px;
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }
    .oi-marquee-items {
        gap:10px;
        flex-wrap:wrap;
        font-size:10px;
    }
    .oi-section {
        padding:70px 0;
    }
    .oi-display {
        font-size:clamp(35px,9vw,48px);
    }
    .oi-section-heading {
        display:block;
        margin-bottom:28px;
    }
    .oi-section-heading>p {
        margin-top:20px;
    }
    .oi-product-grid {
        grid-template-columns:1fr;
    }
    .oi-product-feature {
        grid-column:auto;
        display:flex;
    }
    .oi-product-feature .oi-product-visual {
        min-height:235px;
    }
    .oi-product-copy {
        padding:19px;
    }
    .oi-product h3 {
        font-size:21px;
    }
    .oi-product p {
        font-size:12px;
    }
    .oi-section-footer {
        align-items:flex-start;
        flex-direction:column;
    }
    .oi-service-row {
        grid-template-columns:25px 42px minmax(0,1fr) 30px;
        gap:10px;
        padding:18px 3px;
    }
    .oi-service-icon {
        width:40px;
        height:40px;
        font-size:17px;
    }
    .oi-service-main strong {
        font-size:15px;
    }
    .oi-service-main small {
        font-size:11px;
        line-height:1.6;
    }
    .oi-service-type {
        display:none;
    }
    .oi-service-arrow {
        width:30px;
        height:30px;
    }
    .oi-capability-image {
        padding:0 14px 25px 0;
    }
    .oi-capability-image>img {
        height:380px;
    }
    .oi-capability-caption {
        left:10px;
        right:25px;
        bottom:35px;
        padding:13px;
    }
    .oi-capability-caption strong {
        font-size:11px;
    }
    .oi-capability-caption small {
        font-size:9px;
    }
    .oi-project-grid {
        grid-template-columns:1fr 1fr;
        gap:10px;
    }
    .oi-project-card {
        min-height:250px;
        padding:15px;
    }
    .oi-project-card>strong {
        font-size:16px;
    }
    .oi-project-card>span {
        font-size:7px;
    }
    .oi-project-card>i {
        right:12px;
        bottom:14px;
        width:29px;
        height:29px;
    }
    .oi-contact-cta {
        padding:10px 0 65px;
    }
    .oi-cta-panel {
        padding:40px 24px 20px;
    }
    .oi-cta-panel h2 {
        font-size:43px;
    }
    .oi-cta-panel .col-lg-4 {
        text-align:left!important;
    }
    .oi-cta-footer {
        margin-top:40px;
        flex-direction:column;
        gap:8px;
    }
    .oi-footer {
        padding-top:55px;
    }
    .oi-footer-bottom {
        margin-top:40px;
        flex-direction:column;
        align-items:flex-start;
        padding-right:45px;
    }
    .oi-footer-bottom span:last-of-type {
        display:none;
    }
}
@media(max-width:400px) {
    .oi-topline .container>div>a {
        font-size:9px;
        gap:4px;
    }
    .oi-brand small {
        font-size:8px;
    }
    .oi-project-grid {
        grid-template-columns:1fr;
    }
    .oi-project-card {
        min-height:280px;
    }
    .oi-floating-panel {
        min-width:0;
        max-width:230px;
    }
    .oi-panel-top {
        left:-5px;
    }
    .oi-panel-bottom {
        right:-5px;
    }
    .oi-hero-art {
        min-height:330px;
    }
}
/* 2026 full services catalogue, branded hero and mega navigation */
.oi-hero-rebuilt {
    padding-top:65px;
    background:#eaf0e9;
}
.oi-hero-rebuilt .oi-hero-inner {
    padding-bottom:65px;
}
.oi-hero-proof {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:35px;
}
.oi-proof-icon {
    width:39px;
    height:39px;
    border-radius:11px;
    background:#d5e7d8;
    display:grid;
    place-items:center;
    color:#416d59;
    font-size:18px;
}
.oi-hero-proof>span:last-child {
    display:flex;
    flex-direction:column;
}
.oi-hero-proof strong {
    font-size:12px;
}
.oi-hero-proof small {
    font-size:11px;
    color:var(--oi-muted);
    margin-top:3px;
}
.oi-hero-art-brand {
    margin-left:0;
    min-height:0;
    height:auto;
    aspect-ratio:1.1;
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 28px 70px #172d2726;
    background:#182b2c;
}
.oi-hero-art-brand .oi-hero-image {
    position:relative;
    width:100%;
    height:100%;
    object-fit:cover;
    inset:auto;
    border-radius:0;
    box-shadow:none;
}
.oi-hero-image-caption {
    position:absolute;
    bottom:16px;
    left:18px;
    right:18px;
    border:1px solid #ffffff30;
    background:#10251fba;
    backdrop-filter:blur(12px);
    color:#eff8ef;
    border-radius:8px;
    padding:12px 15px;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:9px;
    font-weight:800;
    letter-spacing:.12em;
}
.oi-hero-art-brand:before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
    border:1px solid #ffffff20;
    border-radius:20px;
}
.oi-hero-bottom .oi-marquee-items {
    flex-wrap:wrap;
}
.oi-solutions {
    background:#fff;
}
.oi-solution-catalog {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}
.oi-solution-group {
    border:1px solid var(--oi-line);
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    min-width:0;
    transition:transform .2s,box-shadow .2s;
}
.oi-solution-group:hover {
    box-shadow:0 18px 48px #18382a12;
    transform:translateY(-3px);
}
.oi-solution-image {
    height:210px;
    position:relative;
    overflow:hidden;
    background:#e7eee8;
}
.oi-solution-image:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 45%,#10251e91);
}
.oi-solution-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s;
}
.oi-solution-group:hover .oi-solution-image img {
    transform:scale(1.035);
}
.oi-solution-image>span {
    position:absolute;
    z-index:1;
    left:20px;
    bottom:17px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    font-size:9px;
    font-weight:800;
    letter-spacing:.14em;
}
.oi-solution-image>span i {
    width:30px;
    height:30px;
    border-radius:9px;
    background:var(--oi-lime);
    color:var(--oi-ink);
    display:grid;
    place-items:center;
    font-size:15px;
}
.oi-solution-body {
    padding:24px;
}
.oi-solution-body h3 {
    font-family:var(--oi-display);
    font-size:27px;
    font-weight:750;
    letter-spacing:-.055em;
    margin:0 0 8px;
}
.oi-solution-body>p {
    color:var(--oi-muted);
    font-size:12px;
    line-height:1.8;
    min-height:42px;
    margin:0 0 18px;
}
.oi-solution-links {
    border-top:1px solid var(--oi-line);
}
.oi-solution-links>a {
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:12px 0;
    border-bottom:1px solid #e9eeea;
    transition:padding .2s;
}
.oi-solution-links>a:hover {
    padding-left:7px;
}
.oi-solution-links strong {
    font-size:12px;
    font-weight:800;
    color:#263c36;
}
.oi-solution-links small {
    font-size:11px;
    line-height:1.6;
    color:#71817b;
}
.oi-solution-all {
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-top:18px;
    font-size:11px;
    font-weight:800;
    color:#456e58;
}
.oi-solution-all:hover {
    color:#203d30;
}
.oi-solutions-footnote {
    margin-top:25px;
    padding:20px 22px;
    border-radius:12px;
    background:#eaf0e9;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:12px;
    color:#53675e;
}
.oi-solutions-footnote>i {
    font-size:20px;
    color:#547e64;
}
.oi-solutions-footnote span {
    flex:1;
}
.oi-solutions-footnote strong {
    color:var(--oi-ink);
}
.oi-solutions-footnote>a {
    white-space:nowrap;
    font-size:11px;
    font-weight:800;
    color:#3e6d53;
}
.oi-products {
    background:#f4f6f1;
}
.oi-products .oi-product-grid {
    background:transparent;
}
.oi-products .oi-product {
    border-color:#dfe6df;
}
.oi-why {
    background:#fff;
}
.oi-why .oi-capability-image>img {
    height:500px;
}
.oi-solutions-nav {
    position:static;
}
.oi-header .navbar {
    position:relative;
}
.oi-solutions-trigger {
    display:flex;
    align-items:center;
    gap:8px;
}
.oi-solutions-trigger i {
    font-size:10px;
    transition:transform .2s;
}
.oi-solutions-nav.is-open .oi-solutions-trigger i {
    transform:rotate(180deg);
}
.oi-mega-menu {
    position:absolute;
    top:calc(100% - 1px);
    left:50%;
    width:min(1240px,calc(100vw - 48px));
    transform:translate(-50%,12px);
    padding:26px 28px 28px;
    background:#fff;
    border:1px solid #e1e8e2;
    border-radius:0 0 16px 16px;
    box-shadow:0 30px 70px #152b2220;
    z-index:1001;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s,transform .2s,visibility .2s;
    max-height:calc(100vh - 125px);
    overflow-y:auto;
}
.oi-solutions-nav.is-open .oi-mega-menu {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,0);
}
.oi-mega-top {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:25px;
    padding-bottom:22px;
    border-bottom:1px solid var(--oi-line);
    margin-bottom:22px;
}
.oi-mega-eyebrow {
    font-size:9px;
    letter-spacing:.16em;
    font-weight:800;
    color:#688778;
}
.oi-mega-top h3 {
    font-family:var(--oi-display);
    font-size:24px;
    letter-spacing:-.04em;
    margin:5px 0;
}
.oi-mega-top p {
    margin:0;
    font-size:12px;
    color:var(--oi-muted);
}
.oi-mega-all {
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:var(--oi-ink);
    color:#fff;
    padding:12px 14px;
    border-radius:7px;
    font-size:11px;
    font-weight:700;
}
.oi-mega-all:hover {
    color:var(--oi-lime);
}
.oi-mega-columns {
    display:grid;
    grid-template-columns:1.1fr 1fr 1fr .8fr;
    gap:25px;
}
.oi-mega-col {
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
}
.oi-mega-col>a:not(.oi-mega-heading) {
    font-size:11px;
    line-height:1.45;
    color:#64746d;
    padding:6px 0 6px 42px;
    border-radius:5px;
}
.oi-mega-col>a:not(.oi-mega-heading):hover {
    color:#244c38;
    background:#f3f7f1;
}
.oi-mega-heading {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:9px;
    color:#1c342d;
}
.oi-mega-heading>span:last-child {
    display:flex;
    flex-direction:column;
    font-family:var(--oi-display);
    font-size:13px;
    font-weight:800;
    line-height:1.3;
}
.oi-mega-heading small {
    font-family:var(--oi-font);
    font-size:9px;
    font-weight:500;
    color:#87948e;
    margin-top:3px;
}
.oi-mega-icon {
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:grid;
    place-items:center;
    background:#eaf2e9;
    border-radius:8px;
    color:#4b765e;
    font-size:15px;
}
.oi-mega-subhead {
    margin-top:20px;
    padding-top:17px;
    border-top:1px solid var(--oi-line);
}
.oi-mega-viewall {
    margin-top:12px!important;
    padding:10px 12px!important;
    border-radius:6px!important;
    background:#edf3e9;
    color:#345d45!important;
    font-weight:800;
}
.oi-mega-products {
    padding-left:20px;
    border-left:1px solid var(--oi-line);
}
.oi-mega-products .oi-mega-heading {
    margin-bottom:15px;
}
.oi-mega-products>a:not(.oi-mega-heading) {
    padding-left:0!important;
}
.oi-mega-products .oi-mega-viewall {
    padding-left:12px!important;
}
.oi-back-top {
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s,visibility .2s;
}
.oi-back-top.is-visible {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
@media(max-width:1199.98px) {
    .oi-mega-menu {
        width:min(1060px,calc(100vw - 32px));
        padding:22px;
    }
    .oi-mega-columns {
        gap:16px;
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
    .oi-mega-col>a:not(.oi-mega-heading) {
        padding-left:0;
    }
    .oi-header .nav-link {
        padding-left:9px!important;
        padding-right:9px!important;
    }
    .oi-brand strong {
        font-size:11px;
    }
}
@media(max-width:991.98px) {
    .oi-header .navbar {
        position:relative;
    }
    .oi-solutions-nav {
        position:relative;
    }
    .oi-mega-menu {
        position:static;
        width:100%;
        max-height:none;
        overflow:visible;
        transform:none!important;
        display:none;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        box-shadow:none;
        border:1px solid var(--oi-line);
        border-radius:12px;
        padding:18px;
        margin:5px 0 14px;
        background:#f8faf6;
    }
    .oi-solutions-nav.is-open .oi-mega-menu {
        display:block;
    }
    .oi-mega-top {
        align-items:flex-start;
        flex-direction:column;
    }
    .oi-mega-top h3 {
        font-size:21px;
    }
    .oi-mega-columns {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px;
    }
    .oi-mega-products {
        border-left:0;
        padding-left:0;
    }
    .oi-solutions-trigger {
        justify-content:space-between;
    }
    .oi-solutions-trigger:after {
        display:none;
    }
    .oi-solution-catalog {
        gap:16px;
    }
    .oi-hero-art-brand {
        margin:0;
    }
    .oi-hero-rebuilt {
        padding-top:50px;
    }
}
@media(max-width:767.98px) {
    .oi-solution-catalog {
        grid-template-columns:1fr;
    }
    .oi-solution-image {
        height:190px;
    }
    .oi-solution-body {
        padding:20px;
    }
    .oi-solution-body h3 {
        font-size:25px;
    }
    .oi-solution-body>p {
        min-height:0;
    }
    .oi-solutions-footnote {
        align-items:flex-start;
        flex-wrap:wrap;
    }
    .oi-solutions-footnote span {
        flex-basis:calc(100% - 40px);
    }
    .oi-solutions-footnote>a {
        margin-left:32px;
    }
    .oi-mega-columns {
        grid-template-columns:1fr;
        gap:16px;
    }
    .oi-mega-col {
        padding-bottom:14px;
        border-bottom:1px solid var(--oi-line);
    }
    .oi-mega-col:last-child {
        border-bottom:0;
    }
    .oi-mega-subhead {
        margin-top:12px;
    }
    .oi-hero-art-brand {
        aspect-ratio:.92;
    }
    .oi-hero-bottom .container {
        align-items:flex-start;
    }
    .oi-hero-bottom .oi-marquee-items {
        gap:9px;
    }
    .oi-hero-bottom .oi-marquee-items span {
        font-size:9px;
    }
}
/* Navigation fix: keep the Solutions mega menu attached to its trigger */
@media(min-width:992px) {
    .oi-solutions-nav {
        align-self:stretch;
        display:flex;
        align-items:center;
    }
    .oi-solutions-nav>.oi-solutions-trigger {
        height:100%;
        display:flex;
        align-items:center;
    }
    .oi-mega-menu {
        top:100%;
        margin-top:0;
        transform:translate(-50%,0);
        transition:opacity .18s ease,visibility .18s ease;
    }
    .oi-solutions-nav.is-open .oi-mega-menu {
        transform:translate(-50%,0);
    }
}
/* Keep the desktop navbar hit area tall enough to bridge the Solutions menu */
@media(min-width:992px) {
    .oi-header .navbar {
        min-height:100px;
        padding-top:8px;
        padding-bottom:8px;
    }
    .oi-header .navbar-nav {
        align-self:stretch;
        align-items:stretch;
    }
    .oi-header .navbar-nav>.nav-item {
        display:flex;
        align-items:stretch;
    }
    .oi-header .navbar-nav>.nav-item>.nav-link {
        display:flex;
        align-items:center;
        padding-top:20px!important;
        padding-bottom:20px!important;
    }
    .oi-solutions-nav {
        align-self:stretch;
        display:flex;
        align-items:stretch;
    }
    .oi-solutions-nav>.oi-solutions-trigger {
        display:flex;
        align-items:center;
        padding-top:20px!important;
        padding-bottom:20px!important;
    }
    .oi-mega-menu {
        top:100%;
        margin-top:0;
        transform:translate(-50%,0);
    }
    .oi-solutions-nav.is-open .oi-mega-menu {
        transform:translate(-50%,0);
    }
}
/* Solutions mega menu: four priority columns on the first row */
@media (min-width: 992px) {
    .oi-mega-columns {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 24px;
        row-gap: 24px;
    }
    .oi-mega-primary {
        padding-bottom: 20px;
    }
    .oi-mega-secondary {
        padding-top: 20px;
        border-top: 1px solid var(--oi-line);
    }
    .oi-mega-products {
        padding-left: 0;
        border-left: 0;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .oi-mega-columns {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }
    .oi-mega-menu {
        max-height: calc(100vh - 115px);
        overflow-y: auto;
    }
    .oi-mega-heading>span:last-child {
        font-size: 12px;
    }
    .oi-mega-heading small {
        font-size: 8px;
    }
}