@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Montserrat:wght@400;500;600&display=swap');

/* Tokenii paginii: fonturile și culorile secțiunilor, plus măsurile barelor de meniu (aceleași nume ca în Appearance_format_ro.css). */
:root {
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans: "Montserrat", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --color-ivory: #faf9f7;
  --color-navy: #1a2744;
  --color-navy-light: #243258;
  --color-sage: #6b8f71;
  --color-sage-light: #e8f0e9;
  --color-gold: #c9a96e;
  --color-muted: #5c6578;
  --color-border: #e4e6eb;

  --varSurface: #ffffff;
  --varHairline: #e6e1d8;
  --varNavy: #1a2744;
  --varIvory: #faf9f7;
  --varFontSans: "Montserrat", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --varFontSizeMenu: 1.0625rem;
  --varFontSizeSmall: 0.8125rem;
  --varMenuHeight: 4.75rem;
  --varTopBarHeight: 2.9375rem;
  --varColorBase: #1c1f26;
  --varColorBaseHover: #7ac3f7;
}

/* Reset: aceeași cutie pentru toate elementele, margini scoase de pe titluri și linkuri fără subliniere. */

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

html {
  scroll-behavior: smooth;
  font-size: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  /* Sub .page ramane o fasie scurta. Aceeasi culoare cu footerul,
     ca fasiea sa nu apara alba. Continutul sta pe fundalul lui .page. */
  background-color: #1a2744;
  color: #1a2744;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p {
  margin: 0;
}

/* Textul clinic din baza. h1, h2, h3, p { margin: 0 } anuleaza mb-* de pe titluri.
   Descrierea se inchide inainte de aceste sectiuni; ele stau in mainContentOfPage.
   Spatiul este sub titlu si dupa ultima sectiune, inainte de fotografii. */
div[itemprop="mainContentOfPage"] > section {
  margin-bottom: 5rem;
}
div[itemprop="mainContentOfPage"] > section h2,
div[itemprop="mainContentOfPage"] > section h3,
div[itemprop="mainContentOfPage"] > section h4 {
  margin-bottom: 2.5rem;
}
div[itemprop="mainContentOfPage"] > section > p.leading-relaxed {
  margin-bottom: 2.5rem;
}

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

button, input, textarea {
  font-family: inherit;
}

button,
.btn,
a.w3-button,
a.btn-primary,
a.btn-secondary,
a.nav-book {
  border-radius: 0.1875rem;
}

button {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

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

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #c8cdd8;
  border-radius: 3px;
}

.font-serif {
  font-family: var(--font-serif);
}

.font-sans {
  font-family: var(--font-sans);
}

/* Titlurile de pe fotografiile de servicii. Clasa text-[#c9a96e] sta in
   @layer utilities si pierde in fata culorii mostenite de h3. Aurul
   #c9a96e ramane si pe tema de noapte; etichetele mici nu sunt aici. */
h3.absolute.bottom-5.left-5 {
  color: #c9a96e;
}

/* Pagina lasă loc sub bara fixă, care iese din flux.
   +0.0625rem acoperă bordura de jos a barei, ca meniul principal să înceapă exact sub ea. */
.page {
  min-height: 100vh;
  padding-top: calc(var(--varTopBarHeight) + 0.0625rem);
  background-color: #faf9f7;
  color: #1a2744;
}

.eyebrow {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6b8f71;
  font-weight: 500;
}

/* Navigația paginii (Services, About, Book Now). Nu este bara fixă: bara fixă este doar div.menu-bar-top.
   Înălțime 0 închide rândul gol dintre bare. Fără font-size: 0, ca linkurile din bară să rămână vizibile. */

.site-header {
  position: static;
  background: none;
  border: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.header-inner {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.brand-dr-cornel-draghescu {
  color: #1a2744;
}

.brand-dental {
  color: #c9a96e;
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: #5c6578;
  transition: color 200ms;
}

.nav-link:hover {
  color: #1a2744;
}

.nav-book {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  background-color: #1a2744;
  color: #ffffff;
  padding: 0.625rem 1.25rem;
  border-radius: 0.1875rem;
  transition: background-color 200ms;
}

.nav-book:hover {
  background-color: #243258;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.375rem;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.5rem;
  color: #1a2744;
  appearance: none;
}

.nav-toggle-bar {
  display: block;
  width: 1.25rem;
  height: 2px;
  background-color: #1a2744;
}

.nav-mobile {
  background-color: #faf9f7;
  border-top: 1px solid #e4e6eb;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nav-mobile[hidden] {
  display: none;
}

.nav-mobile-link {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: #1a2744;
}

/* Hero: titlu, două acțiuni, două statistici și fotografia cu cardul „Available this week”. */

.hero {
  padding-top: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 1.5rem;
  min-width: 0;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.05;
  color: #1a2744;
  margin-bottom: 2rem;
}

.hero-copy .eyebrow {
  margin-bottom: 1.5rem;
}

/* Logo-ul din hero are lățimea liniei din p.eyebrow (341.5px).
   Pe ecran mai îngust rămâne în coloană: width 100%, înălțimea păstrează proporția. */
.hero .logo-container {
  width: 100%;
  max-width: 540.27px;
  border: 1px solid #e4e6eb;
  border-radius: 10px;
}

.hero .logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.hero-title em,
.photo-caption em {
  font-style: normal;
  color: #c9a96e;
}

.hero-lead {
  color: #5c6578;
  font-size: 1.125rem;
  line-height: 1.625;
  max-width: 24rem;
  margin-bottom: 2.5rem;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  padding: 1rem 2rem;
  transition: background-color 200ms, border-color 200ms;
}

.btn-primary {
  background-color: #1a2744;
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #243258;
}

.btn-secondary {
  border: 1px solid #e4e6eb;
  color: #1a2744;
}

.btn-secondary:hover {
  border-color: #1a2744;
}

.hero-stats {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 20rem;
}

.hero-stat-value {
  font-family: var(--font-serif);
  font-size: 1.875rem;
  line-height: 2.25rem;
  color: #1a2744;
}

.hero-stat-label {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #5c6578;
  margin-top: 0.25rem;
}

.hero-media {
  position: relative;
  overflow: hidden;
  background-color: #e8f0e9;
  min-height: 50vh;
}

.hero-media img,
.photo-break img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 39, 68, 0.1);
}

.hero-card {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  background-color: #faf9f7;
  padding: 1.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.hero-card-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.hero-check {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: #6b8f71;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-card-title {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: #1a2744;
}

.hero-card-text {
  font-size: 0.75rem;
  line-height: 1.625;
  color: #5c6578;
}

/* Bara închisă cu cele patru cifre: ani, pacienți, satisfacție, discipline. */

.stats-bar {
  background-color: #1a2744;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.stats-inner {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  text-align: center;
}

.stats-value {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 2.5rem;
  color: #c9a96e;
}

.stats-label {
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.5rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

/* Servicii: introducere pe două coloane și grila de șase carduri. */

.services {
  padding: 6rem 1.5rem;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: end;
  margin-bottom: 4rem;
}

.section-head .eyebrow {
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.25;
  color: #1a2744;
}

.section-aside {
  color: #5c6578;
  font-size: 1rem;
  line-height: 1.625;
}

.services-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background-color: #e4e6eb;
}

.service-card {
  background-color: #faf9f7;
  padding: 2rem;
  cursor: pointer;
  transition: background-color 200ms;
}

.service-card:hover {
  background-color: #ffffff;
}

.service-icon {
  color: #c9a96e;
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 1.5rem;
}

.service-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75rem;
  color: #1a2744;
  margin-bottom: 0.75rem;
  transition: color 200ms;
}

.service-card:hover .service-title {
  color: #243258;
}

.service-text {
  font-size: 0.875rem;
  line-height: 1.625;
  color: #5c6578;
}

.service-more {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: #6b8f71;
  opacity: 0;
  transition: opacity 200ms;
}

.service-card:hover .service-more {
  opacity: 1;
}

/* Despre: portret, text și insigne pe fond navy. */

.about {
  background-color: #1a2744;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.about-inner {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}

.about-photo {
  position: relative;
}

.about-frame {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: #243258;
}

.about-frame img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.about-accent {
  display: none;
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  width: 10rem;
  height: 10rem;
  background-color: #c9a96e;
}

.about-copy .eyebrow {
  margin-bottom: 1.5rem;
}

.about-title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.about-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
  line-height: 1.625;
  margin-bottom: 1.5rem;
}

.about-text-last {
  margin-bottom: 2.5rem;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.badge {
  font-size: 0.75rem;
  line-height: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  padding: 0.375rem 0.75rem;
}

/* Pașii consultației, numerotați 01–04, pe fond sage deschis. */

.process {
  padding: 6rem 1.5rem;
  background-color: #e8f0e9;
}

.process-inner {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.process-head {
  text-align: center;
  margin-bottom: 4rem;
}

.process-head .eyebrow {
  margin-bottom: 1rem;
}

.process-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.process-step {
  position: relative;
  padding-left: 1.5rem;
  border-left: 1px solid rgba(107, 143, 113, 0.3);
}

.process-num {
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 1;
  color: rgba(107, 143, 113, 0.2);
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
}

.process-body {
  padding-top: 2rem;
}

.process-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75rem;
  color: #1a2744;
  margin-bottom: 0.75rem;
}

.process-text {
  font-size: 0.875rem;
  line-height: 1.625;
  color: #5c6578;
}

/* Testimoniale: nota 4.9 și trei citate cu avatar. */

.testimonials {
  padding: 6rem 1.5rem;
}

.testimonials-inner {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rating-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #5c6578;
  margin-left: 0.5rem;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.testimonial-card {
  background-color: #ffffff;
  border: 1px solid #e4e6eb;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.testimonial-quote {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.625;
  color: #1a2744;
  margin-bottom: 2rem;
}

.testimonial-person {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testimonial-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  object-fit: cover;
  background-color: #e8f0e9;
}

.testimonial-name {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: #1a2744;
}

.testimonial-role {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #5c6578;
}

/* Bandă foto pe toată lățimea, cu textul suprapus. */

.photo-break {
  position: relative;
  height: 20rem;
  overflow: hidden;
  background-color: #e8f0e9;
}

.photo-shade {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 39, 68, 0.4);
}

.photo-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 42rem;
  margin: 0;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-family: var(--font-serif);
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1.25;
  color: #ffffff;
  text-align: center;
}

/* Contact: adresă, telefon, program și formularul care, după trimitere, arată mesajul de mulțumire. */

.contact {
  padding: 6rem 1.5rem;
  background-color: #faf9f7;
}

.contact-inner {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4rem;
}

.contact-copy .eyebrow {
  margin-bottom: 1.5rem;
}

.contact-title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.25;
  color: #1a2744;
  margin-bottom: 1.5rem;
}

.contact-lead {
  color: #5c6578;
  line-height: 1.625;
  margin-bottom: 2.5rem;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-row {
  display: flex;
  gap: 1rem;
}

.contact-label {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b8f71;
  font-weight: 500;
  width: 4rem;
  flex-shrink: 0;
  padding-top: 0.125rem;
}

.contact-value {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #1a2744;
}

.thanks {
  border: 1px solid #6b8f71;
  background-color: #e8f0e9;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 20rem;
}

.thanks-check {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background-color: #6b8f71;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.thanks-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2rem;
  color: #1a2744;
  margin-bottom: 0.5rem;
}

.thanks-text {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #5c6578;
}

.enquiry-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.field-label {
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5c6578;
  margin-bottom: 0.5rem;
}

.field-input {
  width: 100%;
  border: 1px solid #e4e6eb;
  background-color: #ffffff;
  color: #1a2744;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.75rem 1rem;
  transition: border-color 200ms;
}

.field-input::placeholder {
  color: #c8cdd8;
}

.field-input:focus {
  outline: none;
  border-color: #1a2744;
}

.field-input-area {
  resize: none;
}

.form-submit {
  width: 100%;
  background-color: #1a2744;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  padding-top: 1rem;
  padding-bottom: 1rem;
  cursor: pointer;
  transition: background-color 200ms;
}

.form-submit:hover {
  background-color: #243258;
}

.form-note {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #5c6578;
  text-align: center;
}

/* Subsol: semnătura, anul și linkurile Privacy / Terms / Accessibility. */

.site-footer {
  border-top: 1px solid #e4e6eb;
  padding: 2.5rem 1.5rem;
}

.footer-inner {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-brand {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.footer-note {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #5c6578;
  text-align: center;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #5c6578;
  transition: color 200ms;
}

.footer-links a:hover {
  color: #1a2744;
}

/* De la 640px butoanele din hero stau pe un rând, iar serviciile și pașii trec pe două coloane. */
@media (min-width: 640px) {
  .hero-actions {
    flex-direction: row;
  }

  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* De la 768px meniul paginii (Services, Book Now) devine orizontal, hero-ul trece pe două coloane, iar bara cabinetului rămâne pe toată lățimea, în flux. */
@media (min-width: 768px) {
  .header-inner {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .nav-desktop {
    display: flex;
  }

  .nav-toggle,
  .nav-mobile {
    display: none;
  }

  .hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-copy {
    padding: 8rem 4rem;
  }

  .hero-title {
    font-size: 3.75rem;
  }

  .hero-media {
    min-height: 0;
  }

  .hero-card {
    right: auto;
    max-width: 20rem;
  }

  .stats-inner {
    padding-left: 3rem;
    padding-right: 3rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .services {
    padding: 8rem 3rem;
  }

  .section-head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-title,
  .about-title,
  .contact-title {
    font-size: 3rem;
  }

  .section-aside {
    text-align: right;
    max-width: 24rem;
    margin-left: auto;
  }

  .about {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .about-inner {
    padding-left: 3rem;
    padding-right: 3rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-accent {
    display: block;
  }

  .process {
    padding: 8rem 3rem;
  }

  .process-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .testimonials {
    padding: 8rem 3rem;
  }

  .rating {
    justify-content: flex-end;
  }

  .testimonial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .photo-break {
    height: 24rem;
  }

  .photo-caption {
    font-size: 3rem;
  }

  .contact {
    padding: 8rem 3rem;
  }

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

  .site-footer {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .footer-inner {
    flex-direction: row;
  }

  .footer-note {
    text-align: left;
  }
}

/* De la 1024px titlul din hero crește, iar grila de servicii are trei coloane. */
@media (min-width: 1024px) {
  .hero-copy {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .hero-title {
    font-size: 4.5rem;
  }

  .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Bara fixă de sus (Top-fixed-menu.php). Singurul element position:fixed din pagină.
   Înălțimea este --varTopBarHeight. height:auto pe wrapper, ca formularul de login să nu fie tăiat. */
div.menu-bar-top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  line-height: 1;
  background-color: var(--varSurface);
  border-bottom: 0.0625rem solid var(--varHairline);
}

div.menu-bar-top > div.w3-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: var(--varTopBarHeight);
  min-height: var(--varTopBarHeight);
  margin: 0;
  padding: 0;
  overflow: visible !important;
  background-color: var(--varSurface) !important;
  color: var(--varNavy);
  border: none !important;
  border-radius: 0 !important;
}

div.menu-bar-top > div.w3-bar:before,
div.menu-bar-top > div.w3-bar:after {
  content: none;
  display: none;
}

div.menu-bar-top .w3-dropdown-click {
  float: none;
  flex: 0 0 auto;
}

div.menu-bar-top a.w3-bar-item,
div.menu-bar-top button.w3-button {
  font-size: var(--varFontSizeMenu);
  padding-left: 11px;
  padding-right: 11px;
}

div.menu-bar-top #log_in > button.w3-button {
  height: var(--varTopBarHeight);
  line-height: var(--varTopBarHeight);
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

div.menu-bar-top div.w3-dropdown-hover,
div.menu-bar-top div.w3-dropdown-click {
  position: relative;
  display: inline-block;
}

div.menu-bar-top i.fa {
  position: relative;
  vertical-align: middle;
  line-height: inherit;
  float: none;
}

#log_in > button.w3-button > i.fa {
  float: none;
  font-size: 1.35em;
  left: 0;
}

#auth_form {
  display: none;
  z-index: 60;
  min-width: 18em;
  background-color: #fff;
  color: #1a1a1a;
  padding: 0.35em;
}

#auth_form.w3-show {
  display: block !important;
}

fieldset.formulare {
  margin: 0;
  padding: 2px;
}

div.menu-bar-top > div.w3-bar,
div.menu-bar-top button.w3-button,
div.menu-bar-top li.scrollable_entity_contact,
div.menu-bar-top div.loaded ul li {
  color: var(--varNavy);
  font-family: var(--varFontSans);
}

div.menu-bar-top a:link,
div.menu-bar-top a:visited,
div.menu-bar-top a:hover,
div.menu-bar-top a:active {
  color: var(--varNavy);
  text-decoration: none;
}

/* EN si globul: grosime normala. 600 ingrosa si litera, si glyphicon-ul,
   pentru ca browserul sintetizeaza bold pe fontul de iconite. */
div.menu-bar-top a.top-bar-lang,
div.menu-bar-top a.top-bar-lang span.glyphicon {
  font-weight: 400;
  letter-spacing: 0.04em;
}

#scrollable_entity_name {
  display: none;
  height: var(--varTopBarHeight);
  line-height: var(--varTopBarHeight);
  font-weight: 700;
  float: none;
  flex: 0 1 auto;
}

/* Lista din bara fixă: fără bullet, itemii pe un rând (float:left), ca în Appearance_format_ro.css. */
#scrollable_entity_name ul,
div.loaded ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#scrollable_entity_name ul li,
li.scrollable_entity_contact {
  list-style-type: none;
  height: var(--varTopBarHeight);
  line-height: var(--varTopBarHeight);
  float: left;
  margin-right: 0.1875em;
  padding: 0;
}

div.loaded {
  float: none;
  height: var(--varTopBarHeight);
  padding: 0 0.75em;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  line-height: 1;
}

div.loaded ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: var(--varTopBarHeight);
  display: flex;
  align-items: center;
  overflow: visible;
}

div.loaded ul li {
  height: var(--varTopBarHeight);
  line-height: var(--varTopBarHeight);
  width: auto;
  padding: 0;
  margin: 0 0.75em 0 0;
  float: none;
  display: flex;
  align-items: center;
}

div.loaded ul li:last-child {
  margin-right: 0;
}

div.loaded ul li a {
  display: inline-flex;
  align-items: center;
  height: var(--varTopBarHeight);
  line-height: 1;
  width: auto;
  color: var(--varNavy);
  text-align: center;
  text-decoration: none;
}

div.loaded ul li .glyphicon {
  top: 0;
  line-height: 1;
  vertical-align: middle;
  margin-right: 0.25em;
}

/* Căutarea din bara fixă stă în .top-bar-tools, la stânga butoanelor.
   Nu mai e position:fixed, ca să nu acopere A− / A / A+ și tema.
   Jquery_format.js o arată la derulare și îi schimbă lățimea. */
div.menu-bar-top div.search {
  position: relative;
  display: none;
  top: auto;
  right: auto;
  width: auto;
  height: var(--varTopBarHeight);
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--varFontSans);
  text-align: left;
}

/* Pe telefon căutarea stă fixă în dreapta și acoperă #scrollable_entity_name.
   !important ține display:none și după ce scroll-ul o cere din Jquery_format.js. */
@media (max-width: 767px) {
  div.menu-bar-top div.search {
    display: none !important;
  }
}

.inputc_search {
  float: right;
  width: 8em;
  height: var(--varTopBarHeight);
  max-height: var(--varTopBarHeight);
  box-sizing: border-box;
  margin: 0;
  padding: 0 0.5em;
  line-height: 1;
  font-size: var(--varFontSizeSmall);
  font-style: oblique;
  border: 0.0625em solid var(--varColorBase);
  border-radius: 0.1875em;
  color: #000;
  text-align: center;
}

input.inputc_search_hover {
  width: 15em;
  height: var(--varTopBarHeight);
  max-height: var(--varTopBarHeight);
  box-sizing: border-box;
  color: var(--varColorBaseHover);
  border: 0.0625em solid var(--varColorBaseHover);
  border-radius: 0.1875em;
  text-align: center;
}

/* Grupul din dreapta barei: câmpul de căutare, apoi butoanele.
   margin-left: auto ține grupul la margine și când căutarea e ascunsă. */
div.menu-bar-top .top-bar-tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  margin-right: 0.75rem;
  flex: 0 0 auto;
  height: var(--varTopBarHeight);
}
div.menu-bar-top .top-bar-tools .visitor-prefs {
  margin-left: 0;
  margin-right: 0;
}

/* Câmpul. Lupa e desenul din stânga. 11.5em încape iconița și
   „Cauta in site”; la focus Jquery_format.js duce lățimea la 15em.
   em rămâne pentru că animația scrie lățimea inline în em. */
div.menu-bar-top form.search-engine-form {
  position: relative;
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  margin: 0;
}
div.menu-bar-top input.inputc_search {
  float: none;
  width: 11.5em;
  height: 1.75rem;
  max-height: 1.75rem;
  margin: 0;
  padding: 0 0.5rem 0 1.7rem;
  font-family: inherit;
  font-size: var(--varFontSizeSmall);
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  color: #1a2744;
  background-color: #faf9f7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2744' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='10.25' cy='10.25' r='6'/%3E%3Cpath d='M14.8 14.8 20.2 20.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.4rem center;
  background-size: 1rem 1rem;
  border: 0.0625rem solid #e6e1d8;
  border-radius: 0.1875rem;
}
div.menu-bar-top input.inputc_search.is-prompt {
  color: #5c6578;
  font-weight: 400;
}
div.menu-bar-top input.inputc_search_hover {
  width: 15em;
  height: 1.75rem;
  max-height: 1.75rem;
  color: #1a2744;
  text-align: left;
  border-color: #c9a96e;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a96e' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='10.25' cy='10.25' r='6'/%3E%3Cpath d='M14.8 14.8 20.2 20.2'/%3E%3C/svg%3E");
}

/* Lista de rezultate. Coboară sub bară, aliniată la dreapta câmpului
   deschis. Înălțimea urmează rândurile, până la 14rem. */
div.menu-bar-top div.content_search {
  position: absolute;
  display: none;
  top: 100%;
  right: 0;
  float: none;
  width: 15em;
  height: auto;
  max-height: 14rem;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
  background-color: #faf9f7;
  border: 0.0625rem solid #e6e1d8;
  border-top: 0.125rem solid #c9a96e;
  border-radius: 0 0 0.1875rem 0.1875rem;
  box-shadow: 0 0.5rem 1.25rem rgba(26, 39, 68, 0.12);
  z-index: 5;
}
div.menu-bar-top div.content_search span.search_item.w3-bar-item.w3-button {
  display: block;
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 0.0625rem solid #e6e1d8;
  border-radius: 0;
  background-color: transparent;
  color: #1a2744;
  text-align: left;
  white-space: normal;
  box-shadow: none;
}
div.menu-bar-top div.content_search span.search_item a.search_results {
  display: block;
  padding: 0.55rem 0.75rem;
  border-left: 0.125rem solid transparent;
  font-family: inherit;
  font-size: var(--varFontSizeSmall);
  font-style: normal;
  font-weight: 500;
  line-height: 1.35;
  color: #1a2744;
  text-align: left;
  text-decoration: none;
  background-color: transparent;
}
div.menu-bar-top div.content_search span.search_item.w3-button:hover,
div.menu-bar-top div.content_search span.search_item.w3-button:focus,
div.menu-bar-top div.content_search span.search_item:has(a.search_results_selected) {
  background-color: #f3efe6 !important;
  color: #1a2744 !important;
}
div.menu-bar-top div.content_search span.search_item:hover a.search_results,
div.menu-bar-top div.content_search a.search_results.search_results_selected {
  border-left-color: #c9a96e;
  color: #1a2744;
}

/* Meniul principal (Main-menu.php). Aceleași culori, înălțime și aliniere ca bara fixă, dar rămâne în flux: nu e fixed și nu e sticky. */
div.menu-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  position: relative;
  /* Deasupra coloanei cu sigla (z-index 10), sub bara fixa de sus (40).
     Fara strat, dintele acopera panoul si cursorul nu mai sta pe el. */
  z-index: 30;
  width: 100%;
  height: auto;
  min-height: var(--varMenuHeight);
  overflow: visible !important;
  background-color: var(--varSurface);
  color: var(--varNavy);
  border: none !important;
  border-bottom: 0.0625rem solid var(--varHairline) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding-top: 0;
}

div.menu-bar .w3-bar-item:hover,
div.menu-bar .w3-bar-item:focus {
  background-color: var(--varIvory) !important;
  color: var(--varNavy);
  text-decoration: none;
}

div.menu-bar > div.w3-dropdown-hover,
div.menu-bar > a.w3-bar-item,
div.menu-bar > button.w3-bar-item {
  height: var(--varMenuHeight);
  line-height: var(--varMenuHeight);
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: top;
}

div.menu-bar > div.w3-dropdown-hover > button.w3-button,
div.menu-bar > div.w3-dropdown-hover > a.w3-button {
  height: var(--varMenuHeight);
  line-height: var(--varMenuHeight);
  padding-top: 0;
  padding-bottom: 0;
}

div.menu-bar > a.w3-bar-item,
div.menu-bar > div.w3-dropdown-hover > button.w3-button {
  font-family: var(--varFontSans);
  font-size: var(--varFontSizeMenu);
  padding-left: 11px;
  padding-right: 11px;
}

/* Acasă (i.fa-home) stă în rândul centrat, cu bordura din dreapta a clasei w3-border-right. */
div.menu-bar > a.w3-bar-item:first-child {
  position: static;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #ccc !important;
}

div.menu-bar > a.w3-bar-item[href="faqs"] {
  border-right: none !important;
}

div.menu-bar:before,
div.menu-bar:after {
  content: none;
  display: none;
}

div.menu-bar > div.w3-dropdown-hover {
  position: relative;
  display: inline-block;
}

div.menu-bar > div.w3-dropdown-hover > div.w3-dropdown-content {
  top: 100%;
  left: 0;
  line-height: normal;
}

div.w3-dropdown-content div.w3-dropdown-hover {
  position: relative;
  display: block;
  width: 100%;
}

div.w3-dropdown-content div.w3-dropdown-hover > div.w3-dropdown-content {
  top: 0 !important;
  left: 100% !important;
}

div.menu-bar div.w3-dropdown-content > a.w3-bar-item,
div.menu-bar div.w3-dropdown-content > div.w3-dropdown-hover > button.w3-button {
  display: block;
  width: 100%;
  height: auto;
  line-height: 1.4;
  box-sizing: border-box;
  font-family: var(--varFontSans);
  font-size: var(--varFontSizeMenu);
  padding: 0.6em 1em;
  text-align: left;
  white-space: normal;
  position: relative;
}

/* Butonul cu săgeată (Chirurgie, Odontologie, Protetică, Proteze).
   Locul din dreapta ține textul departe de iconită. */
div.menu-bar div.w3-dropdown-content > div.w3-dropdown-hover > button.w3-button {
  padding-right: 1.75rem;
}

/* Săgeata stă la 0.1875rem de marginea dreaptă a butonului.
   La mărimea normală asta înseamnă 3px. Nu folosim float: o regulă
   pe toate i.fa ar muta și iconița de Acasă. */
div.menu-bar div.w3-dropdown-content i.fa.fa-chevron-right {
  position: absolute;
  right: 0.1875rem;
  top: 50%;
  transform: translateY(-50%);
  float: none;
  margin: 0;
  vertical-align: middle;
}

div.menu-bar.w3-bar {
  color: var(--varNavy);
  background-color: var(--varSurface);
}

div.menu-bar.w3-bar a.w3-bar-item,
div.menu-bar.w3-bar button.w3-button {
  color: var(--varNavy);
  background-color: transparent;
}

div.menu-bar.w3-bar > a.w3-bar-item,
div.menu-bar.w3-bar > div.w3-dropdown-hover > button.down-menu {
  border-right-color: transparent;
  background-color: transparent;
}

div.menu-bar.w3-bar > a.w3-bar-item:hover,
div.menu-bar.w3-bar > a.w3-bar-item:focus,
div.menu-bar.w3-bar > div.w3-dropdown-hover:hover > button.down-menu,
div.menu-bar.w3-bar > div.w3-dropdown-hover:focus-within > button.down-menu {
  background-color: var(--varIvory) !important;
  color: var(--varNavy);
}

div.menu-bar div.w3-dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--varSurface);
  color: var(--varNavy);
  border: 0.0625rem solid var(--varHairline);
  box-shadow: 0 0.5rem 1.25rem rgba(26, 39, 68, 0.12);
  box-sizing: border-box;
  width: 14rem;
  min-width: max(14rem, 100%);
  z-index: 50;
}

