/* =========================================================================
   STUDIO DENTISTICO SASSO — Design System
   Palette: Gris Cemento/Pizarra · Madera Clara/Beige Arena · Blanco Puro
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@300;400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* Pizarra fredda / teal scuro */
  --ink:        oklch(0.27 0.022 205);   /* near-black teal-slate text */
  --slate-900:  oklch(0.32 0.030 200);
  --slate-700:  oklch(0.46 0.024 205);
  --slate-500:  oklch(0.60 0.020 205);
  --slate-300:  oklch(0.80 0.014 200);
  --slate-100:  oklch(0.93 0.010 200);

  /* Teal clinico (accento) */
  --sand-700:   oklch(0.46 0.090 193);   /* teal profondo = accent-ink */
  --sand-500:   oklch(0.585 0.108 191);  /* teal = primary accent */
  --sand-300:   oklch(0.80 0.060 193);
  --sand-100:   oklch(0.925 0.035 195);
  --sand-50:    oklch(0.965 0.014 195);

  /* Ambra — dettaglio caldo (secondario) */
  --amber:      oklch(0.74 0.110 68);
  --amber-deep: oklch(0.58 0.095 60);

  /* Fondos puliti, quasi bianchi con velo teal */
  --paper:      oklch(0.992 0.004 200);
  --bg:         oklch(0.976 0.008 198);
  --bg-warm:    oklch(0.945 0.020 194);
  --line:       oklch(0.88 0.018 198);

  --accent:     var(--sand-500);
  --accent-ink: var(--sand-700);
  --brand-logo: url('../uploads/img/logo-sasso.svg');

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-xl: 40px;

  --shadow-sm: 0 1px 2px oklch(0.4 0.02 250 / .06), 0 2px 8px oklch(0.4 0.02 250 / .05);
  --shadow-md: 0 6px 24px oklch(0.4 0.02 250 / .08), 0 2px 6px oklch(0.4 0.02 250 / .05);
  --shadow-lg: 0 24px 60px oklch(0.35 0.02 250 / .14), 0 6px 16px oklch(0.35 0.02 250 / .08);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --ff-display: "Cormorant Garamond", Georgia, serif;
  --ff-body: "Manrope", system-ui, sans-serif;
  --ff-mono: "Space Mono", ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--bg);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:600; line-height:1.06; margin:0; color:var(--ink); letter-spacing:-.01em; }
.display{ font-size:clamp(2.6rem, 6vw, 5.2rem); font-weight:600; line-height:0.98; letter-spacing:-.02em; }
h1{ font-size:clamp(2.2rem, 4.6vw, 4rem); }
h2{ font-size:clamp(1.9rem, 3.6vw, 3rem); }
h3{ font-size:clamp(1.35rem, 2vw, 1.75rem); }
.lead{ font-size:clamp(1.05rem, 1.5vw, 1.3rem); color:var(--slate-700); line-height:1.6; font-weight:400; }
p{ text-wrap:pretty; }

.eyebrow{
  font-family:var(--ff-mono);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent-ink);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px; background:var(--sand-500);
  display:inline-block;
}
.eyebrow.center::after{
  content:"";
  width:26px; height:1px; background:var(--sand-500);
  display:inline-block;
}
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{ }

.serif-italic{ font-family:var(--ff-display); font-style:italic; font-weight:500; }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(64px, 9vw, 140px); }
.section.tight{ padding-block:clamp(48px,6vw,90px); }
.bg-warm{ background:var(--bg-warm); }
.bg-paper{ background:var(--paper); }
.bg-ink{ background:var(--slate-900); color:var(--sand-50); }
.bg-sand{ background:var(--sand-100); }

.center{ text-align:center; }
.grid{ display:grid; gap:clamp(20px,3vw,40px); }
.section-head{ max-width:680px; margin-bottom:clamp(32px,5vw,64px); }
.section-head.center{ margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--ff-body); font-weight:600; font-size:.95rem;
  padding:.92em 1.6em; border-radius:100px; border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  letter-spacing:.01em;
}
.btn svg{ width:1.05em; height:1.05em; }
.btn-primary{ background:var(--slate-900); color:var(--sand-50); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); background:var(--ink); }
.btn-accent{ background:var(--sand-500); color:#fff; }
.btn-accent:hover{ transform:translateY(-2px); box-shadow:0 12px 28px oklch(0.585 0.108 191 / .42); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--slate-900); transform:translateY(-2px); }
.btn-light{ background:var(--sand-50); color:var(--slate-900); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* ---------- Cards ---------- */
.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(24px,3vw,38px);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--sand-300); }

/* ---------- Image placeholder slots ---------- */
.imgslot{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:
    linear-gradient(135deg, var(--sand-100), var(--slate-100));
  display:flex; align-items:center; justify-content:center;
  isolation:isolate;
}
.imgslot::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image:repeating-linear-gradient(135deg,
    oklch(0.4 0.02 250 / .035) 0 2px, transparent 2px 13px);
}
.imgslot .imgslot-label{
  position:relative; z-index:3;
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--slate-700);
  background:oklch(1 0 0 / .72); backdrop-filter:blur(3px);
  padding:.55em .9em; border-radius:100px; border:1px solid oklch(1 0 0 / .6);
}
.imgslot.tinted{ background:linear-gradient(150deg, var(--sand-300), var(--sand-100) 60%, var(--slate-100)); }
.imgslot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; filter:saturate(.9) contrast(1.03) brightness(1.0); transition:transform 1.2s var(--ease-out), filter .6s; }
/* warm duotone art-direction overlay over real photos */
.imgslot:has(img)::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(165deg, oklch(0.74 0.11 68 / .12), transparent 42%),
    linear-gradient(0deg, oklch(0.30 0.045 205 / .26), transparent 55%);
  mix-blend-mode:multiply;
}
.imgslot:has(img) .imgslot-label{ display:none; }
.imgslot:has(img):hover img{ transform:scale(1.04); filter:saturate(1) contrast(1.03); }

/* ---------- Reveal animations ---------- */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d, 0ms);
}
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Divider tooth dot ---------- */
.dot-rule{ display:flex; align-items:center; gap:14px; color:var(--sand-500); }
.dot-rule::before,.dot-rule::after{ content:""; height:1px; flex:1; background:var(--line); }
.dot-rule span{ width:7px; height:7px; border-radius:50%; background:var(--sand-500); }

/* utility */
.muted{ color:var(--slate-500); }
.mono{ font-family:var(--ff-mono); }
.uppercase{ text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; }
.stack-sm > * + *{ margin-top:.6rem; }
.stack > * + *{ margin-top:1.1rem; }
.pill{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.45em .9em; border-radius:100px; border:1px solid var(--line); background:var(--paper);
  color:var(--slate-700);
}