:root {
    --ink: #07151c;
    --navy: #061520;
    --steel: #123747;
    --cyan: #2de0cf;
    --lime: #d8f05b;
    --paper: #ffffff;
    --muted: #9db3bb;
    --line: #d5dfdf;
    --shadow: 0 28px 80px #00151f18;
    --radius: 18px;
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;
    --spacing-3xl: 80px;
    --header-height: 84px;
    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
}

body {
    background: #ffffff;
    color: #0b1c24;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.wrap {
    width: min(1240px, calc(100% - 56px))
}

.site-head {
    background: #061520;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px)
}

.head-row {
    height: 68px
}

.brand {
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff
}

.brand:hover {
    opacity: 1
}

.brand-logo {
    height: 58px;
    width: auto;
    display: block;
    mix-blend-mode: lighten;
    object-fit: contain;
}

.brand-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: block
}

.brand-text {
    display: block;
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase
}

.desktop-nav {
    gap: 32px;
    margin: 0 auto 0 48px;
    flex: 1;
    justify-content: flex-start
}

.nav-trigger {
    padding: 24px 0;
    font-size: .88rem !important;
    letter-spacing: 0.01em;
    transition: var(--transition-smooth);
    position: relative;
    font-weight: 500;
    color: #fff}

.nav-trigger:hover {
    color: #008080;
    transform: translateY(-1px)
}

.nav-trigger:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
    border-radius: 4px
}

.nav-trigger.active {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 24px 0;
    color: #fff;
    font-weight: 500;
    font-size: .88rem !important;
    letter-spacing: 0.01em;
    text-decoration: none
}

.head-cta {
    border-radius: 6px;
    padding: 9px 18px;
    background: #2de0cf;
    color: #061520;
    font-weight: 600;
    font-size: 0.85rem;
    transition: var(--transition-smooth);
    white-space: nowrap;
    box-shadow: none
}

.head-cta:hover {
    background: #26c9ba;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 224, 207, 0.3)
}

.head-cta:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px
}

.mega {
    top: calc(var(--header-height) - 1px);
    background: #061520FA;
    border-top: 1px solid #2de0cf35;
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2)
}

.mega-grid {
    grid-template-columns: 1.3fr repeat(3, 1fr);
    padding: var(--spacing-xl) 0 var(--spacing-xl);
    gap: var(--spacing-xl)
}

.mega h3 {
    font-size: 1.8rem;
    line-height: 1.15;
    margin-bottom: var(--spacing-sm);
    font-weight: 600
}

.mega p {
    line-height: 1.65;
    opacity: 1;
    font-size: 0.95rem
}

.mega a {
    padding: 10px 0;
    transition: var(--transition-smooth);
    display: block;
    font-size: 0.95rem
}

.mega a:hover {
    color: var(--cyan);
    padding-left: 6px
}

.mega a:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    border-radius: 4px
}

.mega b {
    display: block;
    color: #2de0cf;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
    font-weight: 700
}

.mega .eyebrow {
    color: #2de0cf;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    margin-bottom: var(--spacing-sm)
}

.hero {
    min-height: 420px;
    background: linear-gradient(125deg, #061520 0%, #0a2d3a 55%, #0d3d4a 100%);
    position: relative;
    padding: 50px 0 45px 0
}

.hero:after {
    content: none
}

.hero-grid {
    min-height: auto;
    grid-template-columns: 54% 46%;
    gap: 45px;
    position: relative;
    z-index: 1;
    align-items: center
}

.hero-content {
    max-width: 560px
}

.hero h1 {
    font-size: clamp(2rem, 4.2vw, 3rem);
    max-width: 500px;
    letter-spacing: -.03em;
    font-weight: 700;
    line-height: 1.15;
    margin: 14px 0 18px
}

.hero p {
    font-size: 0.98rem;
    line-height: 1.6;
    max-width: 480px;
    color: #fff;
    margin-bottom: 24px
}

.hero .eyebrow {
    color: #2de0cf;
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Courier New', monospace
}

.hero .eyebrow-dot {
    font-size: 0.5rem;
    color: #2de0cf
}

.hero .actions {
    margin-top: 24px;
    margin-bottom: 0;
    display: flex;
    gap: 12px
}

.hero .btn {
    border-radius: 6px;
    padding: 11px 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    letter-spacing: 0;
    font-size: 0.9rem;
    background: #2de0cf;
    color: #061520
}

.hero .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(232, 155, 60, 0.3);
    background: #26c9ba
}

.hero .btn.secondary {
    border-radius: 6px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff
}

.hero .btn.secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4)
}

.hero-stats {
    display: none
}

.system-visual {
    height: 340px;
    filter: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px
}

.schematic-svg {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block
}

.pulse-dot {
    animation: pulse 3s ease-in-out infinite
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.4;
        r: 2.5
    }
    50% {
        opacity: 1;
        r: 3.5
    }
}

.node-group {
    transition: all 0.3s ease
}

.node-group:hover circle {
    stroke: rgba(45, 224, 207, 0.8);
    stroke-width: 2
}

.center-node {
    filter: drop-shadow(0 2px 8px rgba(232, 155, 60, 0.3))
}

/* Remove old ring and node styles */
.ring,
.ring-dashed,
.core,
.signal,
.node {
    display: none
}

.trust-strip {
    background: #0d2433;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.05)
}

.trust-grid {
    min-height: 60px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 0
}

.trust-grid>div {
    padding: 16px 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    font-size: .75rem;
    color: #fff;
    text-align: center;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.05em
}

.trust-grid>div:first-child {
    border-left: 0
}

.trust-grid strong {
    display: block;
    color: #fff;
    font-size: .8rem;
    margin-bottom: 0;
    font-weight: 600
}

.trust-intro {
    font-weight: 600 !important;
    color: #fff !important}

.trust-intro span {
    display: block;
    color: #2de0cf;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 4px
}

section {
    padding: var(--spacing-3xl) 0
}

.section-head {
    margin-bottom: var(--spacing-xl)
}

.section-head h2 {
    font-size: clamp(2.4rem, 4.8vw, 4.2rem);
    letter-spacing: -.045em;
    margin-bottom: var(--spacing-md);
    font-weight: 700
}

.section-head p {
    font-size: 1.05rem;
    line-height: 1.7;
    opacity: 0.9;
    color: #52666d
}

.section-head .eyebrow {
    display: block;
    color: #2de0cf;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: var(--spacing-sm)
}

.grid {
    gap: var(--spacing-md)
}

.card {
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    min-height: 280px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 0 #fff inset;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
}

.card:after {
    content: "→";
    position: absolute;
    right: 25px;
    top: 25px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef4f3;
    color: #0b7871;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
}

.card:hover {
    transform: translateY(-7px);
    box-shadow: 0 24px 65px #00151f1c;
    border-color: #2de0cf88
}

.card:hover:after {
    background: #2de0cf;
    color: #06222a;
    transform: rotate(-35deg) scale(1.1)
}

.card:focus-within {
    outline: 2px solid var(--cyan);
    outline-offset: 4px
}

.card h3 {
    font-size: 1.48rem;
    margin-top: 38px;
    line-height: 1.3;
    font-weight: 700;
    color: #0b1c24
}

.card p {
    line-height: 1.7;
    opacity: 0.9;
    color: #52666d;
    font-size: 1rem
}

.card .link {
    display: inline-block;
    margin-top: var(--spacing-sm);
    transition: var(--transition-smooth);
    color: #087b73;
    font-weight: 500;
    font-size: 0.95rem
}

.card .link:hover {
    transform: translateX(4px);
    color: var(--cyan)
}

.card .num {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--cyan);
    font-weight: 700
}

.dark {
    background: radial-gradient(circle at 90% 0, #184657 0, transparent 35%), #061520
}

.path {
    gap: 12px;
    background: transparent
}

.step {
    border: 1px solid #ffffff14;
    border-radius: 16px;
    min-height: 240px;
    background: #0b2a37aa;
    padding: 34px;
    transition: var(--transition-smooth)
}

.step:hover {
    border-color: #ffffff22;
    background: #0b2a37bb
}

.step b {
    display: inline-block;
    background: #2de0cf16;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--cyan);
    font-weight: 700
}

.step h3 {
    font-size: 1.4rem;
    margin-top: var(--spacing-lg);
    font-weight: 700
}

.step p {
    color: #fff;
    line-height: 1.7;
    font-size: 0.98rem
}

.stats {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: none;
    overflow: hidden
}

.stat {
    padding: 42px 20px
}

.stat strong {
    font-size: 2.5rem;
    color: #0d3b48
}

.stat span {
    color: #64777d
}

.page-hero {
    padding: 120px 0 95px;
    background:
        linear-gradient(125deg, rgba(6,21,32,0.88) 0%, rgba(10,45,58,0.82) 55%, rgba(13,61,74,0.78) 100%),
        url('/wp-content/themes/ojasquest/assets/image/5.jpg') center/cover no-repeat;
    position: relative;
    overflow: hidden
}

.page-hero:after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13,80,90,0.6) 0%, transparent 70%);
    right: -80px;
    top: -100px;
    pointer-events: none
}

.page-hero:after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 1px solid #2de0cf28;
    right: -80px;
    top: -190px;
    box-shadow: 0 0 0 70px #2de0cf08, 0 0 0 140px #2de0cf05
}

.page-hero .wrap {
    position: relative;
    z-index: 1
}

.page-hero .container {
    position: relative;
    z-index: 1;
    width: min(1240px, calc(100% - 56px));
    margin: 0 auto;
    padding: 0 !important;
    text-align:left
}

/* Center variant for About page */
.page-hero.page-hero--center .container {
    text-align: center !important
}

.page-hero.page-hero--center .page-hero__description {
    margin-left: auto !important;
    margin-right: auto !important
}

.page-hero.page-hero--center .page-hero__actions {
    justify-content: center !important
}

.page-hero h1 {
    max-width: 980px;
    margin-bottom: var(--spacing-md);
    font-weight: 700
}

.page-hero p {
    line-height: 1.7;
    color: #fff;
    font-size: 1.05rem
}

.page-hero .eyebrow {
    color: var(--cyan);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    margin-bottom: var(--spacing-sm)
}

/* About page hero - center aligned */
body[data-page="company"] .page-hero .container,
body[data-page="about"] .page-hero .container,
.page-template-page-about .page-hero .container,
.page-template-page-templates-page-about-php .page-hero .container {
    text-align: center !important
}

body[data-page="company"] .page-hero__description,
body[data-page="about"] .page-hero__description,
.page-template-page-about .page-hero__description,
.page-template-page-templates-page-about-php .page-hero__description {
    margin-left: auto !important;
    margin-right: auto !important
}

body[data-page="company"] .page-hero__actions,
body[data-page="about"] .page-hero__actions,
.page-template-page-about .page-hero__actions,
.page-template-page-templates-page-about-php .page-hero__actions {
    justify-content: center !important
}

.page-hero .page-hero__actions {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    flex-wrap: wrap
}

.page-hero .page-hero__actions .btn--outline-light {
    background: transparent !important;
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    font-weight: 600
}

.page-hero .page-hero__actions .btn--outline-light:hover {
    border-color: var(--cyan) !important;
    color: var(--cyan) !important;
    background: transparent !important
}

.page-hero .page-hero__actions .btn--primary {
    background: var(--cyan);
    color: var(--navy);
    border-color: var(--cyan)
}

.page-hero .page-hero__actions .btn--primary:hover {
    background: #26c9ba;
    border-color: #26c9ba;
    color: var(--navy);
    box-shadow: 0 8px 24px rgba(45, 224, 207, 0.3)
}

.detail {
    grid-template-columns: 320px 1fr;
    gap: var(--spacing-3xl)
}

.side-nav {
    top: 120px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--cyan);
    background: #fff;
    padding: var(--spacing-md);
    border-radius: 0 14px 14px 0;
    box-shadow: 0 15px 40px #00151f0d;
    transition: box-shadow 0.3s ease
}

.side-nav:hover {
    box-shadow: 0 20px 50px #00151f15
}

.side-nav b {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #52666d;
    font-weight: 700
}

.side-nav a {
    border-top: 1px solid #e4ebeb;
    padding: 12px 0;
    transition: var(--transition-smooth);
    color: #52666d;
    font-size: 0.95rem;
    display: block
}

.side-nav a:hover {
    color: var(--cyan);
    padding-left: 8px
}

.side-nav a:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    border-radius: 4px
}

.side-nav a.active {
    color: var(--cyan);
    font-weight: 700;
    border-left: 3px solid var(--cyan);
    padding-left: var(--spacing-xs);
    margin-left: -3px;
    background: rgba(45, 224, 207, 0.04)
}

.feature {
    padding: var(--spacing-xl) 0;
    scroll-margin-top: 300px
}

.capability-section,
.product-section,
.industry-section {
    padding: var(--spacing-xl) 0 var(--spacing-2xl);
    border-top: 1px solid #d5dfdf;
    scroll-margin-top: 100px;
    transition: border-color 0.3s ease
}

.capability-section:first-of-type,
.product-section:first-of-type,
.industry-section:first-of-type {
    border-top: none
}

.capability-section:hover,
.product-section:hover,
.industry-section:hover {
    border-top-color: rgba(45, 224, 207, 0.4)
}

.feature h2 {
    font-size: 2.45rem;
    letter-spacing: -.035em;
    margin-bottom: var(--spacing-sm);
    font-weight: 700
}

.feature p {
    font-size: 1.06rem;
    max-width: 800px;
    line-height: 1.7;
    color: #52666d;
    text-align: justify
}

.feature h3 {
    font-size: 1.3rem;
    margin: var(--spacing-md) 0 var(--spacing-sm);
    color: #0b1c24;
    font-weight: 700
}

.feature .eyebrow,
.feature .num {
    display: inline-block;
    color: #2de0cf;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: var(--spacing-sm)
}

.chip {
    border-radius: 99px;
    padding: 7px 14px;
    background: #e7f0ef;
    font-size: 0.85rem;
    transition: var(--transition-smooth);
    display: inline-block;
    margin: 2px;
    border: 1px solid transparent;
    font-weight: 500;
    color: #0b4148
}

.chip:hover {
    background: #d1e5e3;
    transform: translateY(-1px);
    border-color: rgba(45, 224, 207, 0.3)
}

.resource-card {
    background: #fff;
    border: 1px solid #d5dfdf;
    box-shadow: none;
    border-radius: 12px;
    padding: 32px;
    display: flex;
    flex-direction: column
}

.resource-card:after {
    content: none
}

.resource-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    border-color: var(--cyan)
}

.resource-card__icon {
    width: 48px;
    height: 48px;
    background: #f4f7f6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 1.5rem
}

.resource-card__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0b1c24;
    line-height: 1.3;
    margin: 0 0 12px
}

.resource-card__meta {
    color: #64777d;
    font-size: 0.9rem;
    margin: 0 0 24px
}

.resource-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-top: auto
}

.resource-card__badge--access {
    background: #fef4e6;
    color: #b8760a
}

/* When badge is a <button>, reset browser defaults */
button.resource-card__badge--access {
    border: none;
    font-family: inherit;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease
}

button.resource-card__badge--access:hover {
    background: #fde8cc;
    transform: translateY(-1px)
}

.resource-card__badge--free {
    background: #e7f0ef;
    color: #087b73
}

.contact-band {
    background: linear-gradient(100deg, #d8f05b, #bce85f);
    position: relative;
    overflow: hidden;
    padding: var(--spacing-3xl) 0
}

.contact-band:after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border: 45px solid #0b27320b;
    border-radius: 50%;
    right: 8%;
    top: -80px
}

.contact-band .wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg)
}

.contact-band h2 {
    margin-bottom: var(--spacing-xs)
}

.contact-layout {
    gap: 85px
}

.form {
    border-radius: var(--radius);
    padding: var(--spacing-xl);
    box-shadow: 0 30px 90px #00151f20;
    border: 1px solid #d8e1e2;
    transition: box-shadow 0.3s ease
}

.form:focus-within {
    box-shadow: 0 35px 100px #00151f25
}

.form h2 {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: var(--spacing-lg)
}

input,
select,
textarea {
    border-radius: 9px;
    border-color: #c5d3d5;
    background: #f8fbfa;
    transition: var(--transition-smooth);
    font-size: 0.95rem
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(45, 224, 207, 0.1);
    outline: none
}

.success {
    border-radius: 8px;
    padding: var(--spacing-sm);
    margin-top: var(--spacing-md)
}

.site-foot {
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-xl);
    background: #fafcfc;
    color: #52666d
}

.foot-grid {
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-xl)
}

