:root {

  --bg-page: #f3f4f8;

  --bg-header: #ffffff;

  --bg-hero: #ffffff;

  --bg-section: #ffffff;

  --bg-footer: #0f172a;

  --accent: #0ea5e9;

  --accent-soft: #e0f2fe;

  --accent-deep: #0369a1;

  --text-main: #111827;

  --text-muted: #6b7280;

  --border-subtle: #e5e7eb;

  --radius-lg: 24px;

  --radius-md: 16px;

  --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.08);

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  min-height: 100vh;

  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  color: var(--text-main);

  background: radial-gradient(circle at top, #e0f2fe 0, transparent 55%), var(--bg-page);

  line-height: 1.6;

}



a {

  color: inherit;

}



a,

button {

  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,

    box-shadow 0.15s ease, transform 0.1s ease;

}



img {

  max-width: 100%;

  display: block;

}



button,

input,

textarea {

  font-family: inherit;

}



button:focus-visible,

a:focus-visible,

input:focus-visible,

textarea:focus-visible {

  outline: 2px solid var(--accent);

  outline-offset: 2px;

}



/* HEADER */



.site-header {

  position: sticky;

  top: 0;

  z-index: 40;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  flex-wrap: wrap;

  padding: 12px 6vw;

  background: rgba(255, 255, 255, 0.96);

  backdrop-filter: blur(16px);

  border-bottom: 1px solid rgba(148, 163, 184, 0.3);

}



.logo-group {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.logo-link {

  text-decoration: none;

  color: inherit;

}



.logo {

  font-family: "Playfair Display", "Times New Roman", serif;

  font-size: 1.2rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}

.logo-line {
  display: block;
}



.logo-sub {

  font-size: 0.78rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--text-muted);

}



.nav-toggle {

  display: none;

  border-radius: 999px;

  border: 1px solid var(--border-subtle);

  padding: 6px 10px;

  background-color: #ffffff;

  color: var(--text-main);

  cursor: pointer;

}



.nav-toggle-icon {

  display: inline-flex;

  flex-direction: column;

  gap: 3px;

}



.nav-toggle-icon span {

  width: 18px;

  height: 2px;

  border-radius: 999px;

  background-color: var(--text-main);

  transition: transform 0.15s ease, opacity 0.15s ease;

}



.nav-toggle-label {

  font-size: 0.86rem;

  margin-left: 6px;

}



.site-header.nav-open .nav-toggle-icon span:nth-child(1) {

  transform: translateY(2px) rotate(45deg);

}



.site-header.nav-open .nav-toggle-icon span:nth-child(2) {

  transform: translateY(-2px) rotate(-45deg);

}



.main-nav {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  font-size: 0.9rem;

}



.main-nav a {

  text-decoration: none;

  padding: 6px 12px;

  border-radius: 999px;

  border: 1px solid transparent;

  color: var(--text-muted);

  background-color: transparent;

}



.main-nav a:hover,

.main-nav a:focus-visible {

  border-color: var(--accent-soft);

  background-color: var(--accent-soft);

  color: var(--text-main);

  outline: none;

}



.main-nav a.is-active {

  border-color: var(--accent-soft);

  background-color: var(--accent-soft);

  color: var(--text-main);

}



/* HERO */



.hero {

  padding: 32px 6vw 40px;

}



.hero-shell {

  position: relative;

  max-width: 1120px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);

  gap: 32px;

  background: var(--bg-hero);

  border-radius: var(--radius-lg);

  padding: 28px 28px 30px;

  box-shadow: var(--shadow-soft);

  border: 1px solid var(--border-subtle);

  overflow: hidden;

}



.hero-gradient {

  display: none;

}



.hero-content {

  position: relative;

}



.hero-badges {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-bottom: 10px;

}



.badge-pill {

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 0.72rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  border: 1px solid var(--border-subtle);

  background-color: #f9fafb;

  color: var(--text-muted);

}



.badge-soft {

  border-color: var(--accent-soft);

  background-color: var(--accent-soft);

  color: var(--accent-deep);

}



.hero-kicker {

  text-transform: uppercase;

  letter-spacing: 0.18em;

  font-size: 0.72rem;

  color: var(--text-muted);

  margin-bottom: 10px;

}



.hero h1 {

  font-family: "Playfair Display", "Times New Roman", serif;

  font-size: clamp(2.4rem, 3.2vw, 3.4rem);

  line-height: 1.05;

  margin: 0 0 14px;

}



.hero-subtitle {

  font-size: 0.98rem;

  color: var(--text-muted);

  max-width: 480px;

}



.hero-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 18px;

  font-size: 0.82rem;

}



.hero-meta span {

  padding: 4px 9px;

  border-radius: 999px;

  background-color: #f9fafb;

  border: 1px solid var(--border-subtle);

}



.hero-cta {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 24px;

}



