/* ==========================================================================
   creadent.al — static replica shared base
   Hand-written. No framework, no imports, everything local.
   Tokens harvested 2026-09-17 from the live WP/Elementor site
   (_local/harvest/shell/design.json). Brand teal #00837E (canonical),
   drifted twin #00827E kept where the site used it (eyebrows, outlines).
   Breakpoints: mobile <=767, tablet <=1024.
   ========================================================================== */

/* ---- Fonts: Migrena Grotesque, 8 weights, local TTF ---- */
@font-face {
  font-family: 'Migrena';
  src: url('/assets/fonts/Migrena_Grotesque-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Migrena';
  src: url('/assets/fonts/Migrena_Grotesque-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Migrena';
  src: url('/assets/fonts/Migrena_Grotesque-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Migrena';
  src: url('/assets/fonts/Migrena_Grotesque-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Migrena';
  src: url('/assets/fonts/Migrena_Grotesque-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Migrena';
  src: url('/assets/fonts/Migrena_Grotesque-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Migrena';
  src: url('/assets/fonts/Migrena_Grotesque-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Migrena';
  src: url('/assets/fonts/Migrena_Grotesque-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --teal: #00837E;        /* primary / filled buttons / bottom bar */
  --teal-2: #00827E;      /* drifted twin: eyebrows, outline buttons */
  --black: #000000;
  --grey: #707070;
  --white: #FFFFFF;
  --light: #EEEEEE;
  --light-bg: #F4F4F4;
  --footer-bg: rgba(0, 0, 0, 0.96); /* site used #000000F5 */
  --font: 'Migrena', Arial, sans-serif;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--grey);
  background: var(--white);
}
img, video, iframe { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  color: var(--black);
  line-height: 1.2;
  margin: 0 0 20px;
}
p { margin: 0 0 20px; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--grey); }
ul, ol { margin: 0 0 20px; padding-left: 22px; }
button { font-family: var(--font); cursor: pointer; }
input, textarea, select { font-family: var(--font); font-size: 16px; }

/* ---- Layout containers ---- */
.container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
.container-wide {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* ---- Sections ---- */
.sec { padding: 60px 0; }
.sec-teal { background: var(--teal); color: var(--white); }
.sec-teal h1, .sec-teal h2, .sec-teal h3, .sec-teal p { color: var(--white); }

/* ---- Type scale ---- */
.eyebrow {
  font-size: 20px;
  font-weight: 400;
  color: var(--teal-2);
  margin: 0 0 10px;
}
.h-xl { font-size: 48px; font-weight: 600; color: var(--black); }
.h-lg { font-size: 40px; font-weight: 300; color: var(--black); }
.h-md { font-size: 32px; font-weight: 400; color: var(--black); }

/* ---- Buttons (pill, Migrena) ---- */
.btn {
  display: inline-block;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.2;
  border: 0;
  border-radius: 29px;
  padding: 10px 20px;
  text-align: center;
}
.btn:hover { color: var(--white); opacity: 0.88; }
.btn-outline {
  display: inline-block;
  background: rgba(255, 255, 255, 0.65); /* site: #FFFFFFA6 */
  color: var(--teal-2);
  font-family: var(--font);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  border: 2px solid var(--teal-2);
  border-radius: 29px;
  padding: 10px 20px;
  text-align: center;
}
.btn-outline:hover { color: var(--teal-2); background: var(--white); }

/* ==========================================================================
   Header: topbar + logo + nav + dropdown + lang switch + hamburger
   ========================================================================== */
.site-header {
  background: var(--white);
  position: relative;
  z-index: 100;
}

/* Topbar contact strip */
.topbar { border-bottom: 1px solid var(--light); }
.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 28px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 400;
  color: var(--black);
}
.topbar-item:hover { color: var(--grey); }
.topbar-item svg { width: 19px; height: 19px; fill: currentColor; flex: none; }


/* Topbar brand graphic (Group-1.png) - present on every live page's header band,
   desktop-only there (Elementor hidden-tablet), shown left of the contact strip */
.topbar-brand { margin-right: auto; }
.topbar-brand img { width: 72px; height: auto; display: block; }
@media (max-width: 1024px) { .topbar-brand { display: none; } }

/* Header row */
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.logo { display: inline-block; flex: none; line-height: 0; }
.logo img { width: 100px; height: auto; }

/* Main nav — pill links, 45px menu height */
.main-nav > ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 45px;
}
.main-nav > ul > li { margin: 0 10px; position: relative; }
.main-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 300;
  color: var(--black);
  border: 1px solid var(--black);
  border-radius: 20px;
  padding: 8px 25px;
  line-height: 1.2;
  white-space: nowrap;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.active > a { color: var(--grey); }
.main-nav .caret { width: 10px; height: 10px; fill: currentColor; flex: none; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown .drop-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--white);
  border: 1px solid rgba(188, 210, 225, 0.08);
  border-radius: 25px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 15px 0;
  margin: 0;
  list-style: none;
  z-index: 200;
}
.dropdown.open > .drop-menu { display: block; }
.dropdown .drop-menu li { margin: 0; }
.dropdown .drop-menu a {
  display: block;
  font-size: 16px;
  font-weight: 300;
  color: var(--black);
  padding: 12px 15px;
  white-space: nowrap;
}
.dropdown .drop-menu a:hover { color: var(--grey); }

/* Language switcher (a dropdown, flag + label) */
.lang-switch img { width: 16px; height: 11px; vertical-align: baseline; }
.lang-switch .drop-menu { left: auto; right: 0; min-width: 137px; }
.lang-switch a img { margin-right: 0.3em; }

/* Hamburger — hidden on desktop */
.hamburger {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  width: 45px;
  border-radius: 3px;
}
.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  margin: 5px 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
}

/* ==========================================================================
   Hero video (YouTube bg, 16:9 cover) + welcome row
   ========================================================================== */
.hero-video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 85vh;
  background: var(--black);
}
.hero-video > iframe,
.hero-video > video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* oversize so a 16:9 frame always covers the box */
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  border: 0;
  pointer-events: none;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.25);
  color: var(--white);
  padding: 16px;
}
.hero-overlay h1, .hero-overlay h2 { color: var(--white); font-weight: 300; font-size: 47px; }
.welcome-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 40px;
  padding: 30px 16px;
}

