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

    :root {
      --forest: #2c3e2d;
      --forest-mid: #3d5c3f;
      --forest-light: #5a7d5c;
      --stone: #c8b89a;
      --stone-light: #e8ddd0;
      --stone-pale: #f4f0ea;
      --cream: #faf8f4;
      --ink: #1a1a14;
      --ink-mid: #4a4a3a;
      --ink-light: #8a8a70;
      --gold: #b8942a;
      --gold-light: #d4b04a;
      --white: #ffffff;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Jost', sans-serif;
      background-color: var(--cream);
      color: var(--ink);
      overflow-x: hidden;
    }

    /* ── UTILITY ── */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 48px;
    }

    /* ── TOP BAR ── */
    .topbar {
      background-color: var(--forest);
      padding: 8px 48px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .topbar__contact {
      display: flex;
      gap: 32px;
    }
    .topbar__item {
      font-size: 12px;
      color: rgba(255,255,255,0.7);
      letter-spacing: 0.04em;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .topbar__item strong {
      color: var(--stone-light);
      font-weight: 500;
    }
    .topbar__langs {
      display: flex;
      gap: 12px;
    }
    .topbar__langs a {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.5);
      text-decoration: none;
      transition: color 0.15s;
    }
    .topbar__langs a.active,
    .topbar__langs a:hover { color: var(--white); }

    /* ── NAVIGATION ── */
    .nav {
      background-color: var(--cream);
      border-bottom: 1px solid var(--stone-light);
      padding: 0 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 76px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .nav__logo {
      display: flex;
      flex-direction: column;
      gap: 1px;
      text-decoration: none;
    }
    .nav__logo-name {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 600;
      font-size: 26px;
      color: var(--forest);
      letter-spacing: 0.04em;
      line-height: 1;
    }
    .nav__logo-sub {
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-light);
    }
    /* .nav__links {
      display: flex;
      gap: 32px;
      list-style: none;
    }
    .nav__links a {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.04em;
      color: var(--ink-mid);
      text-decoration: none;
      transition: color 0.15s;
    }
    .nav__links a:hover { color: var(--forest); }
    .nav__links a.active {
      color: var(--forest);
      font-weight: 500;
    } */

     /* ----------------------------
     nav links hover and active alternative below
     ---------------------------- */
    .nav__links {
        display: flex;
        gap: 32px;
        list-style: none;
        }

        .nav__links a {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.04em;
        color: var(--ink-mid);
        text-decoration: none;
        transition: color 0.2s;
        position: relative;
        padding-bottom: 4px;
        }

        .nav__links a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--gold);
        transition: width 0.25s ease;
        }

        .nav__links a:hover {
        color: var(--forest);
        }

        .nav__links a:hover::after {
        width: 100%;
        }

        .nav__links a.active {
        color: var(--forest);
        font-weight: 500;
        }

        .nav__links a.active::after {
        width: 100%;
        }


    .nav__book {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      background-color: var(--forest);
      color: var(--white);
      padding: 11px 24px;
      border-radius: 2px;
      text-decoration: none;
      transition: background-color 0.2s;
    }
    .nav__book:hover { background-color: var(--forest-mid); }

    /* ── HERO ── */
    .hero {
      min-height: 88vh;
      background-color: var(--forest);
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow: hidden;
    }

    /* Geometric architectural pattern — image substitute */
    .hero__pattern {
      position: relative;
      overflow: hidden;
    }
    .hero__pattern::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.03) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,0.03) 25%, transparent 25%),
        linear-gradient(315deg, rgba(255,255,255,0.03) 25%, transparent 25%),
        linear-gradient(45deg,  rgba(255,255,255,0.03) 25%, transparent 25%);
      background-size: 80px 80px;
    }
    .hero__arch {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero__arch svg {
      width: 70%;
      height: auto;
      opacity: 0.12;
    }
    .hero__photo-placeholder {
      position: absolute;
      inset: 40px;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 16px;
    }
    .hero__photo-placeholder span {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 15px;
      color: rgba(255,255,255,0.25);
      letter-spacing: 0.08em;
      text-align: center;
      line-height: 1.6;
    }
    .hero__photo-placeholder::before {
      content: '';
      width: 48px;
      height: 48px;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 50%;
    }

    .hero__content {
      padding: 80px 64px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      z-index: 2;
    }
    .hero__eyebrow {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--stone);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .hero__eyebrow::before {
      content: '';
      width: 32px;
      height: 1px;
      background-color: var(--gold);
    }
    .hero__headline {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(44px, 5vw, 68px);
      line-height: 1.1;
      color: var(--white);
      letter-spacing: -0.02em;
      margin-bottom: 28px;
    }
    .hero__headline em {
      font-style: italic;
      color: var(--stone);
    }
    .hero__sub {
      font-size: 16px;
      font-weight: 300;
      color: rgba(255,255,255,0.65);
      line-height: 1.75;
      max-width: 400px;
      margin-bottom: 44px;
    }
    .hero__actions {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }
    .btn {
      display: inline-block;
      padding: 14px 32px;
      font-family: 'Jost', sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 2px;
      transition: all 0.2s;
      cursor: pointer;
      border: none;
    }
    .btn--primary {
      background-color: var(--gold);
      color: var(--ink);
    }
    .btn--primary:hover {
      background-color: var(--gold-light);
      transform: translateY(-1px);
    }
    .btn--outline {
      background-color: transparent;
      color: rgba(255,255,255,0.8);
      border: 1px solid rgba(255,255,255,0.25);
    }
    .btn--outline:hover {
      border-color: rgba(255,255,255,0.6);
      color: var(--white);
    }
    .hero__trust {
      margin-top: 56px;
      padding-top: 32px;
      border-top: 1px solid rgba(255,255,255,0.1);
      display: flex;
      gap: 36px;
    }
    .hero__trust-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .hero__trust-value {
      font-family: 'Cormorant Garamond', serif;
      font-size: 28px;
      font-weight: 300;
      color: var(--white);
      line-height: 1;
    }
    .hero__trust-label {
      font-size: 11px;
      font-weight: 400;
      color: rgba(255,255,255,0.45);
      letter-spacing: 0.06em;
    }

    /* ── QUICK BOOKING STRIP ── */
    .booking-strip {
      background-color: var(--stone-pale);
      border-bottom: 1px solid var(--stone-light);
      padding: 24px 48px;
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    .booking-strip__label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--forest);
      margin-right: 8px;
      white-space: nowrap;
    }
    .booking-strip__field {
      display: flex;
      flex-direction: column;
      gap: 3px;
      flex: 1;
      min-width: 140px;
    }
    .booking-strip__field label {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-light);
    }
    .booking-strip__field input,
    .booking-strip__field select {
      padding: 9px 12px;
      border: 1px solid var(--stone-light);
      border-radius: 2px;
      background-color: var(--white);
      font-family: 'Jost', sans-serif;
      font-size: 13px;
      color: var(--ink);
      outline: none;
      transition: border-color 0.2s;
    }
    .booking-strip__field input:focus,
    .booking-strip__field select:focus {
      border-color: var(--forest);
    }
    .booking-strip .btn--primary {
      align-self: flex-end;
      white-space: nowrap;
      padding: 11px 28px;
    }

    /* ── SECTION SHARED ── */
    .section {
      padding: 96px 48px;
    }
    .section--alt {
      background-color: var(--stone-pale);
    }
    .section--dark {
      background-color: var(--forest);
    }
    .section__header {
      margin-bottom: 56px;
    }
    .section__eyebrow {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .section__eyebrow::before {
      content: '';
      width: 24px;
      height: 1px;
      background-color: var(--gold);
    }
    .section__title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(32px, 4vw, 48px);
      color: var(--ink);
      line-height: 1.15;
      letter-spacing: -0.02em;
    }
    .section--dark .section__title { color: var(--white); }
    .section__title em {
      font-style: italic;
      color: var(--forest-light);
    }
    .section--dark .section__title em { color: var(--stone); }

    /* ── ABOUT ── */
    .about {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .about__text p {
      font-size: 15px;
      font-weight: 300;
      color: var(--ink-mid);
      line-height: 1.85;
      margin-bottom: 20px;
    }
    .about__text p:last-child { margin-bottom: 0; }
    .about__text strong {
      color: var(--forest);
      font-weight: 500;
    }
    .about__visual {
      position: relative;
    }
    .about__card-main {
      background-color: var(--forest);
      border-radius: 4px;
      aspect-ratio: 4/3;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .about__card-main::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.015) 0px,
        rgba(255,255,255,0.015) 1px,
        transparent 1px,
        transparent 40px
      );
    }
    .about__card-main-label {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 18px;
      color: rgba(255,255,255,0.3);
      text-align: center;
      line-height: 1.6;
      padding: 24px;
      position: relative;
      z-index: 1;
    }
    .about__card-float {
      position: absolute;
      bottom: -24px;
      right: -24px;
      background-color: var(--gold);
      padding: 20px 24px;
      border-radius: 4px;
    }
    .about__card-float-value {
      font-family: 'Cormorant Garamond', serif;
      font-size: 36px;
      font-weight: 300;
      color: var(--ink);
      line-height: 1;
    }
    .about__card-float-label {
      font-size: 11px;
      font-weight: 500;
      color: var(--ink-mid);
      letter-spacing: 0.06em;
      margin-top: 4px;
    }

    /* ── AMENITIES ── */
    .amenities-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      background-color: var(--stone-light);
    }
    .amenity {
      background-color: var(--cream);
      padding: 36px 32px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: background-color 0.2s;
    }
    .amenity:hover {
      background-color: var(--white);
    }
    .amenity__icon {
      width: 44px;
      height: 44px;
      background-color: var(--stone-pale);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
    .amenity__title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 20px;
      font-weight: 400;
      color: var(--ink);
      line-height: 1.2;
    }
    .amenity__desc {
      font-size: 13px;
      font-weight: 300;
      color: var(--ink-light);
      line-height: 1.65;
    }
    
    /* This is the new class for the Lucide icons */
    .amenity__icon svg {
        width: 24px;
        height: 24px;
        stroke: var(--forest);
        stroke-width: 1.5;
        }

    /* ── ROOMS ── */
    .rooms-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .room-card {
      background-color: var(--white);
      border: 1px solid var(--stone-light);
      border-radius: 4px;
      overflow: hidden;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .room-card:hover {
      box-shadow: 0 12px 40px rgba(44,62,45,0.12);
      transform: translateY(-3px);
    }
    .room-card--featured {
      grid-column: span 2;
    }
    .room-card__visual {
      background-color: var(--forest-mid);
      aspect-ratio: 16/9;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .room-card--featured .room-card__visual {
      aspect-ratio: 21/9;
    }
    .room-card__visual::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,0.02) 0px,
        rgba(255,255,255,0.02) 1px,
        transparent 1px,
        transparent 32px
      );
    }
    .room-card__visual-label {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 14px;
      color: rgba(255,255,255,0.25);
      position: relative;
      z-index: 1;
    }
    .room-card__badge {
      position: absolute;
      top: 16px;
      left: 16px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 2px;
      z-index: 2;
    }
    .room-card__badge--penthouse {
      background-color: var(--gold);
      color: var(--ink);
    }
    .room-card__badge--standard {
      background-color: rgba(255,255,255,0.15);
      color: var(--white);
    }
    .room-card__body {
      padding: 24px 28px 28px;
    }
    .room-card__type {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--forest-light);
      margin-bottom: 8px;
    }
    .room-card__name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 24px;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: 10px;
      line-height: 1.2;
    }
    .room-card__desc {
      font-size: 13px;
      font-weight: 300;
      color: var(--ink-light);
      line-height: 1.65;
      margin-bottom: 20px;
    }
    .room-card__features {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 20px;
    }
    .room-feature {
      font-size: 11px;
      font-weight: 400;
      color: var(--ink-mid);
      background-color: var(--stone-pale);
      padding: 4px 10px;
      border-radius: 2px;
      letter-spacing: 0.02em;
    }
    .room-card__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 16px;
      border-top: 1px solid var(--stone-light);
    }
    .room-card__price {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .room-card__price-value {
      font-family: 'Cormorant Garamond', serif;
      font-size: 26px;
      font-weight: 400;
      color: var(--forest);
      line-height: 1;
    }
    .room-card__price-note {
      font-size: 11px;
      color: var(--ink-light);
    }

    /* ── BOOKING SECTION ── */
    .booking-section {
      background-color: var(--forest);
      padding: 96px 48px;
    }
    .booking-section__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
      max-width: 1100px;
      margin: 0 auto;
    }
    .booking-section__intro .section__eyebrow { color: var(--stone); }
    .booking-section__intro .section__eyebrow::before { background-color: var(--stone); }
    .booking-section__intro .section__title { color: var(--white); margin-bottom: 20px; }
    .booking-section__intro p {
      font-size: 15px;
      font-weight: 300;
      color: rgba(255,255,255,0.6);
      line-height: 1.8;
      margin-bottom: 32px;
    }
    .booking-section__direct {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .booking-section__direct-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      color: rgba(255,255,255,0.7);
    }
    .booking-section__direct-item::before {
      content: '✓';
      color: var(--gold);
      font-weight: 600;
    }
    .booking-form {
      background-color: var(--cream);
      border-radius: 4px;
      padding: 40px;
    }
    .booking-form__title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 24px;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: 28px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--stone-light);
    }
    .booking-form__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
    }
    .form-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .form-field--full {
      grid-column: span 2;
    }
    .form-field label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-light);
    }
    .form-field input,
    .form-field select,
    .form-field textarea {
      padding: 12px 14px;
      border: 1px solid var(--stone-light);
      border-radius: 2px;
      background-color: var(--white);
      font-family: 'Jost', sans-serif;
      font-size: 14px;
      color: var(--ink);
      outline: none;
      transition: border-color 0.2s;
      width: 100%;
    }
    .form-field input:focus,
    .form-field select:focus,
    .form-field textarea:focus {
      border-color: var(--forest);
    }
    .form-field textarea {
      resize: vertical;
      min-height: 80px;
    }
    .booking-form .btn--primary {
      width: 100%;
      text-align: center;
      margin-top: 8px;
      padding: 15px;
      font-size: 13px;
    }
    .booking-form__note {
      font-size: 11px;
      color: var(--ink-light);
      text-align: center;
      margin-top: 12px;
    }

