/*
Theme Name: Hotel Pérola
Theme URI: https://wiagency.com.br
Author: Wi Agency
Author URI: https://wiagency.com.br
Description: Tema institucional do Hotel Pérola — Itapoá/SC. Visual moderno com tons terrosos e elementos de praia, motor de busca integrado ao Hospedin, CPTs de Quartos e Depoimentos, textos editáveis via Customizer.
Version: 1.9.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: hotel-perola
*/

:root {
  --background: oklch(0.975 0.012 75);
  --foreground: oklch(0.22 0.03 40);
  --card: oklch(0.98 0.01 75);
  --primary: oklch(0.55 0.13 45);
  --primary-foreground: oklch(0.98 0.01 75);
  --secondary: oklch(0.91 0.04 75);
  --muted: oklch(0.93 0.025 75);
  --muted-foreground: oklch(0.45 0.04 50);
  --border: oklch(0.86 0.02 70);
  --clay: oklch(0.6 0.14 40);
  --sand: oklch(0.88 0.05 80);
  --olive: oklch(0.55 0.06 110);
  --ocean: oklch(0.55 0.09 210);
  --cream: oklch(0.97 0.02 85);
  --shadow-warm: 0 30px 60px -20px oklch(0.4 0.1 40 / 0.25);
  --shadow-soft: 0 10px 30px -10px oklch(0.4 0.08 40 / 0.18);
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select { font: inherit; }

/* Animações */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes heroKenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }
.animate-fade-in-up { opacity: 0; animation: fadeInUp .8s cubic-bezier(.16,1,.3,1) forwards; }
.animate-scale-in { opacity: 0; animation: scaleIn .7s cubic-bezier(.16,1,.3,1) forwards; }
.hero-ken-burns { animation: heroKenBurns 20s ease-in-out infinite alternate; }
.scroll-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }
.scroll-reveal[data-delay="1"] { transition-delay: .1s; }
.scroll-reveal[data-delay="2"] { transition-delay: .2s; }
.scroll-reveal[data-delay="3"] { transition-delay: .3s; }
.scroll-reveal[data-delay="4"] { transition-delay: .4s; }

/* Layout helpers */
.container { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 6rem 0; }
@media (min-width: 768px) { .section { padding: 8rem 0; } }

/* Header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  border-bottom: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
  background: color-mix(in oklch, var(--background) 85%, transparent);
  backdrop-filter: blur(12px);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .75rem; padding-bottom: .75rem; }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand img { width: 44px; height: 44px; object-fit: contain; }
.brand-text { display: none; flex-direction: column; line-height: 1.1; }
@media (min-width: 640px) { .brand-text { display: flex; } }
.brand-name { font-family: var(--font-display); font-size: 1.125rem; color: var(--primary); }
.brand-sub { font-size: 10px; text-transform: uppercase; letter-spacing: .3em; color: var(--muted-foreground); }
.main-nav { display: none; gap: 2rem; font-size: .875rem; }
@media (min-width: 768px) { .main-nav { display: flex; align-items: center; } }
.main-nav a { color: color-mix(in oklch, var(--foreground) 80%, transparent); transition: color .2s; }
.main-nav a:hover { color: var(--primary); }
.btn-reservar {
  display: none; padding: .625rem 1.25rem; border-radius: 9999px;
  background: var(--primary); color: var(--primary-foreground);
  font-size: .875rem; font-weight: 500; transition: opacity .2s;
}
.btn-reservar:hover { opacity: .9; }
@media (min-width: 768px) { .btn-reservar { display: inline-flex; } }
.menu-toggle { display: inline-flex; padding: .5rem; }
@media (min-width: 768px) { .menu-toggle { display: none; } }
.mobile-nav { display: none; flex-direction: column; gap: .75rem; padding: 1rem 1.5rem; border-top: 1px solid color-mix(in oklch, var(--border) 40%, transparent); background: var(--background); font-size: .875rem; }
.mobile-nav.open { display: flex; }
.mobile-nav .btn-reservar { display: inline-flex; width: fit-content; margin-top: .5rem; }

/* Hero */
.hero { position: relative; min-height: 100svh; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay-1 { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.25) 50%, rgba(0,0,0,.8)); }
.hero-overlay-2 { position: absolute; inset: 0; background: linear-gradient(to right, oklch(0.22 0.05 45 / .9), oklch(0.22 0.05 45 / .5) 50%, transparent); }
.hero-content { position: relative; z-index: 10; max-width: 80rem; margin: 0 auto; padding: 8rem 1.5rem 3rem; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100svh; }
.hero-eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .4em; color: color-mix(in oklch, var(--cream) 90%, transparent); margin-bottom: 1rem; animation-delay: .2s; }
.hero h1 { max-width: 56rem; font-size: 3rem; line-height: 1.05; color: var(--cream); text-wrap: balance; animation-delay: .4s; }
@media (min-width: 768px) { .hero h1 { font-size: 4.5rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 5.5rem; } }
.hero-desc { max-width: 36rem; margin-top: 1.5rem; color: color-mix(in oklch, var(--cream) 85%, transparent); font-size: 1rem; animation-delay: .6s; }
@media (min-width: 768px) { .hero-desc { font-size: 1.125rem; } }
.hero-booking { max-width: 64rem; width: 100%; margin: 2.5rem auto 0; scroll-margin-top: 6rem; animation-delay: .8s; }
.hero-booking-note { text-align: center; margin-top: .75rem; font-size: .75rem; color: color-mix(in oklch, var(--cream) 70%, transparent); }

