:root {
      --ink: #1f2328;
      --ink-soft: #3b424a;
      --sand: #f6f0e9;
      --cream: #fffaf6;
      --accent: #e64b4b;
      --accent-soft: #f7b2a7;
      --teal: #1e6f6b;
      --teal-soft: #b9d7d3;
      --line: #e6ddd4;
      --shadow: 0 18px 50px rgba(31, 35, 40, 0.12);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: "Manrope", "Segoe UI", Tahoma, sans-serif;
      color: var(--ink);
      background: radial-gradient(1200px 500px at 15% -10%, #fbe9dc 0%, transparent 60%),
                  radial-gradient(900px 500px at 100% 0%, #e8f2f1 0%, transparent 65%),
                  var(--cream);
    }

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

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

    .container {
      width: min(1100px, 92vw);
      margin: 0 auto;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(255, 250, 246, 0.9);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(230, 221, 212, 0.7);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 0;
      gap: 20px;
      flex-wrap: wrap;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .brand-badge {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--teal) 0%, #0f4f4b 100%);
      display: grid;
      place-items: center;
      color: white;
      font-family: "Playfair Display", serif;
      font-size: 18px;
    }

    .nav-links {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      font-size: 14px;
      color: var(--ink-soft);
    }

    .cta-btn {
      padding: 12px 22px;
      border-radius: 999px;
      background: var(--accent);
      color: white;
      font-weight: 600;
      box-shadow: 0 12px 30px rgba(230, 75, 75, 0.3);
      cursor: pointer;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .social-link {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: white;
      color: #0a66c2;
    }

    .social-link svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
    }

    .hero {
      padding: 90px 0 60px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 40px;
      align-items: center;
    }
    .hero-grid > *:first-child {
      order: 2;
    }
    .hero-grid > *:last-child {
      order: 1;
    }

    .hero h1 {
      font-family: "Playfair Display", serif;
      font-size: clamp(2.4rem, 4vw, 3.6rem);
      margin: 0 0 16px;
    }

    .hero p {
      font-size: 1.05rem;
      color: var(--ink-soft);
      line-height: 1.7;
      margin: 0 0 24px;
    }

    .tagline {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border-radius: 999px;
      background: var(--teal-soft);
      color: #114844;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.3px;
      margin-bottom: 18px;
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    .ghost-btn {
      padding: 12px 22px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--ink);
      font-weight: 600;
      background: white;
    }

    .hero-card {
      background: white;
      border-radius: 28px;
      padding: 26px;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
      max-width: 360px;
      justify-self: start;
    }

    .hero-card::after {
      content: "";
      position: absolute;
      inset: auto -40px -60px auto;
      width: 180px;
      height: 180px;
      background: radial-gradient(circle at top, rgba(30, 111, 107, 0.18), transparent 70%);
      filter: blur(2px);
      pointer-events: none;
    }

    .hero-portrait {
      border-radius: 20px;
      overflow: hidden;
      background: var(--sand);
    }
    .hero-portrait img {
      width: 100%;
      max-height: 420px;
      object-fit: cover;
    }

    .hero-info {
      display: grid;
      gap: 10px;
      margin-top: 18px;
      color: var(--ink-soft);
      font-size: 14px;
    }

    .stat-row {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      margin-top: 30px;
    }

    .stat {
      background: white;
      border-radius: 18px;
      padding: 16px 18px;
      border: 1px solid var(--line);
      min-width: 140px;
    }

    .stat strong {
      display: block;
      font-size: 1.2rem;
      margin-bottom: 4px;
    }

    section {
      padding: 60px 0;
    }

    .section-title {
      font-family: "Playfair Display", serif;
      font-size: clamp(1.8rem, 3vw, 2.4rem);
      margin-bottom: 14px;
    }

    .section-subtitle {
      color: var(--ink-soft);
      max-width: 680px;
      line-height: 1.7;
    }

    .service-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 22px;
      margin-top: 32px;
    }

    .service-card {
      background: white;
      border-radius: 22px;
      padding: 22px;
      border: 1px solid var(--line);
      box-shadow: 0 12px 30px rgba(31, 35, 40, 0.06);
    }

    .service-card h3 {
      margin: 0 0 10px;
    }

    .pill {
      display: inline-block;
      padding: 6px 12px;
      border-radius: 999px;
      background: #f3f7f6;
      color: #0f4f4b;
      font-size: 12px;
      margin-bottom: 10px;
      font-weight: 600;
    }

    .about-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 28px;
      align-items: center;
    }

    .about-card {
      background: linear-gradient(140deg, #ffffff 0%, #f5f1ee 100%);
      border-radius: 24px;
      padding: 24px;
      border: 1px solid var(--line);
    }

    .process {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 18px;
      margin-top: 28px;
    }

    .process-step {
      background: white;
      border-radius: 20px;
      padding: 20px;
      border: 1px solid var(--line);
    }

    .contact {
      background: linear-gradient(130deg, #0f4f4b 0%, #1e6f6b 100%);
      color: white;
      border-radius: 28px;
      padding: 40px;
      display: grid;
      gap: 24px;
    }

    .contact a {
      color: white;
      font-weight: 600;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 24px;
      align-items: center;
    }

    form {
      display: grid;
      gap: 14px;
    }

    form[hidden] {
      display: none !important;
    }

    input, textarea {
      padding: 12px 14px;
      border-radius: 12px;
      border: none;
      font-family: inherit;
    }

    textarea {
      min-height: 120px;
      resize: vertical;
    }

    .form-btn {
      padding: 12px 18px;
      border: none;
      border-radius: 12px;
      background: var(--accent);
      color: white;
      font-weight: 600;
      cursor: pointer;
    }

    footer {
      padding: 30px 0 50px;
      color: var(--ink-soft);
      font-size: 14px;
      text-align: center;
    }

    .renta-banner {
      background: white;
      border-radius: 24px;
      padding: 32px;
      border: 1px solid var(--line);
      display: grid;
      gap: 20px;
      align-items: center;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      box-shadow: var(--shadow);
    }

    .booking-modal {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999;
    }

    .booking-modal.open {
      display: flex;
    }

    .booking-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(31, 35, 40, 0.55);
      backdrop-filter: blur(4px);
    }

    .booking-panel {
      position: relative;
      background: white;
      width: min(960px, 92vw);
      max-height: 90vh;
      overflow: auto;
      border-radius: 24px;
      padding: 24px;
      box-shadow: var(--shadow);
      z-index: 1;
      display: grid;
      gap: 20px;
    }

    .booking-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
    }

    .booking-header h3 {
      margin: 0 0 6px;
      font-family: "Playfair Display", serif;
      font-size: 1.6rem;
    }

    .booking-header p {
      margin: 0;
      color: var(--ink-soft);
    }

    .close-btn {
      border: none;
      background: #f2f0ee;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      font-size: 1.4rem;
      cursor: pointer;
    }

    .booking-body {
      display: grid;
      gap: 24px;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      align-items: start;
    }

    .calendar {
      display: grid;
      gap: 16px;
    }

    .month {
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 16px;
      background: #fffdfb;
    }

    .month-header {
      font-weight: 700;
      text-transform: capitalize;
      margin-bottom: 10px;
    }

    .weekdays,
    .days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
      text-align: center;
      font-size: 12px;
      color: var(--ink-soft);
    }

    .days {
      margin-top: 6px;
      font-size: 13px;
      color: var(--ink);
    }

    .day {
      border: none;
      background: #f8f4ef;
      padding: 8px 0;
      border-radius: 10px;
      font-weight: 600;
      cursor: pointer;
    }

    .day.available {
      background: #e6f3f1;
      color: #0f4f4b;
    }

    .day.disabled {
      background: #f1ede8;
      color: #9b9288;
      cursor: not-allowed;
    }

    .day.full {
      background: #ffe3e3;
      color: #a53a3a;
      cursor: not-allowed;
    }

    .day.active {
      background: #0f4f4b;
      color: white;
    }

    .day.spacer {
      background: transparent;
      border: none;
      cursor: default;
    }

    .time-panel h4 {
      margin: 0 0 8px;
      font-size: 1.1rem;
    }

    .hint {
      margin: 0 0 16px;
      color: var(--ink-soft);
      font-size: 13px;
    }

    .time-slots {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px;
    }

    .booking-contact {
      display: grid;
      gap: 6px;
      margin: 0 0 16px;
    }

    .booking-contact label {
      font-size: 12px;
      color: var(--ink-soft);
      font-weight: 600;
    }

    .booking-contact input {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px 12px;
    }

    .slot {
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: white;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
    }

    .slot.active {
      background: #0f4f4b;
      color: white;
      border-color: #0f4f4b;
    }

    .slot.booked {
      background: #ffe3e3;
      color: #a53a3a;
      cursor: not-allowed;
    }

    .booking-status {
      margin-top: 16px;
      font-size: 13px;
      color: var(--ink-soft);
    }

    .booking-status.error {
      color: #b32d2d;
    }

    .booking-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      border-top: 1px solid var(--line);
      padding-top: 16px;
    }

    .selected-summary {
      font-weight: 600;
      color: var(--ink-soft);
    }

    @media (max-width: 720px) {
      .nav-links {
        width: 100%;
        justify-content: space-between;
      }

      .hero {
        padding: 70px 0 40px;
      }

      .contact {
        padding: 30px;
      }

      .booking-panel {
        padding: 18px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
      }
    }