@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@1,700;1,800&display=swap');
:root {
    --sky:#dceced;
    --sky2:#c9e0e2;
    --teal:#24aaa9;
    --teal-dark:#147d7d;
    --ink:#263b3d;
    --muted:#637678;
    --cream:#fffdf8;
    --coral:#ff812e;
    --yellow:#f6d36e;
    --line:#dce8e6;
    --shadow:0 22px 60px rgba(28,83,83,.13)
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:88px
}
body {
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:"DM Sans",sans-serif;
    line-height:1.7
}
a {
    color:inherit;
    text-decoration:none
}
img {
    display:block;
    max-width:100%
}
button {
    font:inherit
}
.container {
    width:min(1160px,calc(100% - 48px));
    margin-inline:auto
}
.section-pad {
    padding:108px 0
}
h1,h2,h3,p {
    margin-top:0
}
h1,h2,h3 {
    font-family:"Manrope",sans-serif
}
h1 {
    font-size:clamp(3.5rem,7vw,6.3rem);
    line-height:.99;
    letter-spacing:-.075em;
    font-weight:800;
    margin:25px 0
}
h1 em,h2 em {
    font-family:"Playfair Display",serif;
    color:var(--teal);
    font-weight:800
}
h2 {
    font-size:clamp(2.5rem,4.8vw,4.4rem);
    line-height:1.06;
    letter-spacing:-.065em;
    margin-bottom:24px
}
.section-kicker,.eyebrow,.service-top,.detail-label {
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.15em
}
.section-kicker {
    color:#829493;
    margin-bottom:24px
}
.section-kicker span {
    color:var(--coral);
    padding:0 5px
}

/* HEADER E NAVIGAZIONE */
.site-header {
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(229,241,241,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(20,125,125,.12)
}
.nav-wrap {
    height:86px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.brand img {
    width:260px;
    height:auto;
    object-fit:contain
}
.main-nav {
    display:flex;
    align-items:center;
    gap:32px;
    font-size:.85rem;
    font-weight:700;
    color:#456365
}
.main-nav a:not(.nav-cta):hover,.text-link:hover,.card-link:hover {
    color:var(--coral)
}
.nav-cta {
    background:var(--teal-dark);
    color:#fff;
    padding:12px 19px;
    border-radius:100px
}
.nav-cta span {
    color:var(--yellow);
    margin-left:7px
}
.menu-toggle {
    display:none
}

/* HERO */
.hero {
    position:relative;
    overflow:hidden;
    background:linear-gradient(115deg,#e8f3f2 0%,#d5e9e9 58%,#c4e0e1 100%);
    padding:74px 0 0
}
.hero:before {
    content:"";
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px);
    background-size:22px 22px;
    opacity:.5
}
.hero-grid {
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:65px;
    align-items:center;
    min-height:530px;
    padding-bottom:65px
}
.hero-copy {
    position:relative;
    z-index:2
}
.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:11px;
    color:var(--teal-dark)
}
.eyebrow-dot {
    width:9px;
    height:9px;
    background:var(--coral);
    border-radius:50%;
    box-shadow:0 0 0 5px rgba(255,129,46,.15)
}
.hero h1 em {
    color:var(--coral)
}
.hero-lead {
    max-width:520px;
    color:#506b6d;
    font-size:1.08rem;
    line-height:1.85
}
.hero-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:25px;
    margin-top:30px
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    border-radius:100px;
    padding:15px 22px;
    font-size:.87rem;
    font-weight:800;
    transition:transform .2s,background .2s
}
.button-primary {
    background:var(--teal-dark);
    color:white;
    box-shadow:0 9px 22px rgba(20,125,125,.18)
}
.button-primary:hover {
    background:var(--ink);
    transform:translateY(-2px)
}
.button span {
    color:var(--yellow);
    font-size:1.1rem
}
.text-link {
    font-size:.87rem;
    font-weight:800;
    color:var(--teal-dark)
}
.text-link span {
    padding-left:8px
}
.hero-signature {
    display:flex;
    align-items:center;
    gap:11px;
    margin-top:48px;
    color:#597577;
    font-size:.84rem;
    font-weight:700
}
.signature-star {
    color:var(--coral);
    font-size:1.45rem
}
.hero-visual {
    position:relative;
    padding:15px 25px 32px 5px
}
.hero-photo-main {
    height:410px;
    border:10px solid rgba(255,255,255,.78);
    border-radius:48% 48% 24px 24px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transform:rotate(1.5deg)
}
.hero-photo-main img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center
}
.hero-sticker {
    position:absolute;
    right:-4px;
    bottom:0;
    width:125px;
    height:125px;
    border-radius:50%;
    background:var(--yellow);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.2;
    font-weight:800;
    font-size:.85rem;
    transform:rotate(9deg);
    box-shadow:0 10px 25px rgba(70,76,49,.12)
}
.hero-sticker b {
    font-size:1.6rem;
    color:var(--teal-dark);
    margin-top:4px
}
.hero-doodle {
    position:absolute;
    top:-14px;
    right:0;
    color:var(--coral);
    font-size:3rem
}
.hero-ribbon {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:34px;
    background:var(--teal-dark);
    color:#fff;
    padding:17px 20px;
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.19em
}
.hero-ribbon i {
    font-style:normal;
    color:var(--yellow);
    font-size:1rem
}