div.menu-bar div.w3-dropdown-content a.w3-bar-item,
div.menu-bar div.w3-dropdown-content button.w3-button {
  color: var(--varNavy);
  background-color: var(--varSurface);
  border-bottom-color: var(--varHairline);
}

div.menu-bar div.w3-dropdown-content a.w3-bar-item:hover,
div.menu-bar div.w3-dropdown-content a.w3-bar-item:focus,
div.menu-bar div.w3-dropdown-content button.w3-button:hover,
div.menu-bar div.w3-dropdown-content button.w3-button:focus {
  background-color: var(--varIvory) !important;
  color: var(--varNavy);
}

/* Linia aurie de sub rândul din submenu.
   Bordura de jos era deja pe toată lățimea, deci aurul o acoperea
   dintr-o dată. O ascundem. Linia nouă are lățimea rândului și crește
   prin scaleX, de la stânga, liniar, în 0.25s. width de la 0 la 100%
   nu desenează cadrele intermediare la fel de sigur. */
div.menu-bar div.w3-dropdown-content > a.w3-bar-item,
div.menu-bar div.w3-dropdown-content > div.w3-dropdown-hover > button.w3-button {
  border-bottom-color: transparent !important;
}
div.menu-bar div.w3-dropdown-content > a.w3-bar-item::after,
div.menu-bar div.w3-dropdown-content > div.w3-dropdown-hover > button.w3-button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.125rem;
  background-color: #c9a96e;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s linear;
}
div.menu-bar div.w3-dropdown-content > a.w3-bar-item:hover::after,
div.menu-bar div.w3-dropdown-content > a.w3-bar-item:focus::after,
div.menu-bar div.w3-dropdown-content > div.w3-dropdown-hover > button.w3-button:hover::after,
div.menu-bar div.w3-dropdown-content > div.w3-dropdown-hover > button.w3-button:focus::after,
div.menu-bar div.w3-dropdown-content > div.w3-dropdown-hover:hover > button.w3-button::after {
  transform: scaleX(1);
}

div.menu-bar div.w3-dropdown-hover:hover > div.w3-dropdown-content,
div.menu-bar div.w3-dropdown-hover:focus-within > div.w3-dropdown-content {
  display: block !important;
}

div.menu-bar i.fa {
  position: relative;
  vertical-align: middle;
  line-height: inherit;
}

.site-header-2 {
  position: static;
}

.site-header-2 > div.menu-bar {
  width: 100%;
}

/* Ecran lat: toate intrările, fără hamburger. Sub 1100px rămân doar acasă și i.fa-bars. */
@media (min-width: 1100px) {
  div.menu-bar > a.i_fa_bars,
  #mobile_main_menu {
    display: none !important;
  }
}

/* Meniul vertical: fiecare buton și fiecare link pe rândul lui, ca în Appearance_format_ro.css.
   Fără display:block, .w3-button rămâne inline-block și linkurile secundare stau pe aceeași linie. */
#mobile_main_menu button.w3-button,
#mobile_main_menu a.m-menu {
  display: block;
  width: 100%;
  box-sizing: border-box;
  float: none;
  text-align: left;
  white-space: normal;
}

#mobile_main_menu .mobile_dropdown_menu_one,
#mobile_main_menu .mobile_dropdown_menu_two,
#mobile_main_menu .mobile_dropdown_menu_three {
  width: 100%;
  clear: both;
}

/* Sub 1100px: itemii ies de la dreapta (FAQs=2 ... Servicii=10).
   Ultimul copil e hamburgerul; primul (Acasa) ramane. */
@media (max-width: 1099px) {
  div.menu-bar > :nth-last-child(2),
  div.menu-bar > :nth-last-child(3),
  div.menu-bar > :nth-last-child(4),
  div.menu-bar > :nth-last-child(5),
  div.menu-bar > :nth-last-child(6),
  div.menu-bar > :nth-last-child(7),
  div.menu-bar > :nth-last-child(8),
  div.menu-bar > :nth-last-child(9),
  div.menu-bar > :nth-last-child(10) {
    display: none !important;
  }
}

/* Strat W3 in CSS propriu (criteriul 2.7). Comportament ca in w3.css. */
.w3-hide {
  display: none !important;
}
.w3-show {
  display: block !important;
}
.w3-block {
  display: block;
  width: 100%;
}
.w3-bar-block .w3-bar-item {
  width: 100%;
  display: block;
  padding: 0.5rem 1rem;
  text-align: left;
  border: none;
  white-space: normal;
  float: none;
  outline: 0;
}
/* Nu pune display:block pe .w3-bar-block: panourile au si
   w3-dropdown-content / #auth_form si ar ramane deschise permanent. */
.w3-dropdown-content {
  display: none;
  position: absolute;
}
.w3-border {
  border: 0.0625rem solid #ccc !important;
}
.w3-border-bottom {
  border-bottom: 0.0625rem solid #ccc !important;
}
.w3-border-right {
  border-right: 0.0625rem solid #ccc !important;
}
.w3-bottom {
  position: fixed;
  width: 100%;
  z-index: 1;
  bottom: 0;
}
.w3-top {
  position: fixed;
  width: 100%;
  z-index: 1;
  top: 0;
}
.w3-card-4 {
  box-shadow: 0 0.25rem 0.625rem 0 rgba(0, 0, 0, 0.2),
    0 0.25rem 1.25rem 0 rgba(0, 0, 0, 0.19);
}
.w3-dark-gray {
  color: #fff !important;
  background-color: #616161 !important;
}
.w3-gray {
  color: #000 !important;
  background-color: #9e9e9e !important;
}
.w3-hover-blue:hover {
  color: #fff !important;
  background-color: #2196f3 !important;
}
.w3-hover-none:hover {
  box-shadow: none !important;
  background-color: transparent !important;
}
.w3-left-align {
  text-align: left !important;
}
.w3-right {
  float: right !important;
}
.w3-round {
  border-radius: 0.25rem;
}
.w3-text-white {
  color: #fff !important;
}
.w3-2021-inkwell {
  color: #fff;
  background-color: #363945;
}
@media (max-width: 600px) {
  .w3-hide-small {
    display: none !important;
  }
}
@media (max-width: 992px) {
  .w3-hide-medium {
    display: none !important;
  }
}
@media (min-width: 993px) {
  .w3-hide-large {
    display: none !important;
  }
}

/* Cardul de consimțământ pentru index.php. Acoperă Appearance_GA4_consent_banner.css
   prin id, ca pagina veche să își păstreze bara. */
#consent-banner.consent-banner {
  position: fixed;
  left: auto;
  right: 1rem;
  bottom: 1rem;
  width: min(36rem, calc(100% - 2rem));
  height: auto;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  margin: 0;
  padding: 1rem 1.25rem;
  align-items: stretch;
  justify-content: flex-start;
  font-family: var(--varFontSans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: var(--varNavy);
  background-color: #ffffff;
  border: 0.0625rem solid var(--varHairline);
  border-radius: 0.1875rem;
  box-shadow: 0 0.5rem 1.5rem rgba(26, 39, 68, 0.12);
  cursor: auto;
  z-index: 20;
}

#consent-banner.consent-banner span {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  text-align: left;
  cursor: auto;
}

#consent-banner.consent-banner ul {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}

#consent-banner.consent-banner li {
  margin: 0.25rem 0;
}

#consent-banner.consent-banner .consent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.75rem;
}

#consent-banner.consent-banner .btn {
  font-family: var(--varFontSans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  padding: 0.625rem 1.25rem;
  margin: 0;
  border-radius: 0.1875rem;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 200ms, border-color 200ms, color 200ms;
}

#consent-banner.consent-banner #accept-cookies {
  background-color: #1a2744;
  color: #ffffff;
  border: 1px solid #1a2744;
}

#consent-banner.consent-banner #accept-cookies:hover,
#consent-banner.consent-banner #accept-cookies:active {
  background-color: #243258;
  border-color: #243258;
  color: #ffffff;
  box-shadow: none;
}

#consent-banner.consent-banner #decline-cookies {
  background-color: #ffffff;
  color: #1a2744;
  border: 1px solid #1a2744;
}

#consent-banner.consent-banner #decline-cookies:hover,
#consent-banner.consent-banner #decline-cookies:active {
  background-color: #1a2744;
  border-color: #1a2744;
  color: #ffffff;
  box-shadow: none;
}

/* Meniul de jos, rețelele și ceasul. Stil doar pentru index.php.
   Pagina veche rămâne cu Appearance_format_ro.css. */

div.social_menu {
  position: fixed;
  top: 50%;
  right: 1rem;
  left: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.25rem;
  transform: translateY(-50%);
  background-color: #ffffff;
  border: 0.0625rem solid var(--varHairline);
  border-radius: 0.1875rem;
  box-shadow: 0 0.5rem 1.5rem rgba(26, 39, 68, 0.12);
  z-index: 15;
  text-align: center;
}

div.social_menu a.social_groups {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background-color: #ffffff;
  color: #1a2744;
  box-shadow: none;
  text-decoration: none;
}

/* Hover-ul W3 pe .w3-button este gri (#ccc, !important).
   Albastrul vazut la meniul de jos este #2196F3, din clasa w3-hover-blue. */
div.social_menu a.social_groups:hover,
div.social_menu a.social_groups:active {
  background-color: #2196F3 !important;
  color: #ffffff !important;
}

div.social_menu a.social_groups span.fa {
  font-size: 1.5rem;
  line-height: 1;
  vertical-align: middle;
}

@media (max-width: 600px) {
  div.social_menu {
    display: none !important;
  }
}

div.lower_menu,
div.lower_menu_mobile {
  position: fixed;
  right: 1rem;
  bottom: 1.5rem;
  left: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.25rem;
  display: none;
  opacity: 1;
  background-color: #ffffff;
  border: 0.0625rem solid var(--varHairline);
  border-radius: 0.1875rem;
  box-shadow: 0 0.5rem 1.5rem rgba(26, 39, 68, 0.12);
  z-index: 16;
  text-align: center;
}

div.lower_menu a.bottom_menu,
div.lower_menu_mobile a.bottom_menu_mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  float: none;
  background-color: #ffffff;
  color: #1a2744;
  border: 0;
  border-radius: 0.1875rem;
  box-shadow: none;
  text-decoration: none;
  text-transform: none;
  transition: background-color 200ms, color 200ms;
}

div.lower_menu a.bottom_menu:hover,
div.lower_menu a.bottom_menu:active,
div.lower_menu_mobile a.bottom_menu_mobile:hover,
div.lower_menu_mobile a.bottom_menu_mobile:active {
  background-color: #1a2744;
  color: #ffffff;
  box-shadow: none;
}

@media (max-width: 992px) {
  div.lower_menu {
    display: none !important;
  }
}

@media (min-width: 993px) {
  div.lower_menu_mobile {
    display: none !important;
  }
}

div.clockext {
  position: fixed;
  top: 50%;
  /* left in pixeli, scris din JS, ramanea de la ecranul mic (56px cand
     panoul era display:none). !important tine marginea stanga; ascunderea
     se face cu translateX, care urmeaza latimea curenta. */
  left: 0 !important;
  right: auto;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  float: none;
  transform: translateY(-50%) translateX(calc(-100% + 3.5rem));
  transition: transform 0.4s ease;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  font-family: var(--varFontSans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  color: var(--varNavy);
  z-index: 15;
}

/* Deschis: cardul porneste de la marginea stanga. Cercul ramane in dreapta lui. */
div.clockext.clockext-deschis {
  transform: translateY(-50%) translateX(0);
}

/* Cercul alb din jurul bulinei. Puțin mai mare decât bulina navy,
   ca să rămână vizibil pe fundalul închis al paginii. */
div.clockext div.clockint_buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  float: none;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0.25rem 0.75rem rgba(26, 39, 68, 0.22);
}

/* Inelul porneste de pe marginea cercului alb, nu de pe bulina,
   altfel se pierde pe alb. Ruleaza si cand sistemul reduce animatiile,
   pentru ca acesta este semnalul de deschidere. */
div.clockext div.clockint_buttons:has(#show_clockint_php:not([style*="none"])) {
  animation: ceas-puls 2.5s ease-out infinite;
}

div.clockext div.clockint_buttons:hover {
  animation-play-state: paused;
}