/* ==========================================================================
   Content blocks
   ========================================================================== */

/* Icon strip: 5 equal columns of h2s */
.icon-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  text-align: center;
}
.icon-strip h2 { font-size: 18px; font-weight: 400; margin: 0; }

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  background: var(--white);
  border: 1px solid var(--light);
  border-radius: 8px;
  overflow: hidden;
}
.card img { display: block; width: 100%; height: auto; }
.card > div, .card figcaption { padding: 16px 20px; }

/* Carousel */
.carousel { position: relative; overflow: hidden; }
.carousel .slide { display: none; }
.carousel .slide.active { display: block; }
.carousel .slide img { display: block; width: 100%; height: auto; }
.figcap {
  font-size: 16px;
  color: var(--grey);
  text-align: center;
  padding: 10px 16px;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-arrow:hover { background: var(--white); }
.carousel-arrow svg { width: 16px; height: 16px; fill: currentColor; }
.carousel-arrow.prev { left: 12px; }
.carousel-arrow.next { right: 12px; }

/* Staff grid */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.staff-card { text-align: center; }
.staff-card img { display: block; width: 100%; height: auto; border-radius: 8px; }
.staff-card h2 { font-size: 24px; font-weight: 400; margin: 14px 0 4px; }
.staff-card p { color: var(--grey); font-size: 16px; margin: 0; }

/* Split: 2-col text + image */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.split img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* Prose: article body */
.prose { color: var(--grey); }
.prose h2 { font-size: 32px; font-weight: 400; margin-top: 40px; }
.prose h3 { font-size: 24px; font-weight: 400; margin-top: 30px; }
.prose p { margin-bottom: 20px; }
.prose ul { margin-bottom: 20px; }
.prose img { display: block; margin: 20px auto; height: auto; }
.prose a { color: var(--teal-2); }
.prose a:hover { color: var(--teal); }

/* ==========================================================================
   Footer (sq/en shell: CTA + form + columns + teal bottom bar)
   ========================================================================== */
.site-footer {
  background: var(--footer-bg);
  color: var(--white);
  padding-top: 60px;
}
.site-footer h2 { color: var(--white); }
.site-footer a:hover { color: var(--light); }

.footer-cta { text-align: center; padding-bottom: 40px; }
.footer-cta h2 { font-size: 40px; font-weight: 300; }
.footer-cta p { max-width: 640px; margin: 0 auto 24px; color: var(--light); }

/* Footer booking form (MetForm replica, stubbed) */
.footer-form { padding-bottom: 40px; }
.footer-form h2 { font-size: 32px; font-weight: 400; text-align: center; }
.footer-form form {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.footer-form input[type="text"],
.footer-form input[type="tel"],
.footer-form textarea {
  width: 100%;
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--light);
  border-radius: 6px;
  padding: 12px 14px;
}
.footer-form textarea { min-height: 120px; resize: vertical; }
.footer-form .form-full { grid-column: 1 / -1; }
.footer-form .upload-label {
  display: block;
  font-size: 16px;
  color: var(--light);
}
.footer-form .upload-label input { display: block; margin-top: 6px; color: var(--light); }
.footer-form .btn { justify-self: start; }

/* Stub success message — mimics the MetForm alert box */
.form-stub-success {
  grid-column: 1 / -1;
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 16px;
}

/* Footer link columns */
.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
}
.footer-cols h2 { font-size: 24px; font-weight: 400; margin-bottom: 16px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: 8px; }
.footer-cols ul ul { padding-left: 16px; margin-top: 8px; }
.footer-cols a { color: var(--light); font-weight: 300; }
.footer-cols a:hover { color: var(--white); }
.footer-cols p { color: var(--light); margin-bottom: 8px; }
.footer-cols strong { color: var(--white); font-weight: 400; }
.footer-cols .lang-flag { width: 16px; height: 11px; margin-right: 0.3em; }

/* Socials */
.social-icons { display: flex; gap: 14px; margin-top: 18px; }
.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--grey);
  border-radius: 50%;
  color: var(--white);
}
.social-icons a:hover { border-color: var(--white); }
.social-icons svg { width: 18px; height: 18px; fill: currentColor; }

/* Teal bottom bar */
.bottom-bar {
  background: var(--teal);
  color: var(--white);
  text-align: center;
  padding: 24px 16px;
}
.bottom-bar h2 {
  color: var(--white);
  font-size: 28px;
  font-weight: 300;
  margin: 0 0 6px;
}
.bottom-bar p { margin: 0; font-size: 15px; }
.bottom-bar a { color: var(--white); text-decoration: underline; }