/* CHI SIAMO */
.intro {
    background:var(--cream)
}
.intro-grid {
    display:grid;
    grid-template-columns:.65fr 1.35fr;
    gap:70px
}
.intro-content {
    max-width:760px
}
.intro-overline {
    font-size:.9rem;
    font-weight:800;
    color:var(--coral);
    letter-spacing:.03em;
    margin-bottom:12px
}
.intro-content h2 {
    margin-bottom:24px
}
.intro-content h2 em {
    color:var(--teal)
}
.intro-content>p:not(.intro-overline) {
    max-width:690px;
    color:var(--muted);
    line-height:1.9
}
.intro-content .text-link {
    display:inline-block;
    margin-top:13px
}

/* SERVIZI */
.services {
    background:#f0f7f5
}
.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:45px;
    margin-bottom:46px
}
.section-heading h2 {
    margin-bottom:0
}
.section-heading h2 em {
    color:var(--teal-dark)
}
.section-heading>p {
    max-width:365px;
    color:var(--muted);
    line-height:1.85;
    margin-bottom:7px
}
.service-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px
}
.service-card {
    position:relative;
    min-height:570px;
    border-radius:25px;
    padding:30px;
    overflow:hidden;
    display:flex;
    flex-direction:column
}
.service-private {
    background:#d9eeee
}
.service-group {
    background:#fae6d8
}
.service-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#678586;
    font-size:.62rem
}
.service-icon {
    font-size:1.7rem;
    color:var(--teal-dark)
}
.service-graphic {
    height:210px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center
}
.graphic-book:before {
    content:"";
    position:absolute;
    width:175px;
    height:175px;
    border-radius:50%;
    background:#b8dddd
}
.book-shape {
    position:relative;
    width:145px;
    height:105px;
    background:#fffdf5;
    border-radius:8px 15px 15px 8px;
    border-left:9px solid var(--coral);
    box-shadow:0 14px 22px rgba(33,83,82,.14);
    transform:rotate(-8deg)
}
.book-shape:after {
    content:"";
    position:absolute;
    left:50%;
    top:0;
    height:100%;
    width:2px;
    background:#d7e4df
}
.book-pencil {
    position:absolute;
    width:12px;
    height:115px;
    border-radius:9px;
    background:var(--coral);
    transform:rotate(35deg) translate(75px,-20px);
    box-shadow:inset -3px 0 rgba(0,0,0,.1)
}
.graphic-star {
    position:absolute;
    right:20%;
    top:22px;
    color:var(--teal-dark);
    font-size:1.8rem
}
.graphic-friends:before {
    content:"";
    position:absolute;
    width:220px;
    height:160px;
    background:#f4cbb2;
    border-radius:50%
}
.friend {
    position:absolute;
    z-index:2;
    width:48px;
    height:70px;
    border-radius:25px 25px 12px 12px;
    bottom:39px
}
.friend:before {
    content:"";
    position:absolute;
    width:34px;
    height:34px;
    border-radius:50%;
    top:-27px;
    left:7px;
    background:#d99d78
}
.f1 {
    background:#23aaa9;
    left:27%;
    transform:rotate(-8deg)
}
.f2 {
    background:#ff812e;
    left:44%;
    bottom:50px
}
.f3 {
    background:#e5bd56;
    right:24%;
    transform:rotate(8deg)
}
.friend-table {
    position:absolute;
    z-index:3;
    bottom:31px;
    width:240px;
    height:17px;
    border-radius:50%;
    background:#a66f52
}
.graphic-friends .graphic-star {
    top:14px;
    right:18%
}
.service-content {
    margin-top:auto;
    position:relative;
    z-index:4
}
.service-content h3 {
    font-size:clamp(2.3rem,3.5vw,3.4rem);
    line-height:1.04;
    letter-spacing:-.06em;
    margin:12px 0 15px
}
.service-content h3 em {
    font-family:"Playfair Display",serif;
    color:var(--teal-dark)
}
.service-content p {
    max-width:470px;
    color:#536e70;
    line-height:1.8;
    font-size:.92rem
}
.card-link {
    display:inline-block;
    margin-top:8px;
    color:var(--teal-dark);
    font-size:.84rem;
    font-weight:800
}
.card-link span {
    padding-left:8px;
    color:var(--coral)
}
.services-note {
    text-align:center;
    color:#6b8180;
    font-size:.86rem;
    margin:27px 0 0
}
.services-note span {
    color:var(--coral);
    margin-right:7px
}