div.clockext div.show_clockint_php,
div.clockext div.hide_clockint_php {
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  background-color: #1a2744;
  color: #ffffff;
  border-radius: 50%;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

div.clockext div.show_clockint_php:hover,
div.clockext div.hide_clockint_php:hover {
  background-color: #243258;
}

div.clockext div.hide_clockint_php {
  display: none;
}

@keyframes ceas-puls {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(255, 255, 255, 0.95),
      0 0.25rem 0.75rem rgba(26, 39, 68, 0.22);
  }
  50% {
    box-shadow:
      0 0 0 1.25rem rgba(255, 255, 255, 0),
      0 0.25rem 0.75rem rgba(26, 39, 68, 0.22);
  }
}

div.clockext div.total_clockint_php {
  float: none;
  position: static;
  width: 16rem;
  height: auto;
  margin: 0;
  padding: 0.75rem 1rem;
  background-color: #ffffff;
  color: var(--varNavy);
  border: 0.0625rem solid var(--varHairline);
  border-right: 0;
  border-radius: 0.1875rem 0 0 0.1875rem;
  box-shadow: 0 0.5rem 1.5rem rgba(26, 39, 68, 0.12);
  font-size: 0.8125rem;
}

div.clockext div.clockint,
div.clockext div.EET_mention_div,
div.clockext div.clockint_php,
div.clockext div.visits_mention_div,
div.clockext div.content_data_visits,
div.clockext div.content_info_vizite,
div.clockext div.content_last_visit {
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  margin: 0 0 0.5rem 0;
  padding: 0;
  background-color: transparent;
  color: var(--varNavy);
  font-weight: 500;
  text-align: left;
}

div.clockext div.visits_mention_div {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5c6578;
}

div.clockext #clock {
  padding: 0;
}

/* Iconitele din panoul cu ora si vizite: soare, luna, o persoana.
   Linie subtire, auriu #c9a96e, desenat in SVG. Aceeasi marime pe ambele teme. */
div.clockext img.clock-mark {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.35rem;
  vertical-align: -0.2rem;
}

/* Tooltipul vechi din Jquery_format.js. Caseta alba ramane lizibila
   si pe fundalul navy al paginii. */
div.tooltip {
  display: none;
  position: absolute;
  z-index: 30;
  width: auto;
  max-width: 16rem;
  height: auto;
  margin: 0;
  padding: 0.375rem 0.625rem;
  background-color: #ffffff;
  color: #1a2744;
  border: 0.0625rem solid var(--varHairline);
  border-radius: 0.1875rem;
  box-shadow: 0 0.25rem 0.75rem rgba(26, 39, 68, 0.18);
  font-family: var(--varFontSans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  pointer-events: none;
}

/* Utilitare pentru continutul Harlow. Regula body de la sfarsitul sursei nu este reluata: exista deja la inceputul acestui fisier. */
/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: "Montserrat", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "DM Serif Display", Georgia, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --font-weight-medium: 500;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-sm: 8px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-ivory: #faf9f7;
    --color-navy: #1a2744;
    --color-navy-light: #243258;
    --color-sage: #6b8f71;
    --color-sage-light: #e8f0e9;
    --color-gold: #c9a96e;
    --color-muted: #5c6578;
    --color-border: #e4e6eb;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 1;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .inset-5 {
    inset: calc(var(--spacing) * 5);
  }
  .inset-12 {
    inset: calc(var(--spacing) * 12);
  }
  .inset-24 {
    inset: calc(var(--spacing) * 24);
  }
  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }
  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-1\/2 {
    top: calc(1/2 * 100%);
  }
  .top-5 {
    top: calc(var(--spacing) * 5);
  }
  .top-6 {
    top: calc(var(--spacing) * 6);
  }
  .top-8 {
    top: calc(var(--spacing) * 8);
  }
  .top-14 {
    top: calc(var(--spacing) * 14);
  }
  .top-24 {
    top: calc(var(--spacing) * 24);
  }
  .top-full {
    top: 100%;
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-5 {
    right: calc(var(--spacing) * 5);
  }
  .right-6 {
    right: calc(var(--spacing) * 6);
  }
  .right-8 {
    right: calc(var(--spacing) * 8);
  }
  .right-20 {
    right: calc(var(--spacing) * 20);
  }
  .right-32 {
    right: calc(var(--spacing) * 32);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }
  .bottom-8 {
    bottom: calc(var(--spacing) * 8);
  }
  .bottom-10 {
    bottom: calc(var(--spacing) * 10);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-1\/2 {
    left: calc(1/2 * 100%);
  }
  .left-5 {
    left: calc(var(--spacing) * 5);
  }
  .left-6 {
    left: calc(var(--spacing) * 6);
  }
  .left-8 {
    left: calc(var(--spacing) * 8);
  }
  .z-10 {
    z-index: 10;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[70\] {
    z-index: 70;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .-mt-6 {
    margin-top: calc(var(--spacing) * -6);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-9 {
    margin-top: calc(var(--spacing) * 9);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-14 {
    margin-top: calc(var(--spacing) * 14);
  }
  .mt-auto {
    margin-top: auto;
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-9 {
    margin-bottom: calc(var(--spacing) * 9);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  .mb-14 {
    margin-bottom: calc(var(--spacing) * 14);
  }
  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }
  .mb-20 {
    margin-bottom: calc(var(--spacing) * 20);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .aspect-\[4\/3\] {
    aspect-ratio: 4/3;
  }
  .h-0\.5 {
    height: calc(var(--spacing) * 0.5);
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-28 {
    height: calc(var(--spacing) * 28);
  }
  .h-40 {
    height: calc(var(--spacing) * 40);
  }
  .h-44 {
    height: calc(var(--spacing) * 44);
  }
  .h-56 {
    height: calc(var(--spacing) * 56);
  }
  .h-\[3px\] {
    height: 3px;
  }
  .h-\[400px\] {
    height: 400px;
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .max-h-dvh {
    max-height: 100dvh;
  }
  .min-h-72 {
    min-height: calc(var(--spacing) * 72);
  }
  .min-h-80 {
    min-height: calc(var(--spacing) * 80);
  }
  .min-h-96 {
    min-height: calc(var(--spacing) * 96);
  }
  .min-h-\[50vh\] {
    min-height: 50vh;
  }
  .min-h-\[55vh\] {
    min-height: 55vh;
  }
  .min-h-\[480px\] {
    min-height: 480px;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-1 {
    width: calc(var(--spacing) * 1);
  }
  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }
  .w-1\/3 {
    width: calc(1/3 * 100%);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-28 {
    width: calc(var(--spacing) * 28);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-56 {
    width: calc(var(--spacing) * 56);
  }
  .w-\[3px\] {
    width: 3px;
  }
  .w-\[calc\(100\%-2\.5rem\)\] {
    width: calc(100% - 2.5rem);
  }
  .w-auto {
    width: auto;
  }
  .w-full {
    width: 100%;
  }
  .w-px {
    width: 1px;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .max-w-6xl {
    max-width: var(--container-6xl);
  }
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
  .max-w-\[21rem\] {
    max-width: 21rem;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .scroll-mt-24 {
    scroll-margin-top: calc(var(--spacing) * 24);
  }
  .list-none {
    list-style-type: none;
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-\[1fr_auto\] {
    grid-template-columns: 1fr auto;
  }
  .grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }
  .gap-14 {
    gap: calc(var(--spacing) * 14);
  }
  .gap-16 {
    gap: calc(var(--spacing) * 16);
  }
  .gap-px {
    gap: 1px;
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-7 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 7) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-24 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 24) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 24) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }
  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }
  .gap-y-8 {
    row-gap: calc(var(--spacing) * 8);
  }
  .divide-x {
    :where(& > :not(:last-child)) {
      --tw-divide-x-reverse: 0;
      border-inline-style: var(--tw-border-style);
      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    }
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-\[\#6b8f71\]\/20 {
    :where(& > :not(:last-child)) {
      border-color: color-mix(in oklab, #6b8f71 20%, transparent);
    }
  }
  .divide-\[\#e4e6eb\] {
    :where(& > :not(:last-child)) {
      border-color: #e4e6eb;
    }
  }
  .divide-white\/10 {
    :where(& > :not(:last-child)) {
      border-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  .self-start {
    align-self: flex-start;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-x {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-t-2 {
    border-top-style: var(--tw-border-style);
    border-top-width: 2px;
  }
  .border-t-\[3px\] {
    border-top-style: var(--tw-border-style);
    border-top-width: 3px;
  }
  .border-r-2 {
    border-right-style: var(--tw-border-style);
    border-right-width: 2px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }
  .border-l-\[3px\] {
    border-left-style: var(--tw-border-style);
    border-left-width: 3px;
  }
  .border-\[\#6b8f71\] {
    border-color: #6b8f71;
  }
  .border-\[\#6b8f71\]\/20 {
    border-color: color-mix(in oklab, #6b8f71 20%, transparent);
  }
  .border-\[\#c9a96e\] {
    border-color: #c9a96e;
  }
  .border-\[\#c9a96e\]\/40 {
    border-color: color-mix(in oklab, #c9a96e 40%, transparent);
  }
  .border-\[\#c9a96e\]\/50 {
    border-color: color-mix(in oklab, #c9a96e 50%, transparent);
  }
  .border-\[\#c9a96e\]\/60 {
    border-color: color-mix(in oklab, #c9a96e 60%, transparent);
  }
  .border-\[\#e4e6eb\] {
    border-color: #e4e6eb;
  }
  .border-border {
    border-color: var(--color-border);
  }
  .border-gold {
    border-color: var(--color-gold);
  }
  .border-gold\/20 {
    border-color: color-mix(in srgb, #c9a96e 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-gold) 20%, transparent);
    }
  }
  .border-gold\/30 {
    border-color: color-mix(in srgb, #c9a96e 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-gold) 30%, transparent);
    }
  }
  .border-gold\/60 {
    border-color: color-mix(in srgb, #c9a96e 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-gold) 60%, transparent);
    }
  }
  .border-sage\/30 {
    border-color: color-mix(in srgb, #6b8f71 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-sage) 30%, transparent);
    }
  }
  .border-white\/10 {
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .border-white\/20 {
    border-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }
  .border-white\/30 {
    border-color: color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }
  .border-white\/40 {
    border-color: color-mix(in srgb, #fff 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }
  .bg-\[\#1a2744\] {
    background-color: #1a2744;
  }
  .bg-\[\#1a2744\]\/15 {
    background-color: color-mix(in oklab, #1a2744 15%, transparent);
  }
  .bg-\[\#1a2744\]\/20 {
    background-color: color-mix(in oklab, #1a2744 20%, transparent);
  }
  .bg-\[\#1a2744\]\/52 {
    background-color: color-mix(in oklab, #1a2744 52%, transparent);
  }
  .bg-\[\#6b8f71\] {
    background-color: #6b8f71;
  }
  .bg-\[\#c9a96e\] {
    background-color: #c9a96e;
  }
  .bg-\[\#c9a96e\]\/35 {
    background-color: color-mix(in oklab, #c9a96e 35%, transparent);
  }
  .bg-\[\#c9a96e\]\/70 {
    background-color: color-mix(in oklab, #c9a96e 70%, transparent);
  }
  .bg-\[\#e8f0e9\] {
    background-color: #e8f0e9;
  }
  .bg-\[\#faf9f7\] {
    background-color: #faf9f7;
  }
  .bg-\[\#faf9f7\]\/95 {
    background-color: color-mix(in oklab, #faf9f7 95%, transparent);
  }
  .bg-\[\#fdf8f0\] {
    background-color: #fdf8f0;
  }
  .bg-border {
    background-color: var(--color-border);
  }
  .bg-current {
    background-color: currentcolor;
  }
  .bg-gold {
    background-color: var(--color-gold);
  }
  .bg-gold\/10 {
    background-color: color-mix(in srgb, #c9a96e 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gold) 10%, transparent);
    }
  }
  .bg-ivory {
    background-color: var(--color-ivory);
  }
  .bg-ivory\/90 {
    background-color: color-mix(in srgb, #faf9f7 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-ivory) 90%, transparent);
    }
  }
  .bg-ivory\/95 {
    background-color: color-mix(in srgb, #faf9f7 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-ivory) 95%, transparent);
    }
  }
  .bg-navy {
    background-color: var(--color-navy);
  }
  .bg-navy\/10 {
    background-color: color-mix(in srgb, #1a2744 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-navy) 10%, transparent);
    }
  }
  .bg-navy\/95 {
    background-color: color-mix(in srgb, #1a2744 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-navy) 95%, transparent);
    }
  }
  .bg-sage {
    background-color: var(--color-sage);
  }
  .bg-sage-light {
    background-color: var(--color-sage-light);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-\[radial-gradient\(circle_at_35\%_30\%\,rgba\(107\,143\,113\,0\.22\)\,transparent_45\%\)\,linear-gradient\(135deg\,rgba\(255\,255\,255\,0\.06\)\,transparent_60\%\)\] {
    background-image: radial-gradient(circle at 35% 30%,rgba(107,143,113,0.22),transparent 45%),linear-gradient(135deg,rgba(255,255,255,0.06),transparent 60%);
  }
  .from-\[\#1a2744\]\/30 {
    --tw-gradient-from: color-mix(in oklab, #1a2744 30%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-\[\#faf9f7\]\/10 {
    --tw-gradient-from: color-mix(in oklab, #faf9f7 10%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-navy\/60 {
    --tw-gradient-from: color-mix(in srgb, #1a2744 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-navy) 60%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-navy\/75 {
    --tw-gradient-from: color-mix(in srgb, #1a2744 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-navy) 75%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .via-transparent {
    --tw-gradient-via: transparent;
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .to-\[\#1a2744\]\/60 {
    --tw-gradient-to: color-mix(in oklab, #1a2744 60%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-navy\/5 {
    --tw-gradient-to: color-mix(in srgb, #1a2744 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-navy) 5%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .object-\[30\%_center\] {
    object-position: 30% center;
  }
  .object-center {
    object-position: center;
  }
  .object-top {
    object-position: top;
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-7 {
    padding: calc(var(--spacing) * 7);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .p-10 {
    padding: calc(var(--spacing) * 10);
  }
  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-9 {
    padding-inline: calc(var(--spacing) * 9);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-7 {
    padding-block: calc(var(--spacing) * 7);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }
  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }
  .py-28 {
    padding-block: calc(var(--spacing) * 28);
  }
  .pt-0\.5 {
    padding-top: calc(var(--spacing) * 0.5);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-7 {
    padding-top: calc(var(--spacing) * 7);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }
  .pr-7 {
    padding-right: calc(var(--spacing) * 7);
  }
  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-7 {
    padding-left: calc(var(--spacing) * 7);
  }
  .pl-12 {
    padding-left: calc(var(--spacing) * 12);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[1\.05rem\] {
    font-size: 1.05rem;
  }
  .text-\[1\.6rem\] {
    font-size: 1.6rem;
  }
  .text-\[1\.85rem\] {
    font-size: 1.85rem;
  }
  .text-\[2\.5rem\] {
    font-size: 2.5rem;
  }
  .text-\[4rem\] {
    font-size: 4rem;
  }
  .text-\[10px\] {
    font-size: 0.75rem;
  }
  .text-\[11px\] {
    font-size: 0.75rem;
  }
  .text-\[clamp\(1\.6rem\,4vw\,3rem\)\] {
    font-size: clamp(1.6rem, 4vw, 3rem);
  }
  .text-\[clamp\(2\.2rem\,3\.8vw\,3\.25rem\)\] {
    font-size: clamp(2.2rem, 3.8vw, 3.25rem);
  }
  .text-\[clamp\(2\.75rem\,5vw\,5rem\)\] {
    font-size: clamp(2.75rem, 5vw, 5rem);
  }
  .text-\[clamp\(2rem\,3\.5vw\,3rem\)\] {
    font-size: clamp(2rem, 3.5vw, 3rem);
  }
  .text-\[clamp\(2rem\,3\.8vw\,3\.25rem\)\] {
    font-size: clamp(2rem, 3.8vw, 3.25rem);
  }
  .leading-\[1\.1\] {
    --tw-leading: 1.1;
    line-height: 1.1;
  }
  .leading-\[1\.2\] {
    --tw-leading: 1.2;
    line-height: 1.2;
  }
  .leading-\[1\.06\] {
    --tw-leading: 1.06;
    line-height: 1.06;
  }
  .leading-\[1\.8\] {
    --tw-leading: 1.8;
    line-height: 1.8;
  }
  .leading-\[1\.65\] {
    --tw-leading: 1.65;
    line-height: 1.65;
  }
  .leading-\[1\.85\] {
    --tw-leading: 1.85;
    line-height: 1.85;
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .tracking-\[0\.2em\] {
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
  }
  .tracking-\[0\.3em\] {
    --tw-tracking: 0.3em;
    letter-spacing: 0.3em;
  }
  .tracking-\[0\.12em\] {
    --tw-tracking: 0.12em;
    letter-spacing: 0.12em;
  }
  .tracking-\[0\.16em\] {
    --tw-tracking: 0.16em;
    letter-spacing: 0.16em;
  }
  .tracking-\[0\.28em\] {
    --tw-tracking: 0.28em;
    letter-spacing: 0.28em;
  }
  .tracking-normal {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-line {
    white-space: pre-line;
  }
  .text-\[\#1a2744\] {
    color: #1a2744;
  }
  .text-\[\#6b8f71\] {
    color: #6b8f71;
  }
  .text-\[\#6b8f71\]\/15 {
    color: color-mix(in oklab, #6b8f71 15%, transparent);
  }
  .text-\[\#8a8f9e\] {
    color: #5c6578;
  }
  .text-\[\#c9a96e\] {
    color: #c9a96e;
  }
  .text-\[\#c9a96e\]\/20 {
    color: color-mix(in oklab, #c9a96e 20%, transparent);
  }
  .text-gold {
    color: var(--color-gold);
  }
  .text-muted {
    color: var(--color-muted);
  }
  .text-navy {
    color: var(--color-navy);
  }
  .text-navy-light {
    color: var(--color-navy-light);
  }
  .text-sage {
    color: var(--color-sage);
  }
  .text-sage\/30 {
    color: color-mix(in srgb, #6b8f71 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-sage) 30%, transparent);
    }
  }
  .text-white {
    color: var(--color-white);
  }
  .text-white\/40 {
    color: color-mix(in srgb, #fff 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }
  .text-white\/45 {
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }
  .text-white\/50 {
    color: color-mix(in srgb, #fff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .text-white\/60 {
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .text-white\/70 {
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .text-white\/80 {
    color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .normal-case {
    text-transform: none;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .not-italic {
    font-style: normal;
  }
  .accent-navy {
    accent-color: var(--color-navy);
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-85 {
    opacity: 85%;
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .grayscale-\[20\%\] {
    --tw-grayscale: grayscale(20%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-400 {
    --tw-duration: 400ms;
    transition-duration: 400ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .duration-700 {
    --tw-duration: 700ms;
    transition-duration: 700ms;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .group-open\:rotate-90 {
    &:is(:where(.group):is([open], :popover-open, :open) *) {
      rotate: 90deg;
    }
  }
  .group-open\:opacity-0 {
    &:is(:where(.group):is([open], :popover-open, :open) *) {
      opacity: 0%;
    }
  }
  .group-focus-within\:visible {
    &:is(:where(.group):focus-within *) {
      visibility: visible;
    }
  }
  .group-focus-within\:translate-y-0 {
    &:is(:where(.group):focus-within *) {
      --tw-translate-y: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .group-focus-within\:rotate-180 {
    &:is(:where(.group):focus-within *) {
      rotate: 180deg;
    }
  }
  .group-focus-within\:opacity-100 {
    &:is(:where(.group):focus-within *) {
      opacity: 100%;
    }
  }
  .group-hover\:visible {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        visibility: visible;
      }
    }
  }
  .group-hover\:translate-x-1 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--spacing) * 1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:translate-y-0 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:scale-105 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:rotate-180 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        rotate: 180deg;
      }
    }
  }
  .group-hover\:bg-\[\#1a2744\]\/5 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in oklab, #1a2744 5%, transparent);
      }
    }
  }
  .group-hover\:from-navy\/85 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-gradient-from: color-mix(in srgb, #1a2744 85%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-gradient-from: color-mix(in oklab, var(--color-navy) 85%, transparent);
        }
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .group-hover\:text-sage {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-sage);
      }
    }
  }
  .group-hover\:opacity-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\/link\:translate-x-1 {
    &:is(:where(.group\/link):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--spacing) * 1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-focus-visible\:translate-y-0 {
    &:is(:where(.group):focus-visible *) {
      --tw-translate-y: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .group-focus-visible\:opacity-100 {
    &:is(:where(.group):focus-visible *) {
      opacity: 100%;
    }
  }
  .placeholder\:text-\[\#c8cdd8\] {
    &::placeholder {
      color: #c8cdd8;
    }
  }
  .placeholder\:text-muted\/50 {
    &::placeholder {
      color: color-mix(in srgb, #5c6578 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-muted) 50%, transparent);
      }
    }
  }
  .first\:pl-0 {
    &:first-child {
      padding-left: calc(var(--spacing) * 0);
    }
  }
  .last\:border-0 {
    &:last-child {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
  }
  .last\:border-b-0 {
    &:last-child {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .hover\:scale-105 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-\[1\.02\] {
    &:hover {
      @media (hover: hover) {
        scale: 1.02;
      }
    }
  }
  .hover\:border-\[\#1a2744\] {
    &:hover {
      @media (hover: hover) {
        border-color: #1a2744;
      }
    }
  }
  .hover\:border-\[\#c9a96e\] {
    &:hover {
      @media (hover: hover) {
        border-color: #c9a96e;
      }
    }
  }
  .hover\:border-\[\#c9a96e\]\/40 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in oklab, #c9a96e 40%, transparent);
      }
    }
  }
  .hover\:border-\[\#c9a96e\]\/50 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in oklab, #c9a96e 50%, transparent);
      }
    }
  }
  .hover\:border-gold {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-gold);
      }
    }
  }
  .hover\:border-navy {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-navy);
      }
    }
  }
  .hover\:border-white {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-white);
      }
    }
  }
  .hover\:bg-\[\#243258\] {
    &:hover {
      @media (hover: hover) {
        background-color: #243258;
      }
    }
  }
  .hover\:bg-ivory {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-ivory);
      }
    }
  }
  .hover\:bg-navy-light {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-navy-light);
      }
    }
  }
  .hover\:bg-sage-light {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-sage-light);
      }
    }
  }
  .hover\:bg-white\/60 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 60%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
        }
      }
    }
  }
  .hover\:text-\[\#6b8f71\] {
    &:hover {
      @media (hover: hover) {
        color: #6b8f71;
      }
    }
  }
  .hover\:text-navy {
    &:hover {
      @media (hover: hover) {
        color: var(--color-navy);
      }
    }
  }
  .hover\:text-sage {
    &:hover {
      @media (hover: hover) {
        color: var(--color-sage);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:text-white\/70 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #fff 70%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-white) 70%, transparent);
        }
      }
    }
  }
  .hover\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .hover\:shadow-lg {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-xl {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .focus\:border-\[\#1a2744\] {
    &:focus {
      border-color: #1a2744;
    }
  }
  .focus\:border-navy {
    &:focus {
      border-color: var(--color-navy);
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .focus-visible\:ring-2 {
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus-visible\:ring-gold {
    &:focus-visible {
      --tw-ring-color: var(--color-gold);
    }
  }
  .focus-visible\:ring-inset {
    &:focus-visible {
      --tw-ring-inset: inset;
    }
  }
  .sm\:right-auto {
    @media (width >= 40rem) {
      right: auto;
    }
  }
  .sm\:col-span-2 {
    @media (width >= 40rem) {
      grid-column: span 2 / span 2;
    }
  }
  .sm\:col-span-3 {
    @media (width >= 40rem) {
      grid-column: span 3 / span 3;
    }
  }
  .sm\:aspect-auto {
    @media (width >= 40rem) {
      aspect-ratio: auto;
    }
  }
  .sm\:h-72 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 72);
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-5 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:divide-x {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: var(--tw-border-style);
        border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
        border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
      }
    }
  }
  .sm\:divide-y-0 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(0px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
      }
    }
  }
  .sm\:self-auto {
    @media (width >= 40rem) {
      align-self: auto;
    }
  }
  .sm\:px-12 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
  }
  .md\:inset-7 {
    @media (width >= 48rem) {
      inset: calc(var(--spacing) * 7);
    }
  }
  .md\:top-8 {
    @media (width >= 48rem) {
      top: calc(var(--spacing) * 8);
    }
  }
  .md\:right-8 {
    @media (width >= 48rem) {
      right: calc(var(--spacing) * 8);
    }
  }
  .md\:right-auto {
    @media (width >= 48rem) {
      right: auto;
    }
  }
  .md\:col-span-4 {
    @media (width >= 48rem) {
      grid-column: span 4 / span 4;
    }
  }
  .md\:col-span-8 {
    @media (width >= 48rem) {
      grid-column: span 8 / span 8;
    }
  }
  .md\:mt-24 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 24);
    }
  }
  .md\:ml-auto {
    @media (width >= 48rem) {
      margin-left: auto;
    }
  }
  .md\:h-\[500px\] {
    @media (width >= 48rem) {
      height: 500px;
    }
  }
  .md\:max-w-\[256px\] {
    @media (width >= 48rem) {
      max-width: 256px;
    }
  }
  .md\:max-w-md {
    @media (width >= 48rem) {
      max-width: var(--container-md);
    }
  }
  .md\:max-w-sm {
    @media (width >= 48rem) {
      max-width: var(--container-sm);
    }
  }
  .md\:max-w-xs {
    @media (width >= 48rem) {
      max-width: var(--container-xs);
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-4 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-12 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:items-end {
    @media (width >= 48rem) {
      align-items: flex-end;
    }
  }
  .md\:items-start {
    @media (width >= 48rem) {
      align-items: flex-start;
    }
  }
  .md\:justify-between {
    @media (width >= 48rem) {
      justify-content: space-between;
    }
  }
  .md\:justify-end {
    @media (width >= 48rem) {
      justify-content: flex-end;
    }
  }
  .md\:gap-8 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .md\:gap-10 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 10);
    }
  }
  .md\:space-y-32 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 32) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 32) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .md\:p-7 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 7);
    }
  }
  .md\:p-8 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .md\:p-9 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 9);
    }
  }
  .md\:p-10 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 10);
    }
  }
  .md\:p-12 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 12);
    }
  }
  .md\:p-14 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 14);
    }
  }
  .md\:px-12 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
  }
  .md\:px-16 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 16);
    }
  }
  .md\:py-9 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 9);
    }
  }
  .md\:py-12 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 12);
    }
  }
  .md\:py-24 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 24);
    }
  }
  .md\:py-28 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 28);
    }
  }
  .md\:py-32 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 32);
    }
  }
  .md\:py-36 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 36);
    }
  }
  .md\:pl-16 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 16);
    }
  }
  .md\:text-right {
    @media (width >= 48rem) {
      text-align: right;
    }
  }
  .md\:text-2xl {
    @media (width >= 48rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .md\:text-3xl {
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .md\:text-4xl {
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .md\:text-5xl {
    @media (width >= 48rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .md\:text-6xl {
    @media (width >= 48rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  .md\:text-7xl {
    @media (width >= 48rem) {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }
  }
  .md\:text-base {
    @media (width >= 48rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .lg\:sticky {
    @media (width >= 64rem) {
      position: sticky;
    }
  }
  .lg\:top-28 {
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 28);
    }
  }
  .lg\:order-1 {
    @media (width >= 64rem) {
      order: 1;
    }
  }
  .lg\:order-2 {
    @media (width >= 64rem) {
      order: 2;
    }
  }
  .lg\:col-span-3 {
    @media (width >= 64rem) {
      grid-column: span 3 / span 3;
    }
  }
  .lg\:col-span-4 {
    @media (width >= 64rem) {
      grid-column: span 4 / span 4;
    }
  }
  .lg\:col-span-5 {
    @media (width >= 64rem) {
      grid-column: span 5 / span 5;
    }
  }
  .lg\:col-span-6 {
    @media (width >= 64rem) {
      grid-column: span 6 / span 6;
    }
  }
  .lg\:col-span-7 {
    @media (width >= 64rem) {
      grid-column: span 7 / span 7;
    }
  }
  .lg\:col-span-8 {
    @media (width >= 64rem) {
      grid-column: span 8 / span 8;
    }
  }
  .lg\:row-span-2 {
    @media (width >= 64rem) {
      grid-row: span 2 / span 2;
    }
  }
  .lg\:ml-\[33\.333\%\] {
    @media (width >= 64rem) {
      margin-left: 33.333%;
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:aspect-auto {
    @media (width >= 64rem) {
      aspect-ratio: auto;
    }
  }
  .lg\:min-h-0 {
    @media (width >= 64rem) {
      min-height: calc(var(--spacing) * 0);
    }
  }
  .lg\:min-h-\[75vh\] {
    @media (width >= 64rem) {
      min-height: 75vh;
    }
  }
  .lg\:min-h-\[640px\] {
    @media (width >= 64rem) {
      min-height: 640px;
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-12 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-\[0\.9fr_1\.1fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 0.9fr 1.1fr;
    }
  }
  .lg\:grid-cols-\[1fr_20rem\] {
    @media (width >= 64rem) {
      grid-template-columns: 1fr 20rem;
    }
  }
  .lg\:grid-cols-\[45\%_55\%\] {
    @media (width >= 64rem) {
      grid-template-columns: 45% 55%;
    }
  }
  .lg\:grid-cols-\[52\%_48\%\] {
    @media (width >= 64rem) {
      grid-template-columns: 52% 48%;
    }
  }
  .lg\:justify-end {
    @media (width >= 64rem) {
      justify-content: flex-end;
    }
  }
  .lg\:gap-16 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .lg\:gap-20 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 20);
    }
  }
  .lg\:gap-24 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 24);
    }
  }
  .lg\:border-l {
    @media (width >= 64rem) {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }
  }
  .lg\:border-white\/15 {
    @media (width >= 64rem) {
      border-color: color-mix(in srgb, #fff 15%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
      }
    }
  }
  .lg\:p-10 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 10);
    }
  }
  .lg\:p-12 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 12);
    }
  }
  .lg\:p-14 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 14);
    }
  }
  .lg\:px-8 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .lg\:px-20 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 20);
    }
  }
  .lg\:py-0 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 0);
    }
  }
  .lg\:py-32 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 32);
    }
  }
  .lg\:pr-20 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 20);
    }
  }
  .lg\:pl-10 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 10);
    }
  }
  .lg\:pl-12 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 12);
    }
  }
  .lg\:pl-16 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 16);
    }
  }
  .lg\:text-right {
    @media (width >= 64rem) {
      text-align: right;
    }
  }
  .xl\:flex {
    @media (width >= 80rem) {
      display: flex;
    }
  }
  .xl\:hidden {
    @media (width >= 80rem) {
      display: none;
    }
  }
  .xl\:px-28 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 28);
    }
  }
  .xl\:pl-24 {
    @media (width >= 80rem) {
      padding-left: calc(var(--spacing) * 24);
    }
  }
}
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
button, input, select, textarea {
  font-family: inherit;
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #c8cdd8;
  border-radius: 3px;
}
.font-serif {
  font-family: var(--font-serif);
}
@keyframes iconShadowFloat {
  0% {
    transform: translateY(0px);
  }
  42% {
    transform: translateY(-16px);
  }
  100% {
    transform: translateY(0px);
  }
}
.logo-icon-float {
  display: inline-block;
  filter: drop-shadow(0px 20px 22px rgba(0, 0, 0, 0.42)) drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.26)) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.18));
  transition: transform 0.45s ease, filter 0.45s ease;
}
.logo-icon-float img {
  animation: iconShadowFloat 1.8s ease-in-out 0.4s 1;
}
.logo-icon-float:hover,
.logo-icon-float:focus-visible {
  transform: translateY(-16px);
  filter: drop-shadow(0px 36px 38px rgba(0, 0, 0, 0.28)) drop-shadow(0px 20px 26px rgba(0, 0, 0, 0.16)) drop-shadow(0px 8px 14px rgba(0, 0, 0, 0.10));
}
@media (prefers-reduced-motion: reduce) {
  .logo-icon-float img {
    animation: none;
  }
  .logo-icon-float {
    transition: none;
  }
  .logo-icon-float:hover,
  .logo-icon-float:focus-visible {
    transform: none;
    filter: drop-shadow(0px 20px 22px rgba(0, 0, 0, 0.42)) drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.26)) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.18));
  }
}
summary.list-none::-webkit-details-marker {
  display: none;
}
[hidden] {
  display: none !important;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-space-y-reverse: 0;
      --tw-divide-x-reverse: 0;
      --tw-border-style: solid;
      --tw-divide-y-reverse: 0;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}

