/* ID */
/* Palette brand "Da Andrea" — allineata a da-andrea.css. */
:root {
    --blue:       #D95D39; /* ember — accento primario */
    --blue-light: #f6e0d7; /* ember chiarissimo (tint) */
    --navy:       #5C1D24; /* wine — scuro profondo */
    --orange:     #8a6a35; /* amber — accento secondario */
    --orange-d:   #6d5329; /* amber scuro */
    --gray:       #EEE6D7; /* ink-3 — grigio caldo */
    --text-light: rgba(24, 22, 21, 0.60);
    --text-mid:   rgba(24, 22, 21, 0.78);
}
#divHelp { visibility: hidden; position: fixed; width: 350px; height: 250px; background: #fff; z-index: 10000; right: 20px; bottom: 20px; border: 1px solid #5C1D24; border-radius: 10px; padding: 20px; }
#helpTitle { border-bottom: 2px solid #5C1D24 }
#helpClose {  visibility: hidden; position: fixed; right: 30px; bottom: 240px }
#helpImage { visibility: hidden; position: fixed; z-index: 15; right: 340px; bottom: 240px; width: 60px; height: 60px; border: 1px solid #5C1D24; border-radius: 50%; background: #fff; padding: 5px; }
#helpText { padding: 5px; font-size: 12px }
#onirica { color:red; }

