/* Tailwind Utilities - Production Build */
*{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}
body{margin:0;line-height:inherit}
.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}
.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(245 245 240 / var(--tw-bg-opacity))}
.bg-white\/70{--tw-bg-opacity:0.5;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}
.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}
.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity))}
.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}
.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}
.text-white{color:#ffffff}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
@media (min-width:640px){.container{max-width:640px}}
@media (min-width:768px){.container{max-width:768px}}
@media (min-width:1024px){.container{max-width:1024px}}
@media (min-width:1280px){.container{max-width:1280px}}
.flex{display:flex}
.grid{display:grid}
.h-screen{height:100vh}
.h-8{height:2rem}
.h-10{height:2.5rem}
.w-8{width:2rem}
.w-10{width:2.5rem}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem}
.max-w-90vw{max-width:90vw}
.mx-auto{margin-left:auto;margin-right:auto}
.min-h-screen{min-height:100vh}
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.p-10{padding:2.5rem}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-12{margin-bottom:3rem}
.mb-16{margin-bottom:4rem}
.mb-20{margin-bottom:5rem}
.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}
.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}
.space-y-16>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(4rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(4rem * var(--tw-space-y-reverse))}
.space-y-24>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(6rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(6rem * var(--tw-space-y-reverse))}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}
.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-center{justify-content:center}
.text-center{text-align:center}
.text-justify{text-align:justify}
.text-xs{font-size:0.75rem;line-height:1rem}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1}
.text-6xl{font-size:3.75rem;line-height:1}
.text-7xl{font-size:4.5rem;line-height:1}
.text-8xl{font-size:6rem;line-height:1}
.font-light{font-weight:300}
.font-medium{font-weight:500}
.font-bold{font-weight:700}
.leading-tight{line-height:1.25}
.leading-relaxed{line-height:1.625}
.relative{position:relative}
.absolute{position:absolute}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0}
.left-0{left:0}
.bottom-6{bottom:1.5rem}
.bottom-8{bottom:2rem}
.left-1\/2{left:50%}
.z-10{z-index:10}
.z-100{z-index:100}
.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.bg-fixed{background-attachment:fixed}
.bg-center{background-position:center}
.bg-bottom{background-position:bottom}
.bg-contain{background-size:contain}
.bg-no-repeat{background-repeat:no-repeat}
.border-t{border-top-width:1px}
.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity))}
.rounded-sm{border-radius:0.125rem}
.rounded-4px{border-radius:4px}
.rounded-50{border-radius:50%}
.shadow-sm{--tw-shadow: 0 3px 8px 0 rgb(0 0 0 / 0.15);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
.cursor-pointer{cursor:pointer}
.object-fit-contain{object-fit:contain}
.inline-block{display:inline-block}
@media (min-width:640px){.sm\:text-sm{font-size:0.875rem;line-height:1.25rem}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.sm\:gap-4{gap:1rem}.sm\:p-6{padding:1.5rem}.sm\:mb-12{margin-bottom:3rem}}
@media (min-width:768px){.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:mb-6{margin-bottom:1.5rem}.md\:mb-12{margin-bottom:3rem}.md\:mb-16{margin-bottom:4rem}.md\:mb-20{margin-bottom:5rem}.md\:gap-6{gap:1.5rem}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:py-16{padding-top:4rem;padding-bottom:4rem}.md\:p-8{padding:2rem}}
@media (min-width:1024px){.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}.lg\:text-7xl{font-size:4.5rem;line-height:1}.lg\:mb-20{margin-bottom:5rem}.lg\:mb-16{margin-bottom:4rem}.lg\:py-24{padding-top:6rem;padding-bottom:6rem}.lg\:p-10{padding:2.5rem}.lg\:space-y-24>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(6rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(6rem * var(--tw-space-y-reverse))}}
@media (min-width:1280px){.xl\:text-8xl{font-size:6rem;line-height:1}}
@media (max-width:767px){.hero-section{background-attachment:fixed !important}}

/* Mobile readability: min 16px body text (WCAG-friendly) */
@media (max-width:767px){
  .text-xs{font-size:1rem;line-height:1.5rem}
  .text-sm{font-size:1.0625rem;line-height:1.5rem}
  .contact-input{font-size:1.0625rem}
  .contact-label{font-size:0.9375rem}
  .contact-status{font-size:1rem}
  .btn-outline-black{font-size:1rem}
}

/* AOS minimal */
[data-aos]{opacity:0;transition-property:opacity,transform;transition-duration:0.8s;transition-timing-function:ease-out}
[data-aos].aos-animate{opacity:1;transform:translate(0,0)}
[data-aos="fade-up"]{transform:translate3d(0,30px,0)}
@media (prefers-reduced-motion:reduce){
  [data-aos]{opacity:1;transform:none;transition:none}
}

/* Base typography & layout */
body{font-family:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html{scroll-behavior:smooth}
h1{font-family:"Waterfall",cursive}

@keyframes logoFadeIn{
  0%{opacity:0;transform:translateY(-20px) scale(0.95)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.logo-animate{animation:logoFadeIn 1.2s ease-out forwards}
.header-logo{width:512px;height:auto;object-fit:contain;max-width:80vw;}

/* Hero */
.hero-section{min-height:100vh;min-height:-webkit-fill-available}

/* Scroll down */
.scroll-down{animation:blink 2s ease-in-out infinite;cursor:pointer;padding:12px;margin:-12px}

/* Background handling */
@media (orientation:landscape){
  .hero-section{background-size:100vw auto !important;background-position:center bottom !important}
}
@media (orientation:portrait){
  .hero-section{background-size:auto 100vh !important;background-position:center bottom !important}
}
@media (max-width:767px){
  .hero-section{background-attachment:fixed !important}
}

/* Skip link */
.skip-link{position:absolute;top:-40px;left:0;background:#000;color:#fff;padding:8px 16px;text-decoration:none;z-index:100;border-radius:4px;font-weight:500}
.skip-link:focus{top:0}

/* Global link style */
a{
  text-decoration:none;
  color:DarkGoldenRod;
}
a:hover{
  text-decoration:none;
  color:DarkGoldenRod;
}

/* Headings readability on mobile */
@media (max-width:767px){
  h2{font-size:1.5rem !important;line-height:2rem !important} /* 24px */
  h3{font-size:1.25rem !important;line-height:1.75rem !important} /* 20px */
}

/* Focus styles */
a:focus,button:focus,[tabindex="0"]:focus{outline:2px solid #2563eb;outline-offset:2px;border-radius:4px}
.scroll-down:focus{outline:2px solid #2563eb;outline-offset:4px;border-radius:50%}

@keyframes blink{
  0%,100%{opacity:1}
  50%{opacity:0.3}
}

/* Screen reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Carousel marchi */
.brands-section{background-color:#ffffff}
.brands-track-wrapper{overflow:hidden;position:relative}
.brands-fade{position:absolute;top:0;bottom:0;width:40px;pointer-events:none;z-index:10}
.brands-fade-left{left:0;background:linear-gradient(to right,#ffffff,rgba(255,255,255,0))}
.brands-fade-right{right:0;background:linear-gradient(to left,#ffffff,rgba(255,255,255,0))}
.brands-track{display:flex;align-items:center;gap:2.5rem;width:max-content;animation:brands-scroll 40s linear infinite}
.brands-logo{height:56px;width:auto;object-fit:contain;filter:grayscale(0.2);opacity:0.9;transition:transform 0.2s ease-out,filter 0.2s ease-out,opacity 0.2s ease-out}
.brands-logo:hover{transform:scale(1.04);filter:grayscale(0);opacity:1}
@media (min-width:768px){
  .brands-logo{height:64px}
}
@keyframes brands-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* Gallery carousel: mobile fade loop, desktop 4 in riga */
.gallery-section{background-color:#fff}
.gallery-section .container{padding-left:0;padding-right:0}
.gallery-carousel{
  position:relative;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}
@media (max-width:767px){
  .gallery-carousel{
    height:0;
    padding-bottom:75%;
    min-height:240px;
  }
  .gallery-slide{
    position:absolute;
    inset:0;
    opacity:0;
    animation:gallery-fade 8s ease-in-out infinite;
  }
  .gallery-slide:nth-child(1){animation-delay:0s}
  .gallery-slide:nth-child(2){animation-delay:2s}
  .gallery-slide:nth-child(3){animation-delay:4s}
  .gallery-slide:nth-child(4){animation-delay:6s}
  .gallery-slide img{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    object-fit:cover;
    display:block;
    border:0;
  }
}
@keyframes gallery-fade{
  0%,100%{opacity:0}
  8%,42%{opacity:1}
  50%,92%{opacity:0}
}
@media (min-width:768px){
  .gallery-carousel{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    height:auto;
    padding-bottom:0;
  }
  .gallery-slide{
    position:relative;
    opacity:1;
    animation:none;
    margin:0;
    padding:0;
  }
  .gallery-slide img{
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    border:0;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
  }
}

/* Background fade swap (cross-fade tra 2 immagini) */
.bg-fade-two{
  position:relative;
  overflow:hidden;
  width:100%;
  height:50vh !important;
  min-height:50vh !important;
}
.bg-fade-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  margin:0;
  padding:0;
  border:0;
}
.bg-fade-layer-1{
  z-index:0;
  opacity:1;
  animation:bg-fade-out 12s ease-in-out infinite;
}
.bg-fade-layer-2{
  z-index:1;
  opacity:0;
  animation:bg-fade-in 12s ease-in-out infinite;
}
@keyframes bg-fade-out{
  0%,40%{opacity:1}
  50%,90%{opacity:0}
  100%{opacity:1}
}
@keyframes bg-fade-in{
  0%,40%{opacity:0}
  50%,90%{opacity:1}
  100%{opacity:0}
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  .logo-animate,.scroll-down{animation:none}
  .brands-track{animation:none}
  .brands-logo{transition:none;transform:none}
  .gallery-slide{animation:none !important}
  .bg-fade-layer-1{animation:none !important;opacity:1}
  .bg-fade-layer-2{animation:none !important;opacity:0}
  html{scroll-behavior:auto}
}
@media (prefers-reduced-motion:reduce) and (max-width:767px){
  .gallery-carousel .gallery-slide{opacity:0}
  .gallery-carousel .gallery-slide:first-child{opacity:1;position:absolute;inset:0}
}

/* Contact form – glass + outline buttons */
.contact-section{background:linear-gradient(to bottom,#f9fafb,#ffffff);position:relative;overflow:hidden}
.contact-bg-fade{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.contact-bg-overlay{position:absolute;inset:0;z-index:2;background:rgba(0,0,0,0.1);pointer-events:none}
.contact-section .container{position:relative;z-index:1}
.contact-card{position:relative;z-index:1}
.contact-card{
  max-width:40rem;
  margin-left:auto;
  margin-right:auto;
  border-radius:1rem;
  border:1px solid rgba(15,23,42,0.08);
  background:rgba(255,255,255,0.5);
  box-shadow:0 18px 45px rgba(15,23,42,0.08);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(12px);
}
.contact-card,.contact-input,.btn-outline-black,textarea{
  font-family:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.contact-card-header{padding:1.25rem 1.25rem 0.6rem}
@media (min-width:768px){
  .contact-card-header{padding:1.5rem 1.5rem 0.8rem}
}
.contact-fields{padding:0 1.25rem 1.25rem}
@media (min-width:768px){
  .contact-fields{padding:0 2rem 1.75rem}
}
.contact-input{
  width:100%;
  border:none;
  border-bottom:1px solid #000000;
  background-color:transparent;
  padding:0.4rem 0;
  font-size:0.95rem;
  color:#000000;
}
.contact-input::placeholder{color:#222222}
.contact-input:focus{
  outline:none;
  border-bottom-color:#000000;
}
.contact-label{
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:#000000;
}
.contact-status{
  min-height:1rem;
  font-size:0.85rem;
  color:#000000;
}

.contact-consent{
  display:flex;
  align-items:flex-start;
  gap:0.5rem;
  font-size:0.9rem;
  line-height:1.35;
  color:#000000;
}
.contact-consent input{
  margin-top:0.2rem;
  width:1.05rem;
  height:1.05rem;
  accent-color:DarkGoldenRod;
}
.contact-consent label{
  cursor:pointer;
}

/* Compact spacing between form blocks */
#altokarato-contact-form > * + *{
  margin-top:0.75rem;
}
@media (max-width:767px){
  #altokarato-contact-form > * + *{
    margin-top:0.6rem;
  }
}

.btn-outline-black{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.6rem 1.4rem;
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:9999px;
  border:1px solid #000000;
  color:#111827;
  background-color:transparent;
  transition:background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.btn-outline-black:hover{
  background-color:#000000;
  color:#ffffff;
  box-shadow:0 12px 30px rgba(15,23,42,0.25);
  transform:translateY(-1px);
}
.btn-outline-black:focus-visible{
  outline:2px solid #111827;
  outline-offset:2px;
}