/* W3.CSS și Bootstrap declară section { display: block } fără @layer.
   Acea regulă bate .grid din @layer utilities, iar coloana fotografiei,
   cu min-height: 0 de la 64rem, se strânge la zero. */
section.grid {
  display: grid;
}

/* Sub 40rem banda de trei fotografii stă pe o coloană. A doua și a treia
   se ascund, ca să rămână o singură imagine pe toată înălțimea. */
section.grid.sm\:grid-cols-3 > :nth-child(n + 2) {
  display: none;
}
@media (width >= 40rem) {
  section.grid.sm\:grid-cols-3 > :nth-child(n + 2) {
    display: block;
  }
}

/* Marimea literelor. Butoanele A− / A / A+ din Site-exe/visitor-prefs-controls.php
   scriu data-text pe html, prin Jquery_format.js.
   Valorile sunt procente: 75, 87.5, 100, 112.5, 125.
   100% de pe regula html de mai sus ramane pentru prima desenare
   (bate font-size: 10px din Bootstrap). A+ urca de la 75 pana la 125.
   Aceeasi regula este in Appearance_format_ro.css. */
html[data-text="75"] {
  font-size: 75%;
}
html[data-text="87.5"] {
  font-size: 87.5%;
}
html[data-text="100"] {
  font-size: 100%;
}
html[data-text="112.5"] {
  font-size: 112.5%;
}
html[data-text="125"] {
  font-size: 125%;
}

/* Butoanele din div.menu-bar-top. Sub 1100px bara nu are loc, deci grupul
   sta ascuns. Nu punem height in px si nici overflow:hidden pe bara. */
div.menu-bar-top .visitor-prefs {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  margin-right: 0.75rem;
  flex: 0 0 auto;
  float: none;
}
@media (min-width: 1100px) {
  div.menu-bar-top .visitor-prefs {
    display: flex;
  }
}
div.menu-bar-top .visitor-prefs button {
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1;
  min-height: 1.75rem;
  padding: 0.25rem 0.5rem;
  color: inherit;
  background: transparent;
  border: 0.0625rem solid var(--varHairline);
  border-radius: 0.1875rem;
  cursor: pointer;
}
div.menu-bar-top #text-size-controls {
  display: flex;
  align-items: center;
}
div.menu-bar-top #text-size-controls button + button {
  margin-left: -0.0625rem;
}
html:not([data-text]) #text-reset,
html[data-text="100"] #text-reset {
  background-color: #1a2744;
  color: #faf9f7;
}
div.menu-bar-top .visitor-prefs button:disabled {
  opacity: 0.4;
  cursor: default;
}
div.menu-bar-top .visitor-prefs .theme-icon {
  display: flex;
  align-items: center;
}
div.menu-bar-top .visitor-prefs .theme-icon-sun {
  display: none;
}
html[data-theme="night"] div.menu-bar-top .visitor-prefs .theme-icon-moon {
  display: none;
}
html[data-theme="night"] div.menu-bar-top .visitor-prefs .theme-icon-sun {
  display: flex;
}
html[data-theme="night"] #text-reset[aria-pressed="true"] {
  background-color: #c9a96e;
  color: #141c33;
}

/* Tema de noapte. visitor-prefs-head.php pune data-theme="night" inainte de
   CSS; Jquery_format.js il schimba la click pe #theme-toggle. Fotografiile
   raman nemodificate. Aurul de pe titluri si linii ramane. --varNavy nu se
   inverseaza: este si fundal la butoane, nu doar culoare de text. */
html[data-theme="night"] {
  color-scheme: dark;
  --varSurface: #141c33;
  --varSurfaceSoft: #1a2744;
  --varTextPrimary: #faf9f7;
  --varTextMuted: #c5c9d4;
  --varHairline: rgba(250, 249, 247, 0.18);
  --varIvory: #243258;
  --color-ivory: #1a2744;
  --color-muted: #c5c9d4;
  --color-sage-light: #243258;
}
html[data-theme="night"] body,
html[data-theme="night"] .page {
  background-color: #1a2744;
  color: #faf9f7;
}
html[data-theme="night"] body {
  background-color: #141c33;
}
html[data-theme="night"] div.menu-bar-top > div.w3-bar,
html[data-theme="night"] div.menu-bar-top #log_in > button.w3-button,
html[data-theme="night"] div.menu-bar-top a.top_link,
html[data-theme="night"] div.menu-bar-top li.scrollable_entity_contact,
html[data-theme="night"] div.menu-bar-top div.loaded ul li,
html[data-theme="night"] div.menu-bar > a.w3-bar-item,
html[data-theme="night"] div.menu-bar > button.w3-bar-item,
html[data-theme="night"] div.menu-bar > div.w3-dropdown-hover > button.w3-button,
html[data-theme="night"] div.menu-bar > div.w3-dropdown-hover > a.w3-button {
  color: #faf9f7;
}
html[data-theme="night"] div.menu-bar .w3-bar-item:hover,
html[data-theme="night"] div.menu-bar .w3-bar-item:focus {
  color: #faf9f7;
  background-color: #243258 !important;
}
/* Hover-ul de zi pune color: var(--varNavy). W3.CSS, la :hover pe .w3-button,
   pune color: #000 !important. Pe fundalul de noapte ambele dispar.
   !important de aici lasa textul ivoriu. */
html[data-theme="night"] div.menu-bar.w3-bar > a.w3-bar-item:hover,
html[data-theme="night"] div.menu-bar.w3-bar > a.w3-bar-item:focus,
html[data-theme="night"] div.menu-bar.w3-bar > div.w3-dropdown-hover:hover > button.down-menu,
html[data-theme="night"] div.menu-bar.w3-bar > div.w3-dropdown-hover:focus-within > button.down-menu {
  background-color: #2e3d6b !important;
  color: #faf9f7 !important;
}
html[data-theme="night"] div.menu-bar div.w3-dropdown-content a.w3-bar-item:hover,
html[data-theme="night"] div.menu-bar div.w3-dropdown-content a.w3-bar-item:focus,
html[data-theme="night"] div.menu-bar div.w3-dropdown-content button.w3-button:hover,
html[data-theme="night"] div.menu-bar div.w3-dropdown-content button.w3-button:focus {
  background-color: #3a4d78 !important;
  color: #faf9f7 !important;
}
html[data-theme="night"] div.menu-bar div.w3-dropdown-content,
html[data-theme="night"] div.menu-bar div.w3-dropdown-content a.w3-bar-item,
html[data-theme="night"] div.menu-bar div.w3-dropdown-content button.w3-button {
  color: #faf9f7;
  background-color: #243258;
}
html[data-theme="night"] #auth_form {
  background-color: #243258;
  color: #faf9f7;
}
html[data-theme="night"] #auth_form input,
html[data-theme="night"] .min-h-screen input,
html[data-theme="night"] .min-h-screen textarea,
html[data-theme="night"] input.inputc_search {
  background-color: #141c33;
  color: #faf9f7;
  border-color: rgba(250, 249, 247, 0.28);
}
/* Câmpul și lista, pe tema de noapte. Lupa e ivorie, aurie cât timp
   câmpul e deschis. Rândul atins folosește același albastru ca meniul. */