/* ---- IT lane footer (hand-built creadent-footer on /home-it/ pages) ---- */
.site-footer .creadent-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 40px;
}
.site-footer .creadent-footer-column h4 {
  color: var(--white);
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 14px;
}
.site-footer .creadent-footer-column ul { list-style: none; margin: 0; padding: 0; }
.site-footer .creadent-footer-column li { margin-bottom: 8px; color: var(--light); font-weight: 300; }
.site-footer .creadent-footer-column small { color: var(--grey); }
.footer-contact-item { margin-bottom: 16px; }
.footer-contact-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  margin-bottom: 4px;
}
.footer-contact-icon { color: var(--teal-2); }
.footer-contact-link { color: var(--light); font-weight: 300; display: inline-block; }
.footer-contact-link:hover { color: var(--white); }
.creadent-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  padding: 24px 16px 40px;
}
.creadent-footer-name { color: var(--white); font-size: 20px; margin-bottom: 8px; }
.creadent-footer-copyright { color: var(--grey); font-size: 14px; margin: 0; }

/* ==========================================================================
   Floating WhatsApp button
   ========================================================================== */
.wa-float {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #25D366;
  border-radius: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.wa-float:hover { transform: scale(1.05); }
.wa-float svg { width: 24px; height: 24px; fill: var(--white); display: block; }

/* ==========================================================================
   Responsive — tablet <=1024
   ========================================================================== */
@media (max-width: 1024px) {
  /* Hamburger nav */
  .hamburger { display: block; margin-left: auto; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--light);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    padding: 10px 16px 20px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  .main-nav.open { display: block; }
  .main-nav > ul { display: block; min-height: 0; }
  .main-nav > ul > li { margin: 8px 0; }
  .main-nav > ul > li > a {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    white-space: normal;
  }
  .dropdown .drop-menu {
    position: static;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 0 15px;
  }
  .lang-switch .drop-menu { min-width: 0; }

  .icon-strip { grid-template-columns: repeat(3, 1fr); }
  .cards, .staff-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop-only hover open for dropdowns */
@media (min-width: 1025px) {
  .dropdown:hover > .drop-menu { display: block; }
}

/* ==========================================================================
   Responsive — mobile <=767
   ========================================================================== */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .sec { padding: 40px 0; }
  .h-xl { font-size: 32px; }
  .h-lg { font-size: 30px; }
  .h-md { font-size: 26px; }
  .hero-overlay h1, .hero-overlay h2 { font-size: 30px; }
  .btn, .btn-outline { font-size: 22px; }

  .topbar-inner { justify-content: center; gap: 6px 16px; }
  .topbar-item { font-size: 15px; }
  .logo img { width: 80px; }

  .hero-video { aspect-ratio: auto; min-height: 240px; height: 56vw; }

  .icon-strip { grid-template-columns: 1fr; }
  .cards, .staff-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 20px; }

  .footer-cta h2 { font-size: 30px; }
  .footer-form form { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; gap: 30px; }
  .site-footer .creadent-footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .site-footer .creadent-footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   REVISION 01/10/2026 — header + hero, from the operator's marked-up
   screenshot (creadent.hero.JPG). Appended, so every rule here wins over the
   original block above it. Nothing above was deleted.

   1  one logo, top-left corner of the header strip, clickable -> /
   2  language switcher lives in the header strip, far right
   3  the two mobiles are WhatsApp taps, the landline a phone tap
   4  menu sits on the right corner; the home link is gone (the logo is it)
   5  hero fills the full width of the band and is poster-first, so the
      largest paint is a 70 KB local image and no third-party player is
      fetched until someone asks for it
   6  hero carries the Google listing: title, address, rating, review topics,
      and one call to action that opens a modal
   ========================================================================== */

/* ---- 1 + 2 + 3: the header strip ---- */
.topbar { border-bottom: 1px solid var(--light); }
.topbar-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 24px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.topbar .logo { margin-right: auto; flex: none; line-height: 0; }
.topbar .logo img { width: 58px; height: auto; display: block; }

.topbar-contacts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 400;
  color: var(--black);
  white-space: nowrap;
}
.topbar-item svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.topbar-item.is-wa svg { fill: #25d366; }
.topbar-item.is-tel svg { fill: var(--teal); }
.topbar-item .tap-note {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey);
  border: 1px solid var(--light);
  border-radius: 10px;
  padding: 3px 7px;
}
.topbar-item:hover { color: var(--teal); }
.topbar-item:hover .tap-note { border-color: var(--teal); color: var(--teal); }

.topbar .lang-switch { flex: none; margin-left: 4px; }
.topbar .lang-switch > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 17px;
  color: var(--black);
  border: 1px solid var(--light);
  border-radius: 20px;
  padding: 6px 13px;
}
.topbar .lang-switch > a:hover { border-color: var(--teal); color: var(--teal); }
.topbar .lang-switch .drop-menu { left: auto; right: 0; min-width: 150px; }
.topbar .lang-switch .drop-menu a { display: flex; align-items: center; gap: 7px; }

/* ---- 4: menu row, hard right ---- */
.header-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.main-nav > ul { justify-content: flex-end; min-height: 42px; }

