/* Teseo Web Design overrides on top of the Webflow template */
.video-logo img.teseo-mark{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:1}
.client-site{opacity:.7;letter-spacing:.02em}
.client-site.dk{color:inherit}
.chat-avatar{display:flex;align-items:center;justify-content:center;background:#e8e8e8;color:#111;font-weight:600;font-size:14px}
/* hero title: "Teseo" + "Web Design" must fit half the grid each */
@media (min-width:992px){.bottom-grid._2.for-hr .h1{font-size:8vw;white-space:nowrap;line-height:1.2;padding-bottom:.15em;letter-spacing:.04em}}
.bottom-grid._2.for-hr .h1{letter-spacing:.03em;line-height:1.2;padding-bottom:.15em}
/* white mark on dark footer */
.footer .teseo-mark{filter:none}
/* testimonial card that used a video background */
.stats-grid h2{white-space:nowrap}
/* Syne everywhere */
:root{--font--primary-font:'Syne',sans-serif}
html,body,input,textarea,select,button,.w-input,.w-select,.button,.top-text,.h1,.h2,.h3{font-family:'Syne',sans-serif}
/* symbol-only logo: a bit bigger */
.logo-first .video-logo{width:34px;height:34px;min-width:34px}

/* ---------- round 3 ---------- */
/* one single colour: the grey sections become white */
:root,body,.h1{--colors--second-color:#fff!important;--colors--footer-color:#fff!important}
.card-half._02{background:#fff!important;border:1px solid #ececec}
.testimonials-section{background:#fff}
/* headings: more room so descenders (g, p, q) are never clipped */
.h1,.h2,.h3,.inner-title,.service-title,.work-title,.about-title,.pricing-txt,.cta-sm-title,.h2._01{line-height:1.22!important;padding-bottom:.14em}
.service-title,.inner-title{overflow:visible!important}
/* hero + menu in capitals */
.bottom-grid._2.for-hr .h1{text-transform:uppercase}
.nav-menu .navigation-text-main,.nav-top-flex .button-text,.nav-top-flex .navigation-text-main,.menu-bottom .navigation-text-main,.footer-small-grid:not(.sec) .navigation-text-main{text-transform:uppercase;letter-spacing:.04em}
.menu-bottom .navigation-text-main{font-size:12px;letter-spacing:.02em}
.footer-small-grid:not(.sec) .navigation-text-main{font-size:13px}
/* no little dots (kept only as progress marks on the review cards) */
.circle-divider{display:none!important}
.start-flex .circle-divider,.item-flex .circle-divider{display:block!important}
/* no crosshair lines following the cursor */
.verical-line,.horizontal-line{display:none!important}
/* "our vision" section: black from the very start */
.animation-section{background:#000!important}
/* review cards with a photo/video background (like the BBGroup one) */
.testimonials-card.has-bg{color:#fff}
.testimonials-card._01{z-index:4}.testimonials-card._02{z-index:3}.testimonials-card._03{z-index:2}.testimonials-card._04{z-index:1}
.testimonials-card.has-bg .client-site{color:#fff;opacity:.85}
/* the review cards must never run over the next section */
.testimonials-section{overflow:clip;clip-path:inset(0 0 100px 0)}
/* contact card intro + assistant button */
.cta-intro{font-size:15px;line-height:1.35;color:#ffffffcc;margin:14px 0 22px;max-width:520px}
.qa-open{margin-top:12px;width:100%;font:inherit;font-size:15px;padding:14px 20px;border-radius:30px;border:1px solid #ffffff80;background:transparent;color:#fff;cursor:pointer;transition:all .2s}
.qa-open:hover{background:#fff;color:#000}
/* floating chat button + panel */
.qa-launch{position:fixed;right:20px;bottom:20px;z-index:9990;display:flex;align-items:center;gap:10px;padding:14px 20px;border:0;border-radius:40px;background:#000;color:#fff;font:inherit;font-size:14px;letter-spacing:.02em;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .2s,opacity .2s}
.qa-launch:hover{transform:translateY(-2px)}
.qa-launch-hide{opacity:0;pointer-events:none;transform:translateY(10px)}
.qa-float{position:fixed;right:20px;bottom:20px;z-index:9991;width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 40px);display:none;flex-direction:column;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 20px 60px rgba(0,0,0,.5);border:1px solid #ffffff26}
.qa-float.open{display:flex}
.qa-float-body{flex:1;min-height:0;display:flex;padding:10px;overflow-y:auto}
.qa-float .qa{max-width:none;background:#000;-webkit-backdrop-filter:none;backdrop-filter:none}
.qa-float .qa-bot{background:#161616;border-color:#ffffff29}
.qa-float .qa-user{background:#fff;color:#000}
.qa-float .qa-log{height:300px}
.qa-float-close{position:absolute;top:10px;right:14px;z-index:3;width:34px;height:34px;border:0;background:transparent;color:#fff;font-size:28px;line-height:1;cursor:pointer}
@media (max-width:600px){.qa-launch span{display:none}.qa-launch{padding:15px;right:14px;bottom:80px}.qa-float{right:0;bottom:0;width:100vw;max-height:100vh;border-radius:0}}
/* quote section title: longer lines, keep each on one row */
.pricing-txt{white-space:nowrap;font-size:clamp(34px,6vw,86px)!important}
/* Progetti page: grid right under the title */
.page-work .hero.for-inner{height:400px;min-height:0;padding-top:260px;position:relative;z-index:21;overflow:visible}
.page-work section.section>.spacer-xxl:first-child{height:20px}
/* SplitText masks clip every letter at its own box: give them breathing room (letters were cut on the sides) */
[class*="gsap_split"][class*="mask"]{padding-left:.12em!important;padding-right:.12em!important;margin-left:-.12em!important;margin-right:-.12em!important;padding-bottom:.14em!important;margin-bottom:-.14em!important}
/* Azura Resort: every image shown whole, no cover-crop / zoom */
.page-nozoom .photo-wrapper{height:auto!important;min-height:0!important}
.page-nozoom img.work-photo-first{object-fit:contain!important;height:auto!important;min-height:0!important;width:100%;display:block}
/* project pages: the big image under the title is shorter (and never stretched) */
section.work-photo{min-height:0!important;height:clamp(300px,42vw,620px);background-size:cover!important;background-position:center!important}
/* Progetti page: three columns (two on tablet, one on phone) */
.page-work .grid-work-02{grid-template-columns:repeat(3,1fr)}
@media (max-width:991px){.page-work .grid-work-02{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.page-work .grid-work-02{grid-template-columns:1fr}}
/* Progetti page: square cards */
.page-work .work-wrapper-2{min-height:0}
.page-work .work-content-wrapper{height:auto!important;aspect-ratio:1/1}
/* service list: link to the service page */
.svc-link{display:inline-block;margin-top:18px;font-size:14px;color:inherit;text-decoration:underline;text-underline-offset:4px}
.svc-link:hover{opacity:.7}
/* mobile: uppercase hero title must fit the screen */
@media (max-width:991px){.bottom-grid._2.for-hr .h1{font-size:11.5vw!important;letter-spacing:.01em;white-space:nowrap}}
/* bottom pill: six entries need more room */
.menu-bottom{max-width:880px!important;width:calc(100vw - 32px);grid-template-columns:1fr 56px 1fr!important;padding:14px 22px!important}
.menu-first-bottom{gap:22px!important;flex-wrap:nowrap}
.menu-first-bottom .button-link,.menu-first-bottom .navigation-text-main{white-space:nowrap}

/* never a horizontal scrollbar */
html,body{overflow-x:clip}

/* our own mockups instead of stock photography */
/* contact section above the footer: plain black, no photo */
.photo-section{display:none!important}
.section.ctc{background:#000!important}
.absolute-photo{background-image:url(../images/live/n/alm-3.webp?v=76925d74)!important;background-size:cover!important;background-position:center!important}
.photo-half._01{background-image:url(../images/live/n/new-veloce.webp?v=a53ec6fe)!important;background-size:cover!important;background-position:center!important}
.photo-half._02{background-image:url(../images/live/n/new-arbor.webp?v=3b21b99e)!important;background-size:cover!important;background-position:center!important}
.card-bgimg{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none}
#Pricing .max-w-center{margin-bottom:60px}

/* contact section: image on the right */
.ctc-img{align-self:end;justify-self:end;width:min(100%,520px);border-radius:12px;overflow:hidden;aspect-ratio:4/3;position:relative}
.ctc-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:991px){.ctc-img{display:none}}

/* hero carousel sits inside the white hero panel (so it shrinks with it), behind the text */
.hero-carousel{position:absolute;inset:0;z-index:-1;overflow:hidden}

/* hero title: two lines (TESEO / WEB DESIGN) in the white corner that the cards never cross */
@media (min-width:992px){
  .bottom-grid._2.for-hr{display:flex!important;flex-direction:column;align-items:flex-start;grid-template-columns:none!important;gap:0!important;margin-left:-26px}
  .bottom-grid._2.for-hr .h1{font-size:7vw!important;line-height:1.02!important;padding-bottom:0!important;margin:0}
}

/* phone hero */
@media (max-width:767px){
  .container-bottom.add-px{top:60px!important;left:0!important;right:0!important;width:100%!important;max-width:none!important;padding-left:0!important;padding-right:10px!important}
  .container-bottom.add-px .bottom-grid{justify-content:flex-end!important;max-width:none!important;width:100%!important}
  .container-bottom.add-px .max-w-left.add-tp{margin-top:6px!important}
  .container-bottom.add-px .max-w-left.add-tp{display:flex;flex-direction:column;align-items:flex-end;text-align:right;margin-left:auto;max-width:72%;margin-right:0}
  .container-bottom.add-px .max-w-left.add-tp .top-text{text-align:right}
  .container-bottom.bottom.add-max-cnt{bottom:48px!important;top:auto!important}
  .bottom-grid._2.for-hr{inset:auto!important;margin:0!important;gap:0!important;flex-direction:column}
  .bottom-grid._2.for-hr .h1{font-size:10.5vw!important;line-height:.92!important;margin:0!important;padding:0!important}
}

/* review cards: solid black, project picture between the label row and the quote */
.testimonials-card.rv-black{background:#000!important;color:#fff!important;min-height:500px}
.testimonials-card.rv-black .client-site{color:#fff;opacity:.85}
.testimonials-card.rv-black .top-text{color:#fff}
.testimonials-card.rv-black .card-author p:last-child,.testimonials-card.rv-black .sml{opacity:.6}
.rv-pic{margin:18px 0 20px;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:#111;flex:0 0 auto}
.rv-pic img{width:100%;height:100%;object-fit:cover;display:block}
.testimonials-card.rv-black .card-testi{margin-top:auto}

/* single project pages: 'Altri progetti' closer to the section above (the template spacers use min-height) */
.page-proj section.section:not(.work-photo):not(.gr)>.spacer-xxl:last-child{height:0;min-height:0}
.page-proj section.gr.mns-wp>.spacer-xxl:nth-child(-n+2){height:0;min-height:0}
.page-proj section.gr.mns-wp>.spacer-xxl:first-child{height:30px;min-height:30px}

/* single project pages: the "Design e funzionalità" text uses the full width, in two columns */
@media (min-width:992px){
  .page-proj .work-grid>.max-w-left.add-wkp{grid-column:1/-1!important;max-width:none}
  .page-proj .work-grid>.max-w-left.add-wkp .wkp{column-count:1;max-width:1040px}
}

/* phone: hero follows the visible viewport (Safari toolbars) and the title sits well above the bottom edge */
@media (max-width:767px){
  .hero-agency,.hero-track .hero,.grid-hero-agency{height:100svh}
  .container-bottom.bottom.add-max-cnt{bottom:calc(env(safe-area-inset-bottom,0px) + 34px)!important}
}

/* phone: services section = three always-open blocks (title in black + description), no scroll/hover activation */
@media (max-width:767px){
  .section .bottom-grid._1.grd .contact-info.for-button,.section .bottom-grid._1.grd .contact-info.for-button *{white-space:nowrap!important}
  .section .bottom-grid._1.grd{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center;justify-content:space-between;gap:12px}
  .section .bottom-grid._1.grd>div:last-child{width:auto!important;flex:0 0 auto}
  .section .bottom-grid._1.grd .contact-info.for-button{padding-left:22px;padding-right:22px}
  .service-list .service-wrapper{display:block!important;padding:26px 0 22px;border-bottom:1px solid #00000026}
  .service-list .service-wrapper:first-child{border-top:1px solid #00000026}
  .service-list .service-title-wrap{opacity:1!important;align-items:baseline}
  .service-list .service-title{color:#000!important;font-size:clamp(40px,12.5vw,56px)!important;line-height:1.1}
  .service-list .service-media-wrap{display:block!important;height:auto!important;opacity:1!important;visibility:visible!important;position:static!important;padding:14px 0 0 38px}
  .service-list .service-media-sticky{position:static!important;display:block!important;height:auto!important}
  .service-list .service-media-sticky .image-wrap{display:none!important}
  .service-list .service-media-sticky p.top-text{font-size:16px!important;line-height:1.4;opacity:.8;max-width:none;margin:0}
  .service-list .svc-link{margin-top:14px}
}
@media (max-width:767px){.service-list,.service-grid{width:100%!important;max-width:none!important}}

/* phone: chat button right in the bottom corner */
@media (max-width:600px){.qa-launch{right:12px!important;bottom:calc(env(safe-area-inset-bottom,0px) + 12px)!important}}

/* live-collaboration card: colourful gradient instead of the grey still of the old video */
.bg-collab{background-image:radial-gradient(circle at 22% 18%,#7b4bff 0,transparent 55%),radial-gradient(circle at 80% 30%,#3c7bff 0,transparent 50%),radial-gradient(circle at 70% 85%,#ff4fa3 0,transparent 55%),radial-gradient(circle at 15% 90%,#2a2fd6 0,transparent 55%),linear-gradient(160deg,#3b1db0,#1b1f7a)!important;background-size:cover!important}

@media (max-width:767px){
  /* "Non facciamo siti come tutti gli altri..." closer to the cards below */
  .bottom-grid._1.tp+.margin-70,.bottom-grid._1.tp~.margin-70{margin-top:18px}
  .section.with-minus .container>div>.margin-70{margin-top:18px}
  .wdo-grid{margin-top:0}
  /* services: use the full width */
  .service-list .service-media-wrap{padding-left:0!important}
  .service-list .service-title-wrap{padding-right:0}
  .service-list .service-media-sticky p.top-text{font-size:17px!important}
}

/* phone: nothing touches the edge of the screen */
@media (max-width:767px){
  .container,.container-bottom.add-px,.footer .container{padding-left:16px!important;padding-right:16px!important}
  .section .container>div>.wdo-grid,.work-main,.card-full{margin-left:0;margin-right:0}
  .footer-grid,.footer-bottom-grid{padding-left:0;padding-right:0}
}

/* SEO structure: headings demoted to plain blocks keep the look the heading tags had (zero specificity: any class wins) */
:where(.nh1){margin-top:20px;margin-bottom:10px;font-size:var(--font--h1);font-weight:var(--font-weight--500)}
:where(.nh2){margin-top:20px;margin-bottom:10px;font-size:var(--font--h2);line-height:var(--line-height--page-line-height);font-weight:var(--font-weight--500)}
:where(.nh3){margin-top:20px;margin-bottom:10px;font-size:var(--font--h3);font-weight:var(--font-weight--600)}
:where(.nh4,.nh5,.nh6){margin-top:20px;margin-bottom:10px;font-weight:var(--font-weight--600)}
/* the home H1 holds both words of the hero title */
h1.bottom-grid{margin:0;font-size:inherit;line-height:inherit;font-weight:inherit}
h1.bottom-grid>span,h1.bottom-grid>span>span.h1{display:block}
/* contact page: the H1 is a full question */
.page-contatti h1.inner-title{font-size:clamp(34px,5.6vw,92px)!important;line-height:1.08!important;max-width:1100px;margin-left:auto;margin-right:auto}
/* phone: the longer keyword intro stays compact so the carousel keeps its space */
@media (max-width:767px){.hero .top-text.big.nm{font-size:12.5px!important;line-height:1.28!important}}

/* forms: consent line, confirmation message */
.form-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.4;margin:14px 0 4px;cursor:pointer}
.form-consent input{margin-top:3px;flex:0 0 auto}
.form-consent a{text-decoration:underline;color:inherit}
.form-msg{margin-top:14px;font-size:15px;line-height:1.4;padding:14px 16px;border-radius:8px;background:#ffffff1f}
.form-msg.err{background:#ff5a4326}
.form-msg a{text-decoration:underline;color:inherit}
.page-contatti .form-msg{background:#0000000d}
.qa-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* desktop: hero title keeps a margin from the left edge */
/* only on Mac-like screens (Macs and other high-density laptop displays); other desktops are unchanged */
@media (min-width:992px){.is-mac h1.bottom-grid._2.for-hr{padding-left:clamp(64px,5.2vw,100px)!important}}
@media (min-width:992px) and (min-resolution:2dppx) and (max-width:1800px){h1.bottom-grid._2.for-hr{padding-left:clamp(64px,5.2vw,100px)!important}}
.qa-float .qa-head{padding-right:34px}
/* quote assistant: white panel */
.qa,.qa-float .qa{background:#fff!important;color:#000;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid #0000001a}
.qa-float{background:#fff;border:1px solid #0000001f;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.qa-float-close{color:#000}
.qa-title,.qa-progress,.qa-flabel,.qa-check,.qa-sum-line{color:#000}
.qa-bot,.qa-float .qa-bot{background:#f2f2f2;color:#000;border:1px solid #e2e2e2}
.qa-user,.qa-float .qa-user{background:#000;color:#fff}
.qa-opt{border:1px solid #00000040;color:#000;background:transparent}
.qa-opt:hover{border-color:#000;background:#0000000d}
.qa-opt.on{background:#000;border-color:#000;color:#fff}
.qa-go{background:#000;color:#fff}
.qa-go:hover:not(:disabled){background:#222}
.qa-input{border:1px solid #00000040;color:#000;background:#fff}
.qa-input::placeholder{color:#00000099}
.qa-input:focus{border-color:#000}
.qa-btn{border:1px solid #00000040;color:#000}
.qa-btn:hover{border-color:#000;background:#0000000d}
.qa-link,.qa-mail{color:#000}
.qa-sum-line{border-bottom:1px solid #00000026}
.qa-error{color:#c0392b}
.qa-log::-webkit-scrollbar-thumb{background:#00000040}
.qa a{color:#000}
/* quote section: light stage, white panel */
.qa-stage{background:#000!important}
.qa-photo{background:radial-gradient(120% 90% at 85% 0%,#2a2a2a 0%,#111 45%,#000 100%)!important}
.qa{box-shadow:0 10px 40px rgba(0,0,0,.35)}
.qa-float .qa{box-shadow:none}

/* project pages, "Altri progetti": smaller cards so the images stay sharp */
@media (min-width:768px){.page-proj .grid-work-02{max-width:820px;margin-left:auto;margin-right:auto}}
.page-proj .work-wrapper-2{min-height:0}
.page-proj .work-content-wrapper{height:auto!important;aspect-ratio:1/1}

/* contact section at the end of every page: more black space above and below, so the card is never cut */
.section.ctc{padding-top:calc(13% + 140px)!important;padding-bottom:calc(8% + 140px)!important}
@media (max-width:767px){.section.ctc{padding-top:calc(13% + 90px)!important;padding-bottom:calc(8% + 90px)!important}}