.site-foot a {
    transition: var(--transition-smooth);
    color: #52666d;
    font-size: 0.95rem;
    display: block;
    padding: 6px 0
}

.site-foot a:hover {
    color: var(--cyan);
    padding-left: 4px
}

.site-foot a:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    border-radius: 4px
}

.site-foot h4 {
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
    color: #0b1c24;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: #0b1c24;
    text-transform: uppercase;
    font-size: 0.8rem
}

.site-foot .brand {
    color: #0b1c24;
    margin-bottom: var(--spacing-sm);
    display: inline-block
}

.site-foot .brand + p {
    color: #64777d;
    line-height: 1.65;
    font-size: 0.95rem
}

.site-foot .brand-logo {
    height: 40px;
    width: auto;
    filter: invert(1) brightness(0.2)
}

.site-foot .brand {
    color: #0b1c24
}

.site-foot .brand + p {
    color: #0b1c24 !important
}
}

.legal {
    margin-top: 50px;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--line);
    opacity: 0.7;
    font-size: 0.9rem
}

.proof-float {
    position: absolute;
    right: 5%;
    bottom: 7%;
    background: #071c26dd;
    border: 1px solid #2de0cf44;
    border-radius: 12px;
    padding: 15px 18px;
    color: #fff;
    font-size: .75rem;
    backdrop-filter: blur(12px)
}

.proof-float b {
    color: #2de0cf;
    display: block;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase
}

@media(max-width:920px) {
    .hero {
        padding: 60px 0
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 60px 0
    }

    .hero h1 {
        font-size: 2.5rem
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: 24px
    }

    .system-visual {
        height: 350px
    }

    .schematic-svg {
        max-width: 360px
    }

    .trust-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px
    }

    .trust-grid>div {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-left: 0;
        padding: 14px 16px
    }

    .trust-grid>div:first-child {
        grid-column: 1/3
    }

    .detail {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl)
    }

    .side-nav {
        position: static
    }

    .proof-float {
        display: none
    }

    .mega-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg)
    }

    .contact-band .wrap {
        flex-direction: column;
        text-align: center
    }
}

@media(max-width:620px) {
    .wrap {
        width: calc(100% - 30px)
    }

    .head-row {
        height: 68px
    }

    .hero {
        padding: 48px 0
    }

    .hero-grid {
        padding: 48px 0
    }

    .hero h1 {
        font-size: 2rem
    }

    .hero p {
        font-size: 1rem
    }

    .hero .actions {
        flex-direction: column;
        gap: 12px
    }

    .hero .btn {
        width: 100%
    }

    .hero-stats {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start
    }

    .stat-divider {
        display: none
    }

    .system-visual {
        height: 300px;
        padding: 10px
    }

    .schematic-svg {
        max-width: 300px
    }

    .trust-grid {
        grid-template-columns: 1fr;
        font-size: 0.7rem
    }

    .trust-grid>div,
    .trust-grid>div:first-child {
        grid-column: auto;
        padding: 12px 16px;
        border-left: 0;
        text-align: left
    }

    .card {
        padding: 26px
    }

    .page-hero {
        padding: 80px 0 65px
    }

    .form {
        padding: 28px
    }

    section {
        padding: var(--spacing-2xl) 0
    }

    .desktop-nav {
        gap: var(--spacing-sm)
    }
}

/* Resource Page Specific Styles */
.resource-item-card {
    background: #fff;
    border: 1px solid #d5dfdf;
    border-radius: 10px;
    padding: 24px;
    transition: all 0.3s;
    cursor: pointer
}

.resource-item-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
    border-color: #2de0cf
}

.breadcrumb a {
    text-decoration: none;
    transition: color 0.2s
}

.breadcrumb a:hover {
    color: #2de0cf
}


/* Search Button */
.search-btn {
    background: none;
    border: none;
    color: #fff;
    padding: 0;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 12px;
    width: 32px;
    height: 32px
}

.search-btn:hover {
    color: #fff;
    opacity: 1;
    transform: none
}

.search-btn:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
    border-radius: 4px
}

.search-btn svg {
    width: 16px;
    height: 16px
}

/* Search Overlay - Full page darkened background */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(6, 27, 39, 0.92);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 180px;
    opacity: 0;
    transition: opacity 0.25s ease;
    overflow-y: auto
}

.search-overlay.active {
    opacity: 1
}

/* Prevent body scroll when search is open */
body.search-open {
    overflow: hidden
}

/* Search Container - White rounded box */
.search-container {
    width: 560px;
    max-width: calc(100vw - 40px);
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: searchSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    overflow: hidden
}

@keyframes searchSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* Search Input Row */
.search-input-row {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    gap: 12px
}

.search-input-row .search-icon {
    color: #52666d;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    opacity: 0.6
}

/* Search Input */
.search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    color: #0b1c24;
    padding: 0;
    outline: none;
    font-family: inherit
}

.search-input::placeholder {
    color: #9db3bb;
    font-size: 16px
}

/* Search Close Button */
.search-close {
    background: none;
    border: none;
    color: #52666d;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    opacity: 0.5;
    flex-shrink: 0
}

.search-close:hover {
    opacity: 1;
    color: #0b1c24
}

.search-close:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    border-radius: 4px
}

/* Search Divider */
.search-divider {
    height: 1px;
    background: #e4ebeb;
    margin: 0 24px
}

/* Search Suggestions Row */
.search-suggestions {
    padding: 16px 24px;
    font-size: 13px;
    color: #64777d;
    line-height: 1.5
}

.search-suggestions strong {
    font-weight: 600;
    color: #52666d
}

.search-suggestion-link {
    color: #087b73;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease
}

.search-suggestion-link:hover {
    color: var(--cyan);
    text-decoration: underline
}

/* Search Results Container */
.search-results {
    max-height: 400px;
    overflow-y: auto;
    background: #fff;
    border-radius: 0 0 10px 10px
}

.search-results::-webkit-scrollbar {
    width: 6px
}

.search-results::-webkit-scrollbar-track {
    background: #f4f7f6;
    border-radius: 3px
}

.search-results::-webkit-scrollbar-thumb {
    background: #c5d3d5;
    border-radius: 3px
}

.search-results::-webkit-scrollbar-thumb:hover {
    background: #9db3bb
}

/* Search Result Item */
.search-result {
    display: block;
    padding: 16px 24px;
    border-top: 1px solid #e4ebeb;
    transition: background-color 0.2s ease;
    text-decoration: none
}

.search-result:first-child {
    border-top: none
}

.search-result:hover {
    background: #f8fbfa
}

.search-result:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: -2px
}

.search-result-category {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cyan);
    margin-bottom: 6px;
    font-weight: 700
}

.search-result-title {
    color: #0b1c24;
    font-size: 15px;
    margin: 0 0 6px;
    font-weight: 600;
    line-height: 1.4
}

.search-result-description {
    color: #64777d;
    font-size: 14px;
    line-height: 1.5;
    margin: 0
}

.search-no-results {
    text-align: center;
    color: #64777d;
    padding: 40px 24px;
    font-size: 15px
}

/* Mobile Search */
@media(max-width:920px) {
    .search-overlay {
        padding-top: 120px
    }
    
    .search-container {
        width: calc(100vw - 32px);
        margin: 0 16px
    }
    
    .search-btn {
        margin: 0 var(--spacing-xs)
    }
}

@media(max-width:620px) {
    .search-overlay {
        padding-top: 100px
    }
    
    .search-input-row {
        padding: 16px 20px
    }
    
    .search-suggestions {
        padding: 14px 20px;
        font-size: 12px
    }
    
    .search-divider {
        margin: 0 20px
    }
    
    .search-input {
        font-size: 15px
    }
    
    .search-input::placeholder {
        font-size: 15px
    }
    
    .search-result {
        padding: 14px 20px
    }
    
    .search-results {
        max-height: 300px
    }
}


/* =============================================================================
   HERO SLIDER — Movable Tiles
   ============================================================================= */

/* Outer wrapper replaces the single .hero section */
.hero-slider {
    position: relative;
    background: linear-gradient(125deg, #061520 0%, #0a2d3a 55%, #0d3d4a 100%);
    overflow: hidden;
    width: 100%
}

/* Track that holds all slides side by side */
.hero-slider-track {
    display: flex;
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    width: 100%
}

/* Each slide fills the viewport width */
.hero-slide {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    box-sizing: border-box
}

/* Slide 1 keeps the existing .hero layout intact */
.hero-slide:first-child .hero {
    /* no changes to existing hero rules */
}

/* ---- Tile slides (slides 2-4) ---- */
.hero-tile-slide {
    background: linear-gradient(125deg, #061520 0%, #0a2d3a 55%, #0d3d4a 100%);
    padding: 50px 0 60px
}

/* Left column: header uses the existing .hero-content + .hero-grid */
.hero-tile-slide .ht-eyebrow {
    color: #2de0cf;
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px
}

.hero-tile-slide .ht-title {
    font-size: clamp(2rem, 4.2vw, 3rem);
    max-width: 500px;
    letter-spacing: -.03em;
    font-weight: 700;
    line-height: 1.15;
    margin: 14px 0 18px;
    color: #fff
}

.hero-tile-slide .ht-sub {
    font-size: 0.98rem;
    line-height: 1.6;
    max-width: 480px;
    color: #fff;
    margin-bottom: 0
}

/* Right column: tile grid wrapper */
.hero-tiles-wrap {
    display: flex;
    align-items: center;
    overflow: hidden;
    min-width: 0
}

/* Tile grid */
.hero-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    min-width: 0
}

/* Individual tile */
.hero-tile {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 18px 16px;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(0.4,0,0.2,1);
    /* stagger entrance animation */
    opacity: 0;
    transform: translateY(18px);
    min-width: 0;
    box-sizing: border-box
}

.hero-tile.tile-visible {
    opacity: 1;
    transform: translateY(0)
}

.hero-tile:hover {
    background: rgba(45,224,207,0.07);
    border-color: rgba(45,224,207,0.35);
    transform: translateY(-4px)
}

.hero-tile-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(45,224,207,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    flex-shrink: 0
}

.hero-tile-icon svg {
    width: 15px;
    height: 15px;
    stroke: #2de0cf;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.hero-tile h3 {
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.3
}

.hero-tile p {
    font-size: .78rem;
    color: #fff;
    margin: 0;
    line-height: 1.5
}

.hero-tile-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    font-size: .82rem;
    color: #2de0cf;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s ease
}

.hero-tile-cta:hover {
    gap: 10px
}

/* ---- Slider navigation bar ---- */
.hero-slider-nav {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 10
}

/* Prev / Next arrow buttons — hidden */
.hsnav-arrow {
    display: none
}

/* Dot indicators */
.hsnav-dots {
    display: flex;
    align-items: center;
    gap: 8px
}

.hsnav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
    flex-shrink: 0
}

.hsnav-dot.active {
    background: #2de0cf;
    width: 22px;
    border-radius: 4px
}

.hsnav-dot:hover:not(.active) {
    background: rgba(255,255,255,0.5)
}

/* ---- Responsive ---- */
@media(max-width:920px) {
    .hero-tiles {
        grid-template-columns: repeat(2, 1fr)
    }

    .hero-tile-slide {
        padding: 40px 0 56px
    }

    .hero-tiles-wrap {
        margin-top: 32px
    }
}

@media(max-width:620px) {
    .hero-tiles {
        grid-template-columns: 1fr 1fr
    }

    .hero-tile-slide .ht-title {
        font-size: 1.55rem
    }

    .hero-tile {
        padding: 18px 16px
    }

    .hero-tile h3 {
        font-size: .88rem
    }

    .hero-tile p {
        display: none
    }
}

@media(max-width:400px) {
    .hero-tiles {
        grid-template-columns: 1fr
    }
}

/* =============================================================================
   WHITEPAPER EMAIL GATE MODAL
   ============================================================================= */

.wp-gate-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 27, 39, 0.88);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none
}

.wp-gate-overlay.active {
    opacity: 1;
    pointer-events: all
}

.wp-gate-modal {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 480px;
    position: relative;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3);
    transform: translateY(12px);
    transition: transform 0.25s ease;
    box-sizing: border-box
}

.wp-gate-overlay.active .wp-gate-modal {
    transform: translateY(0)
}

.wp-gate-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #9db3bb;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.2s ease, background 0.2s ease
}

.wp-gate-close:hover {
    color: #0b1c24;
    background: #f4f7f6
}

.wp-gate-icon {
    width: 48px;
    height: 48px;
    background: #fef4e6;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px
}

.wp-gate-icon svg {
    width: 24px;
    height: 24px;
    stroke: #b8760a;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.wp-gate-modal h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0b1c24;
    margin: 0 0 8px;
    line-height: 1.3
}

.wp-gate-resource-title {
    font-size: 0.88rem;
    color: #64777d;
    margin: 0 0 24px;
    line-height: 1.5;
    padding: 10px 14px;
    background: #f4f7f6;
    border-radius: 8px;
    border-left: 3px solid #2de0cf
}

.wp-gate-modal label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0b1c24;
    margin-bottom: 6px
}

.wp-gate-modal input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #c5d3d5;
    border-radius: 9px;
    font-size: 0.95rem;
    background: #f8fbfa;
    color: #0b1c24;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    margin-bottom: 14px
}

.wp-gate-modal input:focus {
    border-color: #2de0cf;
    box-shadow: 0 0 0 3px rgba(45,224,207,0.12);
    outline: none;
    background: #fff
}

.wp-gate-modal input.error {
    border-color: #e05252;
    box-shadow: 0 0 0 3px rgba(224,82,82,0.1)
}

.wp-gate-error {
    display: none;
    font-size: 0.82rem;
    color: #c0392b;
    margin: -10px 0 14px;
    padding: 8px 12px;
    background: #fdf2f2;
    border-radius: 6px;
    border-left: 3px solid #e05252;
    line-height: 1.5
}

.wp-gate-error.visible {
    display: block
}

.wp-gate-submit {
    width: 100%;
    padding: 13px 20px;
    background: #061520;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    margin-top: 4px
}

.wp-gate-submit:hover:not(:disabled) {
    background: #123747;
    transform: translateY(-1px)
}

.wp-gate-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none
}

.wp-gate-note {
    font-size: 0.78rem;
    color: #9db3bb;
    margin: 12px 0 0;
    text-align: center;
    line-height: 1.5
}

/* Success state */
.wp-gate-success {
    display: none;
    text-align: center;
    padding: 12px 0 4px
}

.wp-gate-success.visible {
    display: block
}

.wp-gate-form-body.hidden {
    display: none
}

.wp-gate-success-icon {
    width: 56px;
    height: 56px;
    background: #e7f7f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px
}

.wp-gate-success-icon svg {
    width: 28px;
    height: 28px;
    stroke: #0b7871;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.wp-gate-success h3 {
    font-size: 1.2rem;
    color: #0b1c24;
    margin: 0 0 10px
}

.wp-gate-success p {
    font-size: 0.9rem;
    color: #64777d;
    line-height: 1.6;
    margin: 0 0 24px
}

.wp-gate-success .wp-gate-close-btn {
    display: inline-block;
    padding: 11px 28px;
    background: #061520;
    color: #fff;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s ease
}

.wp-gate-success .wp-gate-close-btn:hover {
    background: #123747
}

/* Make the badge look clickable */
.resource-gated-badge {
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease
}

.resource-gated-badge:hover {
    background: #fde8cc !important;
    transform: translateY(-1px)
}

@media(max-width:620px) {
    .wp-gate-modal {
        padding: 28px 24px
    }
}

/* =============================================================================
   INDUSTRIES PAGE — 3-Column Layout
   ============================================================================= */

/* ── 3-col grid ─────────────────────────────────────────────────────────────── */
.ind-grid {
    display: grid;
    grid-template-columns: 220px 1fr 260px;
    gap: 32px;
    align-items: start;
    padding: 48px 0 40px
}

/* ── Col 1: Menu ────────────────────────────────────────────────────────────── */
.ind-col1 {
    position: sticky;
    top: 100px;
    align-self: start;
    background: #fff;
    border: 1px solid #e4ebeb;
    border-left: 3px solid #2de0cf;
    border-radius: 0 12px 12px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    padding: 20px 0;
    overflow: hidden
}

.ind-col1__heading {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0b1c24;
    margin: 0 0 12px;
    padding: 0 20px
}

.ind-col1 .side-nav__list {
    border-left: none
}

.ind-col1 .side-nav__item {
    display: block;
    padding: 12px 20px;
    font-size: 0.88rem;
    color: #52666d;
    border-left: none;
    border-top: 1px solid #f0f4f4;
    margin-left: 0;
    transition: color 0.2s ease, background 0.2s ease;
    text-decoration: none
}