/* SPAZIO APPUNTINO */
.space-section {
    background:var(--cream)
}
.space-grid {
    display:grid;
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    gap:85px
}
.space-photo-wrap {
    position:relative;
    padding:0 30px 35px 0
}
.space-photo {
    width:100%;
    height:470px;
    object-fit:cover;
    border-radius:22px;
    box-shadow:var(--shadow)
}
.photo-label {
    position:absolute;
    bottom:0;
    right:0;
    background:var(--yellow);
    padding:19px 25px;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(60,70,40,.12)
}
.photo-label span {
    display:block;
    font-size:.58rem;
    letter-spacing:.15em;
    font-weight:800;
    color:#776c45;
    margin-bottom:5px
}
.photo-label b {
    font-family:"Manrope";
    font-size:1.1rem;
    line-height:1.25
}
.space-copy h2 em {
    color:var(--coral)
}
.space-copy>p {
    color:var(--muted);
    line-height:1.9
}
.space-mini {
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:30px;
    padding-top:22px;
    border-top:1px solid var(--line);
    color:var(--teal-dark);
    font-family:"Playfair Display",serif;
    font-style:italic;
    font-weight:700;
    font-size:1.15rem
}
.space-mini {
    font-size:1.35rem
}

/* APPROCCIO */
.approach {
    background:var(--teal-dark);
    color:white
}
.approach-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px
}
.approach .section-kicker {
    color:#b5d4d1
}
.approach .section-kicker span {
    color:var(--yellow)
}
.approach h2 {
    color:white
}
.approach h2 em {
    color:var(--yellow)
}
.approach-copy>p {
    max-width:480px;
    color:#d0e1de;
    line-height:1.9;
    margin:25px 0 32px
}
.button-light {
    background:var(--yellow);
    color:var(--ink)
}
.button-light:hover {
    transform:translateY(-2px);
    background:#ffe29a
}
.button-light span {
    color:var(--teal-dark)
}
.approach-points {
    display:grid;
    align-content:center
}
.approach-point {
    display:grid;
    grid-template-columns:45px 1fr;
    gap:18px;
    padding:25px 0;
    border-bottom:1px solid rgba(255,255,255,.17)
}
.approach-point:first-child {
    border-top:1px solid rgba(255,255,255,.17)
}
.point-icon {
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid rgba(246,211,110,.8);
    color:var(--yellow);
    border-radius:50%;
    font-size:.68rem;
    font-weight:800
}
.approach-point h3 {
    margin:1px 0 7px;
    font-size:1.15rem
}
.approach-point p {
    color:#c4d9d5;
    font-size:.85rem;
    line-height:1.7;
    margin:0;
    max-width:400px
}

/* CONTATTI */
.contact {
    background:#eaf3f1
}
.contact-panel {
    background:#fffdf8;
    border:1px solid rgba(36,170,169,.12);
    border-radius:26px;
    padding:65px 7%;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    box-shadow:var(--shadow)
}
.contact-copy h2 em {
    color:var(--coral)
}
.contact-copy p {
    color:var(--muted);
    line-height:1.85;
    max-width:500px;
    margin-bottom:27px
}
.contact-details {
    border-left:1px solid var(--line);
    padding-left:55px;
    display:grid;
    align-content:center;
    gap:25px
}
.contact-detail {
    display:grid;
    gap:3px
}
.detail-label {
    color:#8a9d9b;
    font-size:.61rem
}
.contact-detail strong {
    font-family:"Manrope";
    font-size:1.18rem
}
.contact-detail>span:last-child {
    color:var(--muted);
    font-size:.82rem
}
.contact-detail a {
    color:var(--teal-dark);
    font-weight:800
}
.contact-note {
    margin-top:4px;
    padding-top:17px;
    border-top:1px solid var(--line);
    color:#8a9895;
    font-size:.78rem;
    font-style:italic
}