/* ---- 5: the hero band ---- */
.hero {
  position: relative;
  width: 100%;
  height: min(76vh, 56.25vw);
  min-height: 430px;
  overflow: hidden;
  background: var(--black);
}
.hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}
.hero iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  border: 0;
  z-index: 1;
  pointer-events: none;
  /* created transparent; revealed only once the embed has really loaded, so a
     blocked or slow player can never paint a black box over the photograph */
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero iframe.is-live { opacity: 1; }
/* readable text without flattening the picture: dark on the left, clear on the right */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(100deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 42%, rgba(0,0,0,0.12) 72%, rgba(0,0,0,0.05) 100%);
}
.hero-inner {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
}
.hero-copy { max-width: 640px; color: var(--white); }
.hero-place {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(255,255,255,0.88);
  margin: 0 0 14px;
}
.hero-place svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.hero h1 {
  color: var(--white);
  font-weight: 300;
  font-size: 44px;
  line-height: 1.12;
  margin: 0 0 12px;
  text-wrap: balance;
}
.hero h1 strong { font-weight: 600; }
.hero-sub {
  color: rgba(255,255,255,0.92);
  font-size: 19px;
  line-height: 1.5;
  margin: 0 0 18px;
}

/* 6: the Google listing, as it reads on the search result */
.hero-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--white);
}
.hero-rating .score { font-size: 24px; font-weight: 600; line-height: 1; }
.hero-stars { display: inline-flex; gap: 2px; }
.hero-stars svg { width: 18px; height: 18px; fill: #fbbc04; }
.hero-rating .src { color: rgba(255,255,255,0.78); font-size: 14px; }
.hero-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.hero-topics li {
  font-size: 13px;
  line-height: 1;
  color: var(--white);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 14px;
  padding: 6px 11px;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero-actions .btn { font-size: 21px; padding: 11px 26px; }
.hero-actions .btn-outline {
  font-size: 21px;
  padding: 11px 26px;
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.7);
}
.hero-actions .btn-outline:hover { background: var(--white); color: var(--teal-2); }

/* Background video. No control of any kind: it plays by itself, muted, looping,
   under the copy - which is what a background video is.
   The local still is NEVER removed. It sits at the bottom of the stack and the
   video is drawn on top of it, so the band always shows a picture: the video when
   it plays, the photograph when it does not (autoplay refused, slow link, embed
   blocked). It is also what the browser measures as the largest paint, which keeps
   the player out of the critical path. */
.hero-poster { z-index: 0; }

/* ---- the consultation modal ---- */
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.6);
}
.modal-box {
  background: var(--white);
  border-radius: 12px;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 28px 30px 30px;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: 0;
  font-size: 30px;
  line-height: 1;
  color: var(--grey);
  cursor: pointer;
  padding: 4px 8px;
}
.modal-close:hover { color: var(--black); }
.modal-box h2 { font-size: 30px; font-weight: 400; margin: 0 0 10px; color: var(--black); }
.modal-lead { font-size: 17px; line-height: 1.55; margin: 0 0 16px; }
.modal-steps { margin: 0 0 18px; padding-left: 20px; font-size: 16px; line-height: 1.6; }
.modal-steps li { margin-bottom: 6px; }
.modal-note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--grey);
  background: var(--light-bg);
  border-left: 3px solid var(--teal);
  border-radius: 0 6px 6px 0;
  padding: 12px 14px;
  margin: 0 0 20px;
}
.modal-form { display: grid; gap: 12px; }
.modal-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-form label { font-size: 14px; color: var(--grey); display: block; margin-bottom: 4px; }
.modal-form input,
.modal-form textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 16px;
  color: var(--black);
  border: 1px solid var(--light);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--white);
}
.modal-form input:focus,
.modal-form textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.modal-form textarea { min-height: 96px; resize: vertical; }
.modal-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--grey); }
.modal-consent input { width: auto; margin-top: 3px; flex: none; }
.modal-form .btn { font-size: 21px; padding: 11px 26px; justify-self: start; cursor: pointer; }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .topbar .logo img { width: 50px; }
  .topbar-item { font-size: 16px; }
  .topbar-item .tap-note { display: none; }
  .hero h1 { font-size: 34px; }
  .hero-copy { max-width: 100%; }
  .hero-scrim { background: linear-gradient(100deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.62) 55%, rgba(0,0,0,0.3) 100%); }
}
@media (max-width: 767px) {
  .topbar-inner { justify-content: space-between; gap: 8px 14px; }
  .topbar-contacts { order: 3; width: 100%; justify-content: flex-start; gap: 6px 16px; }
  .topbar-item { font-size: 15px; }
  .topbar-item svg { width: 18px; height: 18px; }
  .hero { height: auto; min-height: 0; }
  .hero-poster { position: relative; height: auto; aspect-ratio: 16 / 9; }
  .hero-scrim { position: absolute; inset: 0; height: auto; bottom: auto; aspect-ratio: 16 / 9; background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45)); }
  .hero-inner { position: static; height: auto; background: var(--teal); padding-top: 26px; padding-bottom: 30px; }
  .hero-copy { color: var(--white); }
  .hero h1 { font-size: 28px; }
  .hero-sub { font-size: 17px; }
  .hero-actions .btn,
  .hero-actions .btn-outline { font-size: 18px; padding: 10px 20px; }
  .modal-box { padding: 24px 20px 26px; }
  .modal-form .row2 { grid-template-columns: 1fr; }
}