/* Booking form */
.booking-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  overflow: hidden; border-radius: 1rem;
  background: oklch(0.97 0.01 80 / .92);
  backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid oklch(0.97 0.01 80 / .5);
  box-shadow: 0 20px 60px -15px rgba(0,0,0,.35);
}
@media (min-width: 768px) { .booking-form { grid-template-columns: 1fr 1fr 1fr 1fr auto; } }
.booking-field { display: flex; flex-direction: column; gap: .25rem; padding: .75rem 1rem; background: color-mix(in oklch, var(--cream) 95%, transparent); text-align: left; }
.booking-label { display: flex; align-items: center; gap: .375rem; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; color: var(--muted-foreground); }
.booking-input { border: 0; background: transparent; padding: 0; font-size: .875rem; font-weight: 500; color: var(--foreground); outline: none; width: 100%; }
.booking-submit {
  grid-column: span 2; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--primary); color: var(--primary-foreground);
  padding: 1rem 1.5rem; font-size: .875rem; font-weight: 500; letter-spacing: .025em;
  transition: background .2s;
}
.booking-submit:hover { background: var(--clay); }
@media (min-width: 768px) { .booking-submit { grid-column: span 1; } }

/* Two-col blocks */
.two-col { display: grid; gap: 4rem; }
@media (min-width: 768px) { .two-col { grid-template-columns: 1fr 1fr; align-items: center; } }
.eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .3em; color: var(--primary); margin-bottom: .75rem; }
.h2 { font-size: 2.25rem; line-height: 1.15; }
@media (min-width: 768px) { .h2 { font-size: 3rem; } }
.h2 em { font-style: italic; color: var(--clay); }
.lead-block { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; color: var(--muted-foreground); line-height: 1.65; }
.lead-block strong { color: var(--foreground); }
.address-row { display: flex; align-items: center; gap: .5rem; margin-top: 2rem; font-size: .875rem; }
.address-row svg { color: var(--clay); }
.location-img { position: relative; }
.location-img img { aspect-ratio: 5/4; width: 100%; border-radius: .5rem; object-fit: cover; box-shadow: var(--shadow-warm); }
.rating-badge { display: none; position: absolute; bottom: -1.5rem; left: -1.5rem; padding: 1.5rem; background: var(--card); border-radius: .5rem; box-shadow: var(--shadow-soft); }
@media (min-width: 768px) { .rating-badge { display: block; } }
.rating-badge .num { font-family: var(--font-display); font-size: 1.875rem; color: var(--primary); }
.rating-badge .sub { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--muted-foreground); margin-top: .25rem; }
.star { color: var(--clay); }

/* Services */
.services-section { position: relative; background: color-mix(in oklch, var(--secondary) 60%, transparent); }
.services-section::before { content: ""; position: absolute; inset: 0; opacity: .03; background-image: radial-gradient(circle at 1px 1px, var(--foreground) 1px, transparent 0); background-size: 32px 32px; pointer-events: none; }
.services-grid { display: grid; gap: 1px; overflow: hidden; border-radius: 1rem; background: var(--border); }
@media (min-width: 768px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(4, 1fr); } }
.service-card { background: var(--card); padding: 2rem; height: 100%; transition: background .5s; }
.service-card:hover { background: var(--cream); }
.service-icon { display: inline-flex; padding: .75rem; border-radius: 9999px; background: color-mix(in oklch, var(--secondary) 80%, transparent); color: var(--clay); transition: transform .5s; }
.service-card:hover .service-icon { transform: scale(1.1); }
.service-card h3 { margin-top: 1.5rem; font-size: 1.5rem; }
.service-card p { margin-top: .75rem; font-size: .875rem; color: var(--muted-foreground); line-height: 1.6; }

