/* =========================================================================
   ntrekouvivi.gr — main stylesheet
   Values extracted from the previous Divi build (et-core-unified-deferred-21,
   Divi theme CSS and computed styles of the live page). Breakpoints are the
   Divi ones: 1350 / 981 (desktop) · 980 (tablet) · 767 (phone).
   ========================================================================= */

:root {
  /* Fonts — Oswald/Jost have no Greek glyphs; Greek falls back to Helvetica/Arial,
     exactly as on the previous site (which only loaded Latin subsets). */
  --font-heading: "Oswald", Helvetica, Arial, Lucida, sans-serif;
  --font-body: "Jost", Helvetica, Arial, Lucida, sans-serif;

  /* Colors */
  --c-black: #000000;
  --c-white: #ffffff;
  --c-red: #e02b20;            /* active menu item, card bottom border */
  --c-red-dark: #b70000;       /* card left border */
  --c-red-dot: #ff0000;        /* "." after titles, 01/02 numbers */
  --c-navy: #003666;           /* buttons, card titles */
  --c-cyan: #01d7ef;           /* button hover */
  --c-teal: #00d5b7;           /* submit hover */
  --c-blue: #008fd5;           /* form panel (tablet) */
  --c-divi-blue: #2ea3f2;      /* hamburger, mobile menu top border */
  --c-text: #666666;
  --c-text-dark: #333333;
  --c-bg-light: #f0f3f6;
  --c-border-light: #e5e5e5;
  --c-footer-line: #bfbfbf;
  --c-footer-text: #f9f9f9;
  --c-credit: #757575;         /* darkest gray with >= 4.5:1 on the black footer (4.56:1) */
  --c-credit-link: #9e9e9e;
  --c-header-bg: rgba(0, 0, 0, 0.45);
  --c-review-star: #fbbc04;
  /* Timeline (old services page: et_pb_row_1, et_pb_blurb_3–7, et_pb_divider_0–8) */
  --tl-line: #333333;          /* 2px border-left + 2px box-shadow = 4px */
  --tl-icon-bg: #333333;
  --tl-ring: #38aa9c;
  --tl-dot: #e02b20;
  --tl-step: 300px;            /* blurb height = divider spacing */
  --tl-marker: 50px;

  /* Effects */
  --phone-gradient: linear-gradient(180deg, rgba(224, 43, 32, 0.87) 0%, #e0372f 100%);
  /* Old services page (section_1): linear-gradient(1deg, rgba(255,255,255,.5) 43%, #000 100%).
     With the tightened top, the dark part now ends just below the title (px stops) so the step text stays readable. */
  --timeline-gradient: linear-gradient(180deg, #000000 0, #000000 70px, rgba(0, 0, 0, 0.7) 115px, rgba(255, 255, 255, 0.5) 190px, rgba(255, 255, 255, 0.5) 100%);
  --shadow-card: 0 18px 35px -6px rgba(0, 54, 102, 0.36);
  --shadow-card-hover: 0 48px 35px -6px rgba(0, 54, 102, 0.36);
  --shadow-bio: 0 2px 57px 0 rgba(102, 102, 102, 0.3);
  --shadow-form: 6px 6px 18px 0 rgba(0, 0, 0, 0.3);
  --t: 300ms ease;

  /* Key sizes */
  --header-h: 102px;
  --header-h-mobile: 80px;
  --container: 1200px;
  --fs-body: 14px;
  --fs-text: 15px;
  --fs-section-title: 26px;
  --fs-big-title: 50px;
  --fs-panel-title: 55px;
  --radius-card: 5px;
  --radius-pill: 100px;
}

/* ---------- Fonts (self-hosted, Latin subset, variable weight) ---------- */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/oswald-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, figure, blockquote, address { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1; padding-bottom: 10px; color: var(--c-text-dark); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
main [id] { scroll-margin-top: var(--header-h); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100000;
  background: var(--c-white); color: var(--c-black); padding: 8px 14px;
}
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }

.dot { color: var(--c-red-dot); }
.container { width: 90%; max-width: var(--container); margin: 0 auto; position: relative; }

/* Shared pill button (ΠΕΡΙΣΣΟΤΕΡΑ, ΕΠΙΚΟΙΝΩΝΙΑ) */
.btn-pill {
  display: inline-block;
  position: relative;
  z-index: 2;
  padding: 10px 30px;
  border: 5px solid var(--c-white);
  border-radius: var(--radius-pill);
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t);
}
.btn-pill:hover, .btn-pill:focus-visible { background: var(--c-cyan); color: var(--c-navy); }

/* A "more" button with no text available keeps its space but is not shown */
.card__more[hidden] { display: inline-block; visibility: hidden; }

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  height: var(--header-h);
  background: var(--c-header-bg);
  line-height: 23px;
}
.site-header__inner {
  width: 80%;
  max-width: 1080px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__logo { display: flex; align-items: center; height: 100%; }
.site-header__logo img { width: auto; max-height: 75%; height: 76px; }

.main-nav__list { list-style: none; display: flex; align-self: flex-start; }
.main-nav { align-self: flex-start; padding-top: 44px; }
.main-nav__list li { padding-right: 22px; font-size: 14px; font-weight: 600; line-height: 14px; }
.main-nav__list li:last-child { padding-right: 0; }
.main-nav__list a {
  display: block;
  padding-bottom: 44px;
  color: var(--c-white);
  transition: opacity 0.4s ease-in-out;
}
.main-nav__list a:hover { opacity: 0.7; }
.main-nav__list a[aria-current="true"],
.main-nav__list a[aria-current="page"] { color: var(--c-red); }

.nav-toggle {
  display: none;
  width: 32px; height: 32px;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--c-divi-blue);
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  display: block; position: relative;
  width: 26px; height: 3px; margin: 0 auto;
  background: currentColor; border-radius: 1px;
  transition: transform var(--t), background-color var(--t);
}
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bar::before { top: -8px; }
.nav-toggle__bar::after { top: 8px; }
.nav-open .nav-toggle__bar { background: transparent; }
.nav-open .nav-toggle__bar::before { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle__bar::after { transform: translateY(-8px) rotate(-45deg); }

/* =========================================================================
   Hero
   ========================================================================= */
/* Transparent header overlays the hero, as in the reference (Divi adds the header height as top padding) */
.hero {
  padding-top: var(--header-h);
  background: var(--c-black);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.hero__media img { width: 100%; }
.hero__content {
  position: relative;
  padding: 20vh 11vh 13vw 0; /* bottom: room for the braces animation below the text block */
  background: var(--c-black);
  text-align: right;
  color: var(--c-white);
  isolation: isolate;
}
.hero__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Braces animation (Claude Design), unchanged; only sized and placed by fitHeroArt() in js/main.js:
   as large as the free black area under the text block allows (fallback below if that script is missing). */
.hero__fx svg {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 80%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: transparent;
  transform: translate(-10%, 20%);
}
.hero__text { position: relative; z-index: 1; }
.hero__title {
  margin-top: -21px;
  font-family: var(--font-heading);
  font-size: 10vh;
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-white);
}
.hero__subtitle {
  margin-top: 3.5vh;
  font-size: 31px;
  font-weight: 700;
  line-height: 1;
}
.hero__italy {
  margin: 1.5vh 0 0 auto;
  max-width: 456px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.8;
}
.hero__phone {
  display: flex;
  align-items: flex-start;
  width: 183px;
  margin: 13px 0 0 auto;
  padding: 9px 0 7px 9px;
  border-radius: 50px;
  background-image: var(--phone-gradient);
  color: var(--c-white);
  text-align: left;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 500;
}
.hero__phone svg { flex: 0 0 26px; width: 26px; height: 27px; }
.hero__phone span { margin-left: 7px; padding-bottom: 10px; }

/* =========================================================================
   Services — ΜΕΘΟΔΟΙ ΟΡΘΟΔΟΝΤΙΚΗΣ ΘΕΡΑΠΕΙΑΣ
   ========================================================================= */
.services { background: var(--c-black); padding: 17px 0 110px; }
.section-title {
  margin-top: -5px;
  font-family: var(--font-heading);
  font-size: var(--fs-section-title);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--c-white);
}
.services__grid {
  list-style: none;
  padding-top: 50px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 3%;
  row-gap: 50px;
}
@keyframes floating {
  0% { transform: translate(0, 0); }
  50% { transform: translate(0, 15px); }
  100% { transform: translate(0, 0); }
}
.card {
  position: relative;
  z-index: 1;
  background: var(--c-white);
  border-style: solid;
  border-width: 10px 10px 4px 5px;
  border-color: var(--c-white) var(--c-white) var(--c-red) var(--c-red-dark);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  animation: floating 7s ease-in-out infinite;
  transition: transform var(--t), box-shadow var(--t);
  overflow: hidden;
}
.card:nth-child(2) { animation-delay: -3s; }
.card:nth-child(3) { animation-delay: -4.5s; }
.card:nth-child(4) { animation-delay: -1.5s; }
.card:hover { animation-play-state: paused; box-shadow: var(--shadow-card-hover); transform: translateY(-10px); }
.card__img { margin-bottom: -20px; border-radius: var(--radius-card); overflow: hidden; }
.card__img img { width: 100%; }
.card__more-wrap { text-align: center; margin-top: -23px; position: relative; z-index: 2; }
.card__body {
  max-width: 82%;
  margin: 0 auto;
  padding: 25px 16px;
  text-align: center;
  font-size: var(--fs-text);
  line-height: 1.8;
  color: var(--c-text);
}
.card__title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-navy);
}
.card__details { padding-top: 1em; }
.card__details[hidden] { display: none; }

