/* ==========================================================================
   Studio Bianchi — Design tokens
   ========================================================================== */
:root {
  --navy-950: #16233b;
  --navy-900: #16233b;
  --navy-800: #16233b;
  --cream: #f6f1e8;
  --cream-soft: #efe8d8;
  --olive-500: #5f785b;
  --olive-600: #4e634a;
  --ink: #16233b;

  --font-display: "Libre Baskerville", Georgia, serif;
  --font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --header-h: 72px;
  --container-w: 1200px;
  --radius-s: 6px;
  --radius-m: 14px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  background: var(--navy-950);
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

img {
  max-width: 100%;
  display: block;
}

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

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--olive-500);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85em 1.9em;
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.btn-primary {
  background: var(--olive-500);
  color: var(--cream);
}

.btn-primary:hover {
  background: var(--olive-600);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(78, 99, 74, 0.35);
}

.btn-ghost {
  background: transparent;
  color: var(--navy-950);
  border-color: rgba(22, 35, 59, 0.3);
}

.btn-ghost:hover {
  border-color: var(--navy-950);
  background: rgba(22, 35, 59, 0.06);
  transform: translateY(-1px);
}

/* ==========================================================================
   WhatsApp floating button
   ========================================================================== */
.whatsapp-fab {
  position: fixed;
  right: 20px;
  bottom: calc(20px + var(--cookie-banner-offset, 0px));
  z-index: 190;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s var(--ease), bottom 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.whatsapp-fab:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.whatsapp-fab svg {
  width: 30px;
  height: 30px;
}

@media (max-width: 600px) {
  .whatsapp-fab {
    right: 16px;
    bottom: calc(16px + var(--cookie-banner-offset, 0px));
    width: 52px;
    height: 52px;
  }

  .whatsapp-fab svg {
    width: 28px;
    height: 28px;
  }
}

/* ==========================================================================
   Cookie consent banner
   ========================================================================== */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  max-width: 720px;
  margin: 0 auto;
  background: var(--cream);
  color: var(--navy-950);
  border-radius: var(--radius-m);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  padding: 22px 24px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.cookie-banner[hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.cookie-banner p {
  flex: 1 1 320px;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
}

.cookie-banner a {
  color: var(--navy-950);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner-actions {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}

.cookie-banner-actions .btn {
  padding: 0.7em 1.4em;
  font-size: 0.9rem;
}

@media (max-width: 600px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 18px;
  }

  .cookie-banner-actions {
    width: 100%;
  }

  .cookie-banner-actions .btn {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: opacity 0.01ms;
  }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background: var(--navy-900);
  z-index: 100;
}

.header-inner {
  max-width: var(--container-w);
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.logo {
  display: flex;
  align-items: center;
  margin-right: auto;
}

.logo-mark {
  display: block;
  height: 72px;
  width: auto;
}

.main-nav {
  display: flex;
  gap: 32px;
}

.main-nav a {
  color: var(--cream-soft);
  font-size: 0.92rem;
  position: relative;
  padding: 6px 0;
  transition: color 0.2s ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--cream);
  transition: width 0.25s var(--ease);
}

.main-nav a:hover {
  color: var(--cream);
}

.main-nav a:hover::after {
  width: 100%;
}

.header-cta {
  flex-shrink: 0;
}

.nav-cta {
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--cream);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-top: var(--header-h);
}

@media (max-width: 860px) {
  .hero {
    position: relative;
    height: auto;
    min-height: 100vh;
  }
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--navy-950) 0%, rgba(22, 35, 59, 0.75) 28%, rgba(22, 35, 59, 0.15) 55%, rgba(22, 35, 59, 0.35) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 32px 64px;
  width: 100%;
  color: var(--cream);
  text-align: center;
}

.hero-content h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  max-width: 16ch;
  margin: 0 auto;
}