/* Rooms */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 3.5rem; }
.section-head .max-sm { max-width: 22rem; font-size: .875rem; color: var(--muted-foreground); }
.rooms-grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .rooms-grid { grid-template-columns: 1fr 1fr; } }
.room-card { overflow: hidden; border-radius: 1rem; background: var(--card); box-shadow: var(--shadow-soft); transition: box-shadow .5s; height: 100%; }
.room-card:hover { box-shadow: var(--shadow-warm); }
.room-thumb { aspect-ratio: 4/3; overflow: hidden; position: relative; display: block; }
.room-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; display: block; }
.room-card:hover .room-thumb img { transform: scale(1.05); }
.room-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,0) 70%); pointer-events: none; }
.room-thumb__title { position: absolute; left: 1rem; right: 1rem; bottom: .85rem; z-index: 1; color: #fff; font-family: 'Fraunces', serif; font-size: 1.45rem; font-weight: 500; letter-spacing: .01em; text-shadow: 0 2px 12px rgba(0,0,0,.45); line-height: 1.15; }
@media (min-width: 768px) { .room-thumb__title { font-size: 1.6rem; } }
.room-body { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.75rem; }
.room-body h3 { font-size: 1.5rem; }
.room-body p { margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); line-height: 1.6; }
.room-cta { flex-shrink: 0; padding: .75rem; border-radius: 9999px; border: 1px solid var(--border); color: var(--foreground); transition: all .3s; }
.room-cta:hover { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }

/* Restaurant */
.restaurant { position: relative; overflow: hidden; }
.restaurant-grid { display: grid; }
@media (min-width: 768px) { .restaurant-grid { grid-template-columns: 1fr 1fr; } }
.restaurant-img { position: relative; aspect-ratio: 4/3; }
.restaurant-img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .restaurant-img { aspect-ratio: auto; } }
.restaurant-text { display: flex; flex-direction: column; justify-content: center; padding: 5rem 1.5rem; background: var(--foreground); color: var(--cream); }
@media (min-width: 768px) { .restaurant-text { padding: 8rem 4rem; } }
.restaurant-text .eyebrow { color: var(--clay); }
.restaurant-text .h2 { color: var(--cream); }
.restaurant-text .lead-block { color: color-mix(in oklch, var(--cream) 80%, transparent); }
.restaurant-features { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .restaurant-features { grid-template-columns: 1fr 1fr; } }
.feature { border-left: 1px solid color-mix(in oklch, var(--cream) 20%, transparent); padding-left: 1.25rem; }
.feature svg { color: var(--clay); }
.feature h3 { margin-top: .75rem; font-size: 1.25rem; color: var(--cream); }
.feature p { margin-top: .25rem; font-size: .875rem; color: color-mix(in oklch, var(--cream) 70%, transparent); }

/* Breakfast + Romantic */
.bk-grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .bk-grid { grid-template-columns: 1fr 1fr; } }
.bk-card { overflow: hidden; border-radius: 1rem; background: var(--card); box-shadow: var(--shadow-soft); }
.bk-card img { aspect-ratio: 16/10; width: 100%; object-fit: cover; }
.bk-body { padding: 2rem; }
.bk-body h3 { margin-top: .5rem; font-size: 1.875rem; }
.bk-body p { margin-top: .75rem; font-size: .875rem; color: var(--muted-foreground); }
.tags { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; font-size: .75rem; list-style: none; padding: 0; }
.tags li { padding: .25rem .75rem; border-radius: 9999px; border: 1px solid var(--border); background: color-mix(in oklch, var(--secondary) 60%, transparent); color: var(--muted-foreground); }
.romantic-card { position: relative; overflow: hidden; border-radius: 1rem; min-height: 480px; }
.romantic-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.romantic-card:hover img { transform: scale(1.05); }
.romantic-overlay { position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.22 0.03 40 / .95), oklch(0.22 0.03 40 / .4) 50%, oklch(0.22 0.03 40 / .1)); }
.romantic-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem; color: var(--cream); }
.romantic-content .eyebrow { color: var(--clay); }
.romantic-content h3 { margin-top: .5rem; font-size: 1.875rem; color: var(--cream); }
.romantic-content p { margin-top: .5rem; max-width: 28rem; font-size: .875rem; color: color-mix(in oklch, var(--cream) 85%, transparent); }
.btn-ghost-cream { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem; padding: .625rem 1.25rem; border-radius: 9999px; background: var(--cream); color: var(--foreground); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; transition: all .2s; }
.btn-ghost-cream:hover { background: var(--clay); color: var(--cream); }