/* =========================================================================
   Process — ΠΩΣ ΕΞΕΛΙΣΣΕΤΑΙ Η ΘΕΡΑΠΕΙΑ
   ========================================================================= */
.process {
  position: relative;
  padding: 83px 0 140px;
  background-color: var(--c-white);
  background-image: var(--timeline-gradient), url("../img/process-bg.jpg");
  background-image: var(--timeline-gradient), image-set(url("../img/process-bg.webp") type("image/webp"), url("../img/process-bg.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
}
.process__divider {
  position: absolute; left: 0; right: 0;
  height: 70px; width: 100%;
  z-index: 1; pointer-events: none;
  display: block;
}
.process__divider--top { top: 0; }
.process__divider--bottom { bottom: 0; }
.process__title {
  max-width: 70%;
  margin: 17px auto 0;                 /* curve -> title ~30px (was 46px margin, ~59px gap) */
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--c-white);
}

.after-process { background: var(--c-bg-light); padding: 1px 0 110px; }
/* ---------- Timeline ---------- */
/* One horizontal reference for the line, every marker and the dot: --tl-x (50% desktop/tablet, 10% phone),
   each centred on it with translateX(-50%) */
/* Title text -> line top 24px (10px title padding + 14px), title -> first icon centre 60px (24 + 11 + 25).
   The line ends --tl-end below the last icon centre (set by js/timeline.js; without JS it runs to the bottom). */
.timeline { --tl-x: 50%; --tl-end: 36px; position: relative; margin-top: 14px; padding: 11px 0 60px; }
.timeline__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--tl-x);
  width: 4px;                       /* reference: 2px border + 2px shadow */
  transform: translateX(-50%);
  background: var(--tl-line);
}
.timeline__steps { list-style: none; margin: 0; padding: 0; position: relative; z-index: 2; }
.timeline__step { position: relative; min-height: var(--tl-step); }
.timeline__step--last { min-height: 0; }
.timeline__marker {
  position: absolute;
  top: 0;
  left: var(--tl-x);
  width: var(--tl-marker);
  height: var(--tl-marker);
  transform: translateX(-50%);
}
.timeline__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--tl-ring);
  transform: scale(1.3);           /* reached state (reference: 100% -> 160% -> 130%) */
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.timeline__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 2px solid var(--tl-icon-bg);
  border-radius: 50%;
  background: var(--tl-icon-bg);
}
.timeline__step--last .timeline__icon { background: var(--c-black); border-color: var(--c-black); }
.timeline__icon svg { width: 30px; height: 30px; fill: var(--c-white); }
.timeline__text { max-width: 275px; color: var(--c-black); }
.timeline__step--right .timeline__text { margin-left: var(--tl-x); padding-left: 40px; }
.timeline__step--left .timeline__text { margin-left: auto; margin-right: calc(100% - var(--tl-x)); padding-right: 40px; text-align: right; }
.timeline__title {
  font-family: Georgia, "Times New Roman", serif;   /* reference: 'Merriweather', Georgia, ... (Greek falls back to Georgia) */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-black);
  padding-bottom: 0;
}
.timeline__text p { font-size: 16px; font-weight: 600; line-height: 1.8; }
.timeline__dot {
  display: none;
  position: absolute;
  top: 0;
  left: var(--tl-x);
  z-index: 1;
  width: var(--tl-marker);
  height: var(--tl-marker);
  border-radius: 50%;
  background: var(--tl-dot);
  transform: translateX(-50%) scale(0.5);
  will-change: transform;
}
/* JS active (js/timeline.js): moving dot, rings only on reached steps */
.timeline.is-live .timeline__dot { display: block; }
.timeline.is-live .timeline__ring { transform: scale(1); }
.timeline.is-live .is-reached .timeline__ring { transform: scale(1.3); }