/* -- Additions to Booking Section -- */

    /* Custom Checkbox Styling */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  position: relative;
  padding: 4px 0;
}

/* Hide default checkbox */
.checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* Custom checkbox visual */
.checkbox-custom {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--stone-light);
  border-radius: 2px;
  background-color: var(--white);
  transition: all 0.2s ease;
  position: relative;
  margin-top: 2px;
}

/* Checked state */
.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
  background-color: var(--forest);
  border-color: var(--forest);
}

/* Checkmark */
.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Focus state for accessibility */
.checkbox-label input[type="checkbox"]:focus + .checkbox-custom {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Checkbox text styling */
.checkbox-text {
  color: var(--ink-light);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.privacy-link {
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.privacy-link:hover {
  color: var(--gold);
}

/* Disabled button state */
.btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--stone);
  border-color: var(--stone);
}

/* Override the existing form-field label styles for this specific case */
.form-field .checkbox-label {
  margin-top: 8px;
}

/* -- End of checkbox addition -- */


















    /* ── LOCATION ── */
    .location {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }
    .location__map {
      background-color: var(--stone-pale);
      border: 1px solid var(--stone-light);
      border-radius: 4px;
      aspect-ratio: 4/3;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 16px;
      position: relative;
      overflow: hidden;
    }
    .location__map::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(0deg, var(--stone-light) 0px, var(--stone-light) 1px, transparent 1px, transparent 48px),
        repeating-linear-gradient(90deg, var(--stone-light) 0px, var(--stone-light) 1px, transparent 1px, transparent 48px);
      opacity: 0.5;
    }
    .location__map-label {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 16px;
      color: var(--ink-light);
      position: relative;
      z-index: 1;
      text-align: center;
    }
    .location__map-pin {
      font-size: 32px;
      position: relative;
      z-index: 1;
    }
    .location__map-note {
      font-size: 12px;
      color: var(--ink-light);
      position: relative;
      z-index: 1;
    }
    .location__info {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
    .location__address {
      font-size: 15px;
      font-weight: 300;
      color: var(--ink-mid);
      line-height: 1.8;
    }
    .location__address strong {
      display: block;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--forest);
      margin-bottom: 8px;
    }
    .location__transport {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .transport-item {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      padding: 16px;
      background-color: var(--stone-pale);
      border-radius: 4px;
    }
    .transport-item__icon {
      font-size: 20px;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .transport-item__text strong {
      display: block;
      font-size: 13px;
      font-weight: 500;
      color: var(--ink);
      margin-bottom: 3px;
    }
    .transport-item__text span {
      font-size: 12px;
      font-weight: 300;
      color: var(--ink-light);
      line-height: 1.5;
    }

    /* ── CONTACT ── */
    .contact-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      background-color: var(--stone-light);
    }
    .contact-card {
      background-color: var(--cream);
      /* padding: 40px 36px; */
      padding: 26px 36px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .contact-card__icon {
      font-size: 24px;
      margin-bottom: 4px;
    }
    .contact-card__title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 20px;
      font-weight: 400;
      color: var(--ink);
    }
    .contact-card__value {
      font-size: 15px;
      font-weight: 400;
      color: var(--forest);
      text-decoration: none;
    }
    .contact-card__value:hover { text-decoration: underline; }
    .contact-card__note {
      font-size: 12px;
      font-weight: 300;
      color: var(--ink-light);
      line-height: 1.6;
    }

    /* ── FOOTER ── */
    .footer {
      background-color: var(--ink);
      padding: 56px 48px 32px;
    }
    .footer__main {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 64px;
      margin-bottom: 48px;
      padding-bottom: 48px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .footer__brand-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 28px;
      font-weight: 300;
      color: var(--white);
      letter-spacing: 0.04em;
      margin-bottom: 12px;
    }
    .footer__brand-desc {
      font-size: 13px;
      font-weight: 300;
      color: rgba(255,255,255,0.45);
      line-height: 1.75;
      max-width: 280px;
      margin-bottom: 24px;
    }
    .footer__col-title {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      margin-bottom: 16px;
    }
    .footer__links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .footer__links a {
      font-size: 13px;
      font-weight: 300;
      color: rgba(255,255,255,0.55);
      text-decoration: none;
      transition: color 0.15s;
    }
    .footer__links a:hover { color: var(--white); }
    .footer__bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .footer__copy {
      font-size: 12px;
      color: rgba(255,255,255,0.25);
    }
    .footer__legal {
      display: flex;
      gap: 24px;
      list-style: none;
    }
    .footer__legal a {
      font-size: 12px;
      color: rgba(255,255,255,0.25);
      text-decoration: none;
    }
    .footer__legal a:hover { color: rgba(255,255,255,0.6); }