/* Testimonials */
.testimonials-section { background: color-mix(in oklch, var(--secondary) 60%, transparent); }
.rating-inline { display: flex; align-items: center; gap: 1rem; }
.rating-inline .num { font-family: var(--font-display); font-size: 2.25rem; color: var(--primary); }
.rating-inline .sub { font-size: .75rem; color: var(--muted-foreground); }
.stars { display: flex; gap: 2px; }
.testimonials-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial { display: flex; flex-direction: column; height: 100%; padding: 2rem; border-radius: 1rem; background: var(--card); box-shadow: var(--shadow-soft); transition: box-shadow .5s; margin: 0; }
.testimonial:hover { box-shadow: var(--shadow-warm); }
.testimonial blockquote { flex: 1; margin: 1.25rem 0 0; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.65; color: color-mix(in oklch, var(--foreground) 90%, transparent); }
.testimonial figcaption { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.testimonial .name { font-weight: 500; color: var(--foreground); }
.testimonial .date { font-size: .75rem; color: var(--muted-foreground); }

/* Contact */
.contact-card { overflow: hidden; border-radius: 1.5rem; background: var(--foreground); }
.contact-inner { display: grid; gap: 3rem; padding: 2.5rem; }
@media (min-width: 768px) { .contact-inner { grid-template-columns: 1fr 1fr; padding: 4rem; } }
.contact-card .eyebrow { color: var(--clay); }
.contact-card h2 { font-size: 2.25rem; line-height: 1.15; color: var(--cream); }
@media (min-width: 768px) { .contact-card h2 { font-size: 3rem; } }
.contact-card h2 em { font-style: italic; }
.contact-card .lead { margin-top: 1.5rem; max-width: 28rem; color: color-mix(in oklch, var(--cream) 75%, transparent); line-height: 1.65; }
.btn-primary { display: inline-flex; align-items: center; gap: .5rem; margin-top: 2rem; padding: .75rem 1.5rem; border-radius: 9999px; background: var(--primary); color: var(--primary-foreground); font-size: .875rem; font-weight: 500; transition: background .2s; }
.btn-primary:hover { background: var(--clay); }
.contact-links { display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; color: var(--cream); }
.contact-links a, .contact-links .row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid color-mix(in oklch, var(--cream) 20%, transparent); transition: color .2s; }
.contact-links a:hover { color: var(--clay); }
.contact-links a span, .contact-links .row span { display: flex; align-items: center; gap: .75rem; }
.contact-links .note { padding-top: .5rem; font-size: .75rem; color: color-mix(in oklch, var(--cream) 60%, transparent); border: 0; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); background: var(--background); }
.site-footer .container { padding-top: 4rem; padding-bottom: 4rem; }
.footer-grid { display: grid; gap: 3rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-grid h4 { font-family: var(--font-display); font-size: .875rem; letter-spacing: .025em; }
.footer-col { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; font-size: .875rem; color: var(--muted-foreground); }
.footer-col a:hover { color: var(--primary); }
.footer-bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); font-size: .75rem; color: var(--muted-foreground); }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; } }
.wi-credit { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted-foreground); text-decoration: none; transition: opacity .2s ease; }
.wi-credit:hover { opacity: .75; }
.wi-credit img { filter: brightness(0) invert(0.6); transition: filter .2s ease; }
.wi-credit:hover img { filter: brightness(0) invert(0.85); }

/* Icons sizing */
.icon-sm { width: 14px; height: 14px; }
.icon { width: 18px; height: 18px; }
.icon-lg { width: 24px; height: 24px; }