/* =========================================================================
   Before / after (#results) — old services page, et_pb_section_3 / row_4–5
   ========================================================================= */
.results { background: var(--c-white); padding: 4% 0; }
/* While #results is shown, the curved edge of #process leads into white instead of the light grey */
.process:has(+ .results:not([hidden])) .process__divider--bottom path { fill: var(--c-white); }
.results__title {
  margin-bottom: 40px;
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--c-black);
}
.results__list { width: 100%; max-width: 900px; margin: 0 auto; }   /* tablet 700px, phone 400px */
.ba { display: flex; flex-wrap: nowrap; margin: 0; }
.ba__side {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  padding: 5vw 0;
  overflow: hidden;
  border: 0 solid #666666;            /* 2px + 2px = 4px line */
}
.ba__side--before { border-right-width: 2px; }
.ba__side--after { border-left-width: 2px; }
.ba__img { position: relative; display: block; width: 100%; max-width: 448px; container-type: inline-size; }   /* tablet 348px, phone 250px */
.ba__img picture, .ba__img img { display: block; width: 100%; }
/* Greek labels replacing the burned-in PRIMA / DOPO, measured on the 933px originals:
   cap height 28px, letters from x 52 / y 55 -> Georgia 4.34% of the photo width, box at 5.47% / 5.21% */
