/*
 * History page — page-specific Hero photography, licence attribution and
 * milestone timeline. Shared header, footer, type and buttons remain global.
 * DESIGN PRINCIPLE: About-family pages build trust and identity; do not add
 * product-sales CTAs here. The persistent “Talk to an expert” header CTA
 * already provides conversion intent. Apply this to Foundation and ESG pages.
 */

body{background:#fff}

.history-hero{
position:relative;
display:flex;
overflow:hidden;
background:var(--color-primary)
}
.history-hero>.history-hero-copy.section-inner{
position:relative;
z-index:1;
width:100%;
max-width:none;
min-height:610px;
padding:80px max(var(--page-padding),calc((100vw - 1280px) / 2));
display:flex;
flex-direction:column;
justify-content:center
}
.history-hero-copy h1{max-width:730px}
.history-hero-visual{
position:absolute;
inset:0;
z-index:0
}
.history-hero-visual::after{
position:absolute;
inset:0;
content:"";
background:linear-gradient(100deg,rgba(9,28,28,.80) 0%,rgba(9,28,28,.68) 42%,rgba(9,28,28,.30) 70%,rgba(9,28,28,.10) 100%)
}
.history-hero-visual img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center
}
/* LICENSE REQUIREMENT: CC BY-SA 2.0 attribution, do not remove without legal review. */
.history-hero .history-hero-visual .history-photo-credit{
position:absolute;
right:max(var(--page-padding),calc((100vw - 1280px) / 2));
bottom:var(--space-3);
z-index:2;
max-width:min(30rem,calc(100% - 2 * var(--page-padding)));
padding:.45rem .65rem;
background:color-mix(in srgb,var(--color-primary) 84%,transparent);
color:#fff;
font:500 .625rem/1.45 var(--font-mono);
letter-spacing:.02em
}
.history-hero .history-photo-credit a{color:inherit;text-decoration:underline;text-underline-offset:.18em}

main>.history-timeline,
main>.history-narratives{background:#fff}
.history-timeline{padding-bottom:var(--space-5)}
.history-narratives{padding-top:var(--space-5)}

/* Chronological spine: alternating sides on desktop, single side below 780px. */
.timeline{
position:relative;
margin:0;
padding:0;
list-style:none
}
.timeline-item{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) var(--space-6) minmax(0,1fr);
padding-bottom:var(--space-5)
}
.timeline-item::before{
position:absolute;
top:var(--space-3);
left:50%;
display:grid;
width:var(--space-2);
height:var(--space-2);
content:"";
transform:translateX(-50%);
z-index:1;
border-radius:50%;
background:var(--color-primary)
}
.timeline-item:not(:last-child)::after{
position:absolute;
top:var(--space-3);
bottom:calc(var(--space-3) * -1);
left:50%;
width:2px;
content:"";
transform:translateX(-50%);
background:var(--color-teal)
}
.timeline-item:nth-child(odd) .timeline-year,
.timeline-item:nth-child(odd) .timeline-content{
grid-column:1;
padding-right:var(--space-5);
text-align:right
}
.timeline-item:nth-child(even) .timeline-year,
.timeline-item:nth-child(even) .timeline-content{
grid-column:3;
padding-left:var(--space-5);
text-align:left
}
.timeline-item:last-child{padding-bottom:0}
.timeline-year{
margin:0;
color:var(--color-primary);
font:700 clamp(2.75rem,4.5vw,3.5rem)/.9 var(--font-sans);
letter-spacing:-.06em
}
.timeline-content{max-width:300px;margin:var(--space-2) 0 0}
.timeline-item:nth-child(odd) .timeline-content{margin-left:auto}
.timeline-content h2{font-size:clamp(20px,2.1vw,26px);letter-spacing:-1px}
.timeline-content p{margin-top:10px;color:var(--color-muted)}

.history-narratives{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.history-narratives article{padding-top:var(--space-3);border-top:1px solid var(--color-line)}
.history-narratives h2{font-size:clamp(24px,2.3vw,34px);letter-spacing:-1.5px}
.history-narrative-icon{display:grid;width:2.5rem;height:2.5rem;place-items:center;margin-bottom:var(--space-2);border:1px solid var(--color-teal);border-radius:50%;color:var(--color-primary)}
.history-narrative-icon svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}
.history-narratives p{margin-top:16px;color:var(--color-muted)}