/* --- pass 2, 01/10/2026: fixes from looking at the rendered page --- */
.modal-consent a { color: var(--teal); text-decoration: underline; }
.modal-consent a:hover { color: var(--black); }

@media (max-width: 767px) {
  /* the copy block sits on teal here, so a teal-filled button vanishes into it */
  .hero-inner .hero-actions .btn {
    background: var(--white);
    color: var(--teal);
  }
  .hero-inner .hero-actions .btn:hover { color: var(--teal); opacity: 0.9; }
  .hero-inner .hero-actions .btn-outline {
    border-color: var(--white);
    color: var(--white);
  }
  .hero-inner .hero-actions .btn-outline:hover { background: var(--white); color: var(--teal); }
}

/* --- pass 4, 01/10/2026: the modal answers with ONE confirmation ---
   Once the request is sent, the heading, the steps, the note and the form are
   all taken away and this is the only thing left in the box. */
.modal-body[hidden], .modal-done[hidden] { display: none; }
.modal-done { text-align: center; padding: 16px 4px 8px; }
.modal-done-tick { width: 56px; height: 56px; fill: var(--teal); margin: 0 auto 14px; display: block; }
.modal-done h2 { font-size: 26px; font-weight: 400; margin: 0 0 10px; color: var(--black); }
.modal-done p { font-size: 17px; line-height: 1.55; color: var(--grey); margin: 0 auto 22px; max-width: 420px; }
.modal-done .btn { font-size: 19px; padding: 10px 28px; cursor: pointer; }

/* --- pass 7 superseded by pass 8: the player runs on phones too --- */

/* ==========================================================================
   REVISION 01/10/2026 (b) — the home page as one scrolling path.

   The home page is no longer a set of teasers. It is the clinic, discovered in
   order: the hero, then one full-width band per menu item, in menu order, each
   one carrying that page's own opening and linking through to it. Treatments is
   the one band that holds many URLs, because that menu item is a dropdown of
   eight. Contact is not a band and not a menu URL: it is the footer.

   The number on each band is not decoration - it is the position in that path,
   and it matches the menu order exactly.
   ========================================================================== */

.pg {
  padding: 68px 0;
  border-top: 1px solid var(--light);
  background: var(--white);
  scroll-margin-top: 20px;
}
.pg:nth-of-type(even) { background: var(--light-bg); }

.pg-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
}
.pg.is-flipped .pg-media { order: -1; }
/* the text column of a band; min-width:0 so long words cannot blow the grid out */
.pg-copy { min-width: 0; }

.pg-step {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 400;
  color: var(--teal-2);
  letter-spacing: 0.02em;
}
.pg-step b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 15px;
  color: var(--white);
  background: var(--teal);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.pg h2 {
  font-size: 38px;
  font-weight: 300;
  line-height: 1.15;
  color: var(--black);
  margin: 0 0 16px;
  text-wrap: balance;
}
.pg .prose p { margin: 0 0 14px; }