html[data-theme="night"] div.menu-bar-top input.inputc_search {
  background-color: #141c33;
  color: #faf9f7;
  border-color: rgba(250, 249, 247, 0.28);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf9f7' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='10.25' cy='10.25' r='6'/%3E%3Cpath d='M14.8 14.8 20.2 20.2'/%3E%3C/svg%3E");
}
html[data-theme="night"] div.menu-bar-top input.inputc_search.is-prompt {
  color: #c5c9d4;
}
html[data-theme="night"] div.menu-bar-top input.inputc_search_hover {
  color: #faf9f7;
  border-color: #c9a96e;
  background-color: #141c33;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a96e' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='10.25' cy='10.25' r='6'/%3E%3Cpath d='M14.8 14.8 20.2 20.2'/%3E%3C/svg%3E");
}
html[data-theme="night"] div.menu-bar-top div.content_search {
  background-color: #243258;
  border-color: rgba(250, 249, 247, 0.18);
  border-top-color: #c9a96e;
}
html[data-theme="night"] div.menu-bar-top div.content_search span.search_item.w3-bar-item.w3-button {
  border-bottom-color: rgba(250, 249, 247, 0.18);
  color: #faf9f7;
  background-color: transparent;
}
html[data-theme="night"] div.menu-bar-top div.content_search span.search_item a.search_results {
  color: #faf9f7;
}
html[data-theme="night"] div.menu-bar-top div.content_search span.search_item.w3-button:hover,
html[data-theme="night"] div.menu-bar-top div.content_search span.search_item.w3-button:focus,
html[data-theme="night"] div.menu-bar-top div.content_search span.search_item:has(a.search_results_selected) {
  background-color: #3a4d78 !important;
  color: #faf9f7 !important;
}
html[data-theme="night"] div.menu-bar-top div.content_search span.search_item:hover a.search_results,
html[data-theme="night"] div.menu-bar-top div.content_search a.search_results.search_results_selected {
  border-left-color: #c9a96e;
  color: #faf9f7;
}
html[data-theme="night"] .bg-\[\#faf9f7\],
html[data-theme="night"] .bg-\[\#faf9f7\]\/95,
html[data-theme="night"] .bg-\[\#fdf8f0\] {
  background-color: #1a2744;
}
html[data-theme="night"] .bg-white,
html[data-theme="night"] .bg-\[\#e8f0e9\],
html[data-theme="night"] .bg-sage-light,
html[data-theme="night"] .bg-sage {
  background-color: #243258;
}
html[data-theme="night"] .bg-\[\#1a2744\],
html[data-theme="night"] .bg-navy {
  background-color: #141c33;
}
html[data-theme="night"] .text-\[\#1a2744\],
html[data-theme="night"] .text-navy,
html[data-theme="night"] .text-navy-light {
  color: #faf9f7;
}
html[data-theme="night"] .text-\[\#8a8f9e\],
html[data-theme="night"] .text-muted,
html[data-theme="night"] .text-\[\#6b8f71\] {
  color: #c5c9d4;
}
html[data-theme="night"] .text-xs.text-\[\#c9a96e\],
html[data-theme="night"] .text-\[10px\].text-\[\#c9a96e\],
html[data-theme="night"] .text-\[11px\].text-\[\#c9a96e\] {
  color: #faf9f7;
}
html[data-theme="night"] .border-\[\#e4e6eb\] {
  border-color: rgba(250, 249, 247, 0.18);
}

/* Firul de navigare. Bootstrap lasa ol.breadcrumb pe #f5f5f5, iar a { color: inherit }
   ia ivoriul de pe body, deci textul dispare. Bara de noapte foloseste aceeasi
   paleta ca meniul: fundal #141c33, text #faf9f7, separator #c5c9d4. */
html[data-theme="night"] nav[aria-label="breadcrumb"],
html[data-theme="night"] ol.breadcrumb {
  background-color: #141c33;
  color: #faf9f7;
}
html[data-theme="night"] ol.breadcrumb > li > a,
html[data-theme="night"] ol.breadcrumb > li > a:link,
html[data-theme="night"] ol.breadcrumb > li > a:visited,
html[data-theme="night"] ol.breadcrumb > li > a:hover,
html[data-theme="night"] ol.breadcrumb > li > a:active,
html[data-theme="night"] ol.breadcrumb > li.active,
html[data-theme="night"] ol.breadcrumb > li.active > span.active {
  color: #faf9f7;
}
html[data-theme="night"] ol.breadcrumb > li + li::before {
  color: #c5c9d4;
}

/* Numerele font-serif text-gold sunt fortate navy mai jos, pentru fondul de zi.
   Pe fondul de noapte navy-ul se confunda cu pagina. Aurul #c9a96e ramane,
   ca pe banda navy. Iconitele svg.text-gold folosesc currentColor; in noapte
   devin ivorii, ca textul lizibil. Specificitatea bate regulile body.pagina-*
   de mai jos. */
html[data-theme="night"] body span.font-serif.text-gold {
  color: #c9a96e;
}
/* Stelele de recenzie au fill="#c9a96e" in marcaj. In zi, regula de mai jos
   le adanceste. In noapte raman aurul de design, pe fondul inchis. */
html[data-theme="night"] body.pagina-acasa #testimonials svg[fill="#c9a96e"] {
  fill: #c9a96e;
}
html[data-theme="night"] body.pagina-implantologie svg.text-gold,
html[data-theme="night"] body.pagina-parodontologie svg.text-gold,
html[data-theme="night"] body.pagina-protetica svg.text-gold,
html[data-theme="night"] body.pagina-terapie svg.text-gold,
html[data-theme="night"] body.pagina-galerie svg.text-gold {
  color: #faf9f7;
}

/* Iconitele din cardurile de implantologie. JS-ul le pune intr-un
   span.text-gold.block, cu stroke si fill currentColor. Regula de zi
   .text-gold le face navy, acelasi ton cu cardul de noapte. Aurul se pune
   pe svg, nu pe toate iconitele paginii. svg.text-gold de pe banda navy
   ramane ivoriu. */
html[data-theme="night"] body.pagina-implantologie span.text-gold.block > svg {
  color: #c9a96e;
}

/* a.bg-navy sta pe #1a2744 si in noapte, acelasi ton cu sectiunea.
   #3a4d78 este hover-ul de noapte al meniului; eticheta ramane ivorie.
   La hover, aurul cu text inchis, ca ziua aleasa din calendar. */
html[data-theme="night"] body a.bg-navy,
html[data-theme="night"] body a.bg-navy:link,
html[data-theme="night"] body a.bg-navy:visited,
html[data-theme="night"] body a.bg-navy:hover,
html[data-theme="night"] body a.bg-navy:active,
html[data-theme="night"] body a.bg-navy:focus {
  background-color: #3a4d78;
  color: #faf9f7;
  text-decoration: none;
}
html[data-theme="night"] body a.bg-navy:hover,
html[data-theme="night"] body a.bg-navy:focus {
  background-color: #c9a96e;
  color: #141c33;
}

/* Vezi cazuri. Mai jos, body.pagina-* a.link-cazuri tine eticheta pe #1a2744
   ca sa bata albastrul de hover din Bootstrap. Pe fondul de noapte navy-ul
   dispare. Ivoriul #faf9f7 ramane si la hover si la focus. */
html[data-theme="night"] body a.link-cazuri,
html[data-theme="night"] body a.link-cazuri:link,
html[data-theme="night"] body a.link-cazuri:visited,
html[data-theme="night"] body a.link-cazuri:hover,
html[data-theme="night"] body a.link-cazuri:active,
html[data-theme="night"] body a.link-cazuri:focus {
  color: #faf9f7;
}

/* Contactul din bara de sus. div.loaded ul li a are color: var(--varNavy),
   mai specific decat culoarea de pe li, deci plicul si cuvantul Contact
   raman bleumarin pe bara inchisa. Jquery_format.js pune data-theme="night". */
html[data-theme="night"] div.menu-bar-top div.loaded ul li a,
html[data-theme="night"] div.menu-bar-top div.loaded ul li a:link,
html[data-theme="night"] div.menu-bar-top div.loaded ul li a:visited,
html[data-theme="night"] div.menu-bar-top div.loaded ul li a:hover,
html[data-theme="night"] div.menu-bar-top div.loaded ul li a:active,
html[data-theme="night"] div.menu-bar-top li.scrollable_entity_contact a,
html[data-theme="night"] div.menu-bar-top li.scrollable_entity_contact a:link,
html[data-theme="night"] div.menu-bar-top li.scrollable_entity_contact a:visited,
html[data-theme="night"] div.menu-bar-top li.scrollable_entity_contact a:hover,
html[data-theme="night"] div.menu-bar-top li.scrollable_entity_contact a:active {
  color: #fff;
}

/* Panoul cu ora, rasarit si vizite. Aceeasi paleta ca restul temei de noapte:
   card #243258, text ivoriu, etichete #c5c9d4, linie aurie. */
html[data-theme="night"] div.clockext {
  color: #faf9f7;
}
html[data-theme="night"] div.clockext div.clockint_buttons {
  background-color: #faf9f7;
}
html[data-theme="night"] div.clockext div.show_clockint_php,
html[data-theme="night"] div.clockext div.hide_clockint_php {
  background-color: #1a2744;
  color: #faf9f7;
}
html[data-theme="night"] div.clockext div.show_clockint_php:hover,
html[data-theme="night"] div.clockext div.hide_clockint_php:hover {
  background-color: #3a4d78;
}
html[data-theme="night"] div.clockext div.total_clockint_php {
  background-color: #243258;
  color: #faf9f7;
  border-color: rgba(250, 249, 247, 0.18);
  border-top: 0.125rem solid #c9a96e;
}
html[data-theme="night"] div.clockext div.clockint,
html[data-theme="night"] div.clockext div.EET_mention_div,
html[data-theme="night"] div.clockext div.clockint_php,
html[data-theme="night"] div.clockext div.visits_mention_div,
html[data-theme="night"] div.clockext div.content_data_visits,
html[data-theme="night"] div.clockext div.content_info_vizite,
html[data-theme="night"] div.clockext div.content_last_visit {
  color: #faf9f7;
}
html[data-theme="night"] div.clockext div.visits_mention_div {
  color: #c5c9d4;
}

/* Harta din sectiunea Viziteaza. Porneste usor gri; la mouse revine la culoare
   si primeste un cadru auriu, ca sa se vada ca se poate misca. Cadrele de deasupra
   nu prind clickul: harta ramane cea care primeste mouse-ul. */
#visit .harta-cabinet iframe {
  filter: grayscale(28%);
  transition: filter 700ms ease;
}
#visit .harta-cabinet::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 0 rgba(201, 169, 110, 0);
  transition: box-shadow 700ms ease;
}
#visit .harta-cabinet .harta-hint {
  transition: opacity 400ms ease, transform 400ms ease;
}
#visit .harta-cabinet:hover iframe {
  filter: grayscale(0%) saturate(1.12);
}
#visit .harta-cabinet:hover::after {
  box-shadow: inset 0 0 0 0.125rem #c9a96e;
}
#visit .harta-cabinet:hover .harta-hint {
  opacity: 0;
  transform: translateX(-50%) translateY(0.4rem);
}

/* Formularul de programare. Campurile reactioneaza la mouse si la focus.
   Calendarul este desenat din optiunile zilei; selectul ramane in formular
   ca sa plece valoarea spre prelucrare, dar nu se vede. */
#contact form[data-form] input[type="text"],
#contact form[data-form] input[type="email"],
#contact form[data-form] input[type="tel"],
#contact form[data-form] select#id_appointment_hour,
#contact form[data-form] textarea {
  transition: border-color 200ms ease, box-shadow 200ms ease;
  font-family: inherit;
  font-size: 0.875rem;
}
#contact form[data-form] input[type="text"]:hover,
#contact form[data-form] input[type="email"]:hover,
#contact form[data-form] input[type="tel"]:hover,
#contact form[data-form] select#id_appointment_hour:hover,
#contact form[data-form] textarea:hover {
  border-color: #c9a96e;
}
#contact form[data-form] input[type="text"]:focus,
#contact form[data-form] input[type="email"]:focus,
#contact form[data-form] input[type="tel"]:focus,
#contact form[data-form] select#id_appointment_hour:focus,
#contact form[data-form] textarea:focus {
  border-color: #1a2744;
  box-shadow: 0 0 0 0.2rem rgba(201, 169, 110, 0.35);
  outline: none;
}
#contact select.calendar-sursa {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
#contact .calendar-programare {
  display: grid;
  gap: 1.25rem;
  background: #ffffff;
  border: 1px solid #e4e6eb;
  padding: 1rem 1rem 1.15rem;
}
#contact .calendar-luna {
  margin: 0 0 0.65rem;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: #1a2744;
  text-transform: capitalize;
}
#contact .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}
#contact .calendar-grid span,
#contact .calendar-zi {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  font-size: 0.75rem;
  line-height: 1;
}
#contact .calendar-cap {
  color: #5c6578;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
#contact .calendar-oprita {
  color: #c8cdd8;
}
#contact button.calendar-zi {
  border: 1px solid transparent;
  background: transparent;
  color: #1a2744;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
#contact button.calendar-zi:hover {
  background: #e8f0e9;
  border-color: #c9a96e;
}
#contact button.calendar-zi.este-azi {
  box-shadow: inset 0 -2px 0 #c9a96e;
}
#contact button.calendar-zi.este-aleasa,
#contact button.calendar-zi.este-aleasa:hover {
  background: #1a2744;
  border-color: #1a2744;
  color: #ffffff;
  box-shadow: inset 0 0 0 2px #c9a96e;
  transform: none;
}
#contact .ziua-aleasa {
  margin: 0.75rem 0 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: #1a2744;
}
#contact .form-raspuns {
  margin: 0;
  font-size: 0.75rem;
  color: #5c6578;
}
html[data-theme="night"] #contact form[data-form] input:focus,
html[data-theme="night"] #contact form[data-form] select#id_appointment_hour:focus,
html[data-theme="night"] #contact form[data-form] textarea:focus {
  border-color: #c9a96e;
}
html[data-theme="night"] #contact .calendar-programare {
  background: #243258;
  border-color: #3a4668;
}
html[data-theme="night"] #contact .calendar-luna,
html[data-theme="night"] #contact button.calendar-zi,
html[data-theme="night"] #contact .ziua-aleasa {
  color: #faf9f7;
}
html[data-theme="night"] #contact button.calendar-zi:hover {
  background: #1a2744;
  color: #faf9f7;
}
html[data-theme="night"] #contact button.calendar-zi.este-aleasa,
html[data-theme="night"] #contact button.calendar-zi.este-aleasa:hover {
  background: #c9a96e;
  border-color: #c9a96e;
  color: #1a2744;
}

/* Buton de trimitere pentru formulare. Clasa se pune pe button sau pe ancora.
   Regula generala de pe button ii sterge fundalul, deci stilul sta aici. */
button.buton-formular,
a.buton-formular {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 3.5rem;
  margin: 0;
  padding: 0.9rem 1.4rem;
  border: 0;
  border-radius: 0.1875rem;
  background: #1a2744;
  box-shadow: inset 3px 0 0 #c9a96e;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 220ms ease, transform 160ms ease;
}
button.buton-formular::before,
a.buton-formular::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: #c9a96e;
  transition: width 420ms ease;
}
button.buton-formular::after,
a.buton-formular::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 220ms ease;
  flex-shrink: 0;
}
button.buton-formular:hover,
a.buton-formular:hover {
  background: #243258;
  color: #ffffff;
}
button.buton-formular:hover::before,
a.buton-formular:hover::before {
  width: 100%;
}
button.buton-formular:hover::after,
a.buton-formular:hover::after {
  transform: translateX(0.35rem) rotate(45deg);
}
button.buton-formular:active,
a.buton-formular:active {
  transform: translateY(1px);
}
button.buton-formular:focus-visible,
a.buton-formular:focus-visible {
  outline: 2px solid #c9a96e;
  outline-offset: 3px;
}
button.buton-formular:disabled {
  cursor: wait;
  opacity: 0.72;
}
html[data-theme="night"] button.buton-formular,
html[data-theme="night"] a.buton-formular {
  background: #141c33;
  color: #faf9f7;
}
html[data-theme="night"] button.buton-formular:hover,
html[data-theme="night"] a.buton-formular:hover {
  background: #243258;
  color: #faf9f7;
}

/* Spatiul de dupa fraza de introducere, inaintea blocului de date.
   spatiu-intro: 5rem, pentru grila de adresa si lista de contact.
   spatiu-intro-scurt: 4rem, pentru un rand scurt de etichete. */
p.spatiu-intro {
  margin-bottom: 5rem;
}
p.spatiu-intro-scurt {
  margin-bottom: 4rem;
}

/* Textele de continut din pagina noua, aliniate pe ambele margini.
   Intra paragrafele lungi din hero, servicii, medic,
   cabinet, drum, testimoniale, vizita, contact si subsol.
   Titlurile, listele, meniul si butoanele nu intra: au putine cuvinte, iar justify
   le imprastie. */
div.min-h-screen p,
footer.footer-cabinet p {
  text-align: justify;
  hyphens: auto;
}

/* Etichetele de 0.75rem raman la stanga. */
div.min-h-screen p.text-\[10px\] {
  text-align: left;
  hyphens: manual;
}

/* Citatul de pe fotografia lata ramane centrat. */
div.min-h-screen section.relative div.absolute.inset-0 p {
  text-align: center;
  hyphens: manual;
}

/* Nota de sub butonul de trimitere. Butonul are margin: 0 si acopera
   spatiul pe care formularul il pune intre campuri. Nota sta centrata
   sub buton. */
p.nota-formular {
  margin-top: 2rem;
}

/* Nota are o singura linie si sta sub butonul centrat.
   Selectorul este mai specific decat regula de justify de mai sus. */
div.min-h-screen p.nota-formular {
  text-align: center;
  hyphens: manual;
}

/* Footerul paginii. Banda bleumarin, trei coloane, randul de jos linistit.
   Pe tema de noapte fundalul coboara, ca sa nu se piarda in sectiunea de deasupra. */