.history-cta{padding-top:var(--space-5);padding-bottom:var(--space-5);background:var(--color-primary);color:#fff;text-align:center}
.history-cta-kicker{margin:0 0 var(--space-2);color:var(--color-teal);font:500 var(--text-xs)/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.history-cta h2{max-width:48rem;margin:0 auto;font-size:clamp(1.5rem,2.1vw,2.25rem);line-height:1.18;letter-spacing:normal}

@media (max-width:780px){
.history-hero>.history-hero-copy.section-inner{min-height:610px;padding:90px max(var(--page-padding),calc((100vw - 1280px) / 2)) 52px}
.history-hero-visual::after{background:linear-gradient(180deg,rgba(9,28,28,.62) 0%,rgba(9,28,28,.80) 100%)}
.history-hero .history-hero-visual .history-photo-credit{right:var(--page-padding);bottom:var(--space-2);left:var(--page-padding);max-width:none}
.timeline{padding-left:var(--space-6)}
.timeline-item{display:block}
.timeline-item::before{left:calc((var(--space-6) - var(--space-3)) * -1);transform:translateX(-50%)}
.timeline-item:not(:last-child)::after{left:calc((var(--space-6) - var(--space-3)) * -1);transform:translateX(-50%)}
.timeline-item:nth-child(odd) .timeline-year,
.timeline-item:nth-child(odd) .timeline-content,
.timeline-item:nth-child(even) .timeline-year,
.timeline-item:nth-child(even) .timeline-content{padding:0;text-align:left}
.timeline-year{margin:0;text-align:left;font-size:clamp(2.5rem,10.5vw,2.75rem)}
.timeline-content{max-width:none;margin:var(--space-2) 0 0;text-align:left}
.history-narratives{grid-template-columns:1fr;gap:var(--space-4)}
}

@media (max-width:480px){
.history-hero-copy h1{overflow-wrap:break-word;letter-spacing:-2.8px}
.timeline{padding-left:var(--space-5)}
.timeline-item::before{left:calc((var(--space-5) - var(--space-3)) * -1)}
.timeline-item:not(:last-child)::after{left:calc((var(--space-5) - var(--space-3)) * -1)}
}
/* Ascending milestone journey — desktop presentation-inspired layout, mobile vertical flow. */
.history-journey{overflow:hidden;padding-top:var(--space-6);padding-bottom:var(--space-5)}
.history-journey-heading{max-width:780px;margin:0 auto var(--space-5);text-align:center}
.history-journey-kicker{font:600 var(--text-xs)/1.4 var(--font-mono);letter-spacing:.13em;color:var(--color-teal)}
.history-journey-heading h2{margin-top:var(--space-2);font-size:clamp(2rem,3.7vw,3.25rem);line-height:1.13;letter-spacing:-.04em}
.history-journey-heading>p:not(.history-journey-kicker){margin-top:var(--space-3);color:var(--color-muted)}
.journey-legend{display:flex;justify-content:center;gap:1.25rem;flex-wrap:wrap;margin-top:var(--space-3);font:500 .75rem/1.5 var(--font-mono);color:var(--color-muted)}
.journey-legend span{display:inline-flex;align-items:center;gap:.5rem}
.journey-legend span::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:#b5c9c8}
.journey-legend span:last-child::before{background:var(--color-teal)}
.journey-canvas{position:relative;width:100%;height:760px;max-width:1280px;margin:0 auto}
.journey-curve{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.journey-path-shadow,.journey-path{fill:none;stroke-linecap:round}
.journey-path-shadow{stroke:rgba(0,128,128,.10);stroke-width:15}
.journey-path{stroke:var(--color-teal);stroke-width:5}
.journey-milestones{margin:0;padding:0;list-style:none}
.journey-milestone{position:absolute;left:var(--point-x);top:var(--point-y);width:0;height:0}
.journey-dot{position:absolute;z-index:2;left:0;top:0;display:grid;place-items:center;width:3rem;height:3rem;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;background:var(--color-primary);color:#fff;box-shadow:0 0 0 2px var(--color-teal)}
.journey-dot svg{width:1.45rem;height:1.45rem}
.journey-card{position:absolute;width:clamp(118px,11.7vw,154px);left:0;transform:translateX(-50%);text-align:center}
.journey-milestone--above .journey-card{bottom:37px}
.journey-milestone--below .journey-card{top:37px}
.journey-year{display:block;font:700 clamp(1.25rem,2vw,1.85rem)/1 var(--font-sans);letter-spacing:-.045em;color:var(--color-primary)}
.journey-card h3{margin-top:.45rem;font-size:clamp(.88rem,1.12vw,1.08rem);line-height:1.2;letter-spacing:-.02em}
.journey-card p{margin-top:.55rem;color:var(--color-muted);font-size:clamp(.76rem,.92vw,.85rem);line-height:1.4}
.journey-phase{display:block;margin-top:.35rem;font:700 .61rem/1.35 var(--font-mono);letter-spacing:.05em;color:var(--color-teal)}
.journey-milestone--founding .journey-dot{width:3.6rem;height:3.6rem;background:var(--color-teal);box-shadow:0 0 0 5px rgba(0,128,128,.15)}
.journey-milestone--founding .journey-card{padding:.65rem .35rem;border-top:2px solid var(--color-teal);background:#f4fbfa}
@media(max-width:1020px){
 .journey-canvas{height:auto;max-width:720px;padding:1rem 0 1rem 4rem}
 .journey-curve{display:none}
 .journey-milestones{position:relative;display:grid;gap:1.35rem;border-left:3px solid var(--color-teal);padding:0 0 0 2.5rem}
 .journey-milestone{position:relative;left:auto;top:auto;width:auto;height:auto}
 .journey-dot{left:-2.5rem;top:1.25rem;width:2.9rem;height:2.9rem}
 .journey-milestone--founding .journey-dot{width:3.2rem;height:3.2rem}
 .journey-card,.journey-milestone--above .journey-card,.journey-milestone--below .journey-card{position:static;transform:none;width:auto;max-width:580px;text-align:left;padding:0}
 .journey-milestone--founding .journey-card{padding:1rem;background:#f4fbfa}
 .journey-year{font-size:1.7rem}
 .journey-card h3{font-size:1.2rem}
 .journey-card p{font-size:.94rem}
}
@media(max-width:480px){
 .history-journey{padding-top:var(--space-5)}
 .history-journey-heading{text-align:left}
 .journey-legend{justify-content:flex-start;gap:.6rem}
 .journey-canvas{padding-left:1.55rem}
 .journey-milestones{padding-left:2rem}
 .journey-dot{left:-2rem}
}