.btn-primary,

.btn-secondary {

  border-radius: 999px;

  padding: 10px 18px;

  font-size: 0.92rem;

  border: 1px solid transparent;

  cursor: pointer;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  white-space: nowrap;

}



.btn-primary {

  background-color: var(--accent);

  color: #ffffff;

  box-shadow: none;

}



.btn-primary:hover {

  background-color: var(--accent-deep);

  box-shadow: none;

  transform: none;

}



.btn-secondary {

  background-color: #ffffff;

  color: var(--text-main);

  border-color: var(--border-subtle);

}



.btn-secondary:hover {

  background-color: #f3f4f6;

}



.hero-image {

  position: relative;

  min-height: 260px;

  border-radius: 20px;

  background-image: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(99, 102, 241, 0.3)),

    url("../images/hero.jpg");

  background-size: cover;

  background-position: center;

  overflow: hidden;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  padding: 14px;

}



.hero-city-figure {

  width: 100%;

  max-width: 360px;

  border-radius: 18px;

  overflow: hidden;

  box-shadow: var(--shadow-soft);

  border: 1px solid var(--border-subtle);

  background-color: #ffffff;

}



.hero-city-figure img {

  width: 100%;

  height: auto;

  display: block;

}



/* LAYOUT & SECTIONS */



.page-content {

  padding: 8px 6vw 72px;

  max-width: 1120px;

  margin: 0 auto;

}



.city-section,

.legal-section {

  margin-top: 56px;

  scroll-margin-top: 96px;

}



.section-header h2 {

  font-family: "Playfair Display", "Times New Roman", serif;

  font-size: 1.8rem;

  margin: 0 0 4px;

}



.section-header p {

  color: var(--text-muted);

  max-width: 520px;

  font-size: 0.96rem;

  margin: 0;

}



.section-media {

  margin-top: 18px;

  border-radius: var(--radius-md);

  overflow: hidden;

  max-height: 260px;

  box-shadow: var(--shadow-soft);

  border: 1px solid var(--border-subtle);

}



.section-media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.card-grid {

  margin-top: 24px;

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 20px;

}