.ind-col1 .side-nav__item:first-child {
    border-top: 1px solid #e4ebeb
}

.ind-col1 .side-nav__item:hover {
    color: #0b1c24;
    background: #f8fbfa;
    padding-left: 20px
}

.ind-col1 .side-nav__item.active {
    color: #2de0cf;
    font-weight: 600;
    background: rgba(45, 224, 207, 0.1);
    border-left: none;
    padding-left: 20px
}

/* ── Col 2: Work Area ───────────────────────────────────────────────────────── */
.ind-col2 {
    min-width: 0
}

/* ── Col 3: Proof Panel ─────────────────────────────────────────────────────── */
.ind-col3 {
    position: sticky;
    top: 100px;
    align-self: start;
    background: #f8fbfa;
    border: 1px solid #e4ebeb;
    border-radius: 14px;
    padding: 22px 20px 18px;
    min-width: 0
}

.ind-col3__heading {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #52666d;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 7px
}

.ind-col3__heading svg {
    stroke: #2de0cf;
    flex-shrink: 0
}

/* Proof card track — only one card visible at a time */
.ind-proof-track {
    position: relative;
    min-height: 160px
}

.ind-proof-card {
    display: none;
    flex-direction: column;
    gap: 6px;
    animation: indCardIn 0.4s ease
}

.ind-proof-card.active {
    display: flex
}

@keyframes indCardIn {
    from { opacity: 0; transform: translateY(8px) }
    to   { opacity: 1; transform: translateY(0) }
}

.ind-proof-card__icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 4px
}

.ind-proof-card__type {
    font-size: 0.75rem;
    color: #9db3bb;
    font-weight: 500
}

.ind-proof-card__title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0b1c24;
    line-height: 1.4;
    margin: 4px 0 10px
}

.ind-proof-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    background: #fef4e6;
    color: #b8760a;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
    align-self: flex-start
}

.ind-proof-card__badge:hover {
    background: #fde8cc;
    transform: translateY(-1px)
}

.ind-proof-card__badge--free {
    background: #e7f0ef;
    color: #087b73
}

/* Dot navigation */
.ind-proof-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0 14px
}

.ind-proof-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d5dfdf;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
    flex-shrink: 0
}

.ind-proof-dot.active {
    background: #2de0cf;
    width: 18px;
    border-radius: 4px
}

.ind-col3__all-link {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #087b73;
    text-decoration: none;
    padding-top: 4px;
    transition: color 0.2s ease, padding-left 0.2s ease
}

.ind-col3__all-link:hover {
    color: #2de0cf;
    padding-left: 4px
}

/* ── Row 1: Solutions Provided ──────────────────────────────────────────────── */
.ind-row {
    padding: 40px 0
}

.ind-row--solutions {
    border-top: 1px solid #e4ebeb
}

.ind-row__header {
    margin-bottom: 28px
}

.ind-row__eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2de0cf;
    margin-bottom: 8px
}

.ind-row__header h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0b1c24;
    margin: 0
}

.ind-solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.ind-solution-card {
    background: #fff;
    border: 1px solid #e4ebeb;
    border-radius: 12px;
    padding: 22px 20px;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.ind-solution-card:hover {
    border-color: #2de0cf;
    box-shadow: 0 6px 20px rgba(0,0,0,0.07);
    transform: translateY(-3px)
}

.ind-solution-card__icon {
    width: 38px;
    height: 38px;
    background: #e7f7f5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    flex-shrink: 0
}

.ind-solution-card__icon svg {
    stroke: #0b7871
}

.ind-solution-card h4 {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0b1c24;
    margin: 0;
    line-height: 1.3
}

.ind-solution-card p {
    font-size: 0.82rem;
    color: #64777d;
    margin: 0;
    line-height: 1.55
}

/* ── Row 2: Optional CTA ────────────────────────────────────────────────────── */
.ind-row--optional {
    border-top: none;
    margin-left: calc(-1 * (100vw - 100%) / 2);
    margin-right: calc(-1 * (100vw - 100%) / 2);
    padding: 0;
    margin-bottom: 0
}

.ind-row--optional .contact-band-new {
    border-radius: 0;
    margin: 0
}

.ind-page {
    padding-bottom: 0 !important
}

.ind-row--optional .ind-row__eyebrow {
    color: #2de0cf
}

.ind-row--optional h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin: 6px 0 10px
}

.ind-row--optional p {
    font-size: 0.9rem;
    color: #fff;
    max-width: 480px;
    line-height: 1.65;
    margin: 0
}

.ind-row2-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0
}

.ind-row2-actions .btn--primary {
    background: #2de0cf;
    color: #061520;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease
}

.ind-row2-actions .btn--primary:hover {
    background: #26c9ba;
    transform: translateY(-2px)
}

.ind-row2-actions .btn--outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.3);
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease
}

.ind-row2-actions .btn--outline:hover {
    border-color: #2de0cf;
    color: #2de0cf
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ind-grid {
        grid-template-columns: 200px 1fr 230px;
        gap: 24px
    }
}

@media (max-width: 920px) {
    .ind-grid {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .ind-col1,
    .ind-col3 {
        position: static
    }

    .ind-col3 {
        display: flex;
        flex-direction: column
    }

    .ind-solutions-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .ind-row2-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 32px 28px
    }

    .ind-row2-actions {
        flex-wrap: wrap
    }
}

@media (max-width: 620px) {
    .ind-solutions-grid {
        grid-template-columns: 1fr
    }

    .ind-row--optional {
        border-radius: 12px
    }
}

/* =============================================================================
   RESOURCES PAGE — New Design
   ============================================================================= */

/* ── Hero ────────────────────────────────────────────────────────────────────── */
.res-hero {
    background:
        linear-gradient(125deg, rgba(6,21,32,0.88) 0%, rgba(10,45,58,0.82) 55%, rgba(13,61,74,0.78) 100%),
        url('/wp-content/themes/ojasquest/assets/image/5.jpg') center/cover no-repeat;
    min-height: 380px;
    position: relative;
    overflow: hidden
}

.res-hero::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13,80,90,0.55) 0%, transparent 70%);
    right: -80px;
    top: -100px;
    pointer-events: none
}

.res-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;
    padding: 48px 0 48px;
    position: relative;
    z-index: 1
}

.res-hero__eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2de0cf;
    margin-bottom: 18px;
    font-family: 'Courier New', monospace
}

.res-hero__title {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 20px
}

.res-hero__accent {
    color: #2de0cf
}

.res-hero__desc {
    font-size: 1rem;
    line-height: 1.7;
    color: #fff;
    max-width: 600px;
    margin: 0 0 32px
}

.res-hero__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap
}

.res-hero__btn {
    padding: 13px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap
}

.res-hero__btn--primary {
    background: #2de0cf;
    color: #061520
}

.res-hero__btn--primary:hover {
    background: #26c9ba;
    transform: translateY(-2px)
}

.res-hero__btn--outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.35)
}

.res-hero__btn--outline:hover {
    border-color: #2de0cf;
    color: #2de0cf
}

/* Hero icon boxes */
.res-hero__visual {
    position: relative;
    height: 320px
}

.res-hero__icon-box {
    position: absolute;
    width: 56px;
    height: 56px;
    background: rgba(45,224,207,0.08);
    border: 1px solid rgba(45,224,207,0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatIcon 4s ease-in-out infinite;
    backdrop-filter: blur(4px)
}

.res-hero__icon-box:nth-child(2) { animation-delay: 0.8s }
.res-hero__icon-box:nth-child(3) { animation-delay: 1.6s }
.res-hero__icon-box:nth-child(4) { animation-delay: 2.4s }
.res-hero__icon-box:nth-child(5) { animation-delay: 3.2s }

@keyframes floatIcon {
    0%,100% { transform: translateY(0) }
    50%      { transform: translateY(-8px) }
}

/* ── Tabs section ────────────────────────────────────────────────────────────── */
.res-tabs-section {
    background: #fff;
    padding: 48px 0 64px
}

.res-tabs-row {
    display: flex;
    gap: 10px;
    margin-bottom: 36px;
    flex-wrap: wrap
}

.res-tab {
    padding: 10px 22px;
    border-radius: 99px;
    border: 1.5px solid #d5dfdf;
    background: transparent;
    color: #52666d;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit
}

.res-tab:hover {
    border-color: #2de0cf
}

.res-tab--active {
    background: #061520;
    color: #fff;
    border-color: #061520
}

/* ── Tab panels ──────────────────────────────────────────────────────────────── */
.res-panel { display: none }
.res-panel--active { display: block }

/* ── Card grid ───────────────────────────────────────────────────────────────── */
.res-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

/* ── Individual card ─────────────────────────────────────────────────────────── */
.res-card {
    background: #fff;
    border: 1px solid #e4ebeb;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: stretch;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    cursor: default
}

.res-card--gated {
    cursor: pointer
}

.res-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.09);
    border-color: #2de0cf;
    transform: translateY(-3px)
}

.res-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0
}

.res-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px
}

.res-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #eef7f6;
    border: 1px solid #d8ebe8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.res-card__icon svg {
    width: 20px;
    height: 20px;
    stroke: #087b73
}

.res-card__type-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #087b73
}

.res-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b1c24;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
    flex-shrink: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.res-card__desc {
    font-size: 0.85rem;
    color: #64777d;
    line-height: 1.55;
    margin: 0 0 14px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.res-card__footer {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: auto
}

.res-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #52666d
}

.res-card__meta svg {
    width: 18px;
    height: 18px;
    stroke: #52666d
}

.res-card__cta {
    margin: 14px 0 0
}

.res-read-link {
    font-size: 0.9rem;
    text-align: left;
    white-space: nowrap;
    font-weight: 700;
    color: #087b73;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s ease
}

.res-read-link:hover { color: #26c9ba }

.res-read-link--free { color: #087b73 }
.res-read-link--free:hover { color: #2de0cf }

/* Thumbnail */
.res-card__thumb {
    width: 36%;
    min-width: 130px;
    max-width: 160px;
    aspect-ratio: 5 / 7.5;
    align-self: center;
    border-radius: 6px;
    background: linear-gradient(135deg, #0a2a3a, #0d4a5e);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 16px 12px;
    flex-shrink: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 24px rgba(6, 21, 32, 0.18)
}

.res-card__thumb-brand {
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: block
}

.res-card__thumb-text {
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-top: 6px;
    display: block;
    overflow-wrap: anywhere
}

.res-card__thumb-text em {
    display: block;
    font-style: normal;
    color: #2de0cf;
    font-size: 0.8rem;
    margin-top: 8px
}

@media (max-width: 1100px) {
    .res-cards-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 720px) {
    .res-cards-grid {
        grid-template-columns: 1fr
    }

    .res-card {
        padding: 18px
    }

    .res-card__thumb {
        width: 40%;
        min-width: 120px
    }

    .res-card__thumb-text {
        font-size: 1.05rem
    }

    .res-card__thumb-text em {
        font-size: 0.85rem
    }
}

/* ── Bottom CTA band ─────────────────────────────────────────────────────────── */
.res-cta-band {
    background: #f4f7f6;
    border-top: 1px solid #e4ebeb;
    padding: 40px 0
}

.res-cta-band__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap
}

.res-cta-band__eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9db3bb;
    margin-bottom: 6px;
    font-family: 'Courier New', monospace
}

.res-cta-band__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0b1c24;
    margin: 0
}

.res-cta-band__mid {
    flex: 1;
    font-size: 0.9rem;
    color: #64777d;
    line-height: 1.65;
    padding: 0 20px;
    border-left: 1px solid #e4ebeb;
    border-right: 1px solid #e4ebeb
}

.res-cta-band__btn {
    background: #061520;
    color: #fff;
    padding: 13px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease;
    flex-shrink: 0
}

.res-cta-band__btn:hover {
    background: #123747;
    transform: translateY(-2px)
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media(max-width:1024px) {
    .res-cards-grid { grid-template-columns: repeat(2, 1fr) }
}

@media(max-width:920px) {
    .res-hero__inner { grid-template-columns: 1fr; padding: 56px 0 48px }
    .res-hero__visual { display: none }
    .res-cta-band__inner { flex-direction: column; align-items: flex-start; gap: 20px }
    .res-cta-band__mid { border: none; padding: 0 }
}

@media(max-width:620px) {
    .res-cards-grid { grid-template-columns: 1fr }
    .res-card { flex-direction: column }
    .res-card__thumb { width: 100%; min-width: unset; height: 80px; justify-content: flex-start; flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px }
    .res-hero__title { font-size: 2rem }
    .res-hero__actions { flex-direction: column }
    .res-hero__btn { text-align: center }
}

.ind-row2-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 40px 40px
}

/* =============================================================================
   HOME PAGE — Industry Associations
   ============================================================================= */

.home-industry-assoc {
    padding: 56px 0;
    background: #ffffff;
    border-top: 1px solid #e4ebeb
}

.home-assoc__head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    margin: 0 0 44px
}

.home-assoc__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #087b73;
    margin: 0 0 10px
}

.home-assoc__title {
    text-align: left;
    font-size: 2.6rem;
    line-height: 1.1;
    font-weight: 700;
    color: #0b1c24;
    margin: 0;
    letter-spacing: -0.03em
}

.home-assoc__desc {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #52666d;
    margin: 0;
    max-width: 520px;
    justify-self: end
}

.home-assoc__logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: nowrap;
    width: 100%
}

.home-assoc__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
    flex: 1;
    padding: 16px;
    background: #ffffff;
    border-radius: 8px
}

.home-assoc__logo:hover {
    opacity: 1;
    transform: translateY(-2px)
}

.home-assoc__logo img {
    max-height: 110px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
    mix-blend-mode: multiply
}

.home-assoc__logo svg {
    width: 100%;
    max-width: 160px;
    height: auto
}

@media(max-width:820px) {
    .home-assoc__head {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .home-assoc__desc {
        justify-self: start
    }
}

@media(max-width:768px) {
    .home-assoc__logos {
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px
    }

    .home-assoc__logo {
        flex: 0 0 40%
    }
}

@media(max-width:480px) {
    .home-assoc__logo {
        flex: 0 0 45%
    }

    .home-assoc__title {
        font-size: 1.9rem
    }
}

/* =============================================================================
   FOOTER — New Dark Design
   ============================================================================= */

.site-foot-new {
    background: #050d14;
    background-image:
        linear-gradient(135deg, rgba(0,40,60,0.85) 0%, rgba(0,10,20,0.92) 100%),
        repeating-linear-gradient(45deg, rgba(0,80,120,0.06) 0px, rgba(0,80,120,0.06) 1px, transparent 1px, transparent 12px),
        repeating-linear-gradient(-45deg, rgba(0,80,120,0.04) 0px, rgba(0,80,120,0.04) 1px, transparent 1px, transparent 12px);
    color: #fff;
    position: relative;
    overflow: hidden
}

.site-foot-new::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 70% 50%, rgba(0,100,150,0.15) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 20% 80%, rgba(45,224,207,0.05) 0%, transparent 60%);
    pointer-events: none
}

.site-foot-new__inner {
    padding: 64px 0 48px;
    position: relative;
    z-index: 1
}

.site-foot-new__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.4fr 1fr;
    gap: 48px;
    align-items: start
}

/* Brand column */
.site-foot-new__logo {
    height: 30.27px;             /* lettering is the same size as the header logo */
    width: auto;
    display: block;
    margin-bottom: 12px;
    object-fit: contain         /* transparent PNG: the footer colour shows behind the logo */
}

.site-foot-new__address {
    font-size: 0.85rem;
    line-height: 1.8;
    color: #fff;
    margin: 0 0 24px
}

.site-foot-new__address strong {
    color: #fff;
    display: block;
    margin-bottom: 6px
}

/* Social icons */
.site-foot-new__social {
    display: flex;
    gap: 10px
}

.site-foot-new__social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease
}

.site-foot-new__social a:hover {
    border-color: #2de0cf;
    color: #2de0cf;
    background: rgba(45,224,207,0.08)
}

/* Nav columns */
.site-foot-new__col h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
    letter-spacing: 0
}

.site-foot-new__col a {
    display: block;
    font-size: 0.88rem;
    color: #fff;
    text-decoration: none;
    padding: 5px 0;
    transition: color 0.2s ease, padding-left 0.2s ease
}

.site-foot-new__col a:hover {
    color: #2de0cf;
    padding-left: 4px
}

/* Legal bar */
.site-foot-new__legal {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 20px 0;
    font-size: 0.82rem;
    color: #fff;
    position: relative;
    z-index: 1
}

/* Responsive */
@media(max-width:920px) {
    .site-foot-new__grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px
    }
}