.hero-sub {
  max-width: 600px;
  margin: 22px auto 32px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--cream-soft);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--navy-900);
    flex-direction: column;
    gap: 0;
    padding: 8px 32px 20px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }

  .main-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .main-nav a {
    padding: 12px 0;
    border-bottom: 1px solid rgba(246, 241, 232, 0.08);
  }

  .header-cta {
    display: none;
  }

  .nav-cta {
    display: inline-flex;
    margin-top: 16px;
  }

  .nav-toggle {
    display: flex;
  }

  .hero-content {
    padding-bottom: 92px;
    text-align: left;
  }

  .hero-content h1 {
    margin: 0;
  }

  .hero-sub {
    margin: 18px 0 28px;
  }
}

/* Portrait phones: the box is much narrower and taller than the group
   photo itself, so object-fit: cover (which zooms in until the photo
   covers the whole box) was cropping most of the width away, leaving only
   2-3 people visible. Rather than letterbox the photo inside the same
   full-screen overlay layout (which leaves a lot of empty navy space,
   since the photo shrinks to fit the width but the box stays screen-tall),
   the photo becomes a normal block sized to its own aspect ratio, with the
   text below it instead of overlaid on top — the box then naturally sizes
   to fit both with no leftover space either way. */
@media (max-width: 860px) and (orientation: portrait) {
  .hero {
    display: block;
    height: auto;
    min-height: 0;
    padding-top: 0;
    /* Was needed to clip the old absolutely-positioned, full-box photo
       overlay — not needed now that the photo is a normal block sized by
       its own aspect-ratio. Left on, it was actually the cause of the
       hairline seam right below: overflow other than visible blocks
       margin collapsing between a box and its last child, so the
       negative margins that used to be here (meant to overlap this
       section with its neighbours) instead pushed .hero-content 3px past
       .hero's own bottom edge, which got clipped — and that clip, landing
       on a fractional pixel, is what rendered as a thin line. */
    overflow: visible;
  }

  .hero-media {
    position: relative;
    inset: auto;
    margin-top: var(--header-h);
    aspect-ratio: 3 / 2; /* matches bianchi_gruppo08.jpg so there's no layout jump once it loads */
  }

  .hero-img {
    object-fit: cover;
  }

  .hero-scrim {
    /* No longer needs to darken the whole photo for text legibility (the
       text sits below it now, on its own navy panel) — just fades the
       photo into that panel's color at the bottom so the two blocks blend
       instead of meeting at a hard edge. */
    background: linear-gradient(to bottom, rgba(22, 35, 59, 0) 65%, var(--navy-950) 100%);
  }

  .hero-content {
    /* .hero-content's cream text was styled to sit on the photo (via the
       scrim). Now that it's a separate block below the photo instead, it
       needs its own dark background or the cream text disappears against
       the page's own cream background. */
    background: var(--navy-950);
    padding: 24px 20px 32px;
  }
}

/* Landscape phones: 100vh is very short here, so the fixed height that
   applies above max-width:860px forced the h1 + intro + button to
   overflow upward, behind the fixed header, instead of the box growing to
   fit them. min-height (rather than a fixed height) on .hero already
   fixes that, but the text/spacing is still sized for a tall portrait
   screen, so it's trimmed down here too to keep the hero from needing a
   big scroll before "Contattaci" comes into view. Placed after the
   max-width: 860px block above on purpose, so it wins in the cascade over
   the rules it overrides (same specificity, so source order decides).
   ========================================================================== */