.ba__label {
  position: absolute;
  left: 5.47cqw;
  top: 5.21cqw;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.34cqw;
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  pointer-events: none;
}
.ba__img--ghost { display: none; position: absolute; top: 5vw; left: 0; }
/* JS active (js/before-after.js): static faded "before" + moving copy; "after" slides in from the line */
.results.is-live .ba__img--ghost { display: block; filter: saturate(85%) opacity(50%); }
.results.is-live .ba__img--before { position: relative; filter: saturate(68%) opacity(38%); will-change: transform; }
.results.is-live .ba__img--after { will-change: transform; }

/* =========================================================================
   Gallery (#gallery) — old "Ιατρείο" page, OUR GALLERY (et_pb_section_5 / row_9)
   ========================================================================= */
.gallery {
  position: relative;
  padding: 120px 0;
  background-color: var(--c-black);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 26%, #000000 100%), url("../img/gallery-bg.jpg");
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 26%, #000000 100%), image-set(url("../img/gallery-bg.webp") type("image/webp"), url("../img/gallery-bg.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
}
/* Full-width row, no gutters: text column (1/2) + two 1/4 columns of square photos; further photos continue in rows of four */
/* Each group: full-width heading row, then its own grid. Reference: square photos in 1/4 columns, no gutters.
   Flex rows of four so an incomplete last row is centred (no empty cells). */
.gallery__group + .gallery__group { margin-top: 40px; }       /* same as heading -> grid */
.gallery__grid { display: flex; flex-wrap: wrap; justify-content: center; }
.gallery__grid .gallery__item { flex: 0 0 25%; }
/* Same typography as .testimonials__title ("ΤΙ ΛΕΝΕ ΟΙ ΠΕΛΑΤΕΣ ΜΑΣ"): 50px, phone 30px */
.gallery__title {
  font-family: var(--font-heading);
  font-size: var(--fs-big-title);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  text-align: center;
  color: var(--c-white);
  margin: 0 auto;
  padding: 0 24px 40px;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}
.gallery__item { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.16);
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;
}
.gallery__item:hover .gallery__overlay, .gallery__item:focus-visible .gallery__overlay { opacity: 1; }
.gallery__item:focus-visible { outline: 3px solid var(--c-cyan); outline-offset: -3px; }

/* Lightbox (js/gallery.js) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  opacity: 0;
  transition: opacity 0.25s ease;
  touch-action: pan-y;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__figure { margin: 0; display: flex; align-items: center; justify-content: center; }
.lightbox__img { display: block; max-width: calc(100vw - 160px); max-height: calc(100vh - 120px); width: auto; height: auto; object-fit: contain; }
.lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-white);
  cursor: pointer;
  transition: background-color 0.2s;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox__btn:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }
.lightbox__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__counter { position: absolute; top: 28px; left: 24px; color: var(--c-white); font-size: 14px; letter-spacing: 1px; }
body.lightbox-open { overflow: hidden; }

/* =========================================================================
   Testimonials — ΤΙ ΛΕΝΕ ΟΙ ΠΕΛΑΤΕΣ ΜΑΣ
   ========================================================================= */
.testimonials__grid {
  padding-top: 110px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 3%;
}
.testimonials__title {
  margin-top: 30px;
  font-family: var(--font-heading);
  font-size: var(--fs-big-title);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--c-black);
}
.review { display: flex; flex-direction: column; }
/* Equal-height cards in a row (reference: the shorter review got extra top/bottom padding so its text sat centred) */
.review__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 18px;
  padding: 30px 30px 50px;
  border: 6px solid var(--c-white);
  border-radius: var(--radius-card);
  font-size: var(--fs-text);
  line-height: 1.8;
  color: var(--c-text);
}
.review__stars { display: flex; gap: 2px; margin-bottom: 12px; line-height: 0; }
.review__stars svg { width: 16px; height: 16px; fill: var(--c-review-star); }
.review__avatar {
  width: 72px; height: 72px;
  margin: -56px 0 0 34px;
  border: 6px solid var(--c-white);
  border-radius: 50%;
  background: var(--c-navy);
  color: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 600; line-height: 1;
  position: relative;
}
.review__meta { padding: 5px 0 0 38px; font-size: var(--fs-text); line-height: 1.1; color: var(--c-text); }
.review__name { font-size: 22px; font-weight: 600; line-height: 1; color: var(--c-navy); }
.testimonials__more { margin-top: 40px; text-align: center; font-size: 14px; }
.testimonials__more a { color: var(--c-navy); font-weight: 600; border-bottom: 1px solid currentColor; }
.testimonials__more a:hover { color: var(--c-blue); }

