@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
:root{
  --bg:#f3f1ed;--ink:#111;--muted:#777;--line:#d4d0c9;--accent:#004872;
  --serif:Georgia,"Times New Roman",serif;--sans:"Montserrat",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5}
a{color:inherit;text-decoration:none}button{font:inherit}
.header{position:fixed;top:0;left:0;width:100%;height:76px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;z-index:20;background:rgba(243,241,237,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.logo{font-weight:700;font-size:21px;letter-spacing:-1px}.logo span{color:#888}
.menu-toggle{width:48px;height:48px;border:1px solid var(--ink);background:var(--bg);border-radius:50%;display:grid;place-content:center;gap:5px;cursor:pointer}
.menu-toggle span{width:15px;height:1px;background:var(--ink);display:block;transition:.3s}
.menu{position:fixed;inset:0;background:#111;color:#f3f1ed;z-index:15;transform:translateY(-100%);transition:.65s cubic-bezier(.77,0,.18,1)}
.menu.open{transform:translateY(0)}.menu-inner{height:100%;padding:16vh 8vw;display:flex;flex-direction:column;justify-content:center}
.menu-inner>a{font-size:clamp(44px,8vw,110px);line-height:.95;letter-spacing:-.06em}.menu-inner>a:hover{font-family:var(--serif);font-style:italic}
.menu-meta{margin-top:40px;color:#888}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.hero{min-height:100vh;padding:13vh 4vw 4vh;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}
.hero h1{font-size:clamp(60px,8.5vw,145px);line-height:.83;letter-spacing:-.075em;font-weight:600;margin:25px 0 35px}
h1 em,h2 em{font-family:var(--serif);font-weight:400;letter-spacing:-.06em}.hero-text{max-width:430px;font-size:18px;color:#555;margin-bottom:32px}
.text-link{display:inline-flex;gap:25px;border-bottom:1px solid var(--ink);padding-bottom:8px}.text-link span{transition:.3s}.text-link:hover span{transform:translate(5px,5px)}
.hero-media{height:74vh;overflow:hidden;background:#ddd}.media-placeholder,.about-image{height:100%;display:grid;place-items:center;color:#666;font-size:11px;letter-spacing:.15em}
.hero-bottom{position:absolute;bottom:25px;left:4vw;right:4vw;display:flex;justify-content:space-between;color:#888;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.intro{padding:16vh 8vw 11vh;max-width:1100px}.intro h2{font-size:clamp(42px,6vw,88px);line-height:.95;letter-spacing:-.06em;margin-top:25px}.intro h2 span{font-family:var(--serif);font-style:italic}
.work{padding:0 4vw 14vh}.filters{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding:22px 0 45px}.filter{border:1px solid var(--line);background:transparent;padding:8px 16px;border-radius:30px;cursor:pointer}.filter.active,.filter:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:7vw 2vw}.project{grid-column:span 5;cursor:pointer}.project-large{grid-column:span 7}.project-tall{grid-column:span 5;margin-top:8vw}.project-wide{grid-column:4 / span 8;margin-top:3vw}
.project-image{aspect-ratio:1/1.08;overflow:hidden;background:#ccc;display:grid;place-items:center;transition:transform .6s cubic-bezier(.2,.7,.2,1)}.project-large .project-image{aspect-ratio:1.25/1}.project-tall .project-image{aspect-ratio:.8/1}.project-wide .project-image{aspect-ratio:1.7/1}
.project:hover .project-image{transform:scale(.985)}.project-image span{font-size:10px;letter-spacing:.15em;color:#666}.image-01{background:linear-gradient(145deg,#bdb9b1,#dedbd5)}.image-02{background:linear-gradient(145deg,#202020,#777)}.image-03{background:linear-gradient(145deg,#b7a184,#e4d2b4)}.image-04{background:linear-gradient(145deg,#a8aaa7,#d9d9d4)}.image-05{background:linear-gradient(145deg,#d0c0a8,#786b5c)}.image-06{background:linear-gradient(145deg,#cac6c1,#8c8984)}
.project-info{display:flex;justify-content:space-between;gap:15px;padding-top:12px}.project-info span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.project-info h3{font-size:14px;font-weight:500}.more-work{text-align:center;margin-top:100px;color:#777}
.section-label{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#777}
.about{padding:10vh 4vw 16vh}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:9vw;margin-top:7vw}.about-image{min-height:650px}.about-copy{padding-top:5vw;max-width:600px}.about-copy h2{font-size:clamp(46px,6vw,85px);line-height:.9;letter-spacing:-.065em;margin:25px 0 40px}.about-copy p:not(.eyebrow){font-size:17px;color:#555;max-width:500px;margin-bottom:20px}.button{display:inline-block;border:1px solid var(--ink);padding:13px 20px;border-radius:30px;margin-top:20px}.button:hover{background:var(--ink);color:#fff}
.services{padding:10vh 4vw 16vh}.services-head{display:grid;grid-template-columns:1fr 2fr;margin:7vw 0 5vw}.services-head h2{font-size:clamp(60px,9vw,140px);line-height:.8;letter-spacing:-.075em}.service-list{border-top:1px solid var(--ink)}.service{display:grid;grid-template-columns:8% 42% 40% 10%;align-items:center;padding:25px 0;border-bottom:1px solid var(--line);transition:.3s}.service:hover{padding-left:15px;background:#eae7e0}.service>span,.service p{color:#888;font-size:12px}.service h3{font-size:25px;letter-spacing:-.03em}.service b{text-align:right;font-size:20px;font-weight:400}
.contact{background:#004872;color:#f3f1ed;padding:15vh 8vw 12vh;min-height:80vh;display:flex;flex-direction:column;justify-content:center}.contact .eyebrow{color:#777}.contact h2{font-size:clamp(70px,11vw,180px);line-height:.78;letter-spacing:-.08em;margin:50px 0 80px}.contact-email{font-size:clamp(20px,3vw,42px);border-bottom:1px solid #555;padding-bottom:10px;align-self:flex-start}.contact-meta{display:flex;gap:35px;color:#777;font-size:12px;margin-top:70px;flex-wrap:wrap}
footer{padding:30px 4vw;display:flex;justify-content:space-between;color:#777;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.cursor{display:none;position:fixed;width:12px;height:12px;background:var(--accent);border-radius:50%;pointer-events:none;z-index:100;transform:translate(-50%,-50%);mix-blend-mode:difference}
@media(min-width:900px){.cursor{display:block}}
@media(max-width:900px){
 .hero{grid-template-columns:1fr;padding-top:110px}.hero-media{height:58vh}.hero h1{font-size:20vw}.hero-bottom{display:none}
 .intro{padding:12vh 6vw 9vh}.work,.about,.services{padding-left:6vw;padding-right:6vw}
 .grid{display:block}.project{margin-bottom:65px!important}.project-image{aspect-ratio:1.05/1!important}
 .about-grid,.services-head{grid-template-columns:1fr;gap:45px}.about-image{min-height:70vh}.about-copy{padding-top:0}
 .service{grid-template-columns:10% 1fr 10%}.service p{display:none}.service h3{font-size:20px}
 .contact{padding-left:6vw;padding-right:6vw}.contact h2{margin:40px 0 60px}.contact-email{font-size:20px}
 footer{padding:25px 6vw;display:block}footer span{display:block;margin:7px 0}
}


/* CAV Brand additions */
.brand-blue{color:var(--accent)}
.brand-bg{background:var(--accent);color:#fff}
.project-link{display:block}
.project-link .project-image{position:relative}
.project-link .project-image:after{content:"View project ↗";position:absolute;right:18px;bottom:18px;background:var(--accent);color:#fff;padding:8px 12px;border-radius:30px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:.3s}
.project-link:hover .project-image:after{opacity:1;transform:none}
.next-project{display:flex;justify-content:space-between;align-items:end;border-top:1px solid #333;padding-top:20px;margin-top:12vh}
.next-project a{font-size:clamp(38px,6vw,90px);line-height:.9;letter-spacing:-.06em}

.logo-image{width:190px;height:54px;display:flex;align-items:center}
.logo-image img{width:100%;height:auto;display:block}
.portfolio-head{display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--line);padding-top:18px;margin-bottom:35px}
.portfolio-head h2{font-size:clamp(34px,5vw,70px);letter-spacing:-.06em;line-height:.9;margin-top:14px}
.portfolio-head h2 span{font-size:.35em;color:var(--accent);vertical-align:top;margin-left:8px}
.portfolio-note{color:#777;font-size:13px;text-align:right}
.project-link{color:inherit;text-decoration:none}
.project-image{position:relative}
.project-image b{position:absolute;right:18px;bottom:18px;background:var(--accent);color:#fff;border-radius:30px;padding:9px 13px;font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:.3s}
.project-link:hover .project-image b{opacity:1;transform:none}
@media(max-width:900px){
 .logo-image{width:150px;height:48px}.portfolio-head{display:block}.portfolio-note{text-align:left;margin-top:20px}
}

@media(max-width:900px){
  .header{height:68px;padding:0 6vw}
}

/* V9 — images fit their containers without cropping */
.project-image{
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#eee;
}
.project-image:before{
    display:none;
}
.project-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
}
.project-image .image-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#777;
    font:10px var(--display);
    letter-spacing:.12em;
    text-transform:uppercase;
}
.hero-media img,
.about-photo img,
.project-hero-image img,
.gallery-img img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
}

/* V12 — Cookie consent + legal pages */
.cookie-banner{position:fixed;left:20px;right:20px;bottom:20px;z-index:100;background:#101419;color:#fff;border:1px solid rgba(255,255,255,.15);padding:20px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;box-shadow:0 15px 50px rgba(0,0,0,.22);transform:translateY(130%);transition:.45s ease}
.cookie-banner.show{transform:none}
.cookie-banner strong{display:block;font:600 14px var(--display);margin-bottom:5px}
.cookie-banner p{font-size:12px;color:#bbb;max-width:850px;line-height:1.5}
.cookie-banner a{text-decoration:underline}
.cookie-actions{display:flex;gap:8px;flex-wrap:wrap}
.cookie-btn{border:1px solid #666;background:transparent;color:#fff;padding:10px 13px;font:600 10px var(--display);text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.cookie-btn.primary{background:#fff;color:#101419;border-color:#fff}
.cookie-btn:hover{background:#004872;color:#fff;border-color:#004872}
.cookie-settings{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.58);display:none;align-items:flex-end;justify-content:center;padding:20px}
.cookie-settings.open{display:flex}
.cookie-panel{background:var(--cream);color:var(--ink);width:min(700px,100%);padding:28px;max-height:85vh;overflow:auto}
.cookie-panel h2{font:500 40px/.9 var(--display);letter-spacing:-.06em;margin-bottom:10px}
.cookie-panel>p{font-size:13px;color:#666;margin-bottom:20px}
.cookie-row{display:grid;grid-template-columns:1fr auto;gap:20px;border-top:1px solid #c5c2ba;padding:16px 0}
.cookie-row strong{font:600 13px var(--display)}
.cookie-row p{font-size:12px;color:#777;margin-top:4px}
.cookie-row input{width:40px;accent-color:#004872}
.cookie-panel-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.cookie-panel .cookie-btn{color:var(--ink);border-color:#999}
.cookie-panel .cookie-btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.legal-page{padding:145px 7vw 110px;max-width:1100px}
.legal-page .eyebrow{font:600 11px var(--display);letter-spacing:.16em;text-transform:uppercase;color:#777}
.legal-page h1{font:500 clamp(60px,9vw,125px)/.8 var(--display);letter-spacing:-.08em;margin:35px 0 70px}
.legal-content{max-width:820px}
.legal-content h2{font:500 27px var(--display);margin:42px 0 10px}
.legal-content p,.legal-content li{font-size:14px;line-height:1.7;color:#62666a}
.legal-content ul{padding-left:20px}
.legal-content a{text-decoration:underline;color:var(--blue)}
.legal-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:40px;font:10px var(--display);text-transform:uppercase;letter-spacing:.07em}
@media(max-width:800px){.cookie-banner{left:10px;right:10px;bottom:10px;grid-template-columns:1fr}.cookie-actions .cookie-btn{flex:1}.legal-page{padding:120px 16px 80px}.legal-page h1{font-size:20vw}}
 .legal-links-inline{margin-left:auto}.legal-links-inline a{text-decoration:underline}.footer-cookie{border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer} @media(max-width:900px){.legal-links-inline{margin-left:0;display:block;margin-top:8px}}
/* V13 — transparent image containers */
.project-image,
.project-image img,
.hero-media,
.hero-media img,
.about-photo,
.about-photo img,
.project-hero-image,
.project-hero-image img,
.gallery-img,
.gallery-img img {
    background: transparent !important;
}
.project-image {
    background-color: transparent !important;
}
.project-image .image-placeholder {
    background: transparent !important;
}

/* V17 — griglia portfolio a tre colonne su desktop */
.grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:auto !important;
    column-gap:32px !important;
    row-gap:72px !important;
    align-items:start !important;
    width:100% !important;
}


.grid .project,
.grid .project.project-large,
.grid .project.project-tall,
.grid .project.project-wide{
    grid-column:auto !important;
    grid-row:auto !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    align-self:start !important;
}
.grid .project-image,
.grid .project-large .project-image,
.grid .project-tall .project-image,
.grid .project-wide .project-image{
    width:100% !important;
    height:auto !important;
    aspect-ratio:4 / 3 !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:transparent !important;
    transform:none !important;
}
.grid .project-image img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    display:block !important;
}
.grid .project-info{
    width:100% !important;
    min-height:28px !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:baseline !important;
    gap:16px !important;
    padding-top:12px !important;
}
.grid .project-info h3,
.grid .project-info span{
    margin:0 !important;
}
@media(max-width:800px){
    .grid{
        grid-template-columns:1fr !important;
        row-gap:48px !important;
    }
    .grid .project-info{
        display:block !important;
    }
    .grid .project-info span{
        display:block !important;
        margin-bottom:5px !important;
    }
}

.video-portfolio {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Pagina 404 */
.error-back{font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.error-page{min-height:calc(100vh - 76px);padding:150px 8vw 8vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.error-page h1{font-size:clamp(68px,11vw,180px);line-height:.78;letter-spacing:-.08em;margin:28px 0 38px}
.error-page>p:not(.eyebrow){max-width:480px;font-size:clamp(17px,2vw,24px);color:#555}
.error-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:35px}
.error-actions .button{margin-top:0}
@media(max-width:900px){.error-page{min-height:calc(100vh - 68px);padding:120px 6vw 8vh}.error-page h1{font-size:20vw}.error-actions{align-items:flex-start;flex-direction:column;gap:24px}}

/* Immagine profilo: occupa sempre solo lo spazio disponibile */
.about-grid > *{min-width:0}
.about-image{overflow:hidden}
.about-image img{
    width:100%;
    height:100%;
    max-width:100%;
    object-fit:contain;
    object-position:center;
    display:block;
}
@media(max-width:800px){
    .about-copy{max-width:100%}
    .about-image img{object-fit:contain}
}