@media (max-width: 860px) and (max-height: 500px) {
  .hero-content {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .hero-content h1 {
    font-size: 1.6rem;
  }

  .hero-sub {
    margin: 12px 0 18px;
    font-size: 0.92rem;
  }
}

@media (max-width: 480px) {
  .header-inner {
    padding: 0 20px;
  }
}

/* ==========================================================================
   Sections (shared)
   Classic linear scroll — each section flows normally, at least one full
   screen tall, growing if content needs more.
   ========================================================================== */
.section {
  padding: 64px 32px;
  scroll-margin-top: var(--header-h);
}

.section-navy {
  background: var(--navy-950);
  color: var(--cream);
}

.section-inner {
  max-width: var(--container-w);
  margin: 0 auto;
}

/* ==========================================================================
   Stacked scroll — hero, "Come lavoriamo", "I nostri trattamenti",
   "Lo studio" and "Contatti" pin in place (position: sticky) and get
   covered by the next section as the page scrolls, then release normally.
   DOM order decides which section covers which, so no z-index is needed.
   All of them live inside .stack-wrap so their sticky range is bounded by
   that wrapper's height — a sticky element outside a bounding container
   (like the hero used to be) stays "stuck" for the height of its whole
   containing block instead of just its own box, which is why the hero
   needs to be inside here too, not just visually before it. Sections need
   to be taller than the viewport to have any "hold" before the next one
   covers them; the last one only needs to fill the viewport since nothing
   covers it after. Disabled below 860px, where it falls back to normal
   linear flow.
   ========================================================================== */
.stack-section {
  position: sticky;
  top: 72px;
  min-height: 100vh;
  padding-top: 40px;
  padding-bottom: 40px;
}

.stack-wrap>.stack-section:not(:last-child) {
  min-height: 120vh;
}

#come-lavoriamo.stack-section,
#trattamenti.stack-section,
#studio.stack-section,
#contatti.stack-section {
  border-radius: 24px 24px 0 0;
}

#contatti.stack-section {
  padding-bottom: 80px;
}

@media (max-width: 860px) {
  .stack-wrap>.stack-section:not(:last-child) {
    min-height: 0;
  }

  .stack-section {
    position: static;
    min-height: 0;
  }

  #come-lavoriamo.stack-section,
  #trattamenti.stack-section,
  #studio.stack-section,
  #contatti.stack-section {
    border-radius: 0;
  }

  #contatti.stack-section {
    padding-bottom: 64px;
  }
}

.section h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin-top: 12px;
}

.reviews-title {
  font-size: 1.4rem;
  margin-top: 12px;
  text-align: center;
}

.section-intro {
  margin: 10px 0 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(22, 35, 59, 0.72);
}

#form-contatti {
  scroll-margin-top: var(--header-h);
}

.section-divider {
  height: 1px;
  margin-top: 24px;
  margin-bottom: 48px;
  background: rgba(22, 35, 59, 0.12);
}

.section-navy .section-intro {
  color: var(--cream-soft);
}

/* ==========================================================================
   "Come lavoriamo" — pillars
   ========================================================================== */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
  counter-reset: pillar;
}

.pillar {
  background: var(--cream);
  border-radius: var(--radius-m);
  padding: 36px 24px;
}

.pillar h3 {
  font-size: 1.5rem;
  color: var(--navy-950);
  margin-bottom: 10px;
}

.pillar h3::before {
  counter-increment: pillar;
  content: counter(pillar) ". ";
}

.pillar p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(22, 35, 59, 0.72);
  margin: 0;
}