/* =========================================================================
   Black strip — phone / email
   ========================================================================= */
.strip { background: var(--c-black); padding: 32px 0; }
.strip .container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3%; padding: 2% 0; }
.strip__phone {
  margin-top: 9px;
  font-size: 43px;
  font-weight: 500;
  line-height: 1;
  color: var(--c-white);
}
.strip__email {
  justify-self: end;
  max-width: 456px;
  margin-top: 1vh;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-align: right;
  color: var(--c-white);
}
.strip a:hover { opacity: 0.8; }

/* =========================================================================
   About + Contact
   ========================================================================= */
.about {
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  padding: 4% 0 74px;
  background-color: var(--c-white);
  background-image: url("../img/contact-bg.jpg");
  background-image: image-set(url("../img/contact-bg.webp") type("image/webp"), url("../img/contact-bg.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
}
.about__row { display: grid; grid-template-columns: 1fr 1fr; padding: 2% 0; }
.bio {
  padding: 98px;
  background-color: var(--c-white);
  background-image: url("../img/tooth-outline.png");
  background-image: image-set(url("../img/tooth-outline.webp") type("image/webp"), url("../img/tooth-outline.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: right 0 top;
  box-shadow: var(--shadow-bio);
  color: var(--c-text-dark);
}
.panel-title {
  margin-top: -10px;
  font-family: var(--font-heading);
  font-size: var(--fs-panel-title);
  font-weight: 500;
  line-height: 1;
}
.bio .panel-title { color: var(--c-text-dark); }
.bio__portrait { display: block; max-width: 280px; margin: 0 auto 30px; }
.bio__portrait img { width: 100%; }
.bio__name {
  margin-top: 50px;
  font-size: 20px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: 0.6px;
  color: var(--c-text-dark);
}
.bio__text p { font-size: 14px; line-height: 30px; padding-bottom: 14px; }
.bio__text p:last-child { padding-bottom: 0; }

.booking {
  padding: 98px;
  border-radius: 7px;
  background: rgba(186, 186, 186, 0.24);
  box-shadow: var(--shadow-form);
  color: var(--c-white);
}
.booking .panel-title { color: var(--c-white); }
.form { margin-top: 30px; }
.form__field { margin-bottom: 3%; }
.form__input {
  width: 100%;
  margin: 0;
  padding: 16px 16px 16px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.29);
  border-radius: 0;
  background: transparent;
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  -webkit-appearance: none;
  appearance: none;
}
.form__input::placeholder { color: var(--c-white); opacity: 1; }
.form__input:focus { outline: none; border-bottom-color: var(--c-white); }
textarea.form__input { resize: vertical; min-height: 58px; }
.form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 18px;
  font-size: 13px; line-height: 1.6; font-weight: 400;
}
.form__consent input { margin: 3px 0 0; width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--c-teal); }
.form__consent a { text-decoration: underline; }
.form__bottom { text-align: right; }
.form__submit {
  margin-top: 7px;
  padding: 21px 49px 21px 40px;
  border: 1px solid var(--c-white);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  cursor: pointer;
  transition: color var(--t), background-color var(--t), border var(--t);
}
.form__submit:hover, .form__submit:focus-visible { background: var(--c-teal); border-color: var(--c-teal); color: var(--c-navy); }
.form__status { margin-top: 18px; padding: 12px 16px; border-radius: 4px; font-size: 14px; line-height: 1.5; }
.form__status[hidden] { display: none; }
.form__status--ok { background: rgba(0, 213, 183, 0.18); border: 1px solid var(--c-teal); }
.form__status--error { background: rgba(224, 43, 32, 0.2); border: 1px solid var(--c-red); }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--c-black); color: var(--c-white); }
.footer__main { padding-top: 57px; }
.footer__grid {
  width: 94%;
  margin: 0 auto;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--c-footer-line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 3%;
}
.footer__logo { width: 37%; margin: 0 auto; }
.footer__slogan { margin-top: 25px; font-size: var(--fs-text); line-height: 1.7; }
.footer__heading {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  line-height: 0.9;
  color: var(--c-white);
  padding-bottom: 0;
}
.footer__heading--big {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 10px;
}
.footer__services { margin-top: 30px; padding-left: calc(4px + 1em); list-style: circle; font-size: var(--fs-text); line-height: 2.2; }
.footer__services a:hover { opacity: 0.7; }
.footer__contact { margin-top: 32px; font-size: var(--fs-text); font-style: normal; }
.footer__contact .footer__line { font-size: 20px; font-weight: 500; line-height: 1; padding-bottom: 10px; display: block; }
.footer__link { white-space: nowrap; }
.footer__link:hover { opacity: 0.8; }
.footer__wa { white-space: nowrap; }          /* " · WhatsApp" wraps as one unit, the number never splits */
.footer__email { white-space: normal; overflow-wrap: anywhere; }
.footer__contact p { padding-bottom: 1em; line-height: 1.7; }
.footer__btn { margin-top: 9px; }
.footer__map { margin-top: 20px; }
.footer__map iframe { display: block; width: 100%; height: 243px; border: 0; }
.footer__credit { margin-top: 6px; text-align: center; color: var(--c-credit); font-size: 14px; }
.footer__credit a,
.footer__credit a:visited { color: var(--c-credit-link); }
.footer__credit a:hover,
.footer__credit a:focus { color: var(--c-white); }
.footer__bottom { padding: 15px 0 5px; }
.footer__bottom-inner {
  width: 80%; max-width: 1080px; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 24px;
  color: var(--c-footer-text); font-size: 14px; line-height: 1.7;
}
.footer__bottom-inner p { padding-bottom: 10px; }
.footer__bottom-inner a { color: var(--c-footer-text); text-decoration: underline; }