.pg-points {
  list-style: none;
  margin: 18px 0 24px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pg-points li {
  font-size: 14px;
  line-height: 1;
  color: var(--grey);
  background: var(--white);
  border: 1px solid var(--light);
  border-radius: 15px;
  padding: 7px 13px;
}
.pg:nth-of-type(even) .pg-points li { background: var(--white); }

.pg-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  color: var(--teal);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.pg-more:hover { color: var(--black); }
.pg-more svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

.pg-media { line-height: 0; }
.pg-media img {
  width: 100%;
  height: 100%;
  max-height: 440px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* ---- the one band that holds many URLs ---- */
.pg-treatments .pg-head { max-width: 760px; margin: 0 0 32px; }
.pg-treatments .pg-head h2 { margin-bottom: 12px; }
.pg-treatments .pg-lead { font-size: 18px; line-height: 1.6; color: var(--grey); margin: 0; }

.tr-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.tr-grid a {
  display: block;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--light);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.tr-grid a:hover { border-color: var(--teal); transform: translateY(-2px); }
.tr-grid a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tr-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.tr-body { padding: 14px 16px 18px; }
.tr-name {
  display: block;
  font-size: 20px;
  font-weight: 400;
  color: var(--black);
  margin-bottom: 6px;
}
.tr-note {
  display: block;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--grey);
}
.tr-grid a:hover .tr-name { color: var(--teal); }

/* ---- footer: the contact anchor ---- */
.site-footer { scroll-margin-top: 0; }
.footer-nap {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.6;
}
.footer-nap strong { display: block; margin-bottom: 2px; }
.footer-open {
  font-size: 14px;
  line-height: 1.6;
  color: var(--light);
  opacity: 0.85;
  margin: 0 0 14px;
}

@media (max-width: 1024px) {
  .pg { padding: 52px 0; }
  .pg-inner { grid-template-columns: 1fr; gap: 28px; }
  .pg.is-flipped .pg-media { order: 0; }
  .pg h2 { font-size: 30px; }
  .pg-media img { max-height: 320px; }
  .tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pg { padding: 40px 0; }
  .pg h2 { font-size: 26px; }
  .pg-step { font-size: 16px; }
  .pg-media img { max-height: 240px; }
  .tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tr-name { font-size: 17px; }
  .tr-note { font-size: 13.5px; }
  .pg-more { font-size: 17px; }
}
/* One card per row only on the narrowest phones. At 375px two still read fine
   and the page comes out half as long. */
@media (max-width: 339px) {
  .tr-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PASS 8, 01/10/2026 — from the operator's seven marked-up phone screenshots.
   Appended, so everything here wins over the rules above it.
   ========================================================================== */

/* ---- A. the phone header -------------------------------------------------
   The menu button sits in the top strip, on the corner, next to the flag.
   The language word goes; the flag carries it, and the link has a real label
   for anyone who cannot see the flag. The three numbers go too - they are in
   the footer under Contact, which the menu's Contact item scrolls to. */
.topbar .hamburger { flex: none; margin-left: 10px; }
.lang-word { margin-left: 2px; }

@media (max-width: 1024px) {
  .topbar .hamburger { display: block; }
  /* the button left the menu row, so the row holds nothing until the menu opens */
  .header-row { padding-top: 0; padding-bottom: 0; gap: 0; min-height: 0; }
}
@media (max-width: 767px) {
  /* the numbers live under Contact in the footer, not up here */
  .topbar-contacts { display: none; }
  /* the flag is the language control; the word is noise at this width */
  .lang-word { display: none; }
  .topbar .lang-switch > a { padding: 7px 11px; gap: 5px; }
  .topbar-inner { justify-content: flex-end; gap: 0 10px; padding-top: 8px; padding-bottom: 8px; }
  .topbar .logo img { width: 54px; }
}

/* ---- B. the hero video ---------------------------------------------------
   The still and the player now share ONE box. That is what was wrong before:
   on a phone the player was sized against the viewport instead of against the
   band, so it came out the wrong shape and painted black over the photograph.
   It plays by itself, muted and looping, on every width. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-media .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero-media iframe.is-live { opacity: 1; }

@media (max-width: 767px) {
  /* the band is exactly 16:9 here, so the player fills it one to one */
  .hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .hero-media .hero-poster { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .hero-media iframe { width: 100%; height: 100%; }
  /* the scrim belongs to the picture, not to the teal panel underneath */
  .hero-scrim { display: none; }
  .hero iframe { display: block; }
}

/* ---- C. the cut photograph ----------------------------------------------
   Bands prefer a landscape picture now, and the crop keeps the top of the
   frame, which is where faces are. */
.pg-media img { object-position: 50% 22%; }

/* the "what is on that page" line, previously inline-styled */
.pg-on {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--grey);
}

/* ---- D. the treatment cards ---------------------------------------------
   Every card now carries the page's own search-result sentence, so no card is
   empty and none is cut mid-word. They are longer, so the card gives them room
   and the rows stay level. */
.tr-grid { align-items: stretch; }
.tr-grid li { display: flex; }
.tr-grid a { display: flex; flex-direction: column; width: 100%; }
.tr-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 18px; }
.tr-note { font-size: 14px; line-height: 1.55; }

/* ==========================================================================
   GALLERY — "Disa nga rastet e trajtuara", 01/10/2026

   These blocks used to be a grid of cards, which on a phone becomes one tall
   column: the visitor scrolls past six full-screen photographs to reach the
   rest of the page. They are now one horizontal track.

   Three ways to move through it, all of them working at once:
     - drag or swipe the track itself (touch, trackpad, or mouse-drag)
     - the arrows on either side
     - the dots underneath

   The track is a real scroller with scroll-snap, so touch swiping is the
   browser's own - no library, no touch handler fighting the platform. The JS
   only adds the arrows, the dots, and mouse-drag, which a scroller does not
   give you for free.
   ========================================================================== */

.gal { position: relative; }

.gal-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.gal-track::-webkit-scrollbar { display: none; }
.gal-track.is-dragging { scroll-behavior: auto; cursor: grabbing; }
.gal-track.is-dragging a { pointer-events: none; }

.gal-slide {
  flex: 0 0 auto;
  width: calc((100% - 28px) / 3);
  scroll-snap-align: center;
  border-radius: 10px;
  overflow: hidden;
  background: var(--light-bg);
  line-height: 0;
}
/* These are case photographs - 23 of them portrait, 29 landscape, 16 square,
   from 0.56 to 1.78. No crop fits that range, and a before/after cropped is a
   before/after ruined. So: one square box, the whole photograph inside it,
   nothing cut. */
.gal-slide img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--light-bg);
  display: block;
}
.gal-slide:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* arrows */
.gal-arrow {
  position: absolute;
  top: calc(50% - 26px);
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--light);
  background: rgba(255, 255, 255, 0.94);
  color: var(--teal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}
.gal-arrow svg { width: 18px; height: 18px; fill: currentColor; }
.gal-arrow:hover { background: var(--white); border-color: var(--teal); }
.gal-arrow:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.gal-arrow[disabled] { opacity: 0.32; cursor: default; box-shadow: none; }
.gal-arrow.prev { left: -6px; }
.gal-arrow.next { right: -6px; }