@media (max-width: 860px) {
  .section {
    padding: 48px 24px;
  }

  .pillars {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
  }

  .pillar {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   Cream sections
   ========================================================================== */
.section-cream {
  background: var(--cream);
  color: var(--ink);
}

/* ==========================================================================
   Media placeholder (used until real photos are ready)
   ========================================================================== */
.media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border-radius: var(--radius-m);
  background: linear-gradient(150deg, var(--navy-800), var(--navy-950));
  color: var(--cream-soft);
}

.media-placeholder svg {
  width: 36px;
  height: 36px;
  opacity: 0.55;
}

.media-placeholder span {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  opacity: 0.65;
}

/* ==========================================================================
   Carousel (shared: trattamenti, team, recensioni)
   ========================================================================== */
.carousel {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
}

.carousel-track {
  display: flex;
  flex: 1;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-top: 16px;
  padding-bottom: 16px;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}

/* "I nostri trattamenti" desktop carousel only: give the arrow buttons
   explicit breathing room from the section's bottom edge, and center them
   under the card grid (rather than relying only on justify-content on the
   shared .carousel-controls, which other carousels also use). */
.treatments-carousel--desktop .carousel-controls {
  justify-content: center;
  margin-bottom: 24px;
}

.carousel-dots {
  display: flex;
  gap: 8px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(22, 35, 59, 0.2);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.carousel-dot.is-active {
  background: var(--olive-500);
  transform: scale(1.3);
}

.section-navy .carousel-dot {
  background: rgba(246, 241, 232, 0.25);
}

.carousel-arrows {
  display: flex;
  gap: 40px;
  margin: auto;
}

.carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(22, 35, 59, 0.3);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.carousel-arrow:hover {
  background: var(--olive-500);
  border-color: var(--olive-500);
  color: var(--cream);
}

.carousel-arrow svg {
  width: 16px;
  height: 16px;
}

.section-navy .carousel-arrow {
  border-color: rgba(246, 241, 232, 0.35);
  color: var(--cream);
}

/* ==========================================================================
   "I nostri trattamenti"
   ========================================================================== */
.treatments-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: stretch;
}

.treatments-content {
  min-width: 0;
  align-self: start;
}

.treatments-photo {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-m);
}

/* --tc-scale shrinks the cards (padding, icon, type size) in one dial when
   script.js's layoutTreatments() finds them still overflowing the section's
   visible sticky slice after the normal sizing pass — see the comment
   there. 1 = full size, unmodified by anything below. */
#trattamenti {
  --tc-scale: 1;
}

/* Two separate carousel markups (see index.html) switched with a media
   query — desktop's "slide" is a pair of cards, mobile's is a single
   card, and a scroll-snap carousel needs that to be a fixed unit, not
   something reshuffled by CSS alone. */
.treatments-carousel--mobile {
  display: none;
}

@media (max-width: 860px) {
  .treatments-carousel--desktop {
    display: none;
  }

  .treatments-carousel--mobile {
    display: flex;
  }
}

.treatment-slide {
  flex: 0 0 auto;
  width: 46%; /* 2 slides (each a 2-card pair) plus the gap between them fit the content column, reading as a 2x2 grid */
  display: flex;
  flex-direction: column; /* stacks the desktop pair into 2 rows; harmless on mobile, where a slide only has 1 card */
  gap: calc(28px * var(--tc-scale)); /* matches the 28px horizontal gap in .carousel-track */
  scroll-snap-align: start;
}

.treatment-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--tc-scale));
  padding: calc(36px * var(--tc-scale));
  border-radius: var(--radius-m);
  background: var(--navy-900);
  color: var(--cream);
}

.treatment-card h3 {
  font-size: calc(1.15rem * var(--tc-scale));
  color: var(--cream);
}

.treatment-card p {
  margin: 0;
  font-size: calc(0.9rem * var(--tc-scale));
  line-height: 1.6;
  color: var(--cream-soft);
  opacity: 0.85;
}

.photo-rotator {
  position: relative;
  width: auto;
  height: auto;
  min-height: 400px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.photo-rotator img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 4s ease;
}

.photo-rotator img.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .photo-rotator img {
    transition: none;
  }
}

/* ==========================================================================
   "Lo studio" — team
   ========================================================================== */
.team-slide {
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: start;
}

.team-card {
  background: var(--cream-soft);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.team-card .media-placeholder {
  border-radius: 0;
  aspect-ratio: 3 / 3.4;
  min-height: 0;
}

.team-card-body {
  padding: 18px 20px 22px;
}

.team-card-body h3 {
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 4px;
}

.team-card-body p {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(22, 35, 59, 0.6);
}

/* ==========================================================================
   "Recensioni" — Google reviews are embedded via an Elfsight widget
   ========================================================================== */
.reviews-layout {
  margin-top: 24px;
}

/* ==========================================================================
   "Contatti"
   ========================================================================== */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 24px 0 48px;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 22px;
  border-radius: var(--radius-m);
  background: var(--navy-950);
  color: var(--cream);
  text-align: center;
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(246, 241, 232, 0.08);
  color: var(--olive-500);
}