/* CLASS */
.button-border.button-pr { border-color: #D95D39; color: #D95D39 }
.button.button-border.button-pr.button-fill::before { background-color: #D95D39; }
.g-recaptcha div { margin: auto!important }
.cert_title {font-weight: 400!important; font-size: 26px!important }
.cert_subtitle { font-weight:400!important; font-size:16px!important }
.dashboardIcon { border-radius: 5px; margin: auto; margin-bottom: 10px; border: 3px solid #5C1D24; height: 250px; width: 250px; padding: 30px; background: #fff; box-shadow: 5px 5px rgba(0,0,0,0.2) }
.dashboardIcon:hover{ margin-left: 5px; margin-top: 5px;  margin-bottom: 5px; box-shadow: none; }
.divider_title { font-size: 45px; margin: 0px; text-shadow: 1px 3px 5px #333;  }
.error input, .error textarea, .error select, .error div.well { border: 1px solid #CB0C0F!important;}
.error div.checkbox{ color: #CB0C0F!important;}
.error #consentLabel { color: #CB0C0F!important}
.fbox_dashboard { border: 3px solid #5C1D24; padding:5px; border-radius: 10px }
.fbox_dashboard:hover{ box-shadow: inset 0px 0px 7px rgba(99, 134, 82, 0.5)}
.h1_title { color: #5C1D24; text-align: center; font-size :30px }
.icon_pr { border: 2px solid #4F001D; padding: 3px }
.icon_amber { border: 2px solid #EB9C4D; padding: 3px }
.icon_red { border: 2px solid #C02942; padding: 3px }
.icon_green { border: 2px solid #59ba41; padding: 3px }
.icon_grey { border: 2px solid #777777; padding: 3px }
.icon_info { width: 15px; height: 15px }
.icon_info img { width: 15px; height: 15px }
.icon_counter { width: 64px; height: 64px }
.img_profile { height: 100px; margin-top: 10px; margin-bottom: 10px; margin-left: auto; margin-right: auto; display: block;}
.img_shadow { box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3) }
.lbl_cert:hover { color: #5C1D24;}
.modalTitle { padding: 30px; padding-bottom: 15px }
.modalTitle h4 { margin: 0px }
.modalBody { padding: 15px 30px }
.modalFooter { padding: 30px }
.modalFooter .button-mini { width:100px }
.modal_stripe { border-bottom: 1px solid #5C1D24; background: #5C1D24; height: 20px }
.modal-content form { margin-bottom: 0px }
.notice { width: 400px; position: fixed; z-index: 20000; right: 5px; top: 5px; }
.obj_cover { object-fit: cover!important }
.table.b_none th, .table.b_none td { border: 0px !important }
.table_colored { vertical-align: middle; margin-bottom: 0px }
.table_colored th, .table_colored td, .table_colored select, .table_colored input { font-size: 15px }
.table_colored thead th, .table_colored tfoot th { background-color: #5C1D24!important; color: #fff!important; text-transform: uppercase }
.table.b_none th, .table.b_none td { border: 0px !important }
.td_action { min-width: 50px; width: 50px }
.td_action img, .icon_action { min-width: 30px; min-height: 30px; width: 30px; height: 30px; cursor:pointer }

.chart-samples ul { list-style: none; }
.chart-samples h4 { text-transform: uppercase; margin-bottom: 20px; font-weight: 400; }
.chart-samples li { font-size: 16px; line-height: 2.2; font-weight: 600; }
.chart-samples li a:not(:hover) { color: #AAA; }
.rpg_post span { color: #5C1D24 }
.slider_title { position: absolute; width: 100%; text-align: center; color: white; text-shadow: 1px 3px 5px #333; z-index:1000; top:40%; font-size: 100px; margin: 0px; font-family:Scharnhorst; font-weight: 100; }
.table_cookie p { margin-bottom: 0px!important }


/* FONT */
@font-face {
    font-family: "Scharnhorst";
    src: url(../fonts/Scharnhorst.ttf);
}

.dh_font{
    font-family: Scharnhorst;
    font-weight: 100;
}

/* MEDIA */
@media (min-width: 1201px) and (max-width: 1500px){
    .slider_title { font-size: 80px; }
}
@media (min-width: 992px) and (max-width: 1200px){
    .slider_title { font-size: 75px; }
}
@media (min-width: 1200px){
    #privateAreaHeaderRow { display: block } 
}
@media (min-width: 768px) and (max-width: 992px){
    .slider_title { font-size: 60px; }
}
@media (max-width: 767px){
    .slider_title { font-size: 55px; }
    .footer_left{ text-align: center }
    .footer_right{ text-align: center }
}
@media (max-width: 660px){
    .slider_title { top:35%; font-size: 40px; }
}
@media (max-width: 1200px){
    .footer_left{ text-align: center }
    .footer_right{ text-align: center }
}

@media (max-width: 991px){
    .txt_a_c_sm { text-align: center!important }
    .dark .sticky-header #header-wrap, .sticky-header.dark #header-wrap { background: #5C1D24 }
    #logo img{ height: 60px }
}


/* ============================================================ */
/* Pulsanti fixed (standard RPG)                                */
/* ============================================================ */

/* WhatsApp floating — in basso a destra, sopra il gotoTop */
#whatsappBtn { position:fixed; bottom:16px; right: 16px; width: 38px; height: 38px; z-index: 10000 }

/* gotoTop — override CSS variables Canvas per evitare sovrapposizione con WhatsApp */
/* bottom: 70px = 16px (bottom WA) + 38px (altezza WA) + margine */
#gotoTop { --cnvs-gotoTop-position-boxed-right: 16px; --cnvs-gotoTop-position-boxed-bottom: 70px; }

/* Powered by R.P.G. */
.powered_by { font-size:11px!important; height:22px; padding:4px 4px; background:white; border-radius:3px; color:rgba(0,0,0,0.65)!important; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15), 0 1px 1px -1px rgba(0,0,0,0.15); font-weight:400; }
.powered_by:hover { background-color: #ddd; }
.powered_by img { height:19px; margin-right:5px }

/* ============================================================ */
/* Symfony Profiler toolbar fix                                  */
/* ============================================================ */
[id^="sfwdt"].sf-toolbar-closed .sf-toolbar-clearer { display: none !important; }
[id^="sfwdt"].sf-toolbar-closed .sf-toolbarreset .sf-toolbar-block { display: none !important; }
[id^="sfwdt"].sf-toolbar-closed .sf-toolbarreset .sf-toolbar-toggle-button { top: -37px !important; border-top: 2px solid #262626 !important; }
[id^="sfwdt"].sf-toolbar-opened .sf-toolbar-toggle-button .sf-toolbar-icon-closed { display: none !important; }
[id^="sfwdt"].sf-toolbar-opened .sf-toolbar-toggle-button .sf-toolbar-icon-opened { display: block !important; }
[id^="sfwdt"].sf-toolbar-closed .sf-toolbar-toggle-button .sf-toolbar-icon-closed { display: block !important; }
[id^="sfwdt"].sf-toolbar-closed .sf-toolbar-toggle-button .sf-toolbar-icon-opened { display: none !important; }

/* Report gallery */
.report-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
}
.report-gallery__thumb {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    background: #f3f4f6;
}
.report-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
    display: block;
}
.report-gallery__thumb:hover img { transform: scale(1.06); }

/* Lightbox */
#reportLightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.93);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#reportLightbox.active { display: flex; }
#lbImg {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}
#lbClose {
    position: absolute;
    top: 14px;
    right: 20px;
    color: #fff;
    font-size: 2.2rem;
    cursor: pointer;
    line-height: 1;
    opacity: .8;
    transition: opacity .15s;
}
#lbClose:hover { opacity: 1; }
.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 2.8rem;
    cursor: pointer;
    padding: 10px 16px;
    user-select: none;
    opacity: .7;
    transition: opacity .15s;
    line-height: 1;
}
.lb-nav:hover { opacity: 1; }
#lbPrev { left: 8px; }
#lbNext { right: 8px; }
#lbCounter {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.6);
    font-size: .85rem;
    white-space: nowrap;
}

.modal .btn { border-radius: 0 !important; }

/* ============================================================ */
/* Portfolio / Service gallery thumbnails                        */
/* ============================================================ */
.arr {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.45); border: none; color: #fff;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; cursor: pointer; z-index: 2;
    transition: background .2s, opacity .2s; opacity: 0;
}
.gallery-thumb:hover .arr { opacity: 1; }
.arr:hover { background: rgba(0,0,0,.72); }
.arr-l { left: 8px; }
.arr-r { right: 8px; }
.photo-counter {
    position: absolute; bottom: 8px; right: 8px;
    background: rgba(0,0,0,.5); color: #fff;
    font-size: .7rem; padding: 2px 7px; border-radius: 10px; z-index: 2;
}

/* News — filtro attivo */
.grid-filter.style-3 li.activeFilter a {
    color: #D95D39 !important;
    border-color: #D95D39 !important;
}

/* News — card font più grande */
#posts .entry-title h3 { font-size: 1.25rem; }
#posts .entry-content p { font-size: 1rem; }
#posts .entry-meta ul { font-size: .9rem; }
#posts .more-link { font-size: .95rem; }

/* Magnific Popup — frecce FontAwesome al posto dei triangoli Canvas */
.mfp-arrow::before,
.mfp-arrow::after { display: none; }

.mfp-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    opacity: .85;
    background: rgba(0,0,0,.38);
    border-radius: 50%;
}
.mfp-arrow-left  { left: 16px; }
.mfp-arrow-right { right: 16px; }

.mfp-arrow-left::before,
.mfp-arrow-right::before {
    display: block;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.3rem;
    color: #fff;
    border: none;
    width: auto;
    height: auto;
    margin: 0;
}
.mfp-arrow-left::before  { content: "\f053"; }
.mfp-arrow-right::before { content: "\f054"; }
.mfp-arrow:hover { opacity: 1; background: rgba(0,0,0,.6); }

/* ============================================================ */
/* Owl Carousel — frecce navigazione                             */
/* ============================================================ */
.owl-carousel .owl-nav [class*=owl-] {
    color: #D95D39 !important;
    background: transparent !important;
    border: 2px solid #D95D39 !important;
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
    line-height: 34px !important;
    font-size: 1.1rem !important;
    transition: background .2s, color .2s;
}
.owl-carousel .owl-nav [class*=owl-]:hover {
    background: #D95D39 !important;
    color: #fff !important;
    border-color: #D95D39 !important;
}

/* ============================================================ */
/* Slider / Hero — classi estratte dai template                  */
/* ============================================================ */
.slider-overlay {
    position: absolute;
    inset: 0;
    background: rgba(28,12,12,.55);
}
.z2 { z-index: 2; }
.eyebrow {
    color: var(--orange);
    letter-spacing: 2px;
    font-size: .85rem;
}

/* ============================================================ */
/* Contatti — icone e label                                      */
/* ============================================================ */
.contact-icon-box {
    width: 42px;
    height: 42px;
    border: 2px solid #D95D39;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
}
.contact-icon { color: #D95D39; font-size: 1rem; }
.contact-label {
    color: #111;
    display: block;
    margin-bottom: .25rem;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ============================================================ */
/* Footer                                                         */
/* ============================================================ */
#footer { background-color: #D95D39 !important; }
#footer #copyrights { background-color: #b84a29 !important; }

.footer-heading {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    font-weight: 700;
}
.footer-icon { color: var(--orange); width: 16px; flex-shrink: 0; }
.footer-link { color: rgba(255,255,255,.9); }
.footer-address { color: rgba(255,255,255,.9); font-size: .9rem; line-height: 1.6; }
.footer-sublabel {
    color: rgba(255,255,255,.5);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: block;
    margin-bottom: .2rem;
}
.footer-legal-link { color: #fff; }
.footer-legal-link:hover, .footer-legal-link:focus { color: #fff; text-decoration: none; }

/* ============================================================ */
/* Partnership links                                            */
/* ============================================================ */
.partner-link        { color: #000; }
.partner-link:hover,
.partner-link:focus  { color: #D95D39 !important; }

/* ============================================================ */
/* Certificazioni                                               */
/* ============================================================ */
.cert-icon { color: #D95D39; }

/* ============================================================ */
/* Pulsanti uniformi sito                                       */
/* outline scritta nera → hover bg azzurro + scritta bianca     */
/* (btn-brand, btn-brand-outline, cert, Canvas button-pr)     */
/* ============================================================ */
.btn-brand,
.btn-brand-outline,
.button.cert-btn,
.cert-btn,
.button.button-pr.button-border {
    background: transparent;
    color: #000;
    border: 2px solid var(--blue);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-brand:hover,                .btn-brand:focus,
.btn-brand-outline:hover,        .btn-brand-outline:focus,
.button.cert-btn:hover,       .button.cert-btn:focus,
.cert-btn:hover,              .cert-btn:focus,
.button.button-pr.button-border:hover,
.button.button-pr.button-border:focus {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

/* ============================================================ */
/* Titoli sezione e card statistiche                            */
/* ============================================================ */
.section-h2         { font-family:'Montserrat',sans-serif; color:#D95D39; }
.section-h2-mattone { font-family:'Mattone',sans-serif; color:#D95D39; }
.stat-card   { background:#D95D39; }
.stat-number { font-size:2.8rem; font-weight:800; color:#fff; font-family:'Montserrat',sans-serif; }
.stat-label  { font-size:.82rem; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.7); font-weight:600; margin-top:.4rem; }

/* ============================================================ */
/* Slider hero — bottoni brand (eccezione su sfondo scuro)      */
/* self-contained: non eredita lo stile pulsanti uniforme       */
/* ============================================================ */
.brand-hero .btn-brand         { background:#D95D39; color:#fff; border-color:#D95D39; }
.brand-hero .btn-brand-outline { background:transparent; border-color:#fff; color:#fff; }
/* hover: resta bianco (sfondo bianco, testo navy) invece di diventare blu */
.brand-hero .btn-brand-outline:hover,
.brand-hero .btn-brand-outline:focus { background:#fff; color:var(--navy); border-color:#fff; }

/* ============================================================ */
/* Slider pagine interne — sottotitolo h2                       */
/* ============================================================ */
.slider-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.15rem;
    color: rgba(255,255,255,.9);
    margin: .4rem 0 0;
    max-width: 680px;
    text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
@media (max-width: 767px) {
    .slider-subtitle { font-size: 1rem; }
}

/* ============================================================ */
/* Gallery preview + modal (Portfolio / Homepage)               */
/* ============================================================ */
.gallery-preview:hover img { transform:scale(1.04); }
.gallery-badge {
    position:absolute; bottom:10px; right:10px;
    background:#fff; border-radius:100px;
    padding:5px 12px; display:flex; align-items:center; gap:6px;
    font-weight:700; font-size:.82rem; color:#222;
    box-shadow:0 2px 8px rgba(0,0,0,.25); pointer-events:none;
}
.gallery-modal {
    display:none; position:fixed; inset:0; z-index:10000;
    background:rgba(0,0,0,.91); flex-direction:column;
}
.gallery-modal.is-open { display:flex; }
.gallery-close {
    position:absolute; top:18px; right:24px; z-index:10;
    background:none; border:none; color:#fff;
    font-size:2.2rem; line-height:1; cursor:pointer; opacity:.8;
}
.gallery-close:hover { opacity:1; }
.gallery-counter {
    position:absolute; bottom:20px; right:24px; z-index:10;
    color:#fff; font-size:.88rem; font-weight:600;
    background:rgba(0,0,0,.45); padding:4px 14px; border-radius:20px;
}
.gallery-swiper { flex:1; min-height:0; overflow:hidden; }
.gallery-swiper .swiper-wrapper { align-items:center; height:100%; }
.gallery-swiper .swiper-slide {
    width:70%; display:flex; align-items:center; justify-content:center;
    opacity:.35; transition:opacity .3s;
}
.gallery-swiper .swiper-slide-active { opacity:1; }
.gallery-swiper .swiper-slide img { max-height:85vh; max-width:100%; object-fit:contain; }
.gallery-swiper .swiper-button-next,
.gallery-swiper .swiper-button-prev {
    color:#fff; width:52px; height:52px; border-radius:50%;
    background:rgba(255,255,255,.15); backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,.2);
}
.gallery-swiper .swiper-button-next::after,
.gallery-swiper .swiper-button-prev::after { font-size:18px; font-weight:900; }
@media(max-width:767px) { .gallery-swiper .swiper-slide { width:92%; } }

/* ============================================================ */
/* Service cards (pagina Servizi)                               */
/* ============================================================ */
.service-card {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8ecf0;
    transition: box-shadow .25s, transform .25s;
    color: inherit;
}
.service-card:hover {
    box-shadow: 0 8px 32px rgba(217,93,57,.12);
    transform: translateY(-4px);
    color: inherit;
}
.service-img {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--navy) 0%, #7d2731 100%);
}
.service-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}
.service-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-icon-wrap {
    font-size: 3.2rem;
    color: rgba(255,255,255,.3);
    position: relative;
    z-index: 1;
}
.service-overlay {
    position: absolute;
    inset: 0;
    background: rgba(217,93,57,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity .3s;
}
.service-card:hover .service-overlay { opacity: 1; }
.service-body {
    padding: 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.service-title {
    font-family: 'Mattone', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #000 !important;
    margin-bottom: .6rem;
}
.service-desc {
    font-size: .875rem;
    color: var(--text-light);
    line-height: 1.65;
    margin-bottom: .8rem;
    flex: 1;
}
.service-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    font-size: .82rem;
    color: var(--text-mid);
}
.service-list li { margin-bottom: .25rem; }
.service-link {
    font-size: .82rem;
    font-weight: 700;
    color: var(--orange) !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
    margin-top: auto;
}
.service-link:hover { color: var(--orange-d) !important; }

/* ============================================================ */
/* Timeline (pagina Chi Siamo)                                  */
/* ============================================================ */
.timeline {
    position: relative;
    padding: 0;
    max-width: 900px;
    margin: 0 auto;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 2px;
    background: #D95D39;
    transform: translateX(-50%);
}
.tl-item {
    display: flex;
    justify-content: flex-end;
    padding-right: calc(50% + 40px);
    margin-bottom: 3rem;
    position: relative;
}
.tl-item.tl-right {
    justify-content: flex-start;
    padding-right: 0;
    padding-left: calc(50% + 40px);
}
.tl-marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}
.tl-marker::before {
    content: '';
    width: 14px; height: 14px;
    background: var(--orange);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--orange);
    margin-bottom: 6px;
    flex-shrink: 0;
}
.tl-marker--now::before {
    width: 18px; height: 18px;
    background: #D95D39;
    box-shadow: 0 0 0 3px #D95D39;
}
.tl-year {
    background: #D95D39;
    color: #fff;
    font-family: 'Mattone', sans-serif;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.tl-body {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 6px;
    padding: 1.4rem 1.6rem;
    box-shadow: 0 2px 16px rgba(217,93,57,.07);
    max-width: 380px;
    position: relative;
    transition: box-shadow .25s;
}
.tl-body:hover {
    box-shadow: 0 6px 28px rgba(217,93,57,.14);
}
.tl-img {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 1rem;
}
.tl-img--contain {
    object-fit: contain;
    background: var(--gray);
    padding: .6rem;
}
.tl-item:not(.tl-right) .tl-body::after {
    content: '';
    position: absolute;
    top: 16px; right: -9px;
    width: 16px; height: 16px;
    background: #fff;
    border-right: 1px solid #e8ecf0;
    border-top: 1px solid #e8ecf0;
    transform: rotate(45deg);
}
.tl-item.tl-right .tl-body::after {
    content: '';
    position: absolute;
    top: 16px; left: -9px;
    width: 16px; height: 16px;
    background: #fff;
    border-left: 1px solid #e8ecf0;
    border-bottom: 1px solid #e8ecf0;
    transform: rotate(45deg);
}
.tl-title {
    font-family: 'Mattone', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #000;
    margin-bottom: .6rem;
}
.tl-text {
    font-size: .9rem;
    line-height: 1.75;
    color: var(--text-mid);
    margin-bottom: .8rem;
}
.tl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.tl-tags span {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 2px 9px;
    border-radius: 20px;
    background: var(--blue-light);
    color: var(--navy);
}
.tl-tags .tl-tag--accent {
    background: var(--orange);
    color: #fff;
}
@media (max-width: 767px) {
    .timeline::before { left: 20px; }
    .tl-item,
    .tl-item.tl-right {
        padding-left: 56px;
        padding-right: 0;
        justify-content: flex-start;
    }
    .tl-marker {
        left: 20px;
        transform: translateX(-50%);
    }
    .tl-body { max-width: 100%; }
    .tl-item:not(.tl-right) .tl-body::after,
    .tl-item.tl-right .tl-body::after { display: none; }
}