footer.footer-cabinet {
  background: #1a2744;
  color: #c5c9d4;
  border-top: 3px solid #c9a96e;
  padding: 4rem 2rem 1.5rem;
}
footer.footer-cabinet a {
  color: #c5c9d4;
  text-decoration: none;
}
.footer-cabinet-interior {
  max-width: 80rem;
  margin: 0 auto;
}
.footer-cabinet-coloane {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
.footer-cabinet-titlu {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #c9a96e;
}
.footer-cabinet-coloane a.footer-cabinet-nume {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: auto;
  position: relative;
  margin: 0 0 1.15rem;
  padding-bottom: 0.55rem;
  font-family: "Montserrat", sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: #faf9f7;
}
.footer-cabinet-coloane a.footer-cabinet-nume::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.25rem;
  height: 1px;
  background: #c9a96e;
  transition: width 320ms ease;
}
.footer-cabinet-coloane a.footer-cabinet-nume::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-top: 1.5px solid #c9a96e;
  border-right: 1.5px solid #c9a96e;
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}
.footer-cabinet-coloane a.footer-cabinet-nume:hover::before {
  width: 100%;
}
.footer-cabinet-coloane a.footer-cabinet-nume:hover::after {
  opacity: 1;
  transform: translateY(-0.2rem) rotate(-45deg);
}
.footer-cabinet-coloane p,
.footer-cabinet-coloane a {
  display: block;
  margin: 0 0 0.65rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.footer-cabinet-coloane a:hover,
.footer-cabinet-nume:hover {
  color: #faf9f7;
}
.footer-maslin {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 2.75rem;
  padding-top: 6rem;
}
.ramura-maslin {
  display: block;
  transform-origin: right center;
  transform: rotate(38deg);
}
.ramura-maslin + .ramura-maslin {
  margin-left: -1.15rem;
  transform-origin: left center;
  transform: rotate(-38deg);
}
.footer-maslin svg {
  display: block;
  width: 11rem;
  height: auto;
}
.ramura-maslin + .ramura-maslin svg {
  transform: scaleX(-1);
}
.footer-cabinet-baza {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 1.15rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(250, 249, 247, 0.16);
  font-size: 0.75rem;
  line-height: 1.5;
}
.footer-cabinet-baza p {
  margin: 0;
}
@media (min-width: 48rem) {
  .footer-cabinet-coloane {
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 3rem;
  }
}
html[data-theme="night"] footer.footer-cabinet {
  background: #141c33;
}

/* Pagina stomatologie-implantologie. Textul de rand ramane Montserrat,
   ca pe pagina principala. Titlurile iau DM Serif Display prin font-serif.
   Fundalul body ramane navy: sub div.page sta o fasie scurta, iar ivoriul
   de pe clasa de pagina o facea alba. Ivoriu sta pe div.page.
   Butonul de meniu nu ia coltul rotunjit. */
body.pagina-implantologie,
body.pagina-parodontologie,
body.pagina-protetica,
body.pagina-terapie,
body.pagina-galerie {
  font-family: var(--font-sans);
}

body.pagina-implantologie button,
body.pagina-parodontologie button,
body.pagina-protetica button,
body.pagina-terapie button {
  border-radius: 0;
}

/* Ancora cu chenar care suna la cabinet. Colturile au 3px. */
body.pagina-implantologie a[href^="tel:"].inline-flex,
body.pagina-parodontologie a[href^="tel:"].inline-flex,
body.pagina-protetica a[href^="tel:"].inline-flex,
body.pagina-terapie a[href^="tel:"].inline-flex {
  border-radius: 3px;
}

/* Paragrafele lungi, pe cele patru pagini de servicii.
   Titlurile, linkurile, listele si etichetele scurte nu se intind. */
body.pagina-implantologie main p,
body.pagina-parodontologie main p,
body.pagina-protetica main p,
body.pagina-terapie main p {
  text-align: justify;
}

/* Lista de servicii. Numele raman la stanga.
   justify de pe main li si main span intinde cuvintele cand randul se rupe.
   Selectorul are aceeasi greutate ca regula de mai sus si sta dupa ea. */
ol.lista-servicii > li > span {
  text-align: left;
}

/* Etichetele scurte. justify de pe main p intinde cuvintele;
   text-left din @layer pierde, deci exceptia sta aici. */
body.pagina-implantologie main p.text-xs,
body.pagina-parodontologie main p.text-xs,
body.pagina-protetica main p.text-xs,
body.pagina-terapie main p.text-xs {
  text-align: left;
  hyphens: manual;
}

/* Titlul alb de pe banda navy. Bootstrap pune color: inherit pe h1,
   fara @layer. text-white sta in @layer utilities si pierde, deci
   titlul mosteneste navy de pe .page, aceeasi culoare cu fundalul. */
h1.text-white {
  color: #ffffff;
}

/* Informatiile de pe feedback, intrebari frecvente si harta.
   Titlurile scurte raman la stanga. Notele centrate si scorul
   din dreapta, de la 64rem, raman cum sunt. */
body.pagina-feedback div.bg-ivory p,
body.pagina-faqs div.bg-ivory p,
body.pagina-harta div.bg-ivory p,
body.pagina-feedback div.bg-ivory span.leading-relaxed,
body.pagina-harta div.bg-ivory span.leading-relaxed {
  text-align: justify;
  hyphens: auto;
}
body.pagina-feedback div.bg-ivory div.text-center p,
body.pagina-faqs div.bg-ivory div.text-center p,
body.pagina-harta div.bg-ivory div.text-center p,
body.pagina-feedback div.bg-ivory p.text-center,
body.pagina-faqs div.bg-ivory p.text-center {
  text-align: center;
  hyphens: manual;
}
@media (width >= 64rem) {
  body.pagina-feedback div.bg-ivory div.lg\:text-right p {
    text-align: right;
    hyphens: manual;
  }
}

/* Stelutele de pe formularul de feedback. Aurul de design este #c9a96e.
   button { color: inherit } sta in afara @layer si bate .text-gold,
   deci forma mosteneste navy. Steluta se umple prin currentColor.
   Aleasa, hover si apasata raman aurii. Nealeasa ramane griul muted. */
body.pagina-feedback svg.text-gold,
body.pagina-feedback button.star[data-star],
body.pagina-feedback button.star[data-star]:hover,
body.pagina-feedback button.star[data-star]:active,
body.pagina-feedback button.star[data-star]:focus {
  color: #c9a96e;
}
body.pagina-feedback button.star[data-star].text-muted,
body.pagina-feedback button.star[data-star].text-muted:hover,
body.pagina-feedback button.star[data-star].text-muted:focus {
  color: #5c6578;
}
body.pagina-feedback button.star[data-star].text-muted:active,
body.pagina-feedback button.star[data-star].text-gold,
body.pagina-feedback button.star[data-star].text-gold:hover,
body.pagina-feedback button.star[data-star].text-gold:active,
body.pagina-feedback button.star[data-star].text-gold:focus {
  color: #c9a96e;
}

/* Pagina feedback din Sandbox. Titlurile mostenesc culoarea paginii.
   Opiniile din baza (div.feedback) si formularul din feedback-form-ro.html
   pastreaza markup-ul PHP vechi; aspectul se scrie aici. */
body.pagina-feedback {
  font-family: var(--font-sans);
}
body.pagina-feedback main p {
  text-align: justify;
}
body.pagina-feedback main p.text-xs,
body.pagina-feedback main p.opinie,
body.pagina-feedback main .lista-opinii .data,
body.pagina-feedback main .lista-opinii .nume_pacient,
body.pagina-feedback main legend,
body.pagina-feedback main .legend {
  text-align: left;
}
body.pagina-feedback h1 {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
}
body.pagina-feedback h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.1;
}
/* Hero. Acelasi tipar ca pe programari: sub 64rem textul si panoul navy
   stau pe acelasi rand vizual; de la 64rem marginea stanga urmeaza max-w-7xl. */
body.pagina-feedback main > div > section.pt-4.grid {
  padding-top: 0;
  grid-template-rows: calc(var(--spacing) * 80);
}
@media (max-width: 63.99rem) {
  body.pagina-feedback main > div > section.pt-4.grid > div:first-child,
  body.pagina-feedback main > div > section.pt-4.grid > div.relative {
    grid-area: 1 / 1;
  }
  body.pagina-feedback main > div > section.pt-4.grid > div:first-child {
    z-index: 1;
    align-self: end;
    min-height: 0;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    background-color: transparent;
  }
}
@media (min-width: 64rem) {
  body.pagina-feedback main > div > section.pt-4.grid > div:first-child {
    min-height: 0;
    overflow: hidden;
    padding-left: max(3rem, calc(100% - 40rem));
    padding-right: 3rem;
  }
}

/* Opiniile din PHP, grupate ca in prototip: card mare (7/12) + coloana laterala (5/12).
   Fiecare grup de 3 este un .lista-opinii-grup. */
body.pagina-feedback .lista-opinii {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
body.pagina-feedback .lista-opinii-grup {
  gap: 0;
}
body.pagina-feedback article.feedback {
  margin: 0;
  border-radius: 0;
  cursor: default;
  box-shadow: none !important;
}
body.pagina-feedback article.feedback .whole_quote {
  margin: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.pagina-feedback article.feedback p.opinie {
  margin: 0 0 2rem;
  font-family: var(--font-serif);
  font-style: normal;
  color: #1a2744;
  text-indent: 0;
  text-align: left;
}
body.pagina-feedback article.feedback--featured p.opinie {
  font-size: 1.5rem;
  line-height: 1.35;
  margin-bottom: 3rem;
}
@media (min-width: 48rem) {
  body.pagina-feedback article.feedback--featured p.opinie {
    font-size: 2.25rem;
  }
}
body.pagina-feedback article.feedback--side p.opinie {
  font-size: 1.25rem;
  line-height: 1.55;
  margin-bottom: 2rem;
}
body.pagina-feedback article.feedback .nume_pacient {
  margin: 0;
  padding: 0;
  font-weight: 500;
  color: #1a2744;
  background: transparent !important;
  border-radius: 0;
  box-shadow: none !important;
  cursor: default;
}
body.pagina-feedback article.feedback .nume_pacient p {
  margin: 0;
  text-align: left;
}
body.pagina-feedback article.feedback .data {
  width: auto;
  margin: 0.25rem 0 0;
  padding: 0;
  color: #8a8f9e;
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  border-radius: 0;
  box-shadow: none !important;
  cursor: default;
}
body.pagina-feedback article.feedback img.user_icon {
  border: 0.0625rem solid #e4e6eb;
  margin: 0;
  flex-shrink: 0;
}
body.pagina-feedback .feedback-side > article.feedback--side:last-child {
  border-bottom-width: 0;
}
body.pagina-feedback .lista-opinii svg.text-gold {
  color: #c9a96e;
  fill: currentColor;
}

/* Formularul din Site-exe/feedback-form-ro.html, inclus prin require. */
body.pagina-feedback div.feedback_form {
  display: block;
  height: auto;
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
}
body.pagina-feedback div.feedback_form form.form-horizontal {
  margin: 0;
}
body.pagina-feedback div.feedback_form fieldset.formulare {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}
body.pagina-feedback div.feedback_form legend {
  display: block;
  width: 100%;
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: #1a2744;
  line-height: 1.2;
}
body.pagina-feedback div.feedback_form .form-group {
  margin-bottom: 1.25rem;
}
body.pagina-feedback div.feedback_form label.control-label {
  display: block;
  float: none;
  width: auto;
  padding: 0;
  margin: 0 0 0.5rem;
  text-align: left;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8f9e;
  font-weight: 500;
}
body.pagina-feedback div.feedback_form label.control-label b {
  font-weight: 500;
}
body.pagina-feedback div.feedback_form .col-sm-3,
body.pagina-feedback div.feedback_form .col-sm-6 {
  float: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
body.pagina-feedback div.feedback_form input.inputc,
body.pagina-feedback div.feedback_form select.inputc,
body.pagina-feedback div.feedback_form textarea.inputc_area_text {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.875rem 1rem;
  border: 0.0625rem solid #e4e6eb;
  border-radius: 0;
  background-color: #ffffff;
  color: #1a2744;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease;
}
/* Select categorie: Bootstrap .form-control pune height fix care taie textul
   dupa appearance:none. height:auto + sageata SVG ca valoarea aleasa sa se vada. */
body.pagina-feedback div.feedback_form select.inputc {
  padding-right: 2.5rem;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a2744' d='M1.4 0.6L6 5.2L10.6 0.6L12 2L6 8L0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 0.75rem 0.5rem;
  color: #1a2744;
}
body.pagina-feedback div.feedback_form select.inputc option {
  color: #1a2744;
  background-color: #ffffff;
}
body.pagina-feedback div.feedback_form input.inputc:hover,
body.pagina-feedback div.feedback_form select.inputc:hover,
body.pagina-feedback div.feedback_form textarea.inputc_area_text:hover,
body.pagina-feedback div.feedback_form input.inputc:focus,
body.pagina-feedback div.feedback_form select.inputc:focus,
body.pagina-feedback div.feedback_form textarea.inputc_area_text:focus {
  border-color: #1a2744;
  outline: none;
  box-shadow: none;
}
body.pagina-feedback div.feedback_form textarea.inputc_area_text {
  min-height: 8rem;
  resize: vertical;
}
body.pagina-feedback div.feedback_form span.warning {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: #8a8f9e;
}
body.pagina-feedback div.feedback_form .form-group.warning span.warning {
  color: #9b3b3b;
}
body.pagina-feedback div.feedback_form input.inputb_reset,
body.pagina-feedback div.feedback_form input.inputb_submit {
  display: inline-block;
  width: auto;
  min-width: 10rem;
  margin: 0 0.75rem 0.5rem 0;
  padding: 0.9rem 1.25rem;
  border: 0;
  border-radius: 0.1875rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
body.pagina-feedback div.feedback_form input.inputb_submit {
  background-color: #1a2744;
  color: #ffffff;
}
body.pagina-feedback div.feedback_form input.inputb_submit:hover,
body.pagina-feedback div.feedback_form input.inputb_submit:focus {
  background-color: #243556;
  color: #ffffff;
}
body.pagina-feedback div.feedback_form input.inputb_reset {
  background-color: transparent;
  color: #1a2744;
  border: 0.0625rem solid #e4e6eb;
}
body.pagina-feedback div.feedback_form input.inputb_reset:hover,
body.pagina-feedback div.feedback_form input.inputb_reset:focus {
  border-color: #1a2744;
}
body.pagina-feedback div.legend {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #8a8f9e;
  line-height: 1.5;
}
body.pagina-feedback div.term_cond_content {
  float: none;
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border: 0.0625rem solid #e4e6eb;
  border-radius: 0;
  background: #faf9f7;
  font-size: 0.8125rem;
  color: #5c6578;
  line-height: 1.55;
}
body.pagina-feedback div.term_cond_content:empty {
  display: none;
}
html[data-theme="night"] body.pagina-feedback article.feedback--featured {
  background-color: #141c33;
}
html[data-theme="night"] body.pagina-feedback article.feedback--side {
  background-color: #10182b;
  border-color: #2a3550;
}
html[data-theme="night"] body.pagina-feedback article.feedback p.opinie,
html[data-theme="night"] body.pagina-feedback article.feedback .nume_pacient,
html[data-theme="night"] body.pagina-feedback article.feedback .nume_pacient p,
html[data-theme="night"] body.pagina-feedback div.feedback_form legend {
  color: #f3efe6;
}
html[data-theme="night"] body.pagina-feedback article.feedback .data {
  color: #b7bdc9;
}
/* background-color (nu background) ca sa nu stearga sageata SVG de pe select. */
html[data-theme="night"] body.pagina-feedback div.feedback_form input.inputc,
html[data-theme="night"] body.pagina-feedback div.feedback_form select.inputc,
html[data-theme="night"] body.pagina-feedback div.feedback_form textarea.inputc_area_text {
  background-color: #10182b;
  border-color: #2a3550;
  color: #f3efe6;
}
html[data-theme="night"] body.pagina-feedback div.feedback_form select.inputc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23f3efe6' d='M1.4 0.6L6 5.2L10.6 0.6L12 2L6 8L0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 0.75rem 0.5rem;
}
html[data-theme="night"] body.pagina-feedback div.feedback_form select.inputc option {
  color: #f3efe6;
  background-color: #10182b;
}
html[data-theme="night"] body.pagina-feedback div.term_cond_content {
  background: #141c33;
  border-color: #2a3550;
  color: #b7bdc9;
}

/* Pagina contact din Sandbox. Hero ca pe feedback; harta, listele,
   butoanele show/hide si formularul din #info_contact isi pastreaza
   markup-ul PHP; aspectul se scrie aici. */
body.pagina-contact {
  font-family: var(--font-sans);
}
body.pagina-contact main p {
  text-align: justify;
}
body.pagina-contact main p.text-xs,
body.pagina-contact main legend,
body.pagina-contact main .legend,
body.pagina-contact main ul.contact-list {
  text-align: left;
}
body.pagina-contact h1 {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
}
body.pagina-contact h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.1;
}
/* Hero. Acelasi tipar ca pe feedback/programari. */
body.pagina-contact main > div > section.pt-4.grid {
  padding-top: 0;
  grid-template-rows: calc(var(--spacing) * 80);
}
@media (max-width: 63.99rem) {
  body.pagina-contact main > div > section.pt-4.grid > div:first-child,
  body.pagina-contact main > div > section.pt-4.grid > div.relative {
    grid-area: 1 / 1;
  }
  body.pagina-contact main > div > section.pt-4.grid > div:first-child {
    z-index: 1;
    align-self: end;
    min-height: 0;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    background-color: transparent;
  }
}
@media (min-width: 64rem) {
  body.pagina-contact main > div > section.pt-4.grid > div:first-child {
    min-height: 0;
    overflow: hidden;
    padding-left: max(3rem, calc(100% - 40rem));
    padding-right: 3rem;
  }
}

body.pagina-contact ul.contact-list,
body.pagina-contact ul.standard_ul,
body.pagina-contact ul.standard_ul_phones {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
body.pagina-contact ul.contact-list li,
body.pagina-contact ul.standard_ul li,
body.pagina-contact ul.standard_ul_phones li {
  margin: 0 0 0.65rem;
  padding: 0;
  line-height: 1.5;
  color: #1a2744;
  font-size: 0.9375rem;
}
body.pagina-contact ul.contact-list .personal_leaf,
body.pagina-contact ul.standard_ul .personal_leaf,
body.pagina-contact ul.standard_ul_phones .personal_leaf {
  margin-right: 0.4rem;
  color: #c9a96e;
}
body.pagina-contact ul.contact-list a,
body.pagina-contact ul.standard_ul a {
  color: #1a2744;
  border-bottom: 0.0625rem solid #c9a96e;
  text-decoration: none;
}
body.pagina-contact ul.contact-list a:hover,
body.pagina-contact ul.standard_ul a:hover {
  color: #243556;
}

body.pagina-contact div.map {
  margin-top: 1rem;
}
body.pagina-contact span.map_img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 20rem;
  padding: 0;
  border: 0.0625rem solid #e4e6eb;
  border-radius: 0.1875rem;
  background-color: #faf9f7;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15),
              0 0.25rem 0.5rem rgba(0,0,0,0.10);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
body.pagina-contact span.map_img:hover{
  box-shadow: 0 1rem 2rem rgba(0,0,0,0.2),
              0 0.5rem 1rem rgba(0,0,0,0.15);
}
body.pagina-contact span.map_img:focus{
  box-shadow: 0 1rem 2rem rgba(0,0,0,0.2),
              0 0.5rem 1rem rgba(0,0,0,0.15);
}
body.pagina-contact iframe.map_img {
  width: 100%;
  min-height: 16rem;
  height: 20rem;
  border: 0;
}
body.pagina-contact input#map_button,
body.pagina-contact input.inputb#map_button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.9rem 1.25rem;
  border: 0;
  border-radius: 0.1875rem;
  background-color: #1a2744;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
body.pagina-contact input#map_button:hover,
body.pagina-contact input#map_button:focus {
  background-color: #243556;
  color: #ffffff;
}

body.pagina-contact div.contact_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  min-height: 0;
  height: auto;
}
body.pagina-contact div.show_contact_form_button,
body.pagina-contact div.hide_contact_form_button {
  display: inline-block;
  width: auto;
  min-width: 12rem;
  margin: 0;
  padding: 0.9rem 1.25rem;
  border: 0.0625rem solid #1a2744;
  border-radius: 0.1875rem;
  background-color: #1a2744;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body.pagina-contact div.show_contact_form_button {
  display: none;
  background-color: transparent;
  color: #1a2744;
  border-color: #c9a96e;
}
body.pagina-contact div.hide_contact_form_button {
  display: block;
}
body.pagina-contact div.show_contact_form_button:hover,
body.pagina-contact div.show_contact_form_button:focus {
  background-color: #faf9f7;
  color: #1a2744;
  border-color: #1a2744;
  box-shadow: none;
}
body.pagina-contact div.hide_contact_form_button:hover,
body.pagina-contact div.hide_contact_form_button:focus {
  background-color: #243556;
  color: #ffffff;
  box-shadow: none;
}
body.pagina-contact span.slide_up_down {
  float: none;
  margin-left: 0.5rem;
  position: static;
  color: #c9a96e;
}

body.pagina-contact div.conteiner_contact_form {
  height: auto;
  text-align: left;
}
body.pagina-contact div.info_contact {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}
body.pagina-contact div.info_contact form.form-horizontal {
  margin: 0;
}
body.pagina-contact div.info_contact fieldset.formulare {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}
body.pagina-contact div.info_contact legend {
  display: block;
  width: 100%;
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: #1a2744;
  line-height: 1.2;
}
body.pagina-contact div.info_contact .form-group {
  margin-bottom: 1.25rem;
}
body.pagina-contact div.info_contact label.control-label {
  display: block;
  float: none;
  width: auto;
  padding: 0;
  margin: 0 0 0.5rem;
  text-align: left;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8f9e;
  font-weight: 500;
}
body.pagina-contact div.info_contact label.control-label b {
  font-weight: 500;
}
body.pagina-contact div.info_contact .col-sm-2,
body.pagina-contact div.info_contact .col-sm-4,
body.pagina-contact div.info_contact .col-sm-6 {
  float: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
body.pagina-contact div.info_contact input.inputc,
body.pagina-contact div.info_contact select.inputc,
body.pagina-contact div.info_contact textarea.inputc_area_text {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0.875rem 1rem;
  border: 0.0625rem solid #e4e6eb;
  border-radius: 0;
  background: #ffffff;
  color: #1a2744;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease;
}
body.pagina-contact div.info_contact input.inputc:hover,
body.pagina-contact div.info_contact select.inputc:hover,
body.pagina-contact div.info_contact textarea.inputc_area_text:hover,
body.pagina-contact div.info_contact input.inputc:focus,
body.pagina-contact div.info_contact select.inputc:focus,
body.pagina-contact div.info_contact textarea.inputc_area_text:focus {
  border-color: #1a2744;
  outline: none;
  box-shadow: none;
}
body.pagina-contact div.info_contact textarea.inputc_area_text {
  min-height: 8rem;
  resize: vertical;
}
body.pagina-contact div.info_contact span.warning {
  display: none;
  float: none;
  width: auto;
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  font-size: 0.75rem;
  font-weight: 400;
  color: #8a8f9e;
}
body.pagina-contact div.info_contact .form-group.warning span.warning {
  display: block;
  color: #9b3b3b;
}
body.pagina-contact div.info_contact input.inputb_reset,
body.pagina-contact div.info_contact input.inputb_submit {
  display: inline-block;
  width: auto;
  min-width: 10rem;
  margin: 0 0.75rem 0.5rem 0;
  padding: 0.9rem 1.25rem;
  border: 0;
  border-radius: 0.1875rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
body.pagina-contact div.info_contact input.inputb_submit {
  background-color: #1a2744;
  color: #ffffff;
}
body.pagina-contact div.info_contact input.inputb_submit:hover,
body.pagina-contact div.info_contact input.inputb_submit:focus {
  background-color: #243556;
  color: #ffffff;
}
body.pagina-contact div.info_contact input.inputb_reset {
  background-color: transparent;
  color: #1a2744;
  border: 0.0625rem solid #e4e6eb;
}
body.pagina-contact div.info_contact input.inputb_reset:hover,
body.pagina-contact div.info_contact input.inputb_reset:focus {
  border-color: #1a2744;
}
body.pagina-contact div.legend {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #8a8f9e;
  line-height: 1.5;
}
body.pagina-contact div.legend a {
  color: #1a2744;
  border-bottom: 0.0625rem solid #c9a96e;
  text-decoration: none;
}

html[data-theme="night"] body.pagina-contact ul.contact-list li,
html[data-theme="night"] body.pagina-contact ul.standard_ul li,
html[data-theme="night"] body.pagina-contact ul.standard_ul_phones li,
html[data-theme="night"] body.pagina-contact div.info_contact legend,
html[data-theme="night"] body.pagina-contact ul.contact-list a,
html[data-theme="night"] body.pagina-contact ul.standard_ul a,
html[data-theme="night"] body.pagina-contact div.legend a {
  color: #f3efe6;
}
html[data-theme="night"] body.pagina-contact span.map_img {
  background-color: #141c33;
  border-color: #2a3550;
}
html[data-theme="night"] body.pagina-contact div.show_contact_form_button {
  background-color: transparent;
  color: #f3efe6;
  border-color: #c9a96e;
}
html[data-theme="night"] body.pagina-contact div.hide_contact_form_button {
  background-color: #243556;
  border-color: #243556;
  color: #f3efe6;
}
html[data-theme="night"] body.pagina-contact div.info_contact input.inputc,
html[data-theme="night"] body.pagina-contact div.info_contact select.inputc,
html[data-theme="night"] body.pagina-contact div.info_contact textarea.inputc_area_text {
  background: #10182b;
  border-color: #2a3550;
  color: #f3efe6;
}
html[data-theme="night"] body.pagina-contact div.info_contact input.inputb_reset {
  color: #f3efe6;
  border-color: #2a3550;
}
html[data-theme="night"] body.pagina-contact div.legend {
  color: #b7bdc9;
}

/* Blog. Paragrafele din div.bg-ivory se aliniaza ca pe feedback.
   Blocurile .text-center raman centrate. Utilitarul .text-gold sta
   in @layer utilities si pierde in fata culorii mostenite de em,
   deci aurul din h1 se scrie aici, ne-stratificat.
   Pagina negasita nu primeste justify: continutul 404 ramane centrat. */
body.pagina-blog div.bg-ivory p {
  text-align: justify;
  hyphens: auto;
}
body.pagina-blog div.bg-ivory div.text-center p,
body.pagina-blog div.bg-ivory p.text-center {
  text-align: center;
  hyphens: manual;
}
body.pagina-blog em.text-gold {
  color: #c9a96e;
}
/* Numerele din articole, pe ivoriu. #c9a96e este 2.13:1. #8a6230 ramane aur
   si urca la 5.16:1. Doar span.font-serif: em din titlu si eticheta de pe
   banda navy raman #c9a96e. Noaptea le readuce regula de mai sus. */
body.pagina-blog span.font-serif.text-gold {
  color: #8a6230;
}

/* Etichetele raman la stanga. Citatul scurt (p.font-serif, inclusiv banda navy)
   ramane la stanga: este o replica, nu un paragraf de rand.
   Fraza de sub titlu este p.text-muted si intra in justify-ul de mai sus,
   ca hero-ul de la servicii. Nota cu text-center isi pastreaza centrarea. */
body.pagina-blog div.bg-ivory p.text-xs:not(.text-center),
body.pagina-blog div.bg-ivory p.font-serif {
  text-align: left;
  hyphens: manual;
}

/* Stelele de la recenzii, pe #faf9f7. Aceeasi adancire ca numerele din blog.
   Doar cele cinci svg din #testimonials. Noaptea fill-ul revine la #c9a96e. */
body.pagina-acasa #testimonials svg[fill="#c9a96e"] {
  fill: #8a6230;
}

/* Homepage: meniurile raman barele comune (fundal --varSurface, bordura
   --varHairline, text --varNavy). Hero-ul incepe sub meniul principal,
   nu pe sub el. Rollback: Sandbox/_backup_hero_split_20261027_1649/ */

/* Hero pe doua coloane, sub meniul principal. Textul din stanga
   foloseste aceeasi margine ca .max-w-7xl din sectiunile urmatoare.
   Fotografia ocupa doar jumatatea dreapta a paginii; object-position
   pastreaza jumatatea dreapta a cadrului, cu medicul in centru. */
body.pagina-acasa .hero-fullbleed {
  display: grid;
  grid-template-columns: 1fr;
  background: transparent;
  /* Acelasi gol ca section.pt-16 de pe stomatologie-implantologie.php. */
  margin-top: calc(var(--spacing) * 16);
}
body.pagina-acasa .hero-fullbleed__panel {
  background-color: transparent;
  align-items: center;
  width: auto;
  min-height: 0;
  padding: 3.25rem 2rem 3.5rem;
}
body.pagina-acasa .hero-fullbleed__logo,
body.pagina-acasa .hero-fullbleed__copy,
body.pagina-acasa .hero-fullbleed__doctor-name {
  background-color: transparent;
}
body.pagina-acasa .hero-fullbleed__logo {
  width: fit-content;
}
/* Numele medicului = aceeasi tipografie ca h1 (CSS ne-stratificat bate Bootstrap p). */
body.pagina-acasa .hero-fullbleed__doctor-name p,
body.pagina-acasa .hero-fullbleed__doctor-name .moto {
  font-family: var(--font-serif);
  font-size: clamp(2.15rem, 3.4vw, 3.25rem);
  line-height: 1.06;
  color: #1a2744;
  margin: 0;
}
body.pagina-acasa .logo-icon-float img {
  animation: none;
}
body.pagina-acasa .logo-icon-float:hover,
body.pagina-acasa .logo-icon-float:focus-visible {
  transform: none;
}
body.pagina-acasa p.hero-fullbleed__eyebrow {
  color: #6b8f71;
  font-weight: 700;
}
body.pagina-acasa .hero-fullbleed__copy h1,
body.pagina-acasa .hero-fullbleed__copy h1 .moto {
  color: #1a2744;
}
body.pagina-acasa .hero-fullbleed__lead {
  color: #5c6578;
}
/* Justify-ul de pe div.min-h-screen p imprastie fraza scurta din hero. */
body.pagina-acasa .hero-fullbleed__panel p,
body.pagina-acasa .hero-fullbleed__panel h1,
body.pagina-acasa .hero-fullbleed__panel span,
body.pagina-acasa .hero-fullbleed__panel a {
  text-align: left;
  hyphens: manual;
}
/* Bootstrap a { color } este ne-stratificat si acopera utilitarele Tailwind. */
body.pagina-acasa a.hero-fullbleed__btn-primary,
body.pagina-acasa a.hero-fullbleed__btn-primary:link,
body.pagina-acasa a.hero-fullbleed__btn-primary:visited,
body.pagina-acasa a.hero-fullbleed__btn-primary:active {
  background-color: #1a2744;
  color: #ffffff;
  text-decoration: none;
  border-radius: 0.1875rem;
}
body.pagina-acasa a.hero-fullbleed__btn-primary:hover {
  background-color: #243258;
  color: #ffffff;
}
body.pagina-acasa a.hero-fullbleed__btn-secondary,
body.pagina-acasa a.hero-fullbleed__btn-secondary:link,
body.pagina-acasa a.hero-fullbleed__btn-secondary:visited,
body.pagina-acasa a.hero-fullbleed__btn-secondary:active {
  color: #1a2744;
  background-color: transparent;
  border-color: rgba(26, 39, 68, 0.28);
  text-decoration: none;
  border-radius: 0.1875rem;
}
body.pagina-acasa a.hero-fullbleed__btn-secondary:hover {
  background-color: #1a2744;
  border-color: #1a2744;
  color: #ffffff;
}
body.pagina-acasa .hero-fullbleed__stats {
  border-top: 1px solid #e4e6eb;
}
body.pagina-acasa .hero-fullbleed__stats > div {
  border-color: #e4e6eb;
}
body.pagina-acasa .hero-fullbleed__stat-num {
  color: #1a2744;
}
body.pagina-acasa .hero-fullbleed__stat-label {
  color: #5c6578;
}
body.pagina-acasa .hero-fullbleed__stage {
  position: relative;
  overflow: hidden;
  min-height: 58vh;
  background-color: #1a2744;
}
/* Coloana e jumatatea dreapta a paginii. object-position tine medicul
   in centrul ei: el sta in jumatatea dreapta a fotografiei. */
body.pagina-acasa .hero-fullbleed__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 78% 34%;
  animation: none;
}
body.pagina-acasa .hero-fullbleed__availability {
  display: none;
}
body.pagina-acasa .hero-fullbleed__availability,
html[data-theme="night"] body.pagina-acasa .hero-fullbleed__availability {
  background-color: #faf9f7;
  color: #1a2744;
}
body.pagina-acasa .hero-fullbleed__availability span {
  color: #1a2744;
}
body.pagina-acasa .hero-fullbleed__availability p {
  color: #5c6578;
}

@media (min-width: 768px) {
  body.pagina-acasa .hero-fullbleed__panel {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (min-width: 992px) {
  body.pagina-acasa .hero-fullbleed {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: calc(100vh - var(--varTopBarHeight) - var(--varMenuHeight));
    align-items: stretch;
  }
  body.pagina-acasa .hero-fullbleed__panel {
    /* 100% este jumatatea paginii; 40rem este jumatate din max-w-7xl.
       Marginea stanga coincide cu sectiunile .px-8.md:px-12 > .max-w-7xl. */
    padding-left: max(3rem, calc(100% - 40rem));
    padding-right: 2.5rem;
  }
  body.pagina-acasa .hero-fullbleed__stage {
    min-height: 100%;
  }
  body.pagina-acasa .hero-fullbleed__stage::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background-color: #c9a96e;
    z-index: 2;
  }
  body.pagina-acasa .hero-fullbleed__availability {
    display: block;
  }
}

html[data-theme="night"] body.pagina-acasa .hero-fullbleed__doctor-name p,
html[data-theme="night"] body.pagina-acasa .hero-fullbleed__doctor-name .moto,
html[data-theme="night"] body.pagina-acasa .hero-fullbleed__copy h1,
html[data-theme="night"] body.pagina-acasa .hero-fullbleed__copy h1 .moto,
html[data-theme="night"] body.pagina-acasa .hero-fullbleed__stat-num {
  color: #faf9f7;
}
html[data-theme="night"] body.pagina-acasa .hero-fullbleed__lead,
html[data-theme="night"] body.pagina-acasa .hero-fullbleed__stat-label {
  color: #c5c9d4;
}
html[data-theme="night"] body.pagina-acasa a.hero-fullbleed__btn-secondary,
html[data-theme="night"] body.pagina-acasa a.hero-fullbleed__btn-secondary:link,
html[data-theme="night"] body.pagina-acasa a.hero-fullbleed__btn-secondary:visited,
html[data-theme="night"] body.pagina-acasa a.hero-fullbleed__btn-secondary:active {
  color: #faf9f7;
  border-color: rgba(250, 249, 247, 0.35);
  background-color: transparent;
}
html[data-theme="night"] body.pagina-acasa a.hero-fullbleed__btn-secondary:hover {
  background-color: #faf9f7;
  color: #1a2744;
}
html[data-theme="night"] body.pagina-acasa .hero-fullbleed__stats,
html[data-theme="night"] body.pagina-acasa .hero-fullbleed__stats > div {
  border-color: rgba(250, 249, 247, 0.22);
}

/* Galerie foto: implantology.php, cystectomy.php, zirconium-crowns.php,
   chronic-gingivitis.php. Butoanele de imagine, filtrele de pe Chir_1
   si fondul locurilor rezervate. */
.mt-0\.5 {
  margin-top: 0.125rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
body.pagina-galerie button[data-open-image],
body.pagina-galerie #lightbox-close {
  border-radius: 0;
  font-family: inherit;
}
body.pagina-galerie #clinical-unlock {
  font-family: inherit;
}
body.pagina-galerie button[data-open-image] {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
body.pagina-galerie button[data-open-image] img,
body.pagina-galerie #lightbox-image {
  max-width: none;
  width: 100%;
  height: 100%;
}
body.pagina-galerie button[data-open-image] img {
  object-fit: cover;
}
body.pagina-galerie #lightbox-image {
  object-fit: contain;
}
body.pagina-galerie .pg-placeholder-shade {
  background-image:
    radial-gradient(circle at 35% 30%, rgba(107, 143, 113, 0.22), transparent 45%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 60%);
}
body.pagina-galerie .pg-tone-1 {
  filter: brightness(1.18) contrast(1.08) saturate(0.82);
}
body.pagina-galerie .pg-tone-2 {
  filter: brightness(1.2) contrast(1.1) saturate(0.8);
}
body.pagina-galerie .pg-tone-3 {
  filter: brightness(1.15) contrast(1.06) saturate(0.85);
}
body.pagina-galerie .pg-tone-4 {
  filter: brightness(1.22) contrast(1.08) saturate(0.78);
}
body.pagina-galerie .pg-tone-5 {
  filter: brightness(1.18) contrast(1.1) saturate(0.8);
}
body.pagina-galerie #clinical-unlock {
  border: 0;
  cursor: pointer;
}
/* Textul alb de pe butoane si de pe fotografii se scrie ne-stratificat.
   Bootstrap pune color: inherit pe button, h1 si a, in afara @layer,
   si bate clasele text-white. */
