/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before{box-sizing:border-box;border:0 solid;margin:0;padding:0}::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.start{inset-inline-start:var(--spacing)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}

/* ---- Progetto Ben-Essere: stili del sito ---- */

:root {
  --ink:#272425;
  --cream:#f2f2ed;
  --paper:#f7f7f3;
  --green:#bf172e;
  --blue:#bf172e;
  --amber:#bf172e;
  --red:#bf172e;
  --charcoal:#474647
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  background:var(--paper);
  color:var(--ink);
  margin:0;
  font-family:Arial,Helvetica,sans-serif
}

a {
  color:inherit;
  text-decoration:none
}

.topbar {
  z-index:20;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  background:#fbfaf6f0;
  border-bottom:1px solid #dcded7;
  justify-content:space-between;
  align-items:center;
  height:82px;
  padding:0 clamp(24px,5vw,76px);
  display:flex;
  position:sticky;
  top:0
}

.brand {
  align-items:center;
  gap:12px;
  display:flex
}

nav {
  gap:34px;
  font-size:14px;
  font-weight:600;
  display:flex
}

.hero {
  background:radial-gradient(circle at 65% 5%,#fff 0,transparent 30%),var(--cream);
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:50px;
  min-height:680px;
  padding:75px clamp(24px,7vw,110px) 90px;
  display:grid;
  overflow:hidden
}

.kicker {
  color:#578625;
  text-transform:uppercase;
  letter-spacing:.16em;
  margin:0 0 20px;
  font-size:11px;
  font-weight:800
}

h1 {
  letter-spacing:-.075em;
  margin:0;
  font-size:clamp(58px,7vw,104px);
  font-weight:750;
  line-height:.89
}

.lead {
  color:#59645e;
  max-width:560px;
  margin:30px 0 34px;
  font-size:18px;
  line-height:1.6
}

.primary-button {
  background:var(--ink);
  color:#fff;
  border-radius:999px;
  align-items:center;
  gap:40px;
  padding:16px 21px 16px 25px;
  font-size:14px;
  font-weight:700;
  transition:all .2s;
  display:inline-flex
}

.primary-button:hover {
  background:#254236;
  transform:translateY(-2px)
}

.primary-button span {
  font-size:19px
}

.services {
  padding:110px clamp(24px,7vw,110px)
}

.section-heading {
  grid-template-columns:1fr 1.2fr 1fr;
  align-items:end;
  gap:50px;
  margin-bottom:52px;
  display:grid
}

.section-heading .kicker {
  align-self:start
}

h2 {
  letter-spacing:-.055em;
  margin:0;
  font-size:clamp(39px,4.5vw,66px);
  line-height:1
}

.section-heading>p:last-child,.access>div:first-child>p:last-child {
  color:#65706a;
  line-height:1.6
}

.card-grid {
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  display:grid
}

.service-card {
  border-radius:24px;
  flex-direction:column;
  min-height:530px;
  padding:30px;
  transition:all .25s;
  display:flex
}

.service-card:hover {
  transform:translateY(-5px)
}

.service-card.green {
  background:#e5f1cf
}

.service-card.blue {
  background:#dcecf4
}

.service-card.amber {
  background:#f4e7c9
}

.card-top {
  border-bottom:1px solid #1c2d2526;
  justify-content:space-between;
  align-items:center;
  padding-bottom:22px;
  display:flex
}

.card-top span {
  font-size:13px;
  font-weight:800
}

.card-top small {
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:9px;
  font-weight:800
}

.service-card h3 {
  letter-spacing:-.05em;
  max-width:260px;
  margin:30px 0 15px;
  font-size:35px;
  line-height:1
}

.service-card>p {
  color:#48554f;
  min-height:52px;
  margin:0;
  font-size:14px;
  line-height:1.5
}

.service-card ul {
  border-top:1px solid #1c2d251d;
  margin:28px 0;
  padding:0;
  list-style:none
}

.service-card li {
  border-bottom:1px solid #1c2d251d;
  padding:13px 0 13px 20px;
  font-size:13px;
  line-height:1.35;
  position:relative
}

.service-card li:before {
  content:"•";
  color:#477a1b;
  font-size:18px;
  position:absolute;
  top:8px;
  left:2px
}

.service-card>a {
  justify-content:space-between;
  margin-top:auto;
  font-size:13px;
  font-weight:800;
  display:flex
}

.access {
  background:var(--ink);
  color:#fff;
  border-radius:30px;
  grid-template-columns:.8fr 1.2fr;
  gap:90px;
  margin:0 clamp(24px,4vw,60px) 60px;
  padding:80px clamp(28px,5vw,80px);
  display:grid
}

.access .kicker {
  color:#a9d776
}

.access h2 {
  font-size:clamp(44px,5vw,72px)
}

.access>div:first-child>p:last-child {
  color:#b9c3be;
  max-width:420px
}

.access-links {
  flex-direction:column;
  gap:14px;
  display:flex
}

.access-item {
  background:#ffffff0a;
  border:1px solid #ffffff2b;
  border-radius:18px;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:20px;
  padding:20px;
  transition:all .2s;
  display:grid
}

.access-item:hover {
  background:#ffffff12;
  border-color:#fff5;
  transform:translate(3px)
}

.access-icon {
  width:52px;
  height:52px;
  color:var(--ink);
  background:#eef3e9;
  border-radius:14px;
  place-items:center;
  font-size:12px;
  font-weight:900;
  display:grid
}

.access-item small,.access-item strong,.access-item em {
  display:block
}

.access-item small {
  color:#a9d776;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:9px;
  font-weight:800
}

.access-item strong {
  margin:3px 0;
  font-size:20px
}

.access-item em {
  color:#aebbb4;
  font-size:12px;
  font-style:normal
}

.access-item b {
  font-size:22px
}

footer {
  color:#65706a;
  border-top:1px solid #dfe1db;
  justify-content:space-between;
  align-items:center;
  padding:34px clamp(24px,7vw,110px);
  font-size:12px;
  display:flex
}

@media (max-width:850px) {
  nav {
    display:none
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:60px
  }
  .section-heading {
    grid-template-columns:1fr
  }
  .section-heading .kicker {
    margin-bottom:-20px
  }
  .card-grid {
    grid-template-columns:1fr
  }
  .service-card {
    min-height:470px
  }
  .access {
    grid-template-columns:1fr;
    gap:45px
  }
}

@media (max-width:560px) {
  .topbar {
    height:72px
  }
  .hero {
    min-height:auto;
    padding-bottom:65px
  }
  .services {
    padding-top:75px;
    padding-bottom:75px
  }
  .service-card {
    padding:25px
  }
  .access {
    margin:0 12px 35px;
    padding:48px 20px
  }
  .access-item {
    grid-template-columns:auto 1fr
  }
  .access-item>b {
    display:none
  }
  footer {
    flex-direction:column;
    align-items:flex-start;
    gap:20px
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .service-card,.primary-button,.access-item {
    transition:none
  }
}

body {
  background:var(--cream);
  font-family:Arial,Helvetica,sans-serif
}

.topbar {
  background:#f2f2edee;
  border-bottom-color:#d8d8cd
}

nav a:hover {
  color:var(--red)
}

.hero {
  background:var(--cream);
  position:relative
}

.hero:after {
  content:"";
  background:var(--red);
  border-radius:50%;
  width:18px;
  height:18px;
  position:absolute;
  bottom:45px;
  left:clamp(24px,7vw,110px)
}

.kicker {
  color:var(--red)
}

h1 {
  font-size:clamp(58px,7.5vw,112px);
  font-weight:900;
  line-height:.85
}

h1 span {
  color:var(--red)
}

.primary-button {
  background:var(--red);
  text-transform:uppercase;
  letter-spacing:.02em;
  border-radius:6px
}

.primary-button:hover {
  background:#a60003
}

.services {
  background:#fff
}

.service-card {
  border-top:8px solid var(--red);
  border-radius:0;
  box-shadow:0 12px 35px #2020200b;
  background:#f2f2ed!important
}

.card-top {
  border-bottom-color:#47464733
}

.card-top span {
  color:var(--red);
  font-size:20px
}

.service-card li:before {
  color:var(--red)
}

.service-card>a {
  color:var(--red);
  text-transform:uppercase
}

.access {
  background:var(--charcoal);
  border-radius:0;
  position:relative;
  overflow:hidden
}

.access:after {
  content:"";
  border:48px solid var(--red);
  border-radius:50%;
  width:420px;
  height:420px;
  position:absolute;
  bottom:-260px;
  right:-260px
}

.access .kicker,.access-item small {
  color:#ff4b58
}

.access-item {
  z-index:1;
  border-radius:0;
  position:relative
}

.access-icon {
  background:var(--red);
  color:#fff;
  border-radius:0
}

@media (max-width:560px) {
  .hero:after {
    display:none
  }
}

.brand-logo img {
  mix-blend-mode:multiply;
  width:auto;
  height:52px;
  display:block
}

.title-line {
  white-space:nowrap;
  letter-spacing:-.02em;
  display:inline-block;
  color:var(--ink)!important
}

.title-line b {
  color:var(--red);
  font-weight:inherit
}

@media (max-width:560px) {
  .brand-logo {
    height:48px
  }
  .brand-logo img {
    height:43px
  }
  .hero {
    padding-top:45px
  }
  h1 {
    letter-spacing:-.02em;
    font-size:clamp(48px,14.5vw,72px)
  }
  .title-line {
    letter-spacing:0
  }
}

.topbar {
  height:102px
}

.brand-logo {
  height:76px
}

.brand-logo img {
  mix-blend-mode:normal;
  height:72px
}

.hero {
  grid-template-columns:1fr;
  min-height:620px;
  padding-top:95px;
  padding-bottom:110px
}

.hero-copy {
  max-width:1080px
}

.hero .lead {
  max-width:680px
}

.hero:after {
  display:none
}

.site-footer {
  background:var(--cream);
  color:var(--ink);
  border:0;
  padding:0;
  font-size:14px;
  display:block
}

.footer-main {
  grid-template-columns:1.5fr repeat(3,1fr);
  gap:60px;
  padding:74px clamp(24px,7vw,110px);
  display:grid
}

.footer-intro img {
  width:270px;
  height:auto;
  margin-bottom:24px;
  display:block
}

.footer-intro p {
  color:#696d6d;
  max-width:300px;
  line-height:1.55
}

.footer-column {
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  display:flex
}

.footer-column small {
  color:var(--red);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:10px;
  font-size:10px;
  font-weight:800
}

.footer-column a {
  font-size:17px;
  font-weight:600;
  line-height:1.35
}

.footer-column a:hover {
  text-decoration:underline;
  -webkit-text-decoration-color:var(--red);
  text-decoration-color:var(--red);
  text-underline-offset:4px
}

.footer-legal {
  background:var(--red);
  color:#fff;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding:20px clamp(24px,7vw,110px);
  font-size:10px;
  line-height:1.5;
  display:flex
}

.footer-legal p {
  margin:0
}

.footer-legal div {
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:18px;
  display:flex
}

.footer-legal a {
  font-weight:700
}

@media (max-width:850px) {
  .topbar {
    height:92px
  }
  .brand-logo {
    height:66px
  }
  .brand-logo img {
    height:62px
  }
  .hero {
    min-height:560px
  }
  .footer-main {
    grid-template-columns:1.4fr 1fr;
    gap:45px
  }
  .footer-legal {
    flex-direction:column;
    align-items:flex-start
  }
  .footer-legal div {
    justify-content:flex-start
  }
}

@media (max-width:560px) {
  .topbar {
    height:82px
  }
  .brand-logo {
    height:58px
  }
  .brand-logo img {
    height:54px
  }
  .hero {
    min-height:520px;
    padding-top:70px;
    padding-bottom:80px
  }
  .footer-main {
    grid-template-columns:1fr;
    padding-top:55px;
    padding-bottom:55px
  }
  .footer-intro img {
    width:235px
  }
  .footer-column a {
    font-size:16px
  }
}

@font-face {
  font-family:Author;
  src:url(../fonts/Author-Variable.woff2)format("woff2");
  font-weight:1 999;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:Be Vietnam Pro;
  src:url(../fonts/BeVietnamPro-Regular.woff2)format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:Be Vietnam Pro;
  src:url(../fonts/BeVietnamPro-Medium.woff2)format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:Be Vietnam Pro;
  src:url(../fonts/BeVietnamPro-SemiBold.woff2)format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:Be Vietnam Pro;
  src:url(../fonts/BeVietnamPro-Bold.woff2)format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap
}

body {
  font-family:Be Vietnam Pro,Arial,Helvetica,sans-serif
}

h1,h2,h3 {
  font-family:Author,Arial,Helvetica,sans-serif;
  font-weight:500
}

h1 {
  letter-spacing:-.012em
}

h2 {
  letter-spacing:-.008em
}

.service-card h3 {
  letter-spacing:0
}