.contact-icon svg {
  width: 20px;
  height: 20px;
}

.contact-card strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
}

.contact-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--cream-soft);
}

.contact-card a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.contact-map {
  min-height: 420px;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(22, 35, 59, 0.12);
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  display: block;
}

.contact-form {
  padding: 36px 34px;
  border-radius: var(--radius-m);
  background: white;
  box-shadow: 0 4px 16px rgba(22, 35, 59, 0.12);
}

.contact-form h3 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.form-hint {
  margin: 0 0 24px;
  font-size: 0.92rem;
  color: rgba(22, 35, 59, 0.65);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 0.88rem;
  font-weight: 500;
}

.field input,
.field textarea {
  padding: 12px 14px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(22, 35, 59, 0.18);
  background: white;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--olive-500);
  box-shadow: 0 0 0 3px rgba(95, 120, 91, 0.15);
}

.field-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field-checkbox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(22, 35, 59, 0.75);
}

.field-checkbox input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--olive-500);
}

.field-checkbox a {
  color: var(--ink);
  text-decoration: underline;
}

.form-submit {
  width: 100%;
  margin-top: 6px;
}

.form-status {
  margin-top: 14px;
  font-size: 0.88rem;
}

.form-status[data-state="success"] {
  color: var(--olive-600);
}

.form-status[data-state="error"] {
  color: #a4383b;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding: 64px 32px 28px;
  background: var(--navy-950);
  color: var(--cream-soft);
}

.footer-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(246, 241, 232, 0.12);
}

.footer-brand .logo {
  margin-bottom: 8px;
}

.footer-logo-mark {
  height: 100px;
}

.footer-tagline {
  max-width: 26ch;
  margin: 10px 0 0;
  font-size: 0.82rem;
  opacity: 0.65;
}

.footer-heading {
  margin: 0 0 4px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
}

.footer-links,
.footer-contact,
.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.9rem;
}

.footer-links a,
.footer-legal a,
.footer-contact a {
  color: var(--cream-soft);
  opacity: 0.85;
}

.footer-links a:hover,
.footer-legal a:hover,
.footer-contact a:hover {
  opacity: 1;
  color: var(--cream);
}

.footer-copyright {
  max-width: var(--container-w);
  margin: 24px auto 0;
  text-align: center;
  font-size: 0.78rem;
  opacity: 0.5;
}

/* ==========================================================================
   Responsive — new sections
   ========================================================================== */