@media(max-width:580px) {
    .site-foot-new__grid {
        grid-template-columns: 1fr;
        gap: 32px
    }
}

/* Hero full-width (no right column) — maintains same height */
.hero--full {
    min-height: 420px;
    display: flex;
    align-items: center
}

.hero-content--wide {
    max-width: 680px
}

.hero-tile-slide--full {
    min-height: 420px;
    display: flex;
    align-items: center;
    padding: 50px 0 60px
}

.hero-tile-slide--full .hero-content--wide {
    max-width: 680px
}

/* Home hero banner: 1920 x 700 proportions, every slide fills the full height */
@media (min-width: 901px) {
    .hero-slider {
        height: clamp(630px, 36.46vw, 700px)
    }

    .hero-slider-track,
    .hero-slide {
        height: 100%
    }

    .hero-slide {
        display: flex
    }

    .hero-slide > .hero,
    .hero-slide > .hero-tile-slide {
        flex: 1;
        width: 100%;
        min-height: 0;
        height: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box
    }

    .hero-slide > .hero > .wrap,
    .hero-slide > .hero-tile-slide > .wrap {
        width: min(1240px, calc(100% - 56px))
    }

    .hero-slide > .hero {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        padding: 56px 0 72px
    }

    .hero-slide > .hero h1 {
        font-size: clamp(2.2rem, 3vw, 3.1rem);
        line-height: 1.1;
        max-width: 820px;
        margin-bottom: 16px
    }

    .hero-slide > .hero .hero-content--wide {
        max-width: 820px
    }

    .hero-slide > .hero .hero-content p {
        max-width: 680px
    }
}

/* Hero paragraphs justified on all screen sizes */
.hero-slide > .hero .hero-content p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: manual
}

@media (min-width: 901px) {

    .hero-slide > .hero .actions {
        margin-top: 24px
    }
}

/* =============================================================================
   INDUSTRIES PAGE — Industry Cards Section
   ============================================================================= */

.ind-cards-section {
    background: #fff;
    padding: 56px 0
}

.ind-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.ind-card {
    background: #fff;
    border: 1px solid #e4ebeb;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease
}

.ind-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
    transform: translateY(-4px);
    border-color: #2de0cf
}

.ind-card__img {
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0
}

.ind-card__body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column
}

.ind-card__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px
}

.ind-card__title-row h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b1c24;
    margin: 0;
    line-height: 1.3
}

.ind-card__title-row svg {
    stroke: #2de0cf;
    flex-shrink: 0;
    transition: transform 0.2s ease
}

.ind-card:hover .ind-card__title-row svg {
    transform: translateX(4px)
}

.ind-card__body > p {
    font-size: 0.88rem;
    color: #64777d;
    line-height: 1.6;
    margin: 0 0 34px
}

.ind-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.ind-card__list li {
    font-size: 0.82rem;
    color: #52666d;
    padding-left: 22px;
    position: relative;
    line-height: 1.4
}

.ind-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232de0cf' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat
}

@media(max-width:920px) {
    .ind-cards-grid {
        grid-template-columns: 1fr
    }

    .ind-card__img {
        height: 180px
    }
}

@media(max-width:620px) {
    .ind-cards-section {
        padding: 40px 0
    }
}

/* =============================================================================
   CONTACT BAND — New Design
   ============================================================================= */

.contact-band-new {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(105deg, rgba(6,21,32,0.92) 0%, rgba(8,50,60,0.88) 45%, rgba(10,70,70,0.75) 100%),
        url('/wp-content/themes/ojasquest/assets/image/5.jpg') center right/cover no-repeat;
    padding: 56px 0;
    width: 100%;
    border-radius: 0
}

.contact-band-new__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap
}

.contact-band-new__content {
    flex: 1;
    min-width: 0
}

.contact-band-new__eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2de0cf;
    margin-bottom: 14px;
    font-family: inherit         /* same font as the heading below it */
}

.contact-band-new__title {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 0 0 16px
}

.contact-band-new__accent {
    color: #2de0cf
}

.contact-band-new__desc {
    font-size: 0.92rem;
    color: #fff;
    line-height: 1.65;
    max-width: 480px;
    margin: 0
}

.contact-band-new__cta {
    flex-shrink: 0
}

.contact-band-new__btn {
    display: inline-block;
    padding: 14px 28px;
    background: #fff;
    color: #061520;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease
}

.contact-band-new__btn:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2)
}

@media(max-width:768px) {
    .contact-band-new__inner {
        flex-direction: column;
        align-items: flex-start
    }
}

/* Hide industries 3-column detail section only */
.ind-grid {
    display: none !important
}

/* Ind card explore button */
.ind-card__explore {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    padding: 14px 28px;
    background: #061520;
    color: #fff;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease
}

.ind-card:hover .ind-card__explore {
    background: #0d3d4a;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2)
}


/* =============================================================================
   SINGLE INDUSTRY PAGE — Banner, Menu | Work Area | Proof, Solution, Optional
   ============================================================================= */
.ind-single-banner {
    padding: 110px 0 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    color: #fff
}

.ind-single-banner__eyebrow {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: #2de0cf;
    margin-bottom: 14px
}

.ind-single-banner h1 {
    font-size: clamp(2.2rem, 5vw, 4rem);
    letter-spacing: -0.03em;
    margin: 0;
    color: #fff
}

.ind-single {
    padding: 48px 0 72px
}

.ind-single h2 {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: #0b1c24;
    margin: 0 0 16px
}

.ind-single__grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 260px;
    gap: 32px;
    align-items: start
}

.ind-single__work {
    min-width: 0
}

.ind-single__block {
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid #e4ebeb;
    scroll-margin-top: 100px
}

.ind-single__block:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0
}

.ind-single__lead {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #0d3b48;
    font-weight: 500;
    margin: 0 0 12px
}

.ind-single__body {
    font-size: 1rem;
    line-height: 1.75;
    color: #52666d
}

.ind-single__caps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px
}

.ind-single__cap {
    border: 1px solid #e4ebeb;
    border-radius: 12px;
    padding: 20px;
    background: #fff;
    scroll-margin-top: 100px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease
}

.ind-single__cap:hover,
.ind-single__cap:target {
    border-color: #2de0cf;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06)
}

.ind-single__cap-num {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #2de0cf
}

.ind-single__cap h3 {
    font-size: 1.05rem;
    margin: 6px 0 8px;
    color: #0b1c24
}

.ind-single__cap p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #64777d;
    margin: 0 0 12px
}

.ind-single__cap-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #0d3b48;
    background: #eef7f7;
    border-radius: 999px;
    padding: 4px 10px
}

.ind-single__row {
    margin-top: 40px;
    background: #fff;
    border: 1px solid #e4ebeb;
    border-radius: 14px;
    padding: 32px 40px;
    scroll-margin-top: 100px
}

.ind-single__row-intro {
    color: #64777d;
    margin: -6px 0 18px
}

.ind-single__solution {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

.ind-single__sol-card {
    background: #f7fafa;
    border-radius: 12px;
    padding: 20px
}

.ind-single__sol-card h3 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #0d3b48;
    margin: 0 0 12px
}

.ind-single__sol-card p {
    font-size: 0.92rem;
    line-height: 1.65;
    color: #52666d;
    margin: 0
}

.ind-single__sol-card .content-list li {
    font-size: 0.9rem
}

.ind-single__optional {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

.ind-single__optional a {
    display: block;
    border: 1px solid #e4ebeb;
    border-radius: 12px;
    padding: 20px;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease
}

.ind-single__optional a:hover {
    border-color: #2de0cf;
    transform: translateY(-2px)
}

.ind-single__optional h3 {
    font-size: 1rem;
    color: #0b1c24;
    margin: 0 0 6px
}

.ind-single__optional p {
    font-size: 0.88rem;
    color: #64777d;
    margin: 0;
    line-height: 1.55
}

@media (max-width: 1100px) {
    .ind-single__grid {
        grid-template-columns: 200px minmax(0, 1fr) 230px;
        gap: 24px
    }

    .ind-single__solution,
    .ind-single__optional {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 768px) {
    .ind-single-banner {
        padding: 80px 0 70px
    }

    .ind-single__grid {
        grid-template-columns: 1fr
    }

    .ind-single__work,
    .ind-single__row {
        padding: 24px 20px
    }

    .ind-single__caps,
    .ind-single__solution,
    .ind-single__optional {
        grid-template-columns: 1fr
    }
}

@media (max-width: 920px) {
    .ind-single__grid {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .ind-single .ind-col1,
    .ind-single .ind-col3 {
        position: static
    }
}

/* Industry banner: headline sized for longer titles */
.single-oq_industry .page-hero h1 {
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    line-height: 1.12;
    max-width: 900px
}

.single-oq_industry .page-hero__description {
    max-width: 760px
}

/* Process Automation — panels, cards, protocol blocks */
.pa-panel { display: none }
.pa-panel.is-active { display: block }

.ind-single__work .pa-title {
    font-size: 2rem;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0 0 16px
}

.pa-lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #0d3b48;
    font-weight: 500;
    margin: 0 0 14px
}

.pa-panel p {
    font-size: 0.97rem;
    line-height: 1.75;
    color: #52666d
}

.pa-panel .pa-lead { color: #0d3b48 }

.pa-panel h3.pa-h {
    font-size: 1.25rem;
    color: #0b1c24;
    margin: 32px 0 14px
}

.pa-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0 0 20px
}

.pa-cards--3 { grid-template-columns: repeat(3, 1fr) }

.pa-card {
    background: #fff;
    border: 1px solid #e4ebeb;
    border-radius: 12px;
    padding: 22px 24px
}

.pa-card h4 {
    font-size: 1.05rem;
    color: #0b1c24;
    margin: 0 0 10px
}

.pa-card p { margin: 0 0 10px }
.pa-card p:last-child { margin-bottom: 0 }

.pa-tools {
    font-size: 0.88rem !important;
    color: #087b73 !important
}

.pa-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px
}

.pa-list li {
    position: relative;
    padding: 5px 0 5px 20px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #52666d
}

.pa-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2de0cf
}

.pa-list li strong { color: #0b1c24 }

.pa-protocols {
    display: grid;
    gap: 16px
}

.pa-proto {
    background: #fff;
    border: 1px solid #e4ebeb;
    border-radius: 12px;
    padding: 24px
}

.pa-proto__num {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #2de0cf
}

.pa-proto h4 {
    font-size: 1.15rem;
    color: #0b1c24;
    margin: 6px 0 10px
}

.pa-proto__label {
    font-size: 0.72rem !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0d3b48 !important;
    margin: 14px 0 6px !important
}

.pa-connect { margin-top: 24px }

.ind-col1__heading--sub { margin-top: 20px }

.pa-proof__gap { margin-top: 22px }

.pa-proof__item {
    display: block;
    padding: 10px 0;
    border-top: 1px solid #e4ebeb;
    font-size: 0.86rem;
    line-height: 1.45;
    font-weight: 600;
    color: #0b1c24;
    text-decoration: none;
    transition: color 0.2s ease
}

.pa-proof__item:hover { color: #087b73 }

@media (max-width: 720px) {
    .pa-cards--3 { grid-template-columns: 1fr }
}

/* Single industry — 3-column matches the Industries page look */
.ind-single {
    background: #ffffff;
    padding: 48px 0 72px
}

.ind-single__grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 260px;
    gap: 32px;
    align-items: start
}

.ind-single__work {
    border: 0;
    border-radius: 0;
    padding: 0
}

.ind-single__eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2de0cf;
    margin-bottom: 10px
}

.ind-single .ind-single__title {
    font-size: 2.4rem;
    letter-spacing: -0.03em;
    margin: 0 0 14px
}

.ind-single__work .ind-single__lead {
    font-size: 1.02rem;
    color: #52666d;
    font-weight: 400
}

.ind-single__work h3 {
    font-size: 1.25rem;
    color: #0b1c24;
    margin: 32px 0 14px
}

.ind-single__work .ind-single__cap {
    background: #fff
}

.ind-single__work .ind-single__cap h4 {
    font-size: 1.02rem;
    margin: 0 0 8px;
    color: #0b1c24
}

.ind-single__row {
    background: #fff
}

@media (max-width: 1100px) {
    .ind-single__grid {
        grid-template-columns: 200px minmax(0, 1fr) 230px;
        gap: 24px
    }
}

@media (max-width: 920px) {
    .ind-single__grid {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .ind-single .ind-col1,
    .ind-single .ind-col3 {
        position: static
    }
}


/* =============================================================================
   ALL HERO BANNERS — same typography as the home page hero
   (monospace eyebrow, Inter heading, justified paragraph, compact buttons)
   ============================================================================= */
.page-hero .eyebrow,
.res-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Courier New', monospace;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #2de0cf;
    margin: 0 0 14px
}

.page-hero h1,
.res-hero__title {
    font-family: inherit;
    font-size: clamp(2.2rem, 3vw, 3.1rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    max-width: 820px;
    margin: 14px 0 18px
}

.page-hero p,
.page-hero__description,
.res-hero__desc {
    font-family: inherit;
    font-size: 0.98rem;
    line-height: 1.6;
    color: #fff;
    max-width: 680px;
    text-align: justify;
    text-justify: inter-word;
    hyphens: manual;
    margin: 0 0 24px
}

.page-hero .btn,
.res-hero__btn {
    font-family: inherit;
    border-radius: 6px;
    padding: 11px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0
}

/* Left-aligned banners everywhere (About and Contact included) */
.page-hero.page-hero--center .container,
body[data-page="company"] .page-hero .container,
body[data-page="about"] .page-hero .container,
.page-template-page-about .page-hero .container,
.page-template-page-templates-page-about-php .page-hero .container {
    text-align: left !important
}

.page-hero.page-hero--center .page-hero__description,
body[data-page="company"] .page-hero__description,
body[data-page="about"] .page-hero__description,
.page-template-page-about .page-hero__description,
.page-template-page-templates-page-about-php .page-hero__description {
    margin-left: 0 !important;
    margin-right: auto !important
}

.page-hero.page-hero--center .page-hero__actions,
body[data-page="company"] .page-hero__actions,
body[data-page="about"] .page-hero__actions,
.page-template-page-about .page-hero__actions,
.page-template-page-templates-page-about-php .page-hero__actions {
    justify-content: flex-start !important
}


/* No dot before hero eyebrow labels */
.hero .eyebrow-dot,
.hero-slide .eyebrow-dot {
    display: none
}

/* Hero eyebrow labels use the same font family as the headings */
.hero .eyebrow,
.hero-slide .eyebrow,
.hero-tile-slide .ht-eyebrow,
.page-hero .eyebrow,
.res-hero__eyebrow {
    font-family: inherit
}

.page-hero p.hero-justify-last,
.res-hero__desc.hero-justify-last {
    text-align-last: justify
}

.res-empty { padding: 32px 0; color: #64777d; font-size: 0.95rem }

/* Resource tiles: cover image is the first page of the uploaded PDF */
.res-card__thumb--cover {
    aspect-ratio: 1 / 1.414;
    width: 44%;
    min-width: 160px;
    max-width: 215px;
    padding: 0;
    background-color: #fff;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat
}

.res-card__title {
    overflow-wrap: anywhere
}

/* Resource tile headings: left-aligned, wrap on spaces, show the full title */
.res-card__title {
    text-align: left;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
    -webkit-line-clamp: 6
}

.res-card__title {
    font-size: 0.95rem;
    line-height: 1.35
}

.res-card__title {
    font-size: 0.86rem
}

/* Process Automation overview image (replaces the text heading) */
.pa-figure {
    margin: 0 0 22px
}

.pa-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px
}

/* Process Automation panels: no extra section padding above the content, so
   the work area starts level with the menu, and the diagram sits right under
   the banner. The image's own white margin is trimmed too. */
.pa-panel {
    padding-top: 0;
    padding-bottom: 0
}

.pa-figure {
    overflow: hidden
}

.pa-figure img {
    margin-top: -2.4%;
    margin-bottom: -3.2%
}

/* Protocol expertise: 4 x 2 logo grid, click a logo to show its details */
.pa-proto-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 0 0 20px
}

.pa-proto-tab {
    background: #fff;
    border: 1px solid #e4ebeb;
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    line-height: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease
}

.pa-proto-tab img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px
}

.pa-proto-tab:hover {
    border-color: #2de0cf;
    transform: translateY(-2px)
}

.pa-proto-tab.is-active {
    border-color: #2de0cf;
    box-shadow: 0 0 0 2px #2de0cf, 0 8px 22px rgba(45, 224, 207, 0.18)
}

.pa-proto-tab:focus-visible {
    outline: 2px solid #087b73;
    outline-offset: 2px
}