/* =========================================================================
   WhatsApp chat button — rebuild of the old Chaty widget
   (chaty-front.min.css + widget settings: left, 25/25px, size 54, color #000,
   icon "chat-base", pending badge #dd0000, CTA "first_click", 1s delay)
   ========================================================================= */
.wa {
  position: fixed;
  left: 25px;
  bottom: 25px;
  z-index: 9998;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif;
  animation: wa-in 0.3s ease 1s both;          /* Chaty "time_delay": 1s */
}
@keyframes wa-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
.wa__btn {
  position: relative;
  display: block;
  width: 54px;
  height: 54px;
  margin-left: 4px;                             /* .chaty-i-trigger .chaty-channel { left: 4px } */
  border-radius: 50%;
  box-shadow: 0 16px 24px 0 rgba(73, 104, 126, 0.16);
  cursor: pointer;
}
.wa__btn:focus-visible { outline: 3px solid var(--c-cyan); outline-offset: 3px; }
.wa__icon {
  position: absolute;
  inset: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  transition: transform 0.5s, opacity 0.5s, visibility 0.5s;
}
.wa__icon--close { opacity: 0; visibility: hidden; }
.wa.is-open .wa__icon--chat { opacity: 0; visibility: hidden; transform: rotate(540deg); }
.wa.is-open .wa__icon--close { opacity: 1; visibility: visible; transform: rotate(180deg); }
.wa__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 2;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #dd0000;
  color: #ffffff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}
.wa.is-open .wa__badge, .wa.was-opened .wa__badge { display: none; }
/* CTA bubble to the right of the button, shown until the first click */
.wa__cta {
  position: absolute;
  top: 50%;
  left: calc(58px + 10px);
  transform: translate(0.5em, -50%);
  padding: 5px 15px;
  border-radius: 10px;
  background: #ffffff;
  color: #333333;
  box-shadow: 0 1.93465px 7.73859px rgba(0, 0, 0, 0.15);
  font-size: 17px;
  line-height: 21px;
  white-space: nowrap;
  pointer-events: none;
}
.wa__cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-width: 0;
  border-right-color: #ffffff;
}
.wa.is-open .wa__cta, .wa.was-opened .wa__cta { display: none; }