/* FOOTER */
.site-footer{
    background:#dceced;
    color:var(--ink);
    padding:30px 0 20px
}
.footer-main {
    display:flex;
    align-items:center;
    gap:25px;
    padding-bottom:23px
}
.footer-brand img {
    width:210px;
    height:auto;
    object-fit:contain
}
.footer-main p {
    margin:0;
    color:#567476;
    font-size:.84rem;
    font-weight:700
}
.back-top {
    margin-left:auto;
    font-size:.8rem;
    color:var(--teal-dark);
    font-weight:800
}
.footer-bottom {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding-top:17px;
    border-top:1px solid rgba(20,125,125,.18);
    color:#6f8888;
    font-size:.7rem
}

/* RESPONSIVE */
@media(max-width:900px) {
    .section-pad {
        padding:85px 0
    }
    .hero-grid {
        gap:30px;
        min-height:480px
    }
    .hero-photo-main {
        height:360px
    }
    .intro-grid {
        gap:35px
    }
    .space-grid {
        gap:45px
    }
    .contact-panel {
        gap:35px;
        padding:50px 6%
    }
    .contact-details {
        padding-left:35px
    }
}

/* RESPONSIVE */
@media(max-width:700px) {
    .container {
        width:min(100% - 36px,520px)
    }
    .section-pad {
        padding:72px 0
    }
    .nav-wrap {
        height:72px
    }
    .brand img {
        width:190px;
        height:auto
    }
    .menu-toggle {
        display:flex;
        width:42px;
        height:42px;
        border:0;
        background:var(--teal-dark);
        border-radius:50%;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        cursor:pointer
    }
    .menu-toggle span {
        width:16px;
        height:2px;
        background:white;
        border-radius:3px
    }
    .main-nav {
        display:none;
        position:absolute;
        top:71px;
        left:0;
        right:0;
        padding:18px 24px 24px;
        background:#e5f1f1;
        border-bottom:1px solid var(--line);
        flex-direction:column;
        align-items:stretch;
        gap:0
    }
    .main-nav.is-open {
        display:flex
    }
    .main-nav a {
        padding:13px 0
    }
    .main-nav .nav-cta {
        text-align:center;
        margin-top:8px;
        padding:12px 18px
    }
    .hero {
        padding-top:52px
    }
    .hero-grid {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:15px;
        padding-bottom:48px
    }
    .hero h1 {
        font-size:clamp(3.45rem,16vw,5.1rem)
    }
    .hero-lead {
        font-size:1rem
    }
    .hero-signature {
        margin-top:30px
    }
    .hero-visual {
        padding:5px 18px 28px 0
    }
    .hero-photo-main {
        height:300px;
        border-width:7px;
        border-radius:46% 46% 20px 20px
    }
    .hero-sticker {
        width:100px;
        height:100px;
        font-size:.74rem
    }
    .hero-ribbon {
        gap:12px;
        font-size:.52rem;
        letter-spacing:.12em;
        padding:15px 8px
    }
    .hero-ribbon i {
        font-size:.8rem
    }
    .intro-grid {
        display:block
    }
    .intro-grid .section-kicker {
        margin-bottom:27px
    }
    h2 {
        font-size:clamp(2.55rem,11vw,3.6rem)
    }
    .section-heading {
        display:block;
        margin-bottom:35px
    }
    .section-heading>p {
        margin-top:22px
    }
    .service-grid {
        grid-template-columns:1fr
    }
    .service-card {
        min-height:550px;
        padding:25px
    }
    .service-graphic {
        height:180px
    }
    .space-grid {
        grid-template-columns:1fr;
        gap:48px
    }
    .space-photo {
        height:340px
    }
    .space-copy {
        order:-1
    }
    .photo-label {
        right:0
    }
    .space-mini {
        font-size:1.2rem
    }
    .approach-grid {
        grid-template-columns:1fr;
        gap:40px
    }
    .contact-panel {
        grid-template-columns:1fr;
        padding:38px 25px;
        gap:35px
    }
    .contact-details {
        border-left:0;
        border-top:1px solid var(--line);
        padding:27px 0 0
    }
    .footer-main {
        flex-wrap:wrap;
        gap:12px 18px
    }
    .footer-main p {
        width:100%;
        order:3
    }
    .back-top {
        margin-left:auto
    }
    .footer-bottom {
        flex-direction:column;
        gap:6px
    }
}

/* RESPONSIVE */
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*::before,*::after {
        transition-duration:.01ms!important;
        animation-duration:.01ms!important
    }
}