.pa-protocols {
    display: block
}

.pa-protocols .pa-proto,
.pa-panel .pa-proto {
    display: none
}

.pa-panel .pa-proto.is-active {
    display: block
}

@media (max-width: 600px) {
    .pa-proto-tabs {
        grid-template-columns: repeat(2, 1fr)
    }
}


/* =============================================================================
   HOME PAGE — Testimonials
   ============================================================================= */
.home-testimonials {
    padding: 64px 0;
    background: #ffffff;
    border-top: 1px solid #e4ebeb
}

.home-testi__head {
    margin: 0 0 36px
}

.home-testi__eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #087b73;
    margin: 0 0 10px
}

.home-testi__title {
    font-size: 2.2rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #0b1c24;
    margin: 0
}

.testi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px
}

.testi-card {
    margin: 0;
    background: #fff;
    border: 1px solid #e4ebeb;
    border-radius: 14px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease
}

.testi-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
    transform: translateY(-2px)
}

.testi-card__mark {
    color: #2de0cf;
    margin: 0 0 16px
}

.testi-card__quote {
    margin: 0 0 24px;
    font-size: 1rem;
    line-height: 1.7;
    color: #0b1c24;
    flex: 1
}

.testi-card__who {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #e4ebeb;
    padding-top: 18px
}

.testi-card__photo,
.testi-card__initials {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0
}

.testi-card__photo {
    object-fit: cover
}

.testi-card__initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef7f6;
    border: 1px solid #d8ebe8;
    color: #087b73;
    font-weight: 700;
    font-size: 0.85rem
}

.testi-card__who strong {
    display: block;
    font-size: 0.95rem;
    color: #0b1c24
}

.testi-card__who em {
    display: block;
    font-style: normal;
    font-size: 0.85rem;
    color: #64777d;
    margin-top: 2px
}

@media (max-width: 600px) {
    .home-testi__title {
        font-size: 1.7rem
    }

    .testi-grid {
        grid-template-columns: 1fr
    }
}

/* =============================================================================
   NAVIGATION MEGA MENUS
   ============================================================================= */
.mega {
    background: #061520;          /* fully opaque so page text never shows through */
    backdrop-filter: none;
    -webkit-backdrop-filter: none
}

.mega-grid--3 {
    grid-template-columns: 1.3fr repeat(2, 1fr)
}

.mega-grid--industries {
    grid-template-columns: 1.1fr repeat(3, 1.2fr);
    gap: 32px
}

.mega b a {
    display: inline;
    padding: 0;
    color: inherit;
    font-size: inherit
}

.mega b a:hover {
    padding-left: 0;
    color: #fff
}

.mega-grid--industries a {
    padding: 7px 0;
    font-size: 0.9rem
}

.mega-grid--industries b {
    margin-bottom: 10px
}

@media (max-width: 1100px) {
    .mega-grid--3,
    .mega-grid--industries {
        grid-template-columns: 1fr
    }
}

/* =============================================================================
   CONTACT PAGE — form and left-hand content are independent columns
   ============================================================================= */
.contact-layout {
    align-items: start;           /* the form card is only as tall as its content */
    gap: 64px
}

.contact-layout .form {
    align-self: start;
    padding: 36px 40px 40px;
    background: #fff;
    display: flex;
    flex-direction: column
}

.contact-layout .form h2 {
    font-size: 1.7rem;
    line-height: 1.2;
    margin: 0 0 22px
}

.contact-layout .form label {
    margin: 16px 0 6px;
    font-size: 0.92rem
}

.contact-layout .form .form-row {
    gap: 16px
}

.contact-layout .form .form-row label {
    margin-top: 0
}

.contact-layout .form input,
.contact-layout .form select,
.contact-layout .form textarea {
    padding: 12px 14px
}

.contact-layout .form textarea {
    min-height: 120px;
    resize: vertical
}

.contact-layout .form .btn {
    align-self: flex-start;
    margin-top: 24px
}

.contact-layout .form .success {
    margin-top: 16px
}

@media (max-width: 900px) {
    .contact-layout {
        gap: 40px
    }

    .contact-layout .form {
        padding: 28px 22px 30px
    }
}

@media (min-width: 901px) {
    .contact-layout .form {
        position: sticky;
        top: 100px
    }
}

/* Contact form: inline validation messages */
.contact-layout .form input.error {
    border-color: #d64545;
    background: #fff8f8
}

.field-error,
.form-error {
    display: none;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #b42323;
    margin-top: 6px
}

.field-error.visible,
.form-error.visible {
    display: block
}

.form-error {
    margin-top: 14px;
    padding: 10px 12px;
    background: #fdecec;
    border-radius: 8px
}


/* Contact form: required-field markers and error state on every control */
.contact-layout .form .req {
    color: #d64545;
    font-weight: 700
}

.contact-layout .form select.error,
.contact-layout .form textarea.error {
    border-color: #d64545;
    background: #fff8f8
}

.contact-layout .form select:invalid {
    color: #6b7f86
}

.contact-layout .form select option {
    color: #0b1c24
}

/* =============================================================================
   MOBILE (phones) — fixes for narrow screens
   ============================================================================= */
@media (max-width: 767px) {

    /* Justified text leaves big word gaps in narrow columns: use left alignment */
    .hero-slide > .hero .hero-content p,
    .page-hero p,
    .page-hero__description,
    .res-hero__desc,
    #main p[style*="justify"] {
        text-align: left !important
    }

    /* Industry pages: the menu is a readable list, not a hidden sideways scroller */
    .ind-single .ind-col1 .side-nav__list {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow: visible;
        gap: 0;
        border-bottom: 0;
        padding-bottom: 0
    }

    .ind-single .ind-col1 .side-nav__item {
        white-space: normal;
        flex-shrink: 1;
        border-radius: 0;
        margin: 0;
        padding: 12px 20px;
        font-size: 0.9rem
    }

    .ind-single__work .pa-title,
    .ind-single .ind-single__title {
        font-size: 1.6rem
    }

    /* Resource tiles: cover on top, text gets the full width */
    .res-card {
        flex-direction: column;
        gap: 16px
    }

    .res-card .res-card__thumb {
        order: -1;
        width: 130px;
        min-width: 0;
        max-width: 130px;
        min-height: 0;
        height: auto;               /* overrides an old 80px strip rule in style.css */
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
        padding: 16px 12px;
        aspect-ratio: 1 / 1.4;
        align-self: flex-start
    }

    .res-card .res-card__thumb--cover {
        padding: 0;
        aspect-ratio: 1 / 1.414
    }

    /* About page: its layout uses inline styles, so override them here */
    body[data-page="company"] #main section[style*="padding: 105px"] {
        padding: 56px 0 !important
    }

    body[data-page="company"] #main h2[style*="font-size"] {
        font-size: clamp(1.7rem, 7.5vw, 2.2rem) !important;
        margin-bottom: 28px !important
    }

    body[data-page="company"] #main [style*="gap: 80px"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding: 48px 0 !important
    }

    body[data-page="company"] #main [style*="repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 18px !important
    }

    body[data-page="company"] #main [style*="repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px 16px !important
    }

    body[data-page="company"] #main .card[style*="padding: 40px 20px"] {
        padding: 26px 14px !important
    }

    body[data-page="company"] #main .card h3[style*="font-size: 2.5rem"] {
        font-size: 2rem !important
    }
}


/* Contact page: pure white background, no grey shadow around the form */
body[data-page="contact"] main,
body[data-page="contact"] main > section:not(.page-hero) {
    background: #ffffff
}

.contact-layout .form {
    background: #ffffff;
    box-shadow: none;
    border: 1px solid #d8e1e2
}

.contact-layout .form:focus-within {
    box-shadow: none
}

.contact-layout .form input,
.contact-layout .form select,
.contact-layout .form textarea {
    background: #ffffff
}

/* Contact page: compact left-hand steps */
.contact-layout > div:first-child > .eyebrow {
    margin-bottom: 10px
}

.contact-layout > div:first-child > h2 {
    margin: 0 0 18px;
    line-height: 1.15
}

.contact-layout .feature {
    padding: 20px 0
}

.contact-layout .feature b {
    display: block;
    font-size: 0.8rem;
    color: #2de0cf;
    letter-spacing: 0.1em
}

.contact-layout .feature h3 {
    font-size: 1.12rem;
    margin: 6px 0 6px
}

.contact-layout .feature p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    text-align: left
}

/* Contact page: one modest layer of spacing above and below the form area */
body[data-page="contact"] #main > section:not(.page-hero) {
    padding-top: 0;
    padding-bottom: 0
}

.contact-layout {
    padding: 40px 0 48px
}

@media (max-width: 900px) {
    .contact-layout {
        padding: 28px 0 36px
    }
}


/* Footer: registered office address */
.site-foot-new__office {
    margin: 0 0 24px;
    max-width: none;
    font-size: 0.85rem;               /* same size as the tagline above it */
    line-height: 1.8;
    font-weight: 400;
    color: #ffffff
}

.site-foot-new__office strong {
    font-weight: 700;
    font-size: inherit
}

/* Home banner: tighter word spacing in the justified paragraphs */
.hero-slide > .hero .hero-content p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    word-spacing: -0.08em;
    letter-spacing: 0
}
@media (min-width: 901px) {
    .hero-slide > .hero .hero-content--wide { max-width: 760px }
    .hero-slide > .hero .hero-content p { max-width: 720px }
}

/* About page: clean line icons */
.about-ico { display: flex; align-items: center; justify-content: center; color: #0a8f8a; background: linear-gradient(145deg, rgba(45,224,207,.20), rgba(45,224,207,.07)); border: 1px solid rgba(10,143,138,.18) }
.about-ico--round { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px }
.about-ico--square { width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 20px }
.about-ico svg { width: 30px; height: 30px }

/* No round arrow badge in the corner of cards */
.card:after, .card:hover:after { content: none !important; display: none !important }

/* ── About: Life at OjasQuest — text on the left, cards that fit their pictures on the right ── */
.lf-sec { padding: 64px 0 56px; background: radial-gradient(900px 420px at 88% -10%, rgba(45,224,207,.16), transparent 60%), linear-gradient(160deg, #061520 0%, #0a2d3a 100%); color: #fff; overflow: hidden }
.lf-grid { display: grid; grid-template-columns: minmax(260px, 0.36fr) minmax(0, 1fr); gap: 48px; align-items: center }
.lf-eyebrow { display: inline-block; color: #2de0cf; font-weight: 700; letter-spacing: .16em; font-size: .8rem; text-transform: uppercase; margin-bottom: 16px }
.lf-copy h2 { color: #fff; font-size: 3.6rem; line-height: 1.05; margin: 0 0 18px; letter-spacing: -.02em }
.lf-copy h2 span { color: #2de0cf }
.lf-copy p { color: rgba(255,255,255,.78); font-size: 1.1rem; line-height: 1.65; margin: 0; max-width: 440px; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; word-spacing: -0.05em }
.lf-viewport { position: relative; overflow: hidden; height: 440px }
.lf-track { position: relative; height: 100% }
.lf-card { position: absolute; left: 0; top: 0; height: 100%; border-radius: 14px; overflow: hidden; cursor: default; background: #061520; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 18px 40px rgba(0,0,0,.35); transition: transform .8s cubic-bezier(.65,0,.25,1), width .3s }
.lf-card.is-video { cursor: pointer }
.lf-card img, .lf-card video { width: 100%; height: 100%; object-fit: cover; display: block }
.lf-card:after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,21,32,.88) 0%, rgba(6,21,32,0) 50%); pointer-events: none }
.lf-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(6,21,32,.55); border: 1.5px solid rgba(255,255,255,.85); backdrop-filter: blur(4px); padding-left: 3px; transition: opacity .25s, transform .25s, background .2s; pointer-events: none }
.lf-card.is-video:hover .lf-play { background: rgba(45,224,207,.85); color: #061520 }
.lf-card.is-playing .lf-play { opacity: 0; transform: scale(.8) }
.lf-info { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; gap: 4px; pointer-events: none }
.lf-num { color: rgba(255,255,255,.7); font-size: .85rem; letter-spacing: .04em }
.lf-num b { color: #2de0cf; font-weight: 700 }
.lf-info strong { font-size: 1.05rem; line-height: 1.25; font-weight: 600; text-shadow: 0 2px 10px rgba(0,0,0,.5) }
.lf-dur { position: absolute; right: 14px; top: 14px; z-index: 2; font-size: .8rem; font-weight: 600; background: rgba(6,21,32,.6); padding: 3px 8px; border-radius: 10px; pointer-events: none }
@media (max-width: 900px) {
  .lf-sec { padding: 44px 0 40px }
  .lf-grid { grid-template-columns: minmax(0, 1fr); gap: 28px }
  .lf-copy h2 { font-size: 2.4rem }
  .lf-copy h2 br { display: none }
  .lf-copy h2 span { margin-left: .25em }
  .lf-copy p { font-size: 1rem; max-width: none }
  .lf-viewport { height: 380px }
}
@media (prefers-reduced-motion: reduce) { .lf-card { transition: none } }

/* Life at OjasQuest: scroll indicators */
.lf-viewport { height: auto }
.lf-dots { display: flex; gap: 10px; justify-content: center; margin-top: 20px }
.lf-dot { position: relative; width: 50px; height: 12px; padding: 0; border: 0; background: none; cursor: pointer }
.lf-dot:after { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25) }
.lf-dot.active:after { background: rgba(45,224,207,.35) }
.lf-dot span { position: absolute; left: 0; top: 4px; z-index: 1; display: block; height: 4px; width: 0; background: #2de0cf; border-radius: 2px }
@media (max-width: 900px) { .lf-dots { justify-content: flex-start } .lf-dot { width: 34px } }

/* Banner slide with a finished picture: shown as it is (no tint); the text keeps to the dark left side */
.hero-slide--plain > .hero { background-color: #04262b }
.hero-slide--plain > .hero .hero-content--wide { max-width: 440px }
.hero-slide--plain > .hero .hero-content p { max-width: 420px }
@media (min-width: 901px) { .hero-slide--plain > .hero .hero-content--wide { max-width: 440px } }
@media (max-width: 900px) {
    /* on narrow screens the words would sit on the pictures: add a tint behind the text only there */
    .hero-slide--plain > .hero { position: relative }
    .hero-slide--plain > .hero:before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,20,24,.9) 0%, rgba(4,20,24,.55) 70%, rgba(4,20,24,.25) 100%); pointer-events: none }
    .hero-slide--plain > .hero .wrap { position: relative; z-index: 1 }
    .hero-slide--plain > .hero .hero-content--wide { max-width: 100% }
}
@media (min-width: 901px) {
    .hero-slide--plain > .hero .hero-content--wide { max-width: clamp(240px, 27vw, 400px) }
    .hero-slide--plain > .hero .hero-content p { max-width: 100% }
}

/* Life at OjasQuest: slightly smaller text under the heading */
.lf-copy p { font-size: 0.98rem; line-height: 1.6 }
@media (max-width: 900px) { .lf-copy p { font-size: 0.95rem } }

/* Hover menus: slightly smaller text */
.mega h3 { font-size: 1.55rem }
.mega p { font-size: 0.87rem }
.mega a { font-size: 0.86rem; padding: 8px 0 }
.mega b, .mega .eyebrow { font-size: 0.68rem }
.mega-grid--industries a { font-size: 0.83rem; padding: 6px 0 }
.mega b a { font-size: inherit; padding: 0 }

/* Hover menus start right at the bottom edge of the header, no gap */
.site-head .mega { top: calc(100% - 1px) }

/* Products page: key capabilities list */
.prod-caps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; max-width: 800px }
.prod-caps li { position: relative; padding: 6px 0 6px 22px; color: #52666d; font-size: 1.02rem; line-height: 1.5 }
.prod-caps li:before { content: ''; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: #2de0cf }
@media (max-width: 720px) { .prod-caps { grid-template-columns: 1fr } }

/* Products page: no line above the first product */
.product-section:first-child { border-top: 0 !important; padding-top: 6px !important }

/* Products page: button at the end of each product */
.prod-cta { margin-top: 26px }

/* "Discuss your requirements" page */
.req-sec { padding: 64px 0 80px; background: linear-gradient(180deg, #f4f8f8 0%, #fff 60%) }
.req-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start }
.req-side { display: flex; flex-direction: column; gap: 32px }
.req-pick { background: linear-gradient(150deg, #061520 0%, #0a2d3a 100%); color: #fff; border-radius: 18px; padding: 30px 32px; box-shadow: 0 24px 60px rgba(6,21,32,.28); position: relative; overflow: hidden }
.req-pick:before { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(45,224,207,.28), transparent 70%) }
.req-pick__label { display: block; color: #2de0cf; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; position: relative }
.req-pick__name { display: block; font-size: 1.7rem; line-height: 1.2; font-weight: 700; margin-bottom: 10px; position: relative }
.req-pick__text { color: rgba(255,255,255,.8); font-size: .98rem; line-height: 1.6; margin: 0; position: relative }
.req-pick__caps { list-style: none; padding: 0; margin: 16px 0 0; display: none; position: relative }
.req-pick.is-set .req-pick__caps { display: block }
.req-pick__caps li { position: relative; padding: 5px 0 5px 20px; color: rgba(255,255,255,.92); font-size: .93rem }
.req-pick__caps li:before { content: ''; position: absolute; left: 2px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: #2de0cf }
.req-steps__eyebrow { display: block; color: #0a8f8a; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px }
.req-steps h3 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 18px; color: #0b1c24 }
.req-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px }
.req-steps li { display: flex; gap: 16px; align-items: flex-start }
.req-steps li b { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(45,224,207,.16); color: #0a8f8a; font-size: .9rem }
.req-steps li strong { display: block; color: #0b1c24; margin-bottom: 2px }
.req-steps li span { color: #566b72; font-size: .95rem; line-height: 1.55 }
.req-form { position: relative; top: 0 }
.req-form .req-form__note { color: #566b72; font-size: .9rem; margin: -10px 0 4px }
.contact-layout.req-layout .form .btn { align-self: stretch; width: 100%; margin-top: 26px; padding: 15px 24px; border-radius: 10px; text-align: center; font-size: 1rem }
@media (max-width: 900px) {
  .req-sec { padding: 40px 0 56px }
  .req-layout { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .req-form { order: -1 }
  .req-pick { padding: 24px 22px }
}

/* Industry pages: larger "Related resources" card that shows the first page of each paper */
.ind-single__grid { grid-template-columns: 220px minmax(0, 1fr) 320px }
.ind-single .ind-col3 { padding: 26px 24px 22px }
.ind-single .ind-proof-track { min-height: 330px }
.ind-single .ind-proof-card { gap: 8px }
.ind-single .ind-proof-card__type { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #0a8f8a; font-weight: 700 }
.ind-single .ind-proof-card__title { font-size: 1.02rem; margin: 2px 0 6px }
.ind-proof-card__cover { display: block; width: 62%; margin: 4px 0 8px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 10px 26px rgba(11,28,36,.18); border: 1px solid #e4ebeb }
.ind-proof-card__cover img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top }
@media (max-width: 1100px) { .ind-single__grid { grid-template-columns: 200px minmax(0, 1fr) 280px } }
@media (max-width: 920px) { .ind-single__grid { grid-template-columns: 1fr } .ind-proof-card__cover { width: 200px } .ind-single .ind-proof-track { min-height: 0 } }
.ind-single .ind-proof-card__cover { width: 58%; margin: 0 0 8px }
.ind-single .ind-proof-card__icon { margin-bottom: 8px }

/* Related resources: text on the left, the paper's first page on the right */
.ind-single .ind-proof-card.active { display: grid; grid-template-columns: minmax(0, 1fr) 40%; column-gap: 16px; align-content: start }
.ind-single .ind-proof-card__cover, .ind-single .ind-proof-card__icon { grid-column: 2; grid-row: 1 / span 4; width: 100%; margin: 0; align-self: start }
.ind-single .ind-proof-card__icon { font-size: 2.6rem; text-align: center }
.ind-single .ind-proof-card__type { grid-column: 1; grid-row: 1; align-self: start }
.ind-single .ind-proof-card__title { grid-column: 1; grid-row: 2; font-size: .98rem; margin: 4px 0 12px }
.ind-single .ind-proof-card__badge { grid-column: 1; grid-row: 3; align-self: start; justify-self: start }
.ind-single .ind-proof-track { min-height: 250px }
@media (max-width: 920px) { .ind-single .ind-proof-card__cover { width: 100% } .ind-single .ind-proof-card.active { grid-template-columns: minmax(0, 1fr) 150px } }
@media (min-width: 1101px) {
    .ind-single__grid { grid-template-columns: 200px minmax(0, 1fr) 390px }
    .ind-single .ind-proof-card.active { grid-template-columns: minmax(0, 1fr) 44% }
    .ind-single .ind-proof-card__title { font-size: 1rem }
}
@media (min-width: 921px) and (max-width: 1100px) { .ind-single__grid { grid-template-columns: 190px minmax(0, 1fr) 330px } }

/* Related resources: long words in a title wrap inside the text column and never run under the cover */
.ind-single .ind-proof-card__title, .ind-single .ind-proof-card__type { min-width: 0; overflow-wrap: anywhere; word-break: break-word; hyphens: auto }
.ind-single .ind-proof-card__title { font-size: .95rem }

/* Related resources: compact, evenly spaced titles */
.ind-single .ind-proof-card__title { font-size: .9rem; line-height: 1.35; letter-spacing: 0; word-spacing: normal; text-align: left; overflow-wrap: break-word; word-break: normal; hyphens: manual; margin: 4px 0 12px }
.ind-single .ind-proof-card__type { font-size: .74rem; overflow-wrap: break-word; word-break: normal; hyphens: manual }

/* Access form (white papers, case studies, articles): compact, always fits the screen */
.wp-gate-overlay { padding: 14px; align-items: center }
.wp-gate-modal { max-width: 440px; padding: 24px 28px 22px; max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); overflow-y: auto; overscroll-behavior: contain }
.wp-gate-form-body { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center }
.wp-gate-form-body > * { grid-column: 1 / -1 }
.wp-gate-form-body > .wp-gate-icon { grid-column: 1; grid-row: 1; width: 40px; height: 40px; margin: 0 }
.wp-gate-form-body > h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.15rem }
.wp-gate-resource-title { margin: 14px 0 14px; padding: 8px 12px; font-size: .84rem; line-height: 1.4 }
.wp-gate-modal label { margin-bottom: 4px; font-size: .82rem }
.wp-gate-modal input { padding: 9px 12px; margin-bottom: 10px; font-size: .92rem }
.wp-gate-error { margin: -6px 0 10px }
.wp-gate-submit { padding: 11px 18px; margin-top: 2px }
.wp-gate-note { margin: 10px 0 0; font-size: .74rem }
.wp-gate-close { top: 10px; right: 10px }
@media (max-height: 640px) { .wp-gate-modal { padding: 18px 22px 16px } .wp-gate-resource-title { margin: 10px 0 } .wp-gate-modal input { padding: 8px 12px; margin-bottom: 8px } }

/* Products page: each product fits on one screen when chosen from the side menu */
.product-section { scroll-margin-top: 76px; padding: 22px 0 22px !important }
.product-section > h2 { font-size: 2.05rem !important; margin: 8px 0 10px !important }
.product-section .prod-cta { margin-top: 18px }
.product-section > p { margin-bottom: 8px }
.product-section h3 { margin: 18px 0 8px !important }
.prod-caps li { padding: 4px 0 4px 22px; font-size: .98rem }
.prod-caps li:before { top: 12px }

/* "Life at OjasQuest" banner slide: the text always stops before the photo collage, on laptops and wide monitors.
   The collage starts about 36% across the screen; the text column starts where the page content starts. */
@media (min-width: 901px) {
    .hero-slide--plain > .hero .hero-content--wide {
        max-width: max(220px, calc(36vw - max(32px, (100vw - 1242px) / 2) - 28px))
    }
    .hero-slide--plain > .hero .hero-content p { max-width: 100% }
}

/* Life at OjasQuest: no counter numbers on the cards and no indicator bars under the row */
.lf-num { display: none !important }
.lf-dots { display: none !important }

/* SPS 2026 visitor pass request page */
.sps-sec { padding: 56px 0 80px; background: linear-gradient(180deg, #f4f8f8 0%, #fff 55%) }
.sps-form { max-width: 880px; margin: 0 auto; padding: 40px 44px 44px; background: #fff; display: block }
.sps-form h2 { font-size: 1.9rem; margin: 0 0 6px }
.sps-note { color: #566b72; font-size: .92rem; margin: 0 0 26px }
.sps-group { border: 0; border-top: 1px solid #e1e9ea; margin: 0 0 8px; padding: 22px 0 8px; min-width: 0 }
.sps-group legend { padding: 0 12px 0 0; font-size: 1.12rem; font-weight: 700; color: #0b1c24; float: left; width: 100%; margin-bottom: 16px }
.sps-group legend + * { clear: both }
.sps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px }
.sps-field { margin-bottom: 16px; min-width: 0 }
.sps-field label, .sps-q { display: block; font-weight: 600; font-size: .92rem; margin: 0 0 6px; color: #0b1c24 }
.sps-field input[type="text"], .sps-field input[type="email"], .sps-field input[type="tel"], .sps-field input[type="date"], .sps-field input[type="number"], .sps-field input[type="datetime-local"], .sps-field select, .sps-field textarea { width: 100%; padding: 12px 14px; box-sizing: border-box }
.sps-field textarea { min-height: 110px; resize: vertical }
.sps-radios { display: flex; gap: 26px }
.sps-radio { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 500 !important; margin: 0 !important; cursor: pointer }
.sps-radio input { width: 18px; height: 18px; accent-color: #0a8f8a; margin: 0 }
.sps-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; margin-bottom: 14px }
.sps-check { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border: 1px solid #d5e0e1; border-radius: 10px; cursor: pointer; font-weight: 500; font-size: .95rem; line-height: 1.4; background: #fbfdfd; transition: border-color .2s, background .2s }
.sps-check:hover { border-color: #2de0cf }
.sps-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #0a8f8a; flex: 0 0 auto }
.sps-check--wide { margin-bottom: 10px }
.sps-other { margin-top: 4px }
.sps-form .btn { width: 100%; margin-top: 22px; padding: 15px 24px; border-radius: 10px; text-align: center; font-size: 1.02rem }
.sps-form .success { margin-top: 16px }
.sps-consent .field-error { margin: -4px 0 10px }
@media (max-width: 720px) {
  .sps-form { padding: 26px 20px 30px }
  .sps-grid, .sps-checks { grid-template-columns: 1fr }
}

/* SPS visitor pass form: smaller overall size and text */
.sps-sec { padding: 40px 0 56px }
.sps-form { max-width: 700px; padding: 28px 32px 30px }
.sps-form h2 { font-size: 1.45rem }
.sps-note { font-size: .8rem; margin-bottom: 16px }
.sps-group { padding: 14px 0 4px }
.sps-group legend { font-size: .98rem; margin-bottom: 10px }
.sps-grid { gap: 0 16px }
.sps-field { margin-bottom: 11px }
.sps-field label, .sps-q { font-size: .8rem; margin-bottom: 4px }
.sps-field input[type="text"], .sps-field input[type="email"], .sps-field input[type="tel"], .sps-field input[type="date"], .sps-field input[type="number"], .sps-field input[type="datetime-local"], .sps-field select, .sps-field textarea { padding: 8px 11px; font-size: .86rem }
.sps-field textarea { min-height: 80px }
.sps-radios { gap: 20px }
.sps-radio { font-size: .86rem }
.sps-radio input, .sps-check input { width: 15px; height: 15px }
.sps-checks { gap: 8px 14px; margin-bottom: 10px }
.sps-check { padding: 8px 11px; font-size: .84rem; gap: 8px }
.sps-form .btn { padding: 12px 20px; font-size: .92rem; margin-top: 16px }
.sps-form .field-error { font-size: .76rem }
@media (max-width: 720px) { .sps-form { padding: 20px 16px 24px } }

/* SPS visitor pass form: wider, three columns, so it needs far less scrolling */
.sps-form { max-width: 1100px; padding: 26px 36px 28px }
.sps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.sps-checks { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.sps-consent .sps-checks { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.sps-consent .sps-check--wide { margin-bottom: 0 }
.sps-consent .field-error { margin: 0 0 8px }
.sps-field textarea { min-height: 64px }
.sps-form .btn { max-width: 340px; display: block; margin-left: auto; margin-right: auto }
@media (max-width: 1000px) { .sps-grid, .sps-checks { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px) { .sps-grid, .sps-checks, .sps-consent .sps-checks { grid-template-columns: 1fr } .sps-form { padding: 20px 16px 24px } }
@media (min-width: 1001px) {
    .sps-form { max-width: 1180px }
    .sps-group:first-of-type .sps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) }
    .sps-group:nth-of-type(3) .sps-checks { grid-template-columns: repeat(3, minmax(0, 1fr)) }
    .sps-group:nth-of-type(2) .sps-grid, .sps-group:nth-of-type(4) .sps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start }
}
.sps-check { padding: 6px 10px }
.sps-group { padding: 10px 0 2px }
.sps-sec { padding: 28px 0 44px }


/* Visitor pass form: compact submit button */
.sps-form .btn { width: auto !important; max-width: none !important; min-width: 190px; display: inline-block !important; margin: 16px 0 0 !important; padding: 11px 28px !important; font-size: .9rem !important }

/* Visitor pass form: small, compact type and controls */
.sps-form { padding: 20px 26px 22px; font-size: 13px }
.sps-form h2 { font-size: 1.2rem; margin-bottom: 2px }
.sps-note { font-size: .7rem; margin-bottom: 8px }
.sps-group { padding: 8px 0 0 }
.sps-group legend { font-size: .86rem; margin-bottom: 6px }
.sps-grid { gap: 0 12px }
.sps-field { margin-bottom: 7px }
.sps-field label, .sps-q { font-size: .7rem; margin-bottom: 3px }
.sps-field input[type="text"], .sps-field input[type="email"], .sps-field input[type="tel"], .sps-field input[type="date"], .sps-field input[type="number"], .sps-field input[type="datetime-local"], .sps-field select, .sps-field textarea { padding: 6px 9px; font-size: .76rem; border-radius: 7px; min-height: 0; height: auto }
.sps-field textarea { min-height: 52px }
.sps-radio { font-size: .76rem; gap: 6px }
.sps-radio input, .sps-check input { width: 13px; height: 13px }
.sps-checks { gap: 6px 10px; margin-bottom: 6px }
.sps-check { padding: 5px 9px; font-size: .74rem; gap: 7px; border-radius: 8px; line-height: 1.3 }
.sps-form .field-error { font-size: .68rem; margin-top: 3px }
.sps-form .btn { padding: 9px 22px !important; font-size: .8rem !important; min-width: 160px; margin-top: 10px !important }
.sps-form .success { font-size: .8rem }

/* Resources banner: the button uses the solid teal style */
.res-hero__btn--outline { background: #2de0cf !important; color: #061520 !important; border: 0 !important }
.res-hero__btn--outline:hover { background: #26c9ba !important; color: #061520 !important; transform: translateY(-2px) }
.site-foot-new__office { margin-bottom: 16px }
.site-foot-new__office:last-of-type { margin-bottom: 24px }

/* Footer: the three office addresses sit in one slim row under the columns */
.site-foot-new__offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 40px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14) }
.site-foot-new__offices .site-foot-new__office { margin: 0 !important; font-size: .74rem; line-height: 1.55; color: rgba(255,255,255,.88) }
.site-foot-new__offices .site-foot-new__office strong { color: #fff; font-size: inherit }
@media (max-width: 900px) { .site-foot-new__offices { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; padding-top: 14px } }

/* Footer: no divider lines, tighter spacing */
.site-foot-new__offices { border-top: 0 !important; margin-top: 14px !important; padding-top: 0 !important }
.site-foot-new__legal { border-top: 0 !important; padding: 10px 0 14px !important }
.site-foot-new__inner { padding: 44px 0 14px !important }
@media (max-width: 900px) { .site-foot-new__offices { margin-top: 10px !important } }

/* Footer: logo | three link columns | Our Offices (the three addresses stacked in the last column) */
.site-foot-new__offices { display: none !important }
@media (min-width: 1001px) {
    .site-foot-new__grid { grid-template-columns: 1.15fr 1fr .8fr .8fr 1.75fr; gap: 36px }
}
.site-foot-new__col--offices .site-foot-new__office { margin: 0 0 12px !important; font-size: .78rem; line-height: 1.55; color: rgba(255,255,255,.88); max-width: none }
.site-foot-new__col--offices .site-foot-new__office:last-child { margin-bottom: 0 !important }
.site-foot-new__col--offices .site-foot-new__office strong { display: block; color: #fff; font-size: .8rem; margin-bottom: 1px }
.site-foot-new__inner { padding: 52px 0 24px !important }
@media (max-width: 1000px) and (min-width: 701px) { .site-foot-new__grid { grid-template-columns: 1fr 1fr; gap: 32px } .site-foot-new__col--offices { grid-column: 1 / -1 } }
@media (min-width: 1001px) { .site-foot-new__grid { grid-template-columns: 1.1fr .95fr .75fr .75fr 2.3fr } }
.site-foot-new__col--offices .site-foot-new__office { font-size: .74rem; line-height: 1.5; margin-bottom: 9px !important }
.site-foot-new__col--offices .site-foot-new__office strong { display: inline; font-size: inherit; margin: 0 4px 0 0 }
.site-foot-new__col--offices .site-foot-new__office br { display: none }

/* Footer: compact, evenly aligned link columns */
.site-foot-new__col h4 { font-size: .9rem; margin: 0 0 12px; line-height: 1.2 }
.site-foot-new__col a { font-size: .8rem; padding: 3px 0; line-height: 1.35; white-space: nowrap }
@media (min-width: 1001px) {
    .site-foot-new__grid { grid-template-columns: 1fr 1.2fr 1fr .8fr 2.1fr; gap: 28px; align-items: start }
}
.site-foot-new__brand-col { padding-top: 2px }
.site-foot-new__inner { padding: 40px 0 16px !important }
.site-foot-new__col--offices .site-foot-new__office { font-size: .74rem; margin-bottom: 8px !important }
.site-foot-new__col--offices a, .site-foot-new__col--offices { white-space: normal }

/* Footer: a little more height (more space above and below, same alignment) */
.site-foot-new__inner { padding: 56px 0 32px !important }
.site-foot-new__legal { padding: 14px 0 20px !important }

/* Footer logo: the full OjasQuest logo with its tagline (picture), transparent so the footer colour shows */
.site-foot-new__logo { height: auto !important; width: 215px !important; max-width: 100%; margin: 0 0 18px !important; display: block; background: transparent !important; object-fit: contain }
.site-foot-new__brand-col { padding-top: 0 }

/* Footer logo: the OjasQuest lettering is the same size as in the header (about 149 px wide) */
.site-foot-new__logo { width: 149px !important }

/* Services page: written text of each service (headings, paragraphs, lists) */
.svc-body { max-width: 860px; margin-top: 6px }
.svc-body p { font-size: 1.02rem; line-height: 1.75; color: #3f565d; margin: 0 0 14px; text-align: justify; text-justify: inter-word; hyphens: auto }
.svc-body h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 700; color: #0b1c24; margin: 30px 0 10px; padding-left: 14px; border-left: 3px solid #2de0cf }
.svc-body > h3:first-child { margin-top: 12px }
.svc-body ul { list-style: none; margin: 4px 0 14px; padding: 0 }
.svc-body li { position: relative; padding: 5px 0 5px 22px; color: #3f565d; font-size: 1rem }
.svc-body li:before { content: ''; position: absolute; left: 2px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: #2de0cf }

/* Services page: no line above the first service */
.capability-section:first-child { border-top: 0 !important; padding-top: 6px !important }

/* Banner text: words are never split across two lines (no "peo-ple") */
.hero-slide > .hero .hero-content p { hyphens: manual !important; -webkit-hyphens: manual !important }
.hero-slide--plain > .hero .hero-content p { text-align: left !important; word-spacing: normal !important }

/* Header button: colour #035d5d with white text */
.head-cta { background: #035d5d !important; color: #fff !important }
.head-cta:hover { background: #047373 !important; color: #fff !important; box-shadow: 0 4px 12px rgba(3, 93, 93, 0.45) }
.head-cta { font-size: 0.78rem !important; padding: 8px 16px !important }

/* Careers page */
.career-sec { padding: 64px 0 }
.career-sec--alt { background: #f4f8f8 }
.career-h2 { font-size: 2.2rem; margin: 0 0 30px; color: #0b1c24 }
.career-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
.career-why { padding: 30px 28px !important }
.career-why:after { content: none !important; display: none !important }
.career-why__n { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(45,224,207,.16); color: #0a8f8a; font-size: .95rem; margin-bottom: 16px }
.career-why h3 { font-size: 1.3rem; margin: 0 0 10px }
.career-why p { color: #566b72; line-height: 1.7; margin: 0 }
.career-jobs { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px }
.career-job { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #fff; border: 1px solid #dbe5e6; border-radius: 14px; padding: 22px 26px }
.career-job h3 { font-size: 1.2rem; margin: 0 0 4px }
.career-job__meta { display: block; color: #0a8f8a; font-size: .85rem; font-weight: 600; margin-bottom: 6px }
.career-job p { color: #566b72; margin: 0; line-height: 1.6 }
.career-empty { max-width: 720px; color: #566b72; font-size: 1.08rem; line-height: 1.7; margin: 0 0 24px }
.career-cta { margin: 0 0 18px }
.career-life { margin: 12px 0 0; color: #566b72 }
.career-life a { color: #0a8f8a; font-weight: 600 }
@media (max-width: 900px) { .career-sec { padding: 40px 0 } .career-why-grid { grid-template-columns: 1fr } .career-job { flex-direction: column; align-items: flex-start } .career-h2 { font-size: 1.7rem } }

/* Careers: job list, job page, application form */
.career-job__main h3 a { color: inherit; text-decoration: none }
.career-job__main h3 a:hover { color: #0a8f8a }
.career-job__btns { display: flex; gap: 10px; flex: 0 0 auto }
.career-job__btns .btn { padding: 10px 20px; font-size: .88rem }
.career-form { max-width: 820px !important }
.career-form .career-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
.career-form input[type="file"] { padding: 8px 10px; background: #fff; width: 100%; box-sizing: border-box }
.job-detail__body { line-height: 1.75; color: #3f565d }
.job-detail__body h2, .job-detail__body h3 { color: #0b1c24; margin: 28px 0 10px }
.job-detail__body ul { padding-left: 20px }
.job-detail__apply { margin-top: 32px }
@media (max-width: 720px) { .career-job__btns { width: 100% } .career-form .career-grid { grid-template-columns: 1fr !important } }

/* Phone menu: the panel drops down right under the header when the three-line button is tapped */
.mobile-panel { position: absolute !important; top: 100% !important; left: 0; right: 0; bottom: auto !important; transform: none !important; transition: none !important; background: #061520; padding: 6px 20px 22px !important; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; box-shadow: 0 18px 30px rgba(0,0,0,.35); border-top: 1px solid rgba(255,255,255,.08) }
.mobile-panel.open { display: grid !important }
.mobile-panel a { display: block; padding: 14px 4px !important; color: #fff !important; font-weight: 600; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,.1) !important }
.mobile-panel a:last-child { margin-top: 16px; border: 0 !important; border-radius: 8px; background: #035d5d; text-align: center; padding: 13px 16px !important }
@media (min-width: 901px) { .mobile-panel, .mobile-panel.open { display: none !important } }

/* "Life at OjasQuest" slide on phones and tablets: the photo collage fills the top, the words sit below it on a plain dark panel */
@media (max-width: 900px) {
    .hero-slide--plain > .hero {
        background-size: 0 0 !important;          /* the picture is drawn by the :before block below */
        background-color: #04262b !important;
        position: relative !important;
        padding-top: calc(60vw + 22px) !important;
        padding-bottom: 36px !important;
        min-height: 0 !important;
        align-items: flex-start !important
    }
    .hero-slide--plain > .hero:before {
        display: block !important;
        content: '' !important;
        position: absolute !important;
        left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
        width: auto !important;
        border: 0 !important; border-radius: 0 !important; transform: none !important; opacity: 1 !important;
        height: 60vw !important;
        background: none !important;
        background-image: inherit !important;
        background-size: var(--lao-size, 160%) auto !important;    /* zoomed in on the collage */
        background-position: var(--lao-pos, 94% 48%) !important;
        background-repeat: no-repeat !important;
        background-color: #04262b !important;
        pointer-events: none
    }
}

/* Home banner: every slide's picture runs to the bottom edge of the banner (no darker strip under the dots) */
.hero-slide { display: flex !important }
.hero-slide > .hero { flex: 1 1 auto !important; width: 100% !important; min-height: 0 }

/* Related resources: the card type label (Article / White paper / Case study) is not shown */
.ind-proof-card__type { display: none !important; }

/* Related resources: a card with a cover picture shows the picture only (full width), with its button below */
.ind-proof-card:has(.ind-proof-card__cover) .ind-proof-card__title { display: none !important; }
.ind-single .ind-proof-card.active:has(.ind-proof-card__cover) { display: flex; flex-direction: column; align-items: flex-start; gap: 12px }
.ind-single .ind-proof-card:has(.ind-proof-card__cover) .ind-proof-card__cover { width: 100%; max-width: 420px; margin: 0 auto }
.ind-single .ind-proof-card:has(.ind-proof-card__cover) .ind-proof-card__badge { align-self: flex-start }

/* Related resources: shorter cover picture */
.ind-single .ind-proof-card:has(.ind-proof-card__cover) .ind-proof-card__cover { max-width: 230px !important }
.ind-single .ind-proof-track { min-height: 0 !important }

/* Related resources: the "View ..." button sits in the middle of the card */
.ind-single .ind-proof-card .ind-proof-card__badge,
.ind-single .ind-proof-card:has(.ind-proof-card__cover) .ind-proof-card__badge { align-self: center !important; justify-self: center !important; margin-left: auto; margin-right: auto }

/* Related resources: a more compact box */
.ind-single .ind-col3 { padding: 16px 18px 14px !important }
.ind-single .ind-col3__heading { margin-bottom: 10px !important }
.ind-single .ind-proof-card:has(.ind-proof-card__cover) .ind-proof-card__cover { max-width: 172px !important }
.ind-single .ind-proof-card.active:has(.ind-proof-card__cover) { gap: 8px !important }
.ind-single .ind-proof-card__cover img { aspect-ratio: 3 / 4 }
.ind-single .ind-proof-card__badge { padding: 6px 12px !important; font-size: .78rem !important }
.ind-single .ind-proof-dots { margin: 10px 0 8px !important }
.ind-single .ind-col3__all-link { font-size: .85rem }

/* Services page: Related Resources box on the right (same look as on the industry pages) */
@media (min-width: 1101px) {
    .detail.detail--rel { grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 32px; align-items: start }
}
@media (max-width: 1100px) {
    .detail.detail--rel .svc-rel { position: static; margin-top: 8px }
}
.svc-rel { padding: 16px 18px 14px !important; min-width: 0 }
.svc-rel .ind-col3__heading { margin-bottom: 10px }
.svc-rel .ind-proof-track { min-height: 0 }
.svc-rel .ind-proof-card.active { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center }
.svc-rel .ind-proof-card__cover { display: block; width: 100%; max-width: 172px; margin: 0 auto; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 10px 26px rgba(11,28,36,.18); border: 1px solid #e4ebeb }
.svc-rel .ind-proof-card__cover img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top }
.svc-rel .ind-proof-card__icon { font-size: 2.6rem; margin-top: 4px }
.svc-rel .ind-proof-card__title { font-size: .9rem; line-height: 1.35; margin: 0; color: #0b1c24; overflow-wrap: break-word }
.svc-rel .ind-proof-card .ind-proof-card__badge { align-self: center; padding: 6px 12px; font-size: .78rem }
.svc-rel .ind-proof-dots { margin: 10px 0 8px }
.svc-rel .ind-col3__all-link { font-size: .85rem }

/* Top menu: the item of the current page looks like the hovered one */
.nav-trigger.is-current { color: #008080 !important }

/* A single resource page (case study, article, white paper, webinar) */
.res-detail__body { line-height: 1.75; color: #3f565d; font-size: 1.04rem }
.res-detail__body h3 { font-size: 1.35rem; color: #0b1c24; margin: 34px 0 10px; padding-left: 14px; border-left: 3px solid #2de0cf }
.res-detail__body > h3:first-child { margin-top: 0 }
.res-detail__body ul { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 28px }
.res-detail__body li { position: relative; padding: 6px 0 6px 22px }
.res-detail__body li:before { content: ''; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: #2de0cf }
.res-detail__body p { margin: 0 0 14px }
.res-detail__back { margin: 34px 0 0 }
.res-detail__back a { color: #0a8f8a; font-weight: 600; text-decoration: none }
@media (max-width: 720px) { .res-detail__body ul { grid-template-columns: 1fr } }
.res-detail__body ul.long { grid-template-columns: 1fr }

/* Resources page: a single row of three cards that moves along when there are more */
.res-car { overflow: hidden; margin: -12px; padding: 12px }
.res-cards-grid--car { display: flex !important; grid-template-columns: none !important; gap: 24px !important; flex-wrap: nowrap }
.res-cards-grid--car > .res-card { flex: 0 0 calc((100% - (var(--cols, 3) - 1) * 24px) / var(--cols, 3)); min-width: 0 }

/* Case study cards: "Read case study" is a solid teal button */
.res-panel[data-content="casestudies"] .res-read-link {
    display: inline-block; align-self: flex-start; width: auto;
    background: #2de0cf; color: #061520; font-weight: 700; font-size: .9rem;
    padding: 10px 22px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer;
    transition: background .2s ease, transform .2s ease
}
.res-panel[data-content="casestudies"] .res-read-link:hover { background: #26c9ba; color: #061520; transform: translateY(-1px) }

/* Resources page: every "Read ..." / "Watch ..." link is the solid teal pill button */
.res-panel .res-read-link {
    display: inline-block; align-self: flex-start; width: auto;
    background: #2de0cf !important; color: #061520 !important; font-weight: 700; font-size: .95rem;
    padding: 12px 26px !important; border-radius: 999px !important; text-decoration: none; border: 0; cursor: pointer;
    transition: background .2s ease, transform .2s ease
}
.res-panel .res-read-link:hover { background: #26c9ba !important; color: #061520 !important; transform: translateY(-1px) }

/* Resources page buttons: smaller */
.res-panel .res-read-link { padding: 8px 18px !important; font-size: .82rem !important; line-height: 1.3 }

/* Case study pictures are square */
.res-panel[data-content="casestudies"] .res-card__thumb { aspect-ratio: 1 / 1 !important; height: auto !important; align-self: flex-start }
.ind-proof-card[data-heading="Case study"] .ind-proof-card__cover img { aspect-ratio: 1 / 1 !important }

/* Hover menus: a short intro with one link on the left, tidy link lists with a line of description on the right */
.mega .mega-cta { display: inline-block; margin-top: 16px; padding: 0; color: #2de0cf; font-weight: 700; font-size: .85rem }
.mega .mega-cta:hover { color: #fff; padding-left: 0 }
.mega a .mega-link__t { display: block; color: #fff; font-weight: 600 }
.mega a .mega-link__d { display: block; color: rgba(255,255,255,.62); font-size: .76rem; font-weight: 400; line-height: 1.4; margin-top: 2px }
.mega a:hover .mega-link__t { color: #2de0cf }
.mega-grid--1 { grid-template-columns: 1.3fr 1fr !important }
.mega p { max-width: 360px }

/* The page you are on is marked, but never at the same time as the item you are pointing at */
.desktop-nav:hover .has-mega:not(:hover) > .nav-trigger.is-current { color: #fff !important }

/* Industries hover menu: an intro on the left, then three equal columns separated by thin lines; industry names in teal, their sections in plain text */
.mega-grid--industries { grid-template-columns: minmax(230px, 1fr) repeat(3, minmax(0, 1.2fr)) !important; gap: 0 !important; align-items: start }
.mega-grid--industries > div:first-child { padding-right: 32px }
.mega-grid--industries > div:not(:first-child) { padding: 0 26px; border-left: 1px solid rgba(255,255,255,.12) }
.mega-grid--industries b { margin-bottom: 14px !important; font-size: .74rem; letter-spacing: .12em }
.mega-grid--industries a { padding: 6px 0 !important; font-size: .86rem !important; line-height: 1.35 }
.mega-grid--industries a .mega-link__t { font-weight: 400 !important; color: rgba(255,255,255,.88) }
.mega-grid--industries a:hover .mega-link__t { color: #2de0cf }
.mega-grid--industries b a { padding: 0 !important }
.mega-grid--industries b a .mega-link__t { font-weight: 700 !important; color: #2de0cf }
.mega-grid--industries b { font-size: .68rem !important; letter-spacing: .08em !important; white-space: nowrap; line-height: 1.3 }
.mega-grid--industries b a { white-space: nowrap }

/* Case study pages: tags, key figures, summary grid, scope columns, numbered steps, cards, technology table */
.res-detail__body .cs-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px }
.res-detail__body .cs-tags span { background: rgba(45,224,207,.14); color: #0a6f6a; font-weight: 700; font-size: .82rem; padding: 6px 14px; border-radius: 999px }
.res-detail__body .cs-meta { color: #566b72; font-size: .95rem; margin: 0 0 24px }
.res-detail__body .cs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 8px }
.res-detail__body .cs-stats div { background: #061520; border-radius: 14px; padding: 22px 18px; text-align: center }
.res-detail__body .cs-stats b { display: block; color: #2de0cf; font-size: 2.2rem; line-height: 1.1; font-weight: 800 }
.res-detail__body .cs-stats span { display: block; color: rgba(255,255,255,.82); font-size: .88rem; margin-top: 6px }
.res-detail__body .cs-glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 8px 0 0; border-top: 1px solid #dbe5e6 }
.res-detail__body .cs-glance > div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid #dbe5e6 }
.res-detail__body .cs-glance dt { color: #0a8f8a; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em }
.res-detail__body .cs-glance dd { margin: 0; color: #0b1c24; font-weight: 500 }
.res-detail__body .cs-quote { margin: 20px 0 0; padding: 20px 26px; background: #f2f8f8; border-left: 4px solid #2de0cf; border-radius: 0 12px 12px 0; font-size: 1.12rem; font-style: italic; color: #0b1c24 }
.res-detail__body .cs-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 12px }
.res-detail__body .cs-scope > div { background: #fff; border: 1px solid #dbe5e6; border-radius: 14px; padding: 22px 24px }
.res-detail__body .cs-scope h4, .res-detail__body .cs-cards h4, .res-detail__body .cs-steps h4 { margin: 0 0 8px; font-size: 1.05rem; color: #0b1c24 }
.res-detail__body .cs-scope ul { grid-template-columns: 1fr !important; margin: 0 }
.res-detail__body .cs-steps { display: grid; gap: 14px; margin-top: 8px }
.res-detail__body .cs-steps > div { position: relative; background: #fff; border: 1px solid #dbe5e6; border-radius: 14px; padding: 22px 24px 20px 78px }
.res-detail__body .cs-steps b { position: absolute; left: 22px; top: 22px; width: 40px; height: 40px; border-radius: 12px; background: rgba(45,224,207,.18); color: #0a8f8a; display: flex; align-items: center; justify-content: center; font-size: .95rem }
.res-detail__body .cs-steps p, .res-detail__body .cs-cards p { margin: 0; font-size: .98rem }
.res-detail__body .cs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px }
.res-detail__body .cs-cards > div { background: #f6fafa; border: 1px solid #dbe5e6; border-radius: 14px; padding: 22px 24px; border-top: 3px solid #2de0cf }
.res-detail__body .cs-tech { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .95rem }
.res-detail__body .cs-tech th { text-align: left; color: #0a8f8a; font-weight: 700; padding: 12px 14px 12px 0; vertical-align: top; width: 13% }
.res-detail__body .cs-tech td { padding: 12px 24px 12px 0; vertical-align: top; border-bottom: 1px solid #dbe5e6; color: #0b1c24 }
.res-detail__body .cs-tech tr + tr td, .res-detail__body .cs-tech tr + tr th { border-top: 0 }
.res-detail__body .cs-cta { margin-top: 40px; padding: 30px 32px; background: linear-gradient(150deg, #061520, #0a2d3a); border-radius: 18px; color: #fff }
.res-detail__body .cs-cta h3 { color: #fff; border: 0; padding: 0; margin: 0 0 10px; font-size: 1.5rem }
.res-detail__body .cs-cta p { color: rgba(255,255,255,.85) }
.res-detail__body .cs-cta a:not(.btn) { color: #2de0cf; font-weight: 600 }
@media (max-width: 800px) {
  .res-detail__body .cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .res-detail__body .cs-glance, .res-detail__body .cs-scope, .res-detail__body .cs-cards { grid-template-columns: 1fr }
  .res-detail__body .cs-glance > div { grid-template-columns: 1fr; gap: 2px }
  .res-detail__body .cs-steps > div { padding: 70px 20px 18px }
  .res-detail__body .cs-tech th, .res-detail__body .cs-tech td { display: block; width: auto; padding-right: 0 }
}

/* About page: Our journey */
.jr-sec { background: linear-gradient(180deg, #f3f9f9 0%, #fff 100%); padding: 84px 0 76px }
.jr-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 72px; align-items: start }
.jr-eyebrow, .pu-eyebrow, .va-eyebrow { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .18em; color: #0a8f8a }
.jr-copy h2 { font-size: 3.1rem; line-height: 1.08; letter-spacing: -.035em; margin: 14px 0 26px; color: #0b1c24 }
.jr-copy h2 span { color: #17c3b2 }
.jr-lead { display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px; margin-bottom: 26px; background: #fff; border: 1px solid #d9ecec; border-left: 4px solid #2de0cf; border-radius: 14px; box-shadow: 0 14px 34px rgba(11,28,36,.06) }
.jr-lead b { flex: none; font-size: 1.5rem; font-weight: 800; color: #0a8f8a; letter-spacing: -.02em; line-height: 1.35 }
.jr-lead p { margin: 0; font-size: 1.04rem; line-height: 1.65; color: #26424a }
.jr-text p { font-size: 1.04rem; line-height: 1.75; color: #4a6168; margin: 0 0 16px; text-align: justify; text-justify: inter-word }
.jr-line { background: #0b1c24; border-radius: 22px; padding: 34px 32px 30px; box-shadow: 0 24px 50px rgba(11,28,36,.18); position: sticky; top: 110px }
.jr-line ol { list-style: none; margin: 0; padding: 0; position: relative }
.jr-line ol:before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, #2de0cf, rgba(45,224,207,.15)) }
.jr-step { position: relative; display: block; padding: 0 0 26px 38px }
.jr-step:last-child { padding-bottom: 0 }
.jr-dot { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #0b1c24; border: 3px solid #2de0cf; box-shadow: 0 0 0 5px rgba(45,224,207,.14) }
.jr-tag { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .16em; color: #2de0cf; margin-bottom: 4px }
.jr-step h3 { font-size: 1.12rem; margin: 0 0 4px; color: #fff; letter-spacing: -.01em }
.jr-step p { margin: 0; font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.66) }

/* About page: motto, vision, mission */
.pu-sec { position: relative; overflow: hidden; background: linear-gradient(125deg, #061520 0%, #0a2d3a 58%, #0d3d4a 100%); padding: 84px 0; color: #fff }
.pu-sec:before { content: ''; position: absolute; right: -140px; top: -160px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(45,224,207,.22), rgba(45,224,207,0) 68%) }
.pu-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; align-items: center }
.pu-eyebrow { color: #2de0cf }
.pu-motto h2 { font-size: 3.2rem; line-height: 1.06; letter-spacing: -.035em; margin: 14px 0 20px; color: #fff }
.pu-motto p { font-size: 1.12rem; line-height: 1.7; color: rgba(255,255,255,.78); margin: 0; max-width: 480px }
.pu-cards { display: grid; gap: 20px }
.pu-card { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; padding: 26px 28px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; backdrop-filter: blur(4px); transition: transform .25s ease, border-color .25s ease, background .25s ease }
.pu-card:hover { transform: translateY(-3px); border-color: rgba(45,224,207,.55); background: rgba(255,255,255,.09) }
.pu-ico { grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #2de0cf; background: rgba(45,224,207,.12); border: 1px solid rgba(45,224,207,.3) }
.pu-ico svg { width: 28px; height: 28px }
.pu-card h3 { margin: 0 0 6px; font-size: 1.3rem; color: #fff }
.pu-card p { margin: 0; font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,.76) }

/* About page: values */
.va-sec { background: #fff; padding: 84px 0 80px }
.va-head { text-align: center; margin-bottom: 44px }
.va-head h2 { font-size: 3rem; line-height: 1.1; letter-spacing: -.035em; margin: 14px 0 0; color: #0b1c24 }
.va-head h2 span { color: #17c3b2 }
.va-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px }
.va-card { position: relative; background: #fff; border: 1px solid #dbe8e8; border-top: 4px solid #2de0cf; border-radius: 18px; padding: 30px 24px 28px; box-shadow: 0 12px 30px rgba(11,28,36,.05); transition: transform .25s ease, box-shadow .25s ease }
.va-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(11,28,36,.12) }
.va-card .about-ico--square { margin: 0 0 18px }
.va-num { position: absolute; right: 20px; top: 14px; font-size: 2.4rem; font-weight: 800; color: rgba(10,143,138,.12); letter-spacing: -.04em }
.va-card h3 { font-size: 1.3rem; margin: 0 0 10px; color: #0b1c24 }
.va-card p { margin: 0; font-size: .97rem; line-height: 1.7; color: #566b72 }

@media (max-width: 1100px) { .va-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 900px) {
    .jr-grid, .pu-grid { grid-template-columns: 1fr; gap: 40px }
    .jr-line { position: static }
    .jr-copy h2, .pu-motto h2, .va-head h2 { font-size: 2.3rem }
    .jr-sec, .pu-sec, .va-sec { padding: 56px 0 }
}
@media (max-width: 600px) {
    .va-grid { grid-template-columns: 1fr }
    .jr-lead { flex-direction: column; gap: 8px }
    .pu-card { grid-template-columns: 1fr }
    .pu-ico { grid-row: auto; margin-bottom: 14px }
}

/* Related Resources: a soft dark shade at the bottom of a case study picture, with the case study title on it */
.ind-proof-card__cover { position: relative }
.ind-proof-card__cap { display: none }
.ind-proof-card[data-heading="Case study"] .ind-proof-card__cap {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
    position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 10px 9px;
    background: linear-gradient(to top, rgba(6,21,32,.86) 0%, rgba(6,21,32,.55) 55%, rgba(6,21,32,0) 100%);
    color: #fff; font-size: .74rem; font-weight: 700; line-height: 1.3; letter-spacing: .005em; text-align: left; text-shadow: 0 1px 2px rgba(0,0,0,.35);
    overflow-wrap: break-word; pointer-events: none
}

/* A case study whose picture is the first page of a PDF shows it the same way as a white paper (portrait page), not square */
.res-panel[data-content="casestudies"] .res-card__thumb--cover.res-card__thumb--page { aspect-ratio: 1 / 1.414 !important; background-position: top center }
.ind-proof-card[data-heading="Case study"] .ind-proof-card__cover--page img { aspect-ratio: 3 / 4 !important }

/* A card without a description: the pages / PDF line sits right under the heading, with the button right below it */
.res-card__title + .res-card__footer { margin-top: 12px }

/* Cards without a description: the pages / PDF line stays right under the heading, and the button sits at the bottom of the card so the buttons line up across a row */
.res-card .res-card__cta { margin-top: auto; padding-top: 14px }

/* News & events page: the picture above the text */
.res-detail__figure { margin: 0 0 28px }
.res-detail__figure img { display: block; width: 100%; height: auto; border-radius: 14px }
.res-detail__body ul.long li { padding-top: 5px; padding-bottom: 5px }

/* Photos and galleries placed inside a news / resource text */
.res-detail__body img { max-width: 100%; height: auto; border-radius: 12px }
.res-detail__body figure, .res-detail__body .wp-caption { max-width: 100%; margin: 22px 0 }
.res-detail__body figcaption, .res-detail__body .wp-caption-text { font-size: .88rem; color: #64777d; margin-top: 8px; text-align: left }
.res-detail__body .aligncenter { display: block; margin-left: auto; margin-right: auto }
.res-detail__body .alignleft { float: left; margin: 6px 22px 12px 0; max-width: 46% }
.res-detail__body .alignright { float: right; margin: 6px 0 12px 22px; max-width: 46% }
.res-detail__body .wp-block-gallery, .res-detail__body .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 22px 0; padding: 0; list-style: none }
.res-detail__body .gallery-item { margin: 0; width: auto !important; float: none !important }
.res-detail__body .wp-block-gallery figure { margin: 0 }
.res-detail__body h3, .res-detail__body p { clear: both }
@media (max-width: 640px) { .res-detail__body .alignleft, .res-detail__body .alignright { float: none; max-width: 100%; margin: 18px 0 } }

/* News & Events: photo slider that moves by itself (no buttons) */
.ns-slider { position: relative; overflow: hidden; width: 100%; margin: 0 0 30px; border-radius: 14px; background: #f4f1ea; aspect-ratio: 3 / 2; max-height: 640px }
.ns-track { display: flex; height: 100%; will-change: transform }
.ns-slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center }
.ns-slide img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; user-select: none; -webkit-user-drag: none }

/* Photos of different shapes: each one is shown whole, on a soft blurred copy of itself */
.ns-slider { background: #1b2a30 }
.ns-slide { position: relative; overflow: hidden }
.ns-slide:before { content: ''; position: absolute; inset: -24px; background: var(--bg) center / cover no-repeat; filter: blur(22px) brightness(.85); transform: scale(1.05) }
.ns-slide img { position: relative; z-index: 1 }

/* Industries hover menu with four columns (the fourth is FinTech) */
.mega-grid--industries.mega-grid--4 { grid-template-columns: minmax(200px, .9fr) repeat(4, minmax(0, 1fr)) !important }
.mega-grid--industries.mega-grid--4 > div:first-child { padding-right: 24px }
.mega-grid--industries.mega-grid--4 > div:not(:first-child) { padding: 0 20px }
.mega-grid--industries.mega-grid--4 b { white-space: normal !important }
.mega-grid--industries.mega-grid--4 b a { white-space: normal !important }

/* The band near the bottom of the pages: picture background */
.contact-band-new {
    background:
        linear-gradient(100deg, rgba(5,24,34,.78) 0%, rgba(6,36,46,.55) 48%, rgba(8,56,60,.22) 100%),
        url('/wp-content/themes/ojasquest/assets/image/tte.png') center / cover no-repeat !important
}

/* Resources page banner: picture background (the picture is already dark on the left, so only a light layer is added) */
.res-hero {
    background:
        linear-gradient(100deg, rgba(4,16,22,.35) 0%, rgba(4,18,24,.12) 55%, rgba(4,20,26,0) 100%),
        url('/wp-content/themes/ojasquest/assets/image/Industries.png') center / cover no-repeat !important
}
.res-hero::after { display: none }

/* Pages of single resources (news and events, case studies, articles, white papers): the banner uses the same picture as the Resources page */
.single-oq_resource .page-hero {
    background:
        linear-gradient(100deg, rgba(4,16,22,.35) 0%, rgba(4,18,24,.12) 55%, rgba(4,20,26,0) 100%),
        url('/wp-content/themes/ojasquest/assets/image/Industries.png') center / cover no-repeat !important
}
.single-oq_resource .page-hero::after { display: none }

/* News & Events pages: the banner has no picture, a plain dark background */
.single-oq_resource.is-news-event .page-hero {
    background: #061520 !important
}
.single-oq_resource.is-news-event .page-hero::after { display: none }


/* Mission and Vision icons: a little larger */
.pu-ico { width: 62px; height: 62px }
.pu-card { grid-template-columns: 62px 1fr }
.pu-ico svg { width: 36px; height: 36px }


/* About Us and Contact banners: picture backgrounds */
body[data-page="company"] .page-hero {
    background:
        linear-gradient(100deg, rgba(3,14,20,.30) 0%, rgba(3,16,22,.10) 55%, rgba(3,18,24,0) 100%),
        url('/wp-content/themes/ojasquest/assets/image/aboutus.png') center / cover no-repeat !important
}
body[data-page="contact"] .page-hero {
    background:
        linear-gradient(100deg, rgba(3,14,20,.55) 0%, rgba(3,16,22,.30) 50%, rgba(3,18,24,.05) 100%),
        url('/wp-content/themes/ojasquest/assets/image/contactus.png') center / cover no-repeat !important
}
body[data-page="company"] .page-hero::after,
body[data-page="contact"] .page-hero::after { display: none }

/* About Us banner: the words stay on the left, so they never run over "Pursuit Of Precision." in the picture */
body[data-page="company"] .page-hero .wrap > h1,
body[data-page="company"] .page-hero .wrap > p {
    max-width: clamp(300px, calc(50vw - 90px), 600px)
}
@media (max-width: 900px) {
    /* on narrow screens the picture's own words are moved out of view */
    body[data-page="company"] .page-hero { background-position: 8% center !important }
    body[data-page="company"] .page-hero .wrap > h1,
    body[data-page="company"] .page-hero .wrap > p { max-width: 100% }
}


/* News & Events pages: a shorter banner */
.single-oq_resource.is-news-event .page-hero { padding: 56px 0 52px !important }
.single-oq_resource.is-news-event .page-hero h1 { margin-bottom: 14px }
.single-oq_resource.is-news-event .page-hero p { margin-bottom: 20px }
@media (max-width: 900px) { .single-oq_resource.is-news-event .page-hero { padding: 44px 0 40px !important } }