/* Mirai Tech - Azienda / La nostra storia v1 */

.story-page { background:var(--bg); }
.story-page .main-nav a[aria-current="page"] { color:var(--green-bright); }

.story-hero {
    position:relative;
    min-height:760px;
    height:min(92svh, 940px);
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#090d0f;
}
.story-hero-media { position:absolute; inset:0; }
.story-hero-media img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:saturate(.72) contrast(1.08) brightness(.7);
}
.story-hero-overlay {
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(7,12,14,.97) 0%, rgba(7,12,14,.83) 42%, rgba(7,12,14,.28) 78%),
        linear-gradient(0deg, rgba(7,12,14,.74), transparent 54%);
}
.story-hero-content { position:relative; z-index:2; padding-top:92px; }
.story-hero h1 {
    max-width:1040px;
    margin:0;
    font-size:clamp(54px,7.4vw,108px);
    line-height:.93;
    letter-spacing:-.057em;
    font-weight:720;
}
.story-hero h1 .soft { color:#aeb7b9; font-weight:430; }
.story-hero-lead {
    max-width:760px;
    margin:30px 0 34px;
    color:#d4d9da;
    font-size:clamp(18px,2vw,24px);
    line-height:1.5;
    font-weight:360;
}

.story-facts { background:#11181b; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.story-facts-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.story-facts-grid > div {
    min-height:132px;
    padding:28px 25px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-right:1px solid var(--line);
}
.story-facts-grid > div:first-child { border-left:1px solid var(--line); }
.story-facts-grid strong {
    font-size:clamp(22px,2.2vw,32px);
    letter-spacing:-.025em;
}
.story-facts-grid span { margin-top:8px; color:var(--muted); font-size:13px; line-height:1.45; }

.story-continuity { background:var(--paper); color:var(--text-dark); }
.story-split {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);
    gap:clamp(55px,8vw,120px);
    align-items:center;
}
.story-copy h2,
.story-timeline-heading h2 {
    margin:0;
    font-size:clamp(42px,5vw,72px);
    line-height:1.02;
    letter-spacing:-.045em;
    font-weight:620;
}
.story-copy p:not(.eyebrow) {
    max-width:760px;
    color:#596164;
    font-size:16px;
    line-height:1.72;
}
.story-copy p.lead {
    color:#202627;
    font-size:clamp(21px,2.2vw,29px);
    line-height:1.43;
}
.story-image {
    position:relative;
    min-height:560px;
    overflow:hidden;
    background:#151d20;
}
.story-image img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(.82) contrast(1.04);
}
.story-image::after {
    content:"";
    position:absolute;
    inset:45% 0 0;
    background:linear-gradient(transparent, rgba(7,12,14,.9));
}
.story-image-note {
    position:absolute;
    z-index:2;
    left:28px;
    right:28px;
    bottom:28px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.3);
}
.story-image-note span {
    display:block;
    color:var(--green-bright);
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
}
.story-image-note strong {
    display:block;
    margin-top:8px;
    color:#fff;
    font-size:24px;
    line-height:1.15;
}

.story-people { background:#0e1416; color:var(--text); }
.story-people .section-heading-row > p { color:var(--muted); }
.story-partners-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
}
.story-person-card { min-width:0; background:#11181b; }
.story-person-photo {
    aspect-ratio:4/3;
    overflow:hidden;
    background:#151d20;
}
.story-person-photo img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:grayscale(.22);
    transition:transform .6s var(--ease), filter .3s ease;
}
.story-person-card:hover .story-person-photo img { transform:scale(1.035); filter:grayscale(0); }
.story-person-body { padding:29px 28px 34px; }
.story-person-body .story-role {
    display:block;
    color:var(--green-bright);
    font-size:10px;
    font-weight:800;
    letter-spacing:.11em;
    text-transform:uppercase;
}
.story-person-body h3 {
    margin:11px 0 14px;
    font-size:28px;
    letter-spacing:-.03em;
}
.story-person-body p {
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
}
.story-people-bridge {
    max-width:880px;
    margin:42px 0 0 auto;
    padding:26px 0 0 34px;
    border-left:2px solid var(--green-bright);
    color:#c8cecf;
    font-size:18px;
    line-height:1.65;
}

.story-timeline-section { background:var(--paper-2); color:var(--text-dark); }
.story-timeline-heading {
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(280px,.55fr);
    gap:7vw;
    align-items:end;
    margin-bottom:64px;
}
.story-timeline-heading .eyebrow { grid-column:1 / -1; margin-bottom:-20px; }
.story-timeline-heading > p:last-child {
    margin:0 0 7px;
    color:#596063;
    font-size:16px;
    line-height:1.65;
}
.story-timeline {
    position:relative;
    border-top:1px solid var(--line-dark);
}
.story-timeline::before {
    content:"";
    position:absolute;
    left:184px;
    top:0;
    bottom:0;
    width:1px;
    background:var(--line-dark);
}
.story-timeline-item {
    position:relative;
    display:grid;
    grid-template-columns:185px minmax(0,1fr);
    min-height:205px;
    border-bottom:1px solid var(--line-dark);
}
.story-timeline-period {
    padding:30px 28px 30px 0;
    color:#416a18;
    font-size:11px;
    font-weight:850;
    letter-spacing:.12em;
}
.story-timeline-period::after {
    content:"";
    position:absolute;
    left:178px;
    top:34px;
    width:13px;
    height:13px;
    border-radius:50%;
    background:#416a18;
    box-shadow:0 0 0 6px var(--paper-2);
}
.story-timeline-content { padding:27px 0 30px 48px; }
.story-timeline-content h3 {
    margin:0 0 12px;
    font-size:clamp(24px,2.5vw,34px);
    letter-spacing:-.03em;
}
.story-timeline-content p {
    max-width:820px;
    margin:0;
    color:#596063;
    font-size:15px;
    line-height:1.72;
}

.story-mirai {
    padding:130px 0;
    overflow:hidden;
    background:
        radial-gradient(circle at 78% 30%, rgba(139,214,58,.12), transparent 28%),
        #0b1012;
}
.story-mirai-grid {
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
    align-items:center;
    gap:5vw;
}
.story-mirai-word {
    margin-left:-.07em;
    color:rgba(255,255,255,.055);
    font-size:clamp(110px,18vw,270px);
    line-height:.72;
    letter-spacing:-.09em;
    font-weight:850;
    white-space:nowrap;
}
.story-mirai-copy { position:relative; z-index:2; }
.story-mirai-copy h2 {
    margin:0;
    font-size:clamp(48px,5.5vw,80px);
    line-height:1;
    letter-spacing:-.05em;
    font-weight:620;
}
.story-mirai-copy p:not(.eyebrow) {
    max-width:650px;
    color:var(--muted);
    font-size:16px;
    line-height:1.7;
}
.story-mirai-copy p.lead { color:#dce0e0; font-size:22px; }
.story-slogan {
    display:inline-block;
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid var(--line);
    color:var(--green-bright);
    font-size:13px;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.story-principle { background:var(--paper); color:var(--text-dark); }
.story-principle-grid {
    display:grid;
    grid-template-columns:minmax(190px,.35fr) minmax(0,1.65fr);
    gap:5vw;
}
.story-principle-label {
    padding-top:7px;
    border-top:1px solid var(--line-dark);
}
.story-principle-label > span {
    display:block;
    margin:18px 0 52px;
    color:#596063;
    font-size:12px;
}
.story-principle-copy h2 {
    max-width:900px;
    margin:0;
    font-size:clamp(52px,6vw,88px);
    line-height:.98;
    letter-spacing:-.055em;
    font-weight:650;
}
.story-principle-copy p {
    max-width:760px;
    color:#616a6c;
    font-size:16px;
    line-height:1.72;
}
.story-principle-copy p.lead {
    margin-top:30px;
    color:#202627;
    font-size:clamp(22px,2.3vw,30px);
}

.story-future {
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:760px;
    background:#11181b;
}
.story-future-media { min-height:650px; overflow:hidden; }
.story-future-media img { width:100%; height:100%; object-fit:cover; filter:saturate(.8) contrast(1.05); }
.story-future-copy {
    padding:clamp(70px,8vw,130px) clamp(48px,7vw,110px);
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.story-future-copy h2 {
    max-width:800px;
    margin:0;
    font-size:clamp(42px,5vw,70px);
    line-height:1.02;
    letter-spacing:-.045em;
    font-weight:620;
}
.story-future-copy > p:not(.eyebrow) {
    max-width:720px;
    color:var(--muted);
    font-size:16px;
    line-height:1.72;
}
.story-future-copy blockquote {
    max-width:720px;
    margin:28px 0 8px;
    padding:20px 0 20px 25px;
    border-left:2px solid var(--green-bright);
    color:#fff;
    font-size:clamp(21px,2.2vw,28px);
    line-height:1.4;
    font-weight:600;
}
.story-future-copy .button { align-self:flex-start; margin-top:28px; }

.story-closing {
    padding:125px 0;
    background:
        radial-gradient(circle at 80% 28%, rgba(139,214,58,.12), transparent 30%),
        #0b1012;
    border-top:1px solid var(--line);
}
.story-closing-inner { max-width:980px; }
.story-closing h2 {
    margin:0;
    font-size:clamp(52px,6.5vw,92px);
    line-height:.97;
    letter-spacing:-.055em;
    font-weight:650;
}
.story-closing h2 span:last-child { color:#aeb7b9; font-weight:430; }
.story-closing p:not(.eyebrow) {
    max-width:680px;
    margin:28px 0 32px;
    color:var(--muted);
    font-size:17px;
    line-height:1.7;
}

@media (max-width:1100px) {
    .story-split { grid-template-columns:1fr 1fr; gap:50px; }
    .story-partners-grid { grid-template-columns:repeat(3,1fr); }
    .story-mirai-grid { grid-template-columns:.8fr 1.2fr; }
}

@media (max-width:820px) {
    .story-hero { min-height:690px; height:auto; padding:145px 0 90px; }
    .story-hero-content { padding-top:0; }
    .story-hero h1 { font-size:clamp(48px,13vw,76px); }
    .story-facts-grid { grid-template-columns:1fr 1fr; }
    .story-facts-grid > div { min-height:112px; border-bottom:1px solid var(--line); }

    .story-split,
    .story-timeline-heading,
    .story-mirai-grid,
    .story-principle-grid,
    .story-future { grid-template-columns:1fr; }

    .story-image { min-height:420px; }
    .story-partners-grid { grid-template-columns:1fr; }
    .story-person-photo { aspect-ratio:16/10; }
    .story-people-bridge { margin-left:0; }

    .story-timeline-heading .eyebrow { grid-column:auto; margin-bottom:0; }
    .story-timeline::before { left:12px; }
    .story-timeline-item {
        grid-template-columns:1fr;
        min-height:0;
        padding-left:36px;
    }
    .story-timeline-period { padding:27px 0 5px; }
    .story-timeline-period::after { left:6px; top:31px; width:13px; height:13px; }
    .story-timeline-content { padding:4px 0 27px; }

    .story-mirai { padding:95px 0; }
    .story-mirai-word {
        margin:0 0 -20px;
        font-size:clamp(100px,28vw,190px);
    }

    .story-principle-label > span { margin-bottom:18px; }
    .story-future-media { min-height:430px; }
    .story-future-copy { padding:70px 32px; }
}

@media (max-width:520px) {
    .story-facts-grid { grid-template-columns:1fr; }
    .story-facts-grid > div { border-left:1px solid var(--line); }
    .story-image { min-height:360px; }
    .story-image-note { left:22px; right:22px; bottom:22px; }
    .story-person-body { padding:24px 22px 28px; }
    .story-mirai-word { font-size:29vw; }
}