@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Playfair+Display:wght@400;700&display=swap');

:root {
    --bcp-tan: #B8956A;
    --bcp-olive: #4A4A2A;
    --bcp-champagne: #D8CFC8;
    --bcp-white: #FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: 'Open Sans', sans-serif; line-height: 1.6; background-color: var(--bcp-white); color: var(--bcp-olive); }

h2, h3 { font-family: 'Playfair Display', serif; color: var(--bcp-olive); text-align: center; margin-bottom: 1em; }
h2 { font-size: 2.5em; padding: 0 20px; }
h3 { font-size: 1.8em; }
a { color: var(--bcp-tan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* HERO */
.hero { width: 100%; min-height: 100vh; display: flex; flex-direction: column; }
.hero img.logo { width: 100%; height: 50vh; object-fit: contain; object-position: center; display: block; background-color: var(--bcp-white); }
.hero h1.tagline { display: none; }
.hero-slideshow-wrapper { width: 100%; height: 50vh; position: relative; margin-bottom: 40px; }
.hero p { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 30px 60px 30px; opacity: 0; transition: opacity 0.8s ease-out; font-size: 1.1em; border-radius: 0; }
.hero p.is-visible { opacity: 1; }
#hero-paragraph-1 { background-color: var(--bcp-tan); color: var(--bcp-white); }
#hero-paragraph-2 { background-color: var(--bcp-champagne); color: var(--bcp-olive); }
#hero-paragraph-3 { background-color: var(--bcp-olive); color: var(--bcp-champagne); }
.hero p strong { display: block; font-family: 'Playfair Display', serif; font-size: 2.5em; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 25px; text-align: center; width: 100%; }

/* RESPONSIVE HERO */
@media (min-width: 768px) {
    .hero p { font-size: 1.5em; padding: 60px 15% 80px 15%; }
    .hero p strong { font-size: 2.5em; margin-bottom: 35px; }
}
@media (max-width: 767px) {
    .hero p { padding: 30px 15px 50px 15px; font-size: 1em; }
    .hero p strong { font-size: 1.8em; text-align: center; width: 100%; word-break: break-word; overflow-wrap: break-word; white-space: normal; padding: 0 10px; }
}

/* LANGUAGE SWITCHER */
.language-switcher { position: fixed; top: 20px; right: 20px; z-index: 1000; }
.language-switcher select { background-color: var(--bcp-tan); color: var(--bcp-white); border: none; padding: 10px 15px; border-radius: 5px; font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 0.9em; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.language-switcher select:focus { outline: none; }

/* MACROAREE */
.macroaree { background-color: var(--bcp-champagne); padding: 60px 20px; text-align: center; width: 100%; }
.macroaree-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 40px; }
.macroaree-card { background-color: var(--bcp-white); border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 30px; width: 100%; max-width: 350px; text-align: left; transition: transform 0.3s; display: block; color: var(--bcp-olive); }
.macroaree-card:hover { transform: translateY(-10px); text-decoration: none; }
.macroaree-card h3 { color: var(--bcp-tan); text-align: center; text-transform: uppercase; }
.macroaree-card p { color: var(--bcp-olive); font-size: 1em; margin-top: 10px; }

/* SERVIZI */
.servizi { background-color: var(--bcp-white); padding: 60px 20px; width: 100%; }
.servizi-area { margin-bottom: 50px; }
.servizi-area h3 { color: var(--bcp-tan); }
.servizi-area ul { list-style: none; max-width: 800px; margin: 0 auto; }
.servizi-area li { background-color: var(--bcp-champagne); margin-bottom: 12px; padding: 15px 20px; border-left: 5px solid var(--bcp-tan); color: var(--bcp-olive); font-size: 1em; border-radius: 4px; }

/* CONTATTI */
.contatti { background-color: var(--bcp-champagne); padding: 60px 20px; width: 100%; }
.contatti h2 { margin-bottom: 40px; }
.contatti-content { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.contact-info { width: 100%; max-width: 800px; text-align: center; font-style: normal; color: var(--bcp-olive); font-size: 1.1em; }
.contact-info p { margin-bottom: 20px; }
.contact-info a { color: var(--bcp-tan); }
.contact-form { width: 100%; max-width: 800px; }
.contact-form h3 { color: var(--bcp-tan); margin-bottom: 20px; }
.contact-form form { background-color: var(--bcp-white); padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.contact-form label { display: block; margin-bottom: 6px; color: var(--bcp-olive); font-weight: 600; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea { width: 100%; padding: 12px; margin-bottom: 18px; border: 1px solid var(--bcp-champagne); border-radius: 4px; font-size: 1em; }
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form .gdpr-label { color: var(--bcp-olive); font-size: 0.9em; }
.contact-form button { background-color: var(--bcp-tan); color: var(--bcp-white); padding: 15px 30px; border: none; border-radius: 5px; cursor: pointer; font-size: 1.1em; font-weight: 700; transition: background-color 0.3s; width: 100%; margin-top: 10px; }
.contact-form button:hover { background-color: var(--bcp-olive); }

/* FOOTER */
.footer { background-color: var(--bcp-olive); color: var(--bcp-champagne); padding: 40px 20px; text-align: center; font-size: 0.9em; }
.footer p { max-width: 900px; margin: 0 auto 10px auto; }
/* Logo leggermente più piccolo */
.hero img.logo {
    height: 45vh !important;
    padding: 10px !important;
}

/* Titoli paragrafi hero */
.hero p strong {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 2.5em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 25px;
    text-align: center;
    width: 100%;
}
@media (max-width: 767px) {
    .hero p strong {
        font-size: 1.8em;
        word-break: break-word;
        padding: 0 10px;
    }
}

/* Fix titoli hero */
.hero p {
    flex-direction: column !important;
}
.hero p strong {
    display: block !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 2.5em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 25px !important;
    text-align: center !important;
    width: 100% !important;
}
#hero-paragraph-1::before {
    content: "ORIGINATION";
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 2.5em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 25px;
    color: var(--bcp-white);
}
#hero-paragraph-2::before {
    content: "RELATIONSHIPS";
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 2.5em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 25px;
    color: var(--bcp-olive);
}
#hero-paragraph-3::before {
    content: "INNOVATION";
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 2.5em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 25px;
    color: var(--bcp-champagne);
}
@media (max-width: 767px) {
    #hero-paragraph-1::before,
    #hero-paragraph-2::before,
    #hero-paragraph-3::before {
        font-size: 1.8em;
    }
}
```

Salvalo come `before.css` sul Desktop, poi dal Terminale Mac:
```
cat ~/Desktop/before.css >> /var/www/bcpc.xyz/public/style.css
.hero img.logo {
    padding: 30px 0 !important;
    height: 55vh !important;
}

#hero-paragraph-1::before,
#hero-paragraph-2::before,
#hero-paragraph-3::before {
    font-weight: 700 !important;
    font-family: 'Playfair Display', serif !important;
}

.hero img.logo {
    height: 42vh !important;
    padding: 40px 0 !important;
}

.hero img.logo {
    height: 42vh !important;
    padding: 60px 0 !important;
}

@media (max-width: 767px) {
    .hero img.logo {
        height: 35vh !important;
        padding: 40px 0 !important;
    }
}

/* Fix mobile - bottoni sopra logo */
@media (max-width: 767px) {
    .language-switcher {
        top: 10px !important;
        right: 10px !important;
    }
    a[href="#contatti"] {
        top: 10px !important;
        left: 10px !important;
        padding: 8px 12px !important;
        font-size: 0.8em !important;
    }
    .hero img.logo {
        margin-top: 60px !important;
        padding: 20px 0 !important;
    }
}