/*
 * 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)}
}