/* WhatsApp panel (Chaty "chaty-popup-whatsapp-form") */
.wa__panel {
  position: fixed;
  left: 25px;
  bottom: -25px;
  z-index: -1;
  width: 320px;
  max-width: 90%;
  border-radius: 8px;
  background: #f0ede7;
  box-shadow: rgba(0, 0, 0, 0.16) 0 5px 40px;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s linear;
}
.wa__panel[hidden] { display: block; }          /* hidden = closed state, kept for the slide transition */
.wa.is-open .wa__panel { opacity: 1; visibility: visible; transform: translateY(-93px); }
.wa__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  border-radius: 6px 6px 0 0;
  background: #4aa485;
  box-shadow: 0 16px 32px 0 rgba(26, 14, 53, 0.16);
}
.wa__head-icon { flex: 0 0 30px; width: 30px; height: 30px; margin-right: 7px; }
.wa__title { flex: 1; padding-right: 8px; color: #ffffff; font-size: 15px; }
.wa__close { flex: 0 0 16px; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.wa__close:focus-visible, .wa__send:focus-visible, .wa__input:focus-visible { outline: 2px solid #111b21; outline-offset: 2px; }
.wa__body { height: 260px; padding: 20px; display: flex; align-items: flex-start; }
.wa__msg {
  max-width: calc(100% - 40px);
  padding: 7px 14px 6px;
  border-radius: 0 10px 10px;
  background: #ffffff;
  font-size: 14px;
  line-height: 19px;
}
.wa__msg p { color: #111b21; font-weight: 400; word-wrap: break-word; }
.wa__time { display: block; color: #a1a1a9; font-size: 10px; line-height: 12px; text-align: right; }
.wa__foot { display: flex; align-items: center; padding: 20px 15px; margin: 0; }
.wa__input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 10px 0 15px;
  border: 0;
  border-radius: 24px;
  background: #ffffff;
  color: #111b21;
  font: inherit;
  font-size: 16px;
}
.wa__input::placeholder { color: #83a1b7; opacity: 0.4; }
.wa__send {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin-left: 10px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #c6d7e3;
  cursor: pointer;
  line-height: 0;
}
.wa__send:hover, .wa__send:focus-visible { background: #a8c5da; }
.wa__input:not(:placeholder-shown) + .wa__send { background: #25d366; }
.wa__input:not(:placeholder-shown) + .wa__send:hover,
.wa__input:not(:placeholder-shown) + .wa__send:focus-visible { background: #22bf5b; }
.wa__send svg { display: inline-block; vertical-align: middle; }
.wa__send:hover svg path, .wa__send:focus-visible svg path { fill: var(--c-navy); }   /* white icon is < 3:1 on the light hover backgrounds */

/* =========================================================================
   Privacy page
   ========================================================================= */
.legal { background: var(--c-white); padding: calc(var(--header-h) + 60px) 0 80px; color: var(--c-text-dark); }
.legal .container { max-width: 860px; }
.legal h1 { font-family: var(--font-heading); font-size: 36px; font-weight: 700; color: var(--c-navy); padding-bottom: 24px; }
.legal h2 { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--c-navy); margin-top: 32px; }
.legal p, .legal li { font-size: 15px; line-height: 1.8; }
.legal p { padding-bottom: 1em; }
.legal ul { padding: 0 0 1em 1.4em; }
.legal a { color: var(--c-blue); text-decoration: underline; }

/* =========================================================================
   Wide desktop (Divi ≥1350px)
   ========================================================================= */
@media (min-width: 1350px) {
  .services__grid { grid-template-columns: repeat(4, 1fr); }
  .about { padding-top: 54px; }
  .about__row { padding: 27px 0; }
  .strip .container { padding: 27px 0; }
  .results { padding: 54px 0; }
}

/* Bio side by side only where the text column stays wide enough for the 55px title (≤ 2 lines):
   portrait left (≈ 1/3 of the card), text right; portrait disk top-aligned with the title */
@media (min-width: 1600px) {
  .bio { display: grid; grid-template-columns: 36% 1fr; column-gap: 36px; align-items: start; }
  .bio__portrait { max-width: none; margin: 0; }
  .bio__portrait img { margin-top: calc(-5% - 10px); }
}

/* =========================================================================
   Tablet (Divi ≤980px)
   ========================================================================= */
@media (max-width: 980px) {
  .hero { padding-top: var(--header-h-mobile); }
  .legal { padding-top: calc(var(--header-h-mobile) + 40px); }
  main [id] { scroll-margin-top: var(--header-h-mobile); }
  .site-header { height: var(--header-h-mobile); }
  .site-header__inner { position: static; }
  .site-header__logo img { max-height: 80%; height: 64px; }
  .site-header__logo { flex: 1; }
  .nav-toggle { display: block; }
  .main-nav { align-self: center; padding-top: 0; }
  .main-nav__list {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    padding: 5%;
    background: var(--c-header-bg);
    border-top: 3px solid var(--c-divi-blue);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  .nav-open .main-nav__list { display: flex; }
  .main-nav__list li { padding: 0; }
  .main-nav__list a { padding: 10px 5%; border-bottom: 1px solid rgba(0, 0, 0, 0.03); line-height: 1.7; }

  .hero__content { padding: 25px 30px 13vw 0; }
  .hero__title { font-size: 48px; }
  .hero__subtitle, .hero__italy { margin-top: 15px; }
  .hero__phone { margin-top: 15px; } /* reference: -36px, which only worked with the removed badge */

  .services .section-title { text-align: center; }
  .services__grid { grid-template-columns: repeat(2, 1fr); column-gap: 5.5%; row-gap: 40px; }

  .process__title { max-width: 94%; }
  .timeline__title { font-size: 18px; }
  .results { padding: 50px 0; }
  /* Gallery: reference stacks every column here; photos 2 per row, title block full width */
  .results__list { max-width: 700px; }
  .ba__img { max-width: 348px; }

  .testimonials__grid { grid-template-columns: 1fr; row-gap: 30px; padding-top: 110px; }
  .review__avatar { margin-top: -67px; }
  .review__meta { margin-top: -15px; padding-top: 20px; }

  .strip .container { grid-template-columns: 1fr; padding: 30px 0; row-gap: 15px; }
  .strip__phone { text-align: center; }
  .strip__email { margin-top: 15px; }

  .about { padding: 50px 0 0; margin-bottom: -30px; }
  .about__row { grid-template-columns: 1fr; padding: 30px 0; }
  .booking { background: var(--c-blue); }

  .footer__grid { width: 90%; grid-template-columns: 1fr; row-gap: 30px; }
  .footer__logo { width: 45%; }
}

/* Tablet only: hero keeps two columns (reference: max-width 50% each) */
@media (min-width: 768px) and (max-width: 980px) {
  .hero { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   Phone (Divi ≤767px)
   ========================================================================= */
@media (max-width: 767px) {
  .hero { grid-template-columns: 1fr; }
  .hero__media img { max-width: 280px; margin-bottom: 0; }
  /* text block starts 24px below the photo; animation in normal flow below the phone button */
  .hero__content { display: flex; flex-direction: column; padding: 24px 30px 0; background: rgba(0, 0, 0, 0.58); }
  .hero__text { order: 1; }
  .hero__fx { position: relative; inset: auto; order: 2; height: 0; margin-top: 14px; }   /* height set by fitHeroArt() */
  .hero__title { font-size: 39px; margin-top: 0; }
  .hero__subtitle { margin-top: 9px; font-size: 20px; }
  .hero__italy { margin-top: 10px; font-size: 15px; font-weight: 400; white-space: nowrap; }
  .hero__phone { margin-top: 0; }

  .services .section-title { text-align: left; }
  /* phone spacing: animation -> title 32px (3px art margin + 34px - 5px title margin), title -> first card 24px (10px + 14px) */
  .services { padding-top: 34px; }
  .services__grid { grid-template-columns: 1fr; padding-top: 14px; }
  /* Timeline, reference phone layout: line at 10% from the left, every step on its right */
  .timeline { --tl-x: 10%; --tl-end: 25px; margin-top: 6px; padding-top: 0; }   /* line 16px, first icon centre ~41px below the title text */
  .process { --timeline-gradient: linear-gradient(180deg, #000000 0, #000000 70px, rgba(0, 0, 0, 0.7) 150px, rgba(255, 255, 255, 0.5) 215px, rgba(255, 255, 255, 0.5) 100%); }   /* title wraps to 2 lines */
  .timeline__step--left .timeline__text { margin: 0 0 0 var(--tl-x); padding: 0 0 0 40px; text-align: left; }
  .timeline__title { font-size: 16px; }
  .results__list { max-width: 400px; }
  .gallery__title { font-size: 30px; }
  /* phone: two per row with a small gap, odd last photo centred */
  .gallery__grid { gap: 8px; padding: 0 8px; }
  .gallery__grid .gallery__item { flex: 0 0 calc(50% - 4px); }
  .lightbox__img { max-width: 100vw; max-height: calc(100vh - 140px); }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 20px; transform: none; }
  .ba__img { max-width: 250px; }

  .process__title { max-width: 90%; }

  .testimonials__title { font-size: 30px; margin-top: 0; }
  .review__avatar { margin-top: -66px; }

  .panel-title { font-size: 30px; }
  .bio, .booking { padding: 40px 30px; }
  .booking { background: var(--c-black); }
  .form { margin-bottom: 60px; }
  .strip__email { margin-top: 20px; }

  .footer__col--brand, .footer__col--services { display: none; }
  .footer__logo { width: 46%; }
  .footer__contact { line-height: 1.8; margin-top: 22px; }
  /* ≥44px tap targets without changing the line spacing */
  .footer__contact .footer__link { display: inline-block; padding: 12px 0; margin: -12px 0; }
  /* WhatsApp button (25px + 54px + 16px gap): the last footer line ends above it */
  .footer__bottom { padding-bottom: 95px; }
  .wa__cta { display: none; }
  .wa__panel { max-width: calc(100vw - 50px); }
}

@media (max-width: 479px) {
  .hero__title { font-size: 34px; }
  .strip__phone { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card { animation: none; }
  .card, .btn-pill, .timeline__ring { transition: none; }
  .timeline.is-live .timeline__dot { display: none; }
  .timeline.is-live .timeline__ring { transform: scale(1.3); }
  .results.is-live .ba__img--ghost { display: none; }
  .results.is-live .ba__img--before { filter: none; transform: none !important; }
  .results.is-live .ba__img--after { transform: none !important; }
  .wa { animation: none; }
  .wa__icon, .wa__panel { transition: none; }
  .gallery__overlay, .lightbox, .lightbox__btn { transition: none; }
}