/* dots */
.gal-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.gal-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--light);
  cursor: pointer;
}
.gal-dot[aria-current="true"] { background: var(--teal); transform: scale(1.25); }
.gal-dot:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.gal-count {
  text-align: center;
  font-size: 14px;
  color: var(--grey);
  margin: 10px 0 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1024px) {
  .gal-slide { width: calc((100% - 14px) / 2); }
}
@media (max-width: 767px) {
  /* one photograph at a time, with the next one peeking in so it is obvious
     the track moves sideways */
  .gal-slide { width: 86%; }
  .gal-track { gap: 10px; }
  .gal-arrow { width: 38px; height: 38px; }
  .gal-arrow.prev { left: 2px; }
  .gal-arrow.next { right: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .gal-track { scroll-behavior: auto; }
}

/* ==========================================================================
   SWEEP FIXES, 01/10/2026 — defects confirmed by the verification sweep.
   Appended last, so these win.
   ========================================================================== */

/* #7 — between 768 and ~806 px the menu button wrapped onto a second line
   below the phone numbers and the header grew from 71 to 127 px tall. Cause:
   the button is turned on for the whole <=1024 band, but the numbers that
   crowd it out were only hidden at <=767. The header is in its compact state
   for the whole <=1024 band, so the numbers go for the whole band. They are
   not lost - they are under Contact in the footer, which the menu's Contact
   item scrolls to. */
@media (max-width: 1024px) {
  .topbar-contacts { display: none; }
  .topbar-inner { flex-wrap: nowrap; }
}

/* #11 — at 320 px the page scrolled sideways: the footer form's fields were
   312 px inside a 288 px content box. Nothing may be wider than its container. */
.footer-form input[type="text"],
.footer-form input[type="tel"],
.footer-form input[type="email"],
.footer-form textarea,
.footer-form .upload-label,
.footer-form .upload-label input {
  max-width: 100%;
  box-sizing: border-box;
}
.footer-form form { max-width: 100%; }
/* The real cause: a grid item's default min-width is auto, so the track grew to
   the input's intrinsic size (size=20, about 312px) and pushed the page wider
   than the phone. Let the items shrink. */
.footer-form form > *,
.footer-form form input,
.footer-form form textarea,
.footer-form form label { min-width: 0; }
.footer-form form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 767px) {
  .footer-form form { grid-template-columns: minmax(0, 1fr); }
}
.footer-form input[size] { size: auto; }

/* --- sweep fix: the language menu must not move the header --- */
/* Below 1024 the generic dropdown rule turns .drop-menu into an in-flow block.
   In the main navigation that is right - the menu is a stack. In the TOP STRIP
   it was catastrophic: opening the language list grew the strip and shoved the
   logo and the menu button ~90px down the page. In the strip it stays a panel
   that floats over the page, as it does on a desktop. */
@media (max-width: 1024px) {
  .topbar .lang-switch .drop-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 160px;
    margin: 6px 0 0;
    padding: 6px 0;
    background: var(--white);
    border: 1px solid var(--light);
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
    z-index: 200;
  }
  .topbar .lang-switch .drop-menu a { padding: 9px 14px; }
}

/* ==========================================================================
   SIDE RAILS + LEGAL FOOTER — 02/10/2026

   The body is a 1100px column. On a wide screen that leaves ~400px of empty
   margin each side, which is what the operator marked. Those margins now carry:

     LEFT   the sections of the page you are on, each one a real anchor URL,
            with the one you are reading marked. Appears only when the page has
            at least three sections and only when there is genuinely room for it,
            so it can never crowd the text.
     RIGHT  one call to action that follows the scroll the whole way down.

   Neither is decoration: the left rail is this page's own table of contents and
   the right is the only thing a visitor has to press.
   ========================================================================== */

/* ---- left: this page's sections -------------------------------------- */
.page-rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: max(16px, calc((100vw - 1100px) / 2 - 200px));
  width: 184px;
  max-height: 72vh;
  overflow-y: auto;
  z-index: 40;
  display: none;                 /* turned on only when there is room */
}
/* No card, no shadow, no panel: the rail is part of the page, not an object
   floating over it. The readability problem it was given a surface for is solved
   instead by not showing it until the page has scrolled past its banner - see
   main.js - so it is only ever drawn on the plain page background. */
.page-rail-title {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 10px 13px;
}
.page-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--light);
}
.page-rail li { margin: 0; }
.page-rail a {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--grey);
  padding: 7px 10px 7px 13px;
  margin-left: -1px;
  border-left: 2px solid transparent;
}
.page-rail a:hover { color: var(--teal); }
/* The group rail lists sibling pages rather than this page's sections, so its
   current item is a page you are already on, not a place to scroll to. */
.page-rail.is-siblings a[aria-current="true"] { pointer-events: none; }
.page-rail a[aria-current="true"] {
  color: var(--teal);
  border-left-color: var(--teal);
  font-weight: 400;
}
.page-rail a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* they fade rather than snap when the footer pushes them out */
.page-rail, .cta-dock { transition: opacity 0.2s ease, visibility 0.2s ease; }

/* ---- right: the call to action that follows you ----------------------- */
.cta-dock {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: max(16px, calc((100vw - 1100px) / 2 - 200px));
  width: 184px;
  z-index: 40;
  display: none;
  padding: 0 0 0 16px;
  border-left: 1px solid var(--light);
}
.cta-dock p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--grey);
  margin: 0 0 14px;
}
.cta-dock .btn {
  display: block;
  width: 100%;
  font-size: 17px;
  padding: 11px 10px;
  cursor: pointer;
  border: 0;
}
.cta-dock .cta-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--teal);
}
.cta-dock .cta-call svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.cta-dock .cta-call:hover { color: var(--black); }

/* Both rails live in the empty margin, so they appear only once that margin is
   genuinely wide enough. 1100 + 2*(208 + 24 + 24) = 1612. */
/* 1100 + 2 x (176 + 14) = 1480. Set from the width a real window reports, not
   from the ideal: a 1920 monitor at Windows' default 125% scaling reports 1536
   CSS px, and the first threshold here was 1612 - so the rails were invisible on
   exactly the machine they were made for. */
@media (min-width: 1500px) {
  .page-rail, .cta-dock { display: block; }
}

/* ---- the phone keeps the call to action, not the rail ----------------- */
.cta-bar {
  position: fixed;
  left: 14px;
  bottom: 18px;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 16px;
  color: var(--white);
  background: var(--teal);
  border: 0;
  border-radius: 26px;
  padding: 12px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.26);
  cursor: pointer;
}
.cta-bar svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.cta-bar:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
/* Below the rail threshold the pill takes over, so there is ALWAYS exactly one
   standing call to action at every width. Bottom LEFT: WhatsApp owns the right. */
@media (max-width: 1499px) {
  .cta-bar { display: inline-flex; }
}

/* ---- the footer, as a legal surface ----------------------------------- */
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 26px 0 4px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--light);
}
.footer-legal .legal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 34px;
}
.footer-legal h3 {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 7px;
  font-weight: 500;
}
.footer-legal p { margin: 0 0 8px; opacity: 0.86; }
.footer-legal p:last-child { margin-bottom: 0; }
.footer-legal a { color: var(--white); text-decoration: underline; }
.footer-legal a:hover { opacity: 0.8; }
/* The registered subject and tax number, from the QKB certificate. Printed
   plainly: it is a legal identity, not a design element. */
.footer-legal .legal-id {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0.9;
}
.footer-legal .legal-id strong { color: var(--white); font-weight: 500; }
@media (max-width: 1024px) {
  .footer-legal .legal-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .footer-legal .legal-grid { grid-template-columns: 1fr; gap: 18px; }
  .footer-legal { font-size: 13px; }
}

/* ==========================================================================
   EVERY CONTROL IS DESIGNED — 02/10/2026

   Two things on these pages were still the browser's own 1998 widgets, drawn by
   the operating system and ignoring the design entirely:

     input[type="file"]      57 of them - the "Choose File / No file chosen"
                             grey box in the booking form
     input[type="checkbox"]  56 - the consent box in the consultation modal

   Both are now flat, plain and part of the page: no gradients, no bevels, no
   shadows, no borrowed system chrome. They match the fields they sit beside.
   ========================================================================== */

/* ---- the file picker, in the footer booking form (on black) ---- */
.footer-form .upload-label {
  display: block;
  cursor: pointer;
}
.footer-form .upload-label input[type="file"] {
  display: block;
  width: 100%;
  margin-top: 8px;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.4;
  color: var(--light);
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
}
.footer-form .upload-label input[type="file"]:hover { border-color: rgba(255, 255, 255, 0.6); }
.footer-form .upload-label input[type="file"]:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}
/* the button half of the control: flat, no border, no shadow */
.footer-form .upload-label input[type="file"]::file-selector-button {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.2;
  color: var(--teal);
  background: var(--white);
  border: 0;
  border-radius: 6px;
  padding: 8px 15px;
  margin: 0 12px 0 0;
  cursor: pointer;
}
.footer-form .upload-label input[type="file"]::file-selector-button:hover { background: var(--light); }

/* the same control anywhere on a light background */
.modal-form input[type="file"] {
  display: block;
  width: 100%;
  font-family: var(--font);
  font-size: 15px;
  color: var(--grey);
  background: var(--white);
  border: 1px dashed var(--light);
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
}
.modal-form input[type="file"]::file-selector-button {
  font-family: var(--font);
  font-size: 15px;
  color: var(--white);
  background: var(--teal);
  border: 0;
  border-radius: 6px;
  padding: 8px 15px;
  margin: 0 12px 0 0;
  cursor: pointer;
}

/* ---- the consent checkbox ---- */
.modal-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  flex: none;
  margin: 2px 0 0;
  border: 1px solid var(--light);
  border-radius: 4px;
  background: var(--white);
  cursor: pointer;
  position: relative;
}
.modal-consent input[type="checkbox"]:hover { border-color: var(--teal); }
.modal-consent input[type="checkbox"]:checked {
  background: var(--teal);
  border-color: var(--teal);
}
.modal-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.modal-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ---- the footer form also accepts an e-mail field, which the original rule
        did not cover; without this it would fall back to the system widget ---- */
.footer-form input[type="email"] {
  width: 100%;
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--light);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 16px;
}

/* ---- one focus treatment for every control on the site ---- */
.footer-form input:focus-visible,
.footer-form textarea:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}
.btn:focus-visible,
.btn-outline:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.footer-form .btn:focus-visible { outline-color: var(--white); }

/* --- split: content starts at the top, pictures stay in proportion --- */
/* The two columns were centred against each other, so beside a tall portrait
   photograph the text floated in the middle of the row with a large empty band
   above it. Content starts at the top of the row instead. The photographs are
   also capped: several are 2560x1702 portraits and were running the whole height
   of the page on their own. */
.sec .split { align-items: start; }
.sec .split > div > img {
  max-height: 520px;
  object-fit: cover;
  object-position: 50% 42%;
}
/* a column with nothing in it is not a column */
.split > div:empty { display: none; }
.split:has(> div:empty) { grid-template-columns: 1fr; }
@media (max-width: 767px) {
  .sec .split > div > img { max-height: 300px; }
}