.card {

  background-color: var(--bg-section);

  border-radius: var(--radius-md);

  padding: 18px 18px 20px;

  box-shadow: var(--shadow-soft);

  border: 1px solid var(--border-subtle);

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.card h3 {

  font-size: 1.08rem;

  margin: 0;

}



.card p {

  font-size: 0.94rem;

  margin: 0;

  color: var(--text-muted);

}



.card.tall {

  grid-row: span 2;

}



.card.wide {

  grid-column: span 2;

}



.contact-section .contact-details {

  margin-top: 22px;

  background-color: var(--bg-section);

  border-radius: var(--radius-md);

  padding: 18px 20px;

  box-shadow: var(--shadow-soft);

  border: 1px solid var(--border-subtle);

  font-size: 0.96rem;

}



.contact-details a {

  color: var(--accent-deep);

  text-decoration: none;

}



.contact-details a:hover {

  text-decoration: underline;

}



/* LEGAL SECTIONS & FORM */



.legal-section {

  background-color: var(--bg-section);

  border-radius: var(--radius-lg);

  padding: 24px 24px 26px;

  box-shadow: var(--shadow-soft);

  border: 1px solid var(--border-subtle);

}



.legal-section .section-header {

  margin-bottom: 4px;

}



.legal-content p {

  font-size: 0.93rem;

  color: var(--text-muted);

  margin: 8px 0 0;

}



.cookie-list {

  margin: 10px 0 10px 1.1rem;

  padding: 0;

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.cookie-list li {

  font-size: 0.9rem;

  color: var(--text-muted);

}



.privacy-form {

  margin-top: 24px;

  padding-top: 14px;

  border-top: 1px solid var(--border-subtle);

}



.privacy-form h3 {

  font-size: 1.05rem;

  margin: 0 0 8px;

}



.privacy-form p {

  font-size: 0.9rem;

  color: var(--text-muted);

  margin: 0 0 4px;

}



.form-row {

  display: flex;

  flex-direction: column;

  gap: 6px;

  margin-top: 14px;

}



.form-row label {

  font-size: 0.9rem;

}



.form-row input,

.form-row textarea {

  border-radius: 10px;

  border: 1px solid var(--border-subtle);

  padding: 9px 11px;

  font-size: 0.92rem;

  resize: vertical;

}



.form-row input:focus,

.form-row textarea:focus {

  border-color: var(--accent);

  box-shadow: 0 0 0 1px var(--accent-soft);

  outline: none;

}



.checkbox-row label {

  display: flex;

  align-items: flex-start;

  gap: 8px;

  font-size: 0.85rem;

  color: var(--text-muted);

}



.checkbox-row input[type="checkbox"] {

  margin-top: 3px;

}



.form-note {

  margin-top: 10px;

  font-size: 0.82rem;

  color: var(--text-muted);

}



.hidden-field {

  position: absolute;

  left: -9999px;

  width: 1px;

  height: 1px;

  overflow: hidden;

}



.privacy-form-layout {

  display: flex;

  flex-wrap: wrap;

  gap: 24px;

  align-items: flex-start;

  margin-top: 16px;

}



.privacy-form-main {

  flex: 1 1 260px;

}



.privacy-form-aside {

  flex: 0 0 260px;

  max-width: 320px;

  background-color: #f9fafb;

  border-radius: var(--radius-md);

  padding: 14px 16px 16px;

  border: 1px solid var(--border-subtle);

}



.privacy-figure {

  margin: 0 0 10px;

  border-radius: 12px;

  overflow: hidden;

}



.privacy-figure img {

  width: 100%;

  height: auto;

  display: block;

}



.privacy-aside-list {

  margin: 0;

  padding-left: 1.1rem;

  display: flex;

  flex-direction: column;

  gap: 4px;

  font-size: 0.86rem;

  color: var(--text-muted);

}



.form-grid-two-cols {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px 16px;

  margin-top: 14px;

}



/* FOOTER */



.site-footer {

  padding: 22px 6vw 26px;

  border-top: 1px solid rgba(148, 163, 184, 0.35);

  font-size: 0.86rem;

  color: #e5e7eb;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  background: var(--bg-footer);

}



.site-footer a {

  color: var(--accent-soft);

  text-decoration: none;

}



.site-footer a:hover {

  text-decoration: underline;

}



.link-button {

  background: none;

  border: none;

  padding: 0;

  margin: 0;

  color: var(--accent-soft);

  font: inherit;

  cursor: pointer;

  text-decoration: underline;

}



.link-button:hover {

  color: #ffffff;

}



/* COOKIE BANNER & TOAST */



.cookie-banner {

  position: fixed;

  inset-inline: 0;

  bottom: 0;

  z-index: 60;

  display: none;

  justify-content: center;

  padding: 12px 10px 16px;

}



.cookie-banner-content {

  max-width: 760px;

  width: 100%;

  background-color: #ffffff;

  color: var(--text-main);

  border-radius: 18px 18px 0 0;

  padding: 16px 18px 14px;

  box-shadow: 0 -18px 40px rgba(15, 23, 42, 0.18);

  font-size: 0.9rem;

  border: 1px solid var(--border-subtle);

}



.cookie-actions {

  margin-top: 10px;

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



.cookie-link {

  margin-top: 6px;

  font-size: 0.82rem;

  color: var(--text-muted);

}



.cookie-link a {

  color: var(--accent-deep);

}



.cookie-banner .btn-secondary {

  background-color: #f9fafb;

}



.cookie-banner.show {

  display: flex;

}



.toast {

  position: fixed;

  right: 20px;

  bottom: 24px;

  max-width: 320px;

  background-color: #111827;

  color: #f9fafb;

  border-radius: 12px;

  padding: 10px 14px;

  font-size: 0.88rem;

  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.75);

  opacity: 0;

  pointer-events: none;

  transform: translateY(16px);

  z-index: 70;

}



.toast.show {

  opacity: 1;

  pointer-events: auto;

  transform: translateY(0);

}



/* RESPONSIVE */



@media (max-width: 960px) {

  .hero-shell {

    grid-template-columns: minmax(0, 1fr);

    padding: 24px 22px 26px;

  }



  .hero-image {

    order: -1;

    min-height: 220px;

  }



  .card-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .card.tall {

    grid-row: auto;

  }



  .privacy-form-layout {

    flex-direction: column;

  }



  .privacy-form-aside {

    max-width: none;

    width: 100%;

  }

}



@media (max-width: 720px) {

  .nav-toggle {

    display: inline-flex;

    align-items: center;

    margin-left: auto;

  }



  .main-nav {

    width: 100%;

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

    max-height: 0;

    opacity: 0;

    pointer-events: none;

    overflow: hidden;

    transform: translateY(-4px);

    transition: max-height 0.2s ease, opacity 0.15s ease, transform 0.15s ease;

  }



  .site-header.nav-open .main-nav {

    max-height: 400px;

    opacity: 1;

    pointer-events: auto;

    transform: translateY(0);

  }



  .main-nav a {

    width: 100%;

  }



  .hero {

    padding-inline: 5vw;

  }



  .page-content {

    padding-inline: 5vw;

  }



  .card-grid {

    grid-template-columns: minmax(0, 1fr);

  }



  .card.wide {

    grid-column: auto;

  }



  .cookie-banner-content {

    border-radius: 16px 16px 0 0;

  }



  .privacy-form {

    margin-top: 28px;

  }



  .privacy-form-aside {

    padding: 16px 18px 18px;

  }

}