/* === Páginas internas === */
.page-hero {
  padding: 9rem 0 3rem;
  background: linear-gradient(180deg, color-mix(in oklch, var(--secondary) 70%, transparent), var(--background));
  border-bottom: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
}
.page-hero .eyebrow { margin-bottom: .75rem; }
.page-title { font-family: var(--font-display); font-size: 2.5rem; line-height: 1.1; color: var(--primary); max-width: 48rem; }
@media (min-width: 768px) { .page-title { font-size: 3.5rem; } }
.page-lead { margin-top: 1.25rem; max-width: 42rem; color: var(--muted-foreground); font-size: 1.05rem; line-height: 1.6; }

.booking-block {
  margin-top: 5rem; padding: 2.5rem; border-radius: 1.5rem;
  background: var(--card); box-shadow: var(--shadow-soft);
  border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
}

/* Quarto detalhe */
.quarto-detail { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .quarto-detail { grid-template-columns: 2fr 1fr; align-items: start; } }
.quarto-gallery img { width: 100%; aspect-ratio: 16/11; object-fit: cover; border-radius: 1rem; box-shadow: var(--shadow-warm); }
.quarto-aside { padding: 1.75rem; background: var(--card); border-radius: 1rem; box-shadow: var(--shadow-soft); }
.amenities { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; color: var(--muted-foreground); font-size: .9rem; }
.amenities li { display: flex; align-items: center; gap: .5rem; }
.amenities svg { color: var(--clay); }

/* Botão primário */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.5rem; border-radius: 9999px;
  background: var(--primary); color: var(--primary-foreground);
  font-size: .9rem; font-weight: 500; letter-spacing: .02em;
  transition: background .2s, transform .2s;
}
.btn-primary:hover { background: var(--clay); transform: translateY(-1px); }

/* Mapa */
.map-wrap { overflow: hidden; border-radius: 1rem; box-shadow: var(--shadow-soft); }
.map-wrap iframe { width: 100%; height: 460px; border: 0; display: block; }

/* Contato */
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.5fr; align-items: start; } }
.contact-info h2 { color: var(--primary); }
.contact-list { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-direction: column; gap: 1.5rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-list svg { color: var(--clay); flex-shrink: 0; margin-top: .15rem; }
.contact-list a { color: var(--foreground); transition: color .2s; }
.contact-list a:hover { color: var(--primary); }
.contact-label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .2em; color: var(--muted-foreground); margin-bottom: .15rem; }

.contact-form-wrap { padding: 2.5rem; background: var(--card); border-radius: 1.25rem; box-shadow: var(--shadow-soft); border: 1px solid color-mix(in oklch, var(--border) 60%, transparent); }
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-form .form-row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .contact-form .form-row { grid-template-columns: 1fr 1fr; } }
.contact-form label { display: flex; flex-direction: column; gap: .35rem; font-size: .8rem; font-weight: 500; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .12em; }
.contact-form label.full { width: 100%; }
.contact-form input, .contact-form select, .contact-form textarea {
  padding: .75rem .9rem; border-radius: .6rem;
  border: 1px solid var(--border); background: var(--background);
  font-size: .95rem; color: var(--foreground); font-family: inherit;
  text-transform: none; letter-spacing: normal; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent);
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form button { align-self: flex-start; }

.alert { padding: 1rem 1.25rem; border-radius: .75rem; margin-bottom: 1.25rem; font-size: .9rem; }
.alert-success { background: color-mix(in oklch, var(--olive) 18%, var(--cream)); color: oklch(0.35 0.08 110); border: 1px solid color-mix(in oklch, var(--olive) 40%, transparent); }
.alert-error { background: color-mix(in oklch, var(--clay) 15%, var(--cream)); color: oklch(0.35 0.12 40); border: 1px solid color-mix(in oklch, var(--clay) 40%, transparent); }

/* ===== Breadcrumbs ===== */
.hp-breadcrumbs {
  background: color-mix(in oklab, var(--background) 92%, var(--primary) 8%);
  border-bottom: 1px solid color-mix(in oklab, var(--primary) 12%, transparent);
  font-size: .875rem;
}
.hp-breadcrumbs .container { padding-top: .75rem; padding-bottom: .75rem; }
.hp-breadcrumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
.hp-breadcrumbs li { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted-foreground); }
.hp-breadcrumbs a { color: var(--primary); text-decoration: none; }
.hp-breadcrumbs a:hover { text-decoration: underline; }
.hp-breadcrumbs .sep { opacity: .5; }
.hp-breadcrumbs [aria-current="page"] { color: var(--foreground); font-weight: 500; }