@media (max-width: 860px) {
  .treatments-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* One card per slide, full width — same width as a single-column
     .contact-card (both are just 100% of the section's own content
     width), so each swipe shows exactly one card instead of the desktop
     46% (which left each one only partially visible on a narrow screen). */
  .treatment-slide {
    width: 100%;
  }

  /* Desktop's 36px padding was too much on mobile's single,
     full-width card. */
  .treatment-card {
    padding: 26px;
  }

  /* Team carousel: one portrait per swipe at 75% of the track, so the next
     card peeks in on the right as a hint that it scrolls. */
  .team-slide {
    width: 75%;
  }

  .treatments-photo {
    min-height: 220px;
  }

  .photo-rotator {
    min-height: 242px;
  }

  .contact-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-main {
    grid-template-columns: 1fr;
  }

  .contact-map,
  .contact-map iframe {
    min-height: 280px;
  }

  .contact-form {
    padding: 30px 24px;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .contact-cards {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }
}

/* Landscape phones: a full-width team-slide (see .team-slide above) makes
   the portrait, which has a fixed aspect-ratio, taller in absolute px the
   wider the screen is — on a wide-but-short landscape phone that made each
   card oversized. Showing 2 per row instead (same idea as .contact-cards
   at this width) roughly halves both the width and, through the aspect
   ratio, the height. */
@media (max-width: 860px) and (orientation: landscape) {
  .team-slide {
    width: calc(50% - 14px); /* half the carousel-track's 28px gap */
  }

  /* Halving the width alone still wasn't enough on a short landscape
     screen: the portrait photo's 3:3.4 ratio is taller than it is wide,
     so even at half-width it could still be taller than the whole
     viewport. Making it closer to landscape itself keeps the card
     reasonably sized without needing the aspect-ratio to fight the
     screen's own proportions. */
  .team-card .media-placeholder {
    aspect-ratio: 16 / 9;
  }

  .team-card-body {
    padding: 12px 14px 16px;
  }

  .team-card-body h3 {
    font-size: 0.95rem;
  }

  .team-card-body p {
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   Cookie / Privacy policy popups
   ========================================================================== */
.policy-modal {
  max-width: 640px;
  width: calc(100% - 48px);
  max-height: 80vh;
  margin: auto;
  padding: 0;
  border: none;
  border-radius: var(--radius-m);
  background: var(--cream);
  color: var(--ink);
}

.policy-modal::backdrop {
  background: rgba(22, 35, 59, 0.6);
}

.policy-modal-inner {
  position: relative;
  padding: 40px;
  max-height: 80vh;
  overflow-y: auto;
}

.policy-modal h2 {
  font-size: 1.6rem;
  margin-bottom: 20px;
}

.policy-modal h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  margin: 20px 0 6px;
}

.policy-modal-body p,
.policy-modal-body li {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(22, 35, 59, 0.8);
}

.policy-modal-body ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.policy-modal-note {
  margin-top: 24px;
  font-style: italic;
  opacity: 0.7;
}

.policy-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--cream-soft);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.policy-modal-close:hover {
  background: var(--olive-500);
  color: var(--cream);
}

/* ==========================================================================
   Extra safety margin for shorter viewports (tablet landscape, e.g. 1024x768)
   where the sticky-stack effect is still active (width > 860px) but there's
   less vertical room than on a typical laptop screen. Trims a bit more
   spacing so the carousel arrows keep a comfortable margin before being
   covered by the next stacked section. Placed at the end of the file on
   purpose, so it wins in the cascade over the earlier base rules it adjusts.
   ========================================================================== */
@media (min-width: 861px) and (max-height: 820px) {
  .stack-section {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .section-intro {
    margin-top: 8px;
  }

  .carousel {
    margin-top: 8px;
  }

  .carousel-controls {
    margin-top: 6px;
  }

  .treatment-slide {
    gap: 12px;
  }

  /* Card padding is intentionally NOT overridden here anymore — this rule
     used to hard-code it smaller any time the viewport was merely short,
     regardless of whether the cards actually needed the room. That fought
     with deliberate padding increases (this rule wins the cascade by
     being later in the file) and only applied at width ≥ 861px anyway, so
     someone testing on a wide-but-short window would see the card padding
     silently ignored with no obvious reason why. layoutTreatments() in
     script.js already shrinks the cards via --tc-scale, but only when
     they're measured to actually overflow — a real check instead of a
     width/height guess. */
}

/* Extra reduction on top of --tc-scale (see script.js's layoutTreatments):
   once the cards themselves have shrunk as far as is reasonable, this
   trims the surrounding vertical spacing too for the tightest cases. */
#trattamenti.is-compact {
  padding-top: 20px;
  padding-bottom: 20px;
}

#trattamenti.is-compact .section-intro {
  margin-top: 8px;
}

#trattamenti.is-compact .carousel {
  margin-top: 8px;
}

#trattamenti.is-compact .carousel-controls {
  margin-top: 6px;
}