body.pagina-galerie #clinical-unlock,
body.pagina-galerie #clinical-unlock:link,
body.pagina-galerie #clinical-unlock:visited,
body.pagina-galerie #clinical-unlock:active,
body.pagina-galerie #clinical-unlock:hover {
  color: #ffffff;
  background-color: #1a2744;
}
body.pagina-galerie #clinical-unlock:hover {
  background-color: #243258;
}
body.pagina-galerie a.bg-navy,
body.pagina-galerie a.bg-navy:link,
body.pagina-galerie a.bg-navy:visited,
body.pagina-galerie a.bg-navy:active,
body.pagina-galerie a.bg-navy:hover {
  color: #ffffff;
  background-color: #1a2744;
  text-decoration: none;
}
body.pagina-galerie a.bg-navy:hover {
  background-color: #243258;
}
body.pagina-galerie button[data-open-image] p,
body.pagina-galerie button[data-open-image] span,
body.pagina-galerie .bg-navy p,
body.pagina-galerie .bg-navy span {
  color: #ffffff;
}
@media (min-width: 993px) {
  .w3-show-large {
    display: block;
  }
}

/* Prima sectiune, dupa meniu, este pe doua coloane de la 64rem.
   Textul porneste de la aceeasi margine ca sectiunile de servicii:
   padding px-6 md:px-12 pe section, apoi max-w-7xl centrat.
   40rem este jumatate din max-w-7xl. 100% este latimea coloanei,
   nu a ferestrei, ca bara de scroll sa nu o mute. */
@media (min-width: 64rem) {
  body.pagina-galerie .galerie-intro {
    padding-left: max(3rem, calc(100% - 40rem));
  }
  /* Paginile de servicii. Coloana are px-6 md:px-12 ca .galerie-intro,
     dar pe jumatate de rand textul tot ar sta mai la stanga decat
     max-w-7xl. 100% este jumatatea coloanei, 40rem este jumatate din
     max-w-7xl. */
  body.pagina-implantologie main section.pt-4.grid > div:first-child,
  body.pagina-parodontologie main section.pt-4.grid > div:first-child,
  body.pagina-protetica main section.pt-4.grid > div:first-child,
  body.pagina-terapie main section.pt-4.grid > div:first-child {
    padding-left: max(3rem, calc(100% - 40rem));
  }
}

/* Ultima sectiune inainte de footer. text-center din @layer pierde
   in fata regulii de aici. Eticheta scurta ramane la stanga,
   ca pe paginile de servicii. */
body.pagina-galerie section.bg-sage-light p,
body.pagina-galerie section.bg-sage-light h2 {
  text-align: justify;
  hyphens: auto;
}
body.pagina-galerie section.bg-sage-light p.text-xs {
  text-align: left;
  hyphens: manual;
}

/* Paragrafele de rand, ca pe paginile de servicii.
   pagina-rand sta pe body-ul galeriilor romanesti, al gingivitei si al zirconiului.
   Engleza si cystectomy au doar pagina-galerie si raman neschimbate.
   Ca la implantologie: main p este justify, inclusiv p.text-2xl si p.font-serif.
   Exceptie doar etichetele text-xs, indiciul benzii si randurile scurte de linkuri.
   Linkul "Galerie foto implantologie" este p.mt-4 cu o singura ancora.
   Nu se pune stanga pe orice p.mt-4: un paragraf de rand cu mt-4 ramane intins.
   Titlul din ultima sectiune sta centrat. */
body.pagina-galerie.pagina-rand main p {
  text-align: justify;
}
body.pagina-galerie.pagina-rand main p.text-xs,
body.pagina-galerie.pagina-rand main p.caz-fir-indiciu,
body.pagina-galerie.pagina-rand main p.caz-antet-numar,
body.pagina-galerie.pagina-rand main p.flex,
body.pagina-galerie.pagina-rand main p.mt-10,
body.pagina-galerie.pagina-rand main p.mt-4:has(> a[href="galerie-foto-implantologie"]) {
  text-align: left;
  hyphens: manual;
}
body.pagina-galerie.pagina-rand section.bg-sage-light h2 {
  text-align: center;
  hyphens: manual;
}

/* Titlul de caz si numarul de fotografii, pe aceeasi latime cu banda.
   Grila lg:col-span lasa numarul la mijloc (4+3 din 12), iar lg:text-right
   pierde in fata lui text-align:left de pe p.text-xs.
   h3 din Bootstrap este 24px si bate text-3xl din @layer. */
body.pagina-galerie .caz-antet {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-bottom: 1.5rem;
}
body.pagina-galerie .caz-antet h3 {
  flex: 1 1 16rem;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 1.25;
}
body.pagina-galerie .caz-antet p {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5c6578;
}
html[data-theme="night"] body.pagina-galerie .caz-antet p {
  color: #c5c9d4;
}

/* Cazul de implantologie: toate fotografiile, nu doar trei.
   Pe ecran lat stau intr-un mozaic. Pe telefon sunt o banda cu tragere.
   Prima poza este mai mare doar de la 993px in sus. */
body.pagina-galerie .caz-fir-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
body.pagina-galerie .caz-fir-inapoi,
body.pagina-galerie .caz-fir-inainte {
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  border: 1px solid #1a2744;
  background: #ffffff;
  color: #1a2744;
  font-size: 1.75rem;
  line-height: 1;
}
body.pagina-galerie .caz-fir-indiciu {
  flex: 1 1 auto;
  margin: 0;
  color: #5c6578;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
body.pagina-galerie .caz-fir-poze {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.25rem;
}
body.pagina-galerie .caz-fir-cadru {
  position: relative;
  flex: 0 0 78%;
  min-height: 70vw;
  /* overflow: hidden din Tailwind sta in @layer si pierde.
     Pe chronic-gingivitis butonul ramane overflow visible, iar poza iese din val. */
  overflow: visible;
  scroll-snap-align: start;
  background: #e8f0e9;
  border: 0;
  padding: 0;
  text-align: left;
  color: #ffffff;
}
body.pagina-galerie .caz-fir-cadru img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* Valul ramane cat cadrul. Clasele de pe span fac degradeul, ca pe paginile noi.
   group-hover:scale-105 mareste poza peste el. */
body.pagina-galerie .caz-fir-val {
  z-index: 1;
  pointer-events: none;
}
@media (hover: hover) {
  body.pagina-galerie .caz-fir-cadru:hover,
  body.pagina-galerie .caz-fir-cadru:focus-visible {
    z-index: 3;
  }
}
body.pagina-galerie .caz-fir-legenda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  background: transparent;
  color: #ffffff;
}
body.pagina-galerie .caz-fir-pas,
body.pagina-galerie .caz-fir-titlu {
  color: #ffffff;
}
body.pagina-galerie .caz-fir-pas {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.pagina-galerie .caz-fir-titlu {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.2;
}
body.pagina-galerie ul.standard_ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  text-align: left;
}
body.pagina-galerie ul.standard_ul li {
  margin: 0.35rem 0;
}
/* Bara aurie dinaintea itemilor din lista, ca la pagina de servicii.
   Span-ul .bg-[#c9a96e]/70 vine din textul tabelei prob_frecv_stoma_gingivita.
   Fiind inline, dimensiunile w-1/h-4 nu se vedeau; inline-block le face vizibile
   si aseaza bara langa text, cu acelasi spatiu ca gap-3 (0.75rem) de la servicii. */
