/* =========================
   ABOUT PAGE
========================= */

/* SECTION 1 — Hero About */
.about-hero{
    padding: clamp(56px, 6vw, 96px) 0 clamp(40px, 5vw, 72px);
}

.about-hero__grid{
    display:grid;
    grid-template-columns: 1.35fr .65fr;
    gap: clamp(24px, 4vw, 56px);
    align-items:start;
    min-height: min(82vh, 900px);
}

.about-hero__title{
    margin:0;
    font-weight:650;
    letter-spacing:-0.02em;
    line-height:1.02;
    font-size: clamp(2rem, 3.6vw, 4rem);
}

.about-hero__titleLine1{ color: var(--text); }
.about-hero__titleLine2{ color: var(--accent); }

.about-hero__hint{
    margin: clamp(7rem, 2vw, 26px) 0 0;
    font-weight:650;
    letter-spacing:-0.02em;
    line-height:1.05;
    font-size: clamp(2rem, 4.2vw, 4rem);
}

/* Quote box in basso a destra (come mock) */

.about-quote{
    align-self:end;
    justify-self:start;
    background: rgba(245,245,247,.75);
    border: 1px solid rgba(220,220,224,.8);
    border-radius: 26px;
    padding: 22px;
    backdrop-filter: blur(18px);
    box-shadow: 0 0 30px rgba(168,168,168,.18);
    max-width: 420px;
}

.about-quote__mark{ font-size: 44px; line-height:1; }
.about-quote__text{ margin: 8px 0 16px; color:#2B2B2B; font-size:14px; line-height:1.5; }

.about-quote__who{
    display:flex;
    gap:12px;
    align-items:center;
}
.about-quote__avatar{
    width:44px; height:44px;
    border-radius:999px;
    background:#F6C44B; /* come pallino giallo mock */
    display:inline-block;
}

/* SECTION 2 — Chi siamo davvero */
.about-who{
    padding: clamp(56px, 6vw, 96px) 0;
    border-top: 1px solid rgba(190,190,190,.25);
}

.about-who__grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(22px, 4vw, 64px);
    align-items:start;
}

.about-who__title{
    margin:0;
    font-weight:650;
    letter-spacing:-0.02em;
    line-height:1.05;
    font-size: clamp(2rem, 4.6vw, 2rem);
}
.about-who__title span{ color: var(--accent); }

.about-who__right p{
    margin: 0 0 14px;
    color:#2B2B2B;
    line-height:1.6;
    font-size: 14px;
}

/* Box grande grigio sotto (come screenshot) */
.about-who__media{
    grid-column: 1 / -1;
    margin-top: clamp(26px, 3vw, 40px);
    height: clamp(220px, 22vw, 340px);
    background: #EFEFEF;
    border: 1px solid rgba(220,220,224,.9);
    border-radius: 26px;
}

/* SECTION 3 — Valori */
.about-values{
    padding: clamp(56px, 6vw, 96px) 0;
    border-top: 1px solid rgba(190,190,190,.25);
}

.about-values__kicker{
    font-size: 16px;
    font-weight:650;
    color: var(--text);
    margin-bottom: 18px;
}

.about-values__title{
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.06;
    font-size: clamp(2rem, 8.2vw, 3rem);

    margin-bottom: 6rem;
}
.about-values__title span{ color: var(--accent); }

.about-values__grid{
    margin-top: clamp(26px, 3vw, 44px);
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
}

/* Cards valori (riuso estetica “glass” già in home) */
.value-card{
    background: rgba(245,245,247,.75);
    border: 1px solid rgba(220,220,224,.8);
    border-radius: 26px;
    padding: 22px;
    backdrop-filter: blur(18px);
    box-shadow: 0 0 30px rgba(168,168,168,.14);
}

.value-card h3{
    margin:0 0 10px;
    font-weight:650;
    letter-spacing:-0.01em;
    font-size: 26px;
}
.value-card p{
    margin: 0 0 10px;
    color:#2B2B2B;
    line-height:1.55;
    font-size: 13px;
}

/* Responsive */
@media (max-width: 980px){
    .about-hero__grid{ grid-template-columns: 1fr; min-height: unset; }
    .about-quote{ align-self:start; max-width: 520px; }
    .about-who__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 700px){
    .about-values__grid{ grid-template-columns: 1fr; }
}