/* Pelorus Holdings | Our Journey: isolated styles */

.corporate-journey
{
    --cj-navy:#15334b;
    --cj-teal:#087f8b;
    --cj-aqua:#14a7b0;
    --cj-muted:#526a7b;
    padding:90px 0 105px;
    background:#fff;
    color:var(--cj-navy)
}

.corporate-journey *
{
    box-sizing:border-box
}

.corporate-journey>.container
{
    width:min(1320px,calc(100% - 64px));
    max-width:1320px;
    margin-inline:auto
}

.corporate-journey__header
{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:36px;
    margin-bottom:52px
}

.corporate-journey__eyebrow
{
    font-size:11px;
    font-weight:800;
    letter-spacing:.18em;
    color:var(--cj-teal)
}

.corporate-journey__header h2
{
    font-size:clamp(32px,3.5vw,48px);
    letter-spacing:-.04em;
    line-height:1.12;
    margin:12px 0 0;
    color:var(--cj-navy)
}

.corporate-journey__header h2 span
{
    color:var(--cj-teal)
}

.corporate-journey__header p
{
    font-size:14px;
    line-height:1.7;
    color:var(--cj-muted);
    max-width:390px;margin:0
}

.corporate-timeline
{
    position:relative;
    border:1px solid #dfe9ed;
    border-radius:18px;
    background:linear-gradient(145deg,#fff,#f6fbfc);
    padding:34px 30px;
    box-shadow:0 16px 42px rgba(15,50,68,.045)
}

.corporate-timeline__list
{
    position:relative;
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:0;
    list-style:none;
    margin:0;
    padding:0;
    min-height:420px;
    isolation:isolate
}

.corporate-timeline__list::before,.corporate-timeline__list::after
{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:5px;
    border-radius:9px;
    transform:translateY(-50%);
    z-index:-1

}
.corporate-timeline__list::before
{
    background:#d6e5e9
}

.corporate-timeline__list::after
{
    background:linear-gradient(90deg,#15334b,#087f8b,#14a7b0,#ed9b35);
    transform:translateY(-50%) scaleX(0);
    transform-origin:left;
    animation:cj-draw 1.7s ease-out .15s forwards
}

.corporate-timeline__item
{
    --tone:#087f8b;
    position:relative;
    min-width:0;
    min-height:420px;
    animation:cj-appear .55s both;
    animation-delay:calc(.18s + var(--index)*.13s)
}

.corporate-timeline__item:nth-child(4n+1)
{
    --tone:#15334b
}

.corporate-timeline__item:nth-child(4n+3)
{
    --tone:#14a7b0
}

.corporate-timeline__item:last-child
{
    --tone:#d68b28
}

.corporate-timeline__dot
{
    position:absolute;
    top:50%;
    left:50%;
    width:17px;
    height:17px;
    border-radius:50%;
    background:var(--tone);border:4px solid #fff;
    box-shadow:0 0 0 2px var(--tone),0 4px 10px #0a42512b;
    transform:translate(-50%,-50%);
    z-index:2;
    transition:transform .25s,box-shadow .25s
}

.corporate-timeline__item:hover .corporate-timeline__dot
{
    transform:translate(-50%,-50%) scale(1.3);
    box-shadow:0 0 0 4px #087f8b2b
}

.corporate-timeline__stem
{
    position:absolute;
    left:50%;
    width:2px;
    height:38px;
    background:var(--tone);
    transform:translateX(-50%)
}

.corporate-timeline__item:nth-child(odd) .corporate-timeline__stem
{
    bottom:50%
}

.corporate-timeline__item:nth-child(even) .corporate-timeline__stem
{
    top:50%
}

.corporate-timeline__content
{
    position:absolute;
    left:50%;
    width:calc(100% - 12px);
    transform:translateX(-50%);
    text-align:center;
    overflow-wrap:break-word
}

.corporate-timeline__item:nth-child(odd) .corporate-timeline__content
{
    bottom:calc(50% + 49px)
}

.corporate-timeline__item:nth-child(even) .corporate-timeline__content
{
    top:calc(50% + 49px)
}

.corporate-timeline__year
{
    display:block;
    color:var(--tone);
    font-size:clamp(13px,1.25vw,18px);
    font-weight:800;
    letter-spacing:-.02em;
    margin-bottom:9px
}

.corporate-timeline__content h3
{
    font-size:clamp(11px,1.02vw,14px);
    font-weight:800;
    line-height:1.35;
    margin:0 0 7px;
    color:var(--cj-navy)
}

.corporate-timeline__content p
{
    font-size:clamp(10px,.85vw,12px);
    line-height:1.5;
    margin:0;
    color:var(--cj-muted)
}

@keyframes cj-draw
{
    to{transform:translateY(-50%) scaleX(1)}
}

@keyframes cj-appear
{
    from{opacity:0;
        translate:0 12px}to{opacity:1;
            translate:0 0}
        }

@media(max-width:1050px) and (min-width:701px)
{
    .corporate-timeline{padding:25px 15px}
    .corporate-timeline__list,
    .corporate-timeline__item{min-height:480px}
    .corporate-timeline__content{width:calc(100% - 7px)}
    .corporate-timeline__content p{font-size:10px}
}

@media(max-width:700px)
{
    .corporate-journey{padding:60px 0 70px}
    .corporate-journey>.container{width:calc(100% - 32px)}
    .corporate-journey__header{display:block;margin-bottom:28px}
    .corporate-journey__header p{margin-top:14px}
    .corporate-timeline{padding:25px 20px}
    .corporate-timeline__list{display:flex;flex-direction:column;min-height:0;gap:0;padding:4px 0}
    .corporate-timeline__list::before,
    .corporate-timeline__list::after{left:18px;right:auto;top:0;bottom:0;width:4px;height:auto;transform:none}
    .corporate-timeline__list::after{transform:scaleY(0);transform-origin:top;animation:cj-draw-mobile 1.7s ease-out .15s forwards}
    .corporate-timeline__item{min-height:0;display:grid;grid-template-columns:38px minmax(0,1fr);gap:20px;padding:0 0 27px}
    .corporate-timeline__item:last-child{padding-bottom:0}
    .corporate-timeline__dot{top:13px;left:20px;width:16px;height:16px}
    .corporate-timeline__stem{display:none}
    .corporate-timeline__content,
    .corporate-timeline__item:nth-child(odd) 
    .corporate-timeline__content,
    .corporate-timeline__item:nth-child(even) 
    .corporate-timeline__content{position:static;grid-column:2;transform:none;width:auto;text-align:left}
    .corporate-timeline__year{font-size:17px;margin-bottom:4px}
    .corporate-timeline__content h3{font-size:15px;margin-bottom:4px}
    .corporate-timeline__content p{font-size:13px;line-height:1.6}
}

@keyframes cj-draw-mobile
{
    to{transform:scaleY(1)}
}

@media(prefers-reduced-motion:reduce)
{
    .corporate-timeline__list::after,
    .corporate-timeline__item{animation:none!important;transform:none}
    .corporate-timeline__list::after{transform:translateY(-50%) scaleX(1)}@media(max-width:700px){
    .corporate-timeline__list::after{transform:scaleY(1)}}
}