body.pagina-galerie ul.standard_ul li span.bg-\[\#c9a96e\]\/70 {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.75rem;
}
@media (min-width: 993px) {
  body.pagina-galerie .caz-fir-nav {
    display: none;
  }
  body.pagina-galerie .caz-fir-poze {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    overflow: visible;
  }
  body.pagina-galerie .caz-fir-cadru,
  body.pagina-galerie .caz-fir-cadru:first-child {
    flex: none;
    min-height: 16rem;
    scroll-snap-align: none;
  }
  body.pagina-galerie .caz-fir-cadru:first-child {
    grid-column: span 2;
    min-height: 24rem;
  }
}
body.pagina-galerie #lightbox-prev,
body.pagina-galerie #lightbox-next {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  margin-top: -1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(26, 39, 68, 0.45);
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
}
body.pagina-galerie #lightbox-prev { left: 0.75rem; }
body.pagina-galerie #lightbox-next { right: 0.75rem; }
body.pagina-galerie #lightbox-pozitie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.75rem;
  margin: 0;
  text-align: center;
  color: #ffffff;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
}
/* Cadrul deschis la click pe o fotografie de caz.
   Fundalul, poza si butoanele iau forma cadrului nou: navy pe tot ecranul,
   fotografia mare, sageata patrata semitransparenta, inchiderea intr-un cerc.
   Regulile stau doar pe body.pagina-galerie, ca paginile vechi sa isi pastreze panoul de 592px.
   get_photo, next_photo si previous_photo raman neschimbate. */
body.pagina-galerie div.background_gal_pannel {
  background-color: rgba(26, 39, 68, 0.95);
  opacity: 1;
  border: 0;
  z-index: 79;
}
body.pagina-galerie div.gal_pannel {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 2.5rem 1.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  z-index: 80;
  cursor: auto;
  align-items: center;
  justify-content: center;
  gap: 0;
}
/* Randul tine doar fotografia si coloana de text, lipite, inalte cat poza. */
body.pagina-galerie div.gal_pannel .gal-rand {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: max-content;
  max-width: calc(100% - 1rem);
  margin: 0;
}
body.pagina-galerie div.gal_pannel .gal-poza {
  position: relative;
  flex: 0 0 auto;
  line-height: 1;
}
body.pagina-galerie div.gal_pannel img.img_gal {
  flex: 0 0 auto;
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 20rem);
  max-height: calc(100vh - 6rem);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  cursor: auto;
}
/* Pe calculator fotografia deschisa are inaltimea cadrului nou: 75% din ecran.
   Latimea urmeaza proportia pozei, iar caseta ramane cat imaginea marita. */
@media (min-width: 993px) {
  body.pagina-galerie div.gal_pannel img.img_gal {
    width: auto;
    height: 75vh;
    max-height: 75vh;
    max-width: calc(100vw - 22rem);
  }
}
body.pagina-galerie div.gal_pannel div.bottom {
  position: static;
  top: auto;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
}
/* Sagetile stau in interiorul fotografiei. Cercul de inchidere sta in afara ei. */
body.pagina-galerie div.gal_pannel .gal-poza div.left,
body.pagina-galerie div.gal_pannel .gal-poza div.right {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 3rem;
  height: 3rem;
  margin-top: -1.5rem;
  left: auto;
  right: auto;
}
body.pagina-galerie div.gal_pannel .gal-poza div.left {
  left: 0.75rem;
}
body.pagina-galerie div.gal_pannel .gal-poza div.right {
  right: 0.75rem;
}
body.pagina-galerie div.gal_pannel .gal-rand div.inchide {
  position: absolute;
  top: -1.35rem;
  right: -1.35rem;
  left: auto;
  z-index: 5;
  width: auto;
  height: auto;
  padding: 0;
  float: none;
}
body.pagina-galerie div.gal_pannel button.inputb_gal,
body.pagina-galerie div.gal_pannel button.disabled,
body.pagina-galerie div.gal_pannel button.inputb_gal_close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0;
  background: rgba(26, 39, 68, 0.45);
  color: #ffffff;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}
body.pagina-galerie div.gal_pannel button.inputb_gal_close {
  border-radius: 999px;
  border-color: #faf9f7;
  background: #faf9f7;
  color: #1a2744;
  font-size: 1.5rem;
}
body.pagina-galerie div.gal_pannel button.disabled {
  opacity: 0.35;
}
body.pagina-galerie div.gal_pannel button.inputb_gal:hover,
body.pagina-galerie div.gal_pannel button.inputb_gal_close:hover {
  background: rgba(26, 39, 68, 0.72);
  color: #ffffff;
}
body.pagina-galerie div.gal_pannel button .glyphicon {
  display: none;
}
body.pagina-galerie div.gal_pannel div.left button::before {
  content: "\2039";
}
body.pagina-galerie div.gal_pannel div.right button::before {
  content: "\203A";
}
body.pagina-galerie div.gal_pannel button.inputb_gal_close::before {
  content: "\00D7";
}
body.pagina-galerie div.gal_pannel .gal-detaliu {
  flex: 0 0 18rem;
  width: 18rem;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  margin: 0;
  padding: 1.15rem 1.35rem;
  overflow: auto;
  background: #faf9f7;
  color: #1a2744;
}
body.pagina-galerie div.gal_pannel .gal-detaliu-eticheta,
body.pagina-galerie div.gal_pannel .gal-detaliu-pas {
  margin: 0 0 0.75rem;
  color: #7d8c6e;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.pagina-galerie div.gal_pannel .gal-detaliu-titlu {
  margin: 0 0 1rem;
  color: #1a2744;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1.15;
}
body.pagina-galerie div.gal_pannel .gal-detaliu-info {
  margin: 0;
  color: #5c6578;
  font-size: 0.875rem;
  line-height: 1.5;
}
@media (max-width: 992px) {
  body.pagina-galerie div.gal_pannel {
    padding: 4.75rem 0.75rem 1.25rem;
  }
  body.pagina-galerie div.gal_pannel .gal-rand {
    flex-direction: column;
    width: max-content;
    max-width: 100%;
  }
  body.pagina-galerie div.gal_pannel .gal-poza {
    width: auto;
    max-width: 100%;
  }
  body.pagina-galerie div.gal_pannel img.img_gal {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 54vh;
  }
  body.pagina-galerie div.gal_pannel .gal-detaliu {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    max-height: 28vh;
  }
  body.pagina-galerie div.gal_pannel .gal-poza div.left {
    left: 0.45rem;
  }
  body.pagina-galerie div.gal_pannel .gal-poza div.right {
    right: 0.45rem;
  }
  body.pagina-galerie div.gal_pannel .gal-rand div.inchide {
    top: -3.4rem;
    right: 0;
  }
}

/* Butoanele a.bg-navy de pe paginile de serviciu.
   text-white sta in @layer si pierde in fata lui a { color: inherit }.
   Culoarea se scrie ne-stratificat, pe toate starile linkului. */
body.pagina-implantologie a.bg-navy,
body.pagina-implantologie a.bg-navy:link,
body.pagina-implantologie a.bg-navy:visited,
body.pagina-implantologie a.bg-navy:hover,
body.pagina-implantologie a.bg-navy:active,
body.pagina-implantologie a.bg-navy:focus,
body.pagina-parodontologie a.bg-navy,
body.pagina-parodontologie a.bg-navy:link,
body.pagina-parodontologie a.bg-navy:visited,
body.pagina-parodontologie a.bg-navy:hover,
body.pagina-parodontologie a.bg-navy:active,
body.pagina-parodontologie a.bg-navy:focus,
body.pagina-protetica a.bg-navy,
body.pagina-protetica a.bg-navy:link,
body.pagina-protetica a.bg-navy:visited,
body.pagina-protetica a.bg-navy:hover,
body.pagina-protetica a.bg-navy:active,
body.pagina-protetica a.bg-navy:focus,
body.pagina-terapie a.bg-navy,
body.pagina-terapie a.bg-navy:link,
body.pagina-terapie a.bg-navy:visited,
body.pagina-terapie a.bg-navy:hover,
body.pagina-terapie a.bg-navy:active,
body.pagina-terapie a.bg-navy:focus {
  color: #ffffff;
  background-color: #1a2744;
  text-decoration: none;
}
body.pagina-implantologie a.bg-navy:hover,
body.pagina-implantologie a.bg-navy:focus,
body.pagina-parodontologie a.bg-navy:hover,
body.pagina-parodontologie a.bg-navy:focus,
body.pagina-protetica a.bg-navy:hover,
body.pagina-protetica a.bg-navy:focus,
body.pagina-terapie a.bg-navy:hover,
body.pagina-terapie a.bg-navy:focus {
  color: #ffffff;
  background-color: #243258;
  text-decoration: none;
}

/* Aurul #c9a96e pe fond deschis este 2.13:1. #966E2E pe ivoriu este 4.37:1,
   sub 4.5:1, deci textul de pe fond deschis este navy. Pe banda navy aurul ramane. */
body.pagina-implantologie .text-gold,
body.pagina-parodontologie .text-gold,
body.pagina-protetica .text-gold,
body.pagina-terapie .text-gold,
body.pagina-galerie .text-gold {
  color: #1a2744;
}
body.pagina-implantologie .bg-navy .text-gold,
body.pagina-parodontologie .bg-navy .text-gold,
body.pagina-protetica .bg-navy .text-gold,
body.pagina-terapie .bg-navy .text-gold,
body.pagina-galerie .bg-navy .text-gold {
  color: #c9a96e;
}

/* Linkul Vezi cazuri: Bootstrap a:hover il face albastru. */
body.pagina-implantologie a.link-cazuri,
body.pagina-implantologie a.link-cazuri:link,
body.pagina-implantologie a.link-cazuri:visited,
body.pagina-implantologie a.link-cazuri:hover,
body.pagina-implantologie a.link-cazuri:active,
body.pagina-implantologie a.link-cazuri:focus,
body.pagina-parodontologie a.link-cazuri,
body.pagina-parodontologie a.link-cazuri:link,
body.pagina-parodontologie a.link-cazuri:visited,
body.pagina-parodontologie a.link-cazuri:hover,
body.pagina-parodontologie a.link-cazuri:active,
body.pagina-parodontologie a.link-cazuri:focus,
body.pagina-protetica a.link-cazuri,
body.pagina-protetica a.link-cazuri:link,
body.pagina-protetica a.link-cazuri:visited,
body.pagina-protetica a.link-cazuri:hover,
body.pagina-protetica a.link-cazuri:active,
body.pagina-protetica a.link-cazuri:focus,
body.pagina-terapie a.link-cazuri,
body.pagina-terapie a.link-cazuri:link,
body.pagina-terapie a.link-cazuri:visited,
body.pagina-terapie a.link-cazuri:hover,
body.pagina-terapie a.link-cazuri:active,
body.pagina-terapie a.link-cazuri:focus {
  color: #1a2744;
  background-color: transparent;
  text-decoration: none;
}

/* Colturile de 3px, ca la butoanele din stomatologie.php.
   Meniul, sagetile de galerie si butoanele de pe fotografii raman drepte. */
body:not(.pagina-acasa) a.inline-flex.justify-center,
body:not(.pagina-acasa) a.inline-flex.bg-navy,
body:not(.pagina-acasa) #clinical-unlock {
  border-radius: 3px;
}

/* Telefonul din sectiunea de contact a paginii principale. */
body.pagina-acasa #contact a[href^="tel:"],
body.pagina-acasa #contact a[href^="tel:"]:link,
body.pagina-acasa #contact a[href^="tel:"]:visited,
body.pagina-acasa #contact a[href^="tel:"]:hover,
body.pagina-acasa #contact a[href^="tel:"]:active,
body.pagina-acasa #contact a[href^="tel:"]:focus {
  color: #1a2744;
  text-decoration: none;
}


@media (max-width: 767px) {
  /* Randul de cifre din hero are latime minima ~366px. Cu padding-ul
     panoului, pagina ajunge la 430px si bara de sus se intinde la fel.
     Doar sub 768px. Desktop ramane neschimbat. */
  body.pagina-acasa .hero-fullbleed,
  body.pagina-acasa .hero-fullbleed__panel,
  body.pagina-acasa .hero-fullbleed__stage,
  div.menu-bar-top,
  div.menu-bar-top > div.w3-bar {
    max-width: 100%;
    min-width: 0;
  }
  body.pagina-acasa .hero-fullbleed__panel {
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }
  body.pagina-acasa .hero-fullbleed__stats {
    width: 100%;
    min-width: 0;
  }
  body.pagina-acasa .hero-fullbleed__stats > div {
    min-width: 0;
    flex: 1 1 0;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
  /* Hero-ul de serviciu: butonul Vezi cazuri ramane deasupra barei. */
  body.pagina-implantologie main section.grid,
  body.pagina-parodontologie main section.grid,
  body.pagina-protetica main section.grid,
  body.pagina-terapie main section.grid {
    padding-top: 0.5rem;
    min-height: 0;
  }
  body.pagina-implantologie main section.grid > div:first-child,
  body.pagina-parodontologie main section.grid > div:first-child,
  body.pagina-protetica main section.grid > div:first-child,
  body.pagina-terapie main section.grid > div:first-child {
    justify-content: flex-start;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  body.pagina-implantologie main section.grid > div:first-child h1,
  body.pagina-parodontologie main section.grid > div:first-child h1,
  body.pagina-protetica main section.grid > div:first-child h1,
  body.pagina-terapie main section.grid > div:first-child h1,
  body.pagina-implantologie main section.grid > div:first-child > p,
  body.pagina-parodontologie main section.grid > div:first-child > p,
  body.pagina-protetica main section.grid > div:first-child > p,
  body.pagina-terapie main section.grid > div:first-child > p {
    margin-bottom: 0.75rem;
  }
  body.pagina-implantologie main section.grid > div:first-child > div.flex,
  body.pagina-parodontologie main section.grid > div:first-child > div.flex,
  body.pagina-protetica main section.grid > div:first-child > div.flex,
  body.pagina-terapie main section.grid > div:first-child > div.flex {
    gap: 0.5rem;
  }
  body.pagina-implantologie main section.grid > div.relative,
  body.pagina-parodontologie main section.grid > div.relative,
  body.pagina-protetica main section.grid > div.relative,
  body.pagina-terapie main section.grid > div.relative {
    min-height: 14rem;
  }
  body.pagina-implantologie main section.grid > div:first-child > div.mb-6,
  body.pagina-parodontologie main section.grid > div:first-child > div.mb-6,
  body.pagina-protetica main section.grid > div:first-child > div.mb-6,
  body.pagina-terapie main section.grid > div:first-child > div.mb-6 {
    margin-bottom: 0.35rem;
  }
  body.pagina-implantologie main section.grid > div:first-child > p.text-2xl,
  body.pagina-parodontologie main section.grid > div:first-child > p.text-2xl,
  body.pagina-protetica main section.grid > div:first-child > p.text-2xl,
  body.pagina-terapie main section.grid > div:first-child > p.text-2xl {
    font-size: 1.2rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
  }
  body.pagina-implantologie main section.grid > div:first-child > p.text-muted,
  body.pagina-parodontologie main section.grid > div:first-child > p.text-muted,
  body.pagina-protetica main section.grid > div:first-child > p.text-muted,
  body.pagina-terapie main section.grid > div:first-child > p.text-muted {
    font-size: 0.9375rem;
    line-height: 1.35;
    margin-bottom: 0.5rem;
  }
  body.pagina-implantologie main section.grid > div:first-child > div.flex-col a,
  body.pagina-parodontologie main section.grid > div:first-child > div.flex-col a,
  body.pagina-protetica main section.grid > div:first-child > div.flex-col a,
  body.pagina-terapie main section.grid > div:first-child > div.flex-col a {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }

  body.pagina-acasa,
  body.pagina-implantologie,
  body.pagina-parodontologie,
  body.pagina-protetica,
  body.pagina-terapie,
  body.pagina-programari,
  body.pagina-feedback,
  body.pagina-contact {
    padding-bottom: 4.5rem;
  }

  body.pagina-acasa div.lower_menu_mobile,
  body.pagina-implantologie div.lower_menu_mobile,
  body.pagina-parodontologie div.lower_menu_mobile,
  body.pagina-protetica div.lower_menu_mobile,
  body.pagina-terapie div.lower_menu_mobile,
  body.pagina-programari div.lower_menu_mobile,
  body.pagina-feedback div.lower_menu_mobile,
  body.pagina-contact div.lower_menu_mobile {
    bottom: 5.75rem;
  }
}

/* Pagina de programari din Sandbox. Titlurile mostenesc culoarea paginii,
   ca tema de noapte sa le faca ivorii. Programul vine din Working-hours.php. */
body.pagina-programari {
  font-family: var(--font-sans);
}
body.pagina-programari main p {
  text-align: justify;
}
body.pagina-programari main p.text-xs,
body.pagina-programari main p#legal_holidays,
body.pagina-programari main p.ziua-aleasa,
body.pagina-programari main p.form-raspuns,
body.pagina-programari main p.calendar-luna {
  text-align: left;
}
body.pagina-programari #contact [data-thanks] p,
body.pagina-programari #contact [data-thanks] h3 {
  text-align: center;
}
/* Hero. pt-4 din marcaj adauga 1rem si face sectiunea mai inalta
   decat div-ul fotografiei. Randul are aceeasi inaltime cu min-h-80.
   Sub 64rem textul sta in aceeasi celula, ca sa nu se adune deasupra.
   De la 64rem, marginea stanga foloseste jumatatea coloanei (100%),
   nu 100vw: bara de scroll nu o mai impinge fata de max-w-7xl. */
body.pagina-programari main > section.pt-4.grid {
  padding-top: 0;
  grid-template-rows: calc(var(--spacing) * 80);
}
@media (max-width: 63.99rem) {
  body.pagina-programari main > section.pt-4.grid > div:first-child,
  body.pagina-programari main > section.pt-4.grid > div.relative {
    grid-area: 1 / 1;
  }
  body.pagina-programari main > section.pt-4.grid > div:first-child {
    z-index: 1;
    align-self: end;
    min-height: 0;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    /* 15px este padding-ul coloanei Bootstrap din Working-hours.php.
       Fara el, H1 sta mai la stanga decat „Programul cabinetului”. */
    padding-left: calc(1.5rem + 15px);
  }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  body.pagina-programari main > section.pt-4.grid > div:first-child {
    padding-left: calc(3rem + 15px);
  }
}
@media (min-width: 64rem) {
  body.pagina-programari main > section.pt-4.grid > div:first-child {
    min-height: 0;
    overflow: hidden;
    padding-left: calc(max(3rem, 100% - 40rem) + 15px);
    padding-right: 3rem;
  }
}
body.pagina-programari h1 {
  font-family: var(--font-serif);
  /* Aceeasi marime ca h1 de pe gingivita cronica (36px).
     text-7xl din @layer ar fi 72px daca Bootstrap nu se incarca. */
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
}
body.pagina-programari .program-cabinet {
  font-family: var(--font-sans);
}
body.pagina-programari .program-cabinet h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 1.25rem;
}
body.pagina-programari .program-cabinet .container-fluid {
  padding-left: 0;
  padding-right: 0;
}
body.pagina-programari .program-cabinet .row {
  margin-left: 0;
  margin-right: 0;
}
body.pagina-programari .program-cabinet ul.standard_ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  text-align: left;
  text-indent: 0;
}
body.pagina-programari .program-cabinet ul.standard_ul li {
  margin: 0;
  padding: 0.85rem 0;
  border-bottom: 1px solid #e4e6eb;
}
/* Linia aurie inlocuieste glyphicon-ul. Span-ul e inline, deci
   latimea si inaltimea nu se vad fara inline-block. */
body.pagina-programari .program-cabinet span.w-7.h-px {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
}
body.pagina-programari .program-cabinet svg.semn-program {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  vertical-align: -0.2rem;
}
body.pagina-programari input[type="reset"] {
  display: block;
  margin-top: 0.85rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 0.0625rem solid #c9a96e;
  padding: 0.35rem 0;
  cursor: pointer;
}