/* ==========================================================================
   refined.css — Marriott / Westin-inspired design system
   Loaded LAST. Converts the boutique-serif look into the sleek,
   grid-disciplined aesthetic of a premium international hotel brand.

   THE FIVE MOVES THAT CREATE THE REFERENCE LOOK
   1. One neo-grotesque typeface. No decorative serif italics.
   2. Near-white canvas, charcoal text, ONE accent used sparingly.
   3. Square corners. Hairline borders instead of drop shadows.
   4. Uppercase, wide-tracked micro-labels above every headline.
   5. Full-bleed photography, left-aligned copy, strict vertical rhythm.
   ========================================================================== */

:root{
  /* --- Type ------------------------------------------------------- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, Helvetica, Arial, sans-serif,
          'Apple Color Emoji', 'Noto Color Emoji';

  /* --- Palette: quiet, architectural ------------------------------ */
  --page:        #ffffff;   /* primary canvas  */
  --page-alt:    #f6f5f3;   /* alternating band */
  --page-deep:   #14100e;   /* dark footer / feature band */
  --ink:         #1b1b1b;
  --ink-soft:    #4a4a4a;
  --muted:       #6e6e6e;
  --hairline:    #e2e0dc;
  --hairline-str:#c9c6c0;

  /* Brand equity retained — but rationed. Accent now appears on CTAs
     and active states only, never as large fills. */
  --accent:      #7a2535;
  --accent-deep: #5a1a28;

  /* --- Rhythm ----------------------------------------------------- */
  --gut: clamp(20px, 5vw, 64px);
  --sec-y: clamp(56px, 9vw, 128px);
  --maxw: 1280px;
}

/* --------------------------------------------------------------------
   1. TYPOGRAPHY — single grotesque, tight tracking, no ornament
   The ornate italic serif was the single strongest signal of
   "small boutique". Premium chains use one disciplined sans.
   -------------------------------------------------------------------- */
html{ font-size:16px; }

body,
button, input, select, textarea, optgroup,
.about-pull-quote, .blog-full h4, .blog-title-new, .cta-title, .faq-q,
.fd-header h3, .fd-text h4, .fg-cover-initial, .fg-overall strong,
.fg-rank, .fg-title, .foot-contact-name, .foot-fb-link,
.hero-bg-ph .ph-bg-text, .hero-card-title, .hero-book-card h3,
.hero-title, .ja-title, .logo-mark .fallback, .mob-link,
.nav-brand-name, .prop-qf-val, .prop-title, .carousel-active-title,
.rank-item::before, .rev-av-new, .rev-text-new, .room-name-new,
.rooms-section-title, .score-num, .section-title, .trust-text-val,
.why-accent-num, .why-point-num, .why-point-title,
.blog-cover-new .img-ph .ph-text, .gal-item-new .ph-text,
.prop-img-holder .ph-text, .room-img-new .ph-text,
.why-image-main .ph-text, .ph-text,
h1, h2, h3, h4, h5, h6{
  font-family: var(--font);
}

/* Kill every decorative italic. The <em>s inside headings were the
   "wedding venue" tell. They now read as normal weight text. */
.hero-title em, .section-title em, .prop-title em, .cta-title em,
.carousel-active-title em, .rooms-section-title em{
  font-style: normal;
  font-weight: 300;
  font-family: var(--font);
}

body{
  background: var(--page);
  color: var(--ink);
  font-size:1rem;
  line-height:1.65;
  font-weight:400;
  letter-spacing:0;
}

/* Display scale — large, tight, low-drama */
.hero-title{
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.03em;
}
.section-title{
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -.022em;
  color: var(--ink);
}
.prop-title, .carousel-active-title{
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -.018em;
}
.rooms-section-title{
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.blog-title-new, .room-name-new, .fg-title, .ja-title, .why-point-title{
  font-weight: 500;
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------------
   2. MICRO-LABELS — the signature detail
   Small uppercase, heavily tracked, muted, sitting above the headline.
   -------------------------------------------------------------------- */
.section-eyebrow, .section-label, .eyebrow, .bk-eyebrow, .prop-badge{
  font-family: var(--font);
  font-size: .68rem !important;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
}

/* Remove the decorative gold flourish + rule; the reference uses
   clean space, not ornament. */
.section-label::after, .eyebrow::after{ display:none !important; }
.section-rule{
  width:100%; max-width:none; height:1px;
  background: var(--hairline);
  margin: 0 0 clamp(24px,3vw,40px);
}
.section-rule.center{ margin-inline:auto; }

.section-lede, .section-sub, .prop-desc{
  color: var(--muted);
  font-size: 1.02rem;
  line-height:1.7;
  font-weight:400;
}

/* --------------------------------------------------------------------
   3. FLATTEN — square corners, hairlines, no shadows
   Rounded corners + soft shadows read "web app". Premium hospitality
   is architectural: crisp edges and thin rules.
   -------------------------------------------------------------------- */
.prop-card-new, .blog-card-new, .food-card, .review-card, .room-card-new,
.cmp-table-wrap, .hero-book-card, .bk-modal, .faq-item, .ja-card,
.fg-card, .trust-item, .why-point, .newsletter-inner, .timeline-content,
.itinerary-pane, .gal-item-new, .room-img-new, img, input, select,
textarea, .btn, .btn-new, .book-btn, .nav-book-btn, .bk-submit,
.itinerary-tab-btn, .prop-tab-btn{
  border-radius: 0 !important;
}
/* Circles stay circular */
.rev-av-new, .timeline-badge, .sb-dot, .lb-close, .lb-prev, .lb-next,
.pill-fab{ border-radius:50% !important; }

.prop-card-new, .blog-card-new, .food-card, .review-card,
.room-card-new, .fg-card, .ja-card, .cmp-table-wrap{
  box-shadow: none !important;
  border: 1px solid var(--hairline);
  background: var(--page);
  transition: border-color .35s ease;
}
.prop-card-new:hover, .blog-card-new:hover, .food-card:hover,
.room-card-new:hover{
  transform: none !important;      /* no bouncing cards */
  box-shadow: none !important;
  border-color: var(--hairline-str);
}

/* --------------------------------------------------------------------
   4. BUTTONS — rectangular, tracked, decisive
   -------------------------------------------------------------------- */
.btn, .btn-new, .book-btn, .nav-book-btn, .bk-submit{
  font-family: var(--font);
  font-size: .74rem !important;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background-color .28s ease, color .28s ease,
              border-color .28s ease;
  line-height:1;
}

/* Primary: solid ink. Reference brands lead with near-black, not colour. */
.btn-burgundy, .btn-primary, .nav-book-btn, .bk-submit, .book-btn.primary{
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  color: #fff !important;
}
.btn-burgundy:hover, .btn-primary:hover, .nav-book-btn:hover,
.bk-submit:hover, .book-btn.primary:hover{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color:#fff !important;
}

/* Secondary: hairline outline */
.btn-outline, .btn-outline-dark{
  background: transparent !important;
  border: 1px solid var(--hairline-str) !important;
  color: var(--ink) !important;
}
.btn-outline:hover, .btn-outline-dark:hover{
  border-color: var(--ink) !important;
  background: var(--ink) !important;
  color:#fff !important;
}

/* On photography */
.btn-outline-white{
  background: transparent !important;
  border:1px solid rgba(255,255,255,.75) !important;
  color:#fff !important;
}
.btn-outline-white:hover{
  background:#fff !important; color: var(--ink) !important;
  border-color:#fff !important;
}

/* --------------------------------------------------------------------
   5. HERO — full bleed, left aligned, restrained scrim
   -------------------------------------------------------------------- */
#hero, .hero{ min-height: min(88vh, 820px); }
#hero img, .hero img{ object-fit: cover; }

/* Directional scrim: dark at lower-left where the copy sits, clear
   over the mountain. Reads far more intentional than a flat wash. */
.hero-scrim, .hero-overlay{
  background: linear-gradient(105deg,
              rgba(10,8,7,.74) 0%,
              rgba(10,8,7,.52) 38%,
              rgba(10,8,7,.18) 68%,
              rgba(10,8,7,.30) 100%) !important;
}
.hero-content{
  max-width: var(--maxw);
  margin-inline: auto;
  width:100%;
  padding-inline: var(--gut);
  text-align: left !important;
}
.hero-content .hero-title,
.hero-content .hero-sub,
.hero-content .section-eyebrow{ margin-inline: 0 !important; }
.hero-sub{
  font-size: clamp(.98rem, 1.5vw, 1.14rem);
  font-weight: 300;
  max-width: 46ch;
  color: rgba(255,255,255,.9);
  letter-spacing:.005em;
}
.hero-content .section-eyebrow{ color: rgba(255,255,255,.82) !important; }

/* Hero promo card: flat glass panel, not a floating rounded box */
.hero-book-card{
  background: rgba(255,255,255,.96) !important;
  border: none !important;
  border-radius:0 !important;
  box-shadow: none !important;
}
.hero-book-card .hero-card-title{
  font-family: var(--font) !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  text-align: left !important;
  color: var(--muted) !important;
  margin-bottom: 18px !important;
}

/* --------------------------------------------------------------------
   6. NAV — slim, white, sticky, hairline base
   -------------------------------------------------------------------- */
.top-bar{
  background: var(--page);
  border-bottom: 1px solid var(--hairline);
  box-shadow: none !important;
}
.nav-brand-name{
  font-weight:600; letter-spacing:.06em;
  text-transform: uppercase; font-size:.9rem;
}
.nav-links a, .mob-link{
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--ink-soft);
}
.nav-links a:hover{ color: var(--accent); }

/* --------------------------------------------------------------------
   7. SECTION RHYTHM + ALTERNATING BANDS
   -------------------------------------------------------------------- */
section{ padding-block: var(--sec-y) !important; }
section > .container, .container, .wrap, .inner{
  max-width: var(--maxw);
  margin-inline:auto;
  padding-inline: var(--gut);
}
#why, #reviews, #faq, #food{ background: var(--page-alt); }
#properties, #blog, #newsletter{ background: var(--page); }

.sec-head{ margin-bottom: clamp(28px,4vw,52px); }
.sec-head.center{ text-align:center; }

/* --------------------------------------------------------------------
   8. IMAGERY — uniform aspect ratios create the "neat" grid
   Mismatched image heights were making the grids feel ragged.
   -------------------------------------------------------------------- */
.prop-img-holder{ aspect-ratio: 3/2; }
.room-img-new{ aspect-ratio: 4/3; }
.gal-item-new{ aspect-ratio: 1/1; }
.blog-cover-new{ aspect-ratio: 16/10; }
.prop-img-holder img, .room-img-new img, .gal-item-new img,
.blog-cover-new img, .food-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:none !important;
}

/* Placeholder plates: neutral + uppercase micro-label, no gold monogram */
.room-img-new, .gal-item-new, .blog-cover-new .img-ph, .why-image-main{
  background: #efedea !important;
  background-image:none !important;
}
.room-img-new::after, .gal-item-new::after{ display:none !important; }
.ph-text{
  color: #b6b1a9 !important;
  font-weight:600 !important;
  font-size:.68rem !important;
  letter-spacing:.2em !important;
  text-transform:uppercase;
}
.room-img-new .ph-text::after, .gal-item-new .ph-text::after{
  content:"Photography coming soon";
  top: calc(50% + 1.15rem);
  font-size:.56rem;
  letter-spacing:.16em;
  color:#b6b1a9;
}

/* --------------------------------------------------------------------
   9. TABS — underline segmented control
   -------------------------------------------------------------------- */
.itinerary-tab-btn, .prop-tab-btn{
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--muted) !important;
  font-size:.76rem !important;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding: 14px 22px !important;
}
.itinerary-tab-btn.active, .prop-tab-btn.active{
  color: var(--ink) !important;
  border-bottom-color: var(--accent) !important;
  background:transparent !important;
}

/* --------------------------------------------------------------------
   10. RATES — quiet, tabular, confident
   -------------------------------------------------------------------- */
.price-amount, .rate-num, .score-num{
  font-weight:500;
  letter-spacing:-.01em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}
.price-label, .rate-label{
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------
   11. FORMS — flat fields, hairline base
   -------------------------------------------------------------------- */
input, select, textarea{
  font-family: var(--font);
  border:1px solid var(--hairline-str) !important;
  background: var(--page) !important;
  padding:13px 14px !important;
  font-size:.92rem !important;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color: var(--ink) !important;
}
.bk-modal label, .nl-label{
  font-size:.64rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color: var(--muted);
}

/* --------------------------------------------------------------------
   12. TABLE — editorial, ruled, no zebra fills
   -------------------------------------------------------------------- */
.cmp-table{ border-collapse:collapse; width:100%; }
.cmp-table th{
  background: transparent;
  border-bottom:1px solid var(--ink);
  font-size:.66rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color: var(--ink);
  padding:16px 14px; text-align:left;
}
.cmp-table td{
  border-bottom:1px solid var(--hairline);
  padding:16px 14px; color: var(--ink-soft); font-size:.92rem;
}
.cmp-table tr:hover td{ background: var(--page-alt); }

/* --------------------------------------------------------------------
   13. FOOTER + DARK BANDS
   -------------------------------------------------------------------- */
footer, .site-footer, #cta{
  background: var(--page-deep) !important;
  color: rgba(255,255,255,.72);
  border-top: none;
}
footer a, .site-footer a{ color: rgba(255,255,255,.72); }
footer a:hover, .site-footer a:hover{ color:#fff; }
.cta-title{ color:#fff; font-weight:300; }
.foot-head, .foot-col h4{
  font-size:.64rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color: rgba(255,255,255,.5);
}

/* --------------------------------------------------------------------
   14. STICKY BOOKING BAR + CONTACT PILL — squared off
   -------------------------------------------------------------------- */
#sticky-book, #quick-book{
  background: rgba(255,255,255,.97) !important;
  border-top:1px solid var(--hairline) !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
#contact-pill .pill-menu{
  border-radius:0 !important;
  border:1px solid var(--hairline) !important;
  box-shadow:none !important;
}

/* --------------------------------------------------------------------
   15. LINKS — hairline underline on hover, no colour shouting
   -------------------------------------------------------------------- */
a{ text-decoration:none; }
.blog-card-new:hover .blog-title-new,
.food-card:hover .fg-title{
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------------
   16. MOBILE
   -------------------------------------------------------------------- */
@media (max-width: 860px){
  .hero-title{ font-size: clamp(2rem, 9vw, 2.9rem); }
  .btn, .btn-new, .book-btn{ padding:14px 22px; }
  section{ padding-block: clamp(44px,11vw,72px) !important; }
  .section-rule{ margin-bottom:22px; }
}

/* --------------------------------------------------------------------
   17. SINGLE-TYPEFACE ENFORCEMENT
   The earlier layers set the serif in ~40 places, one of them with
   !important (.ph-text), plus selectors I had not catalogued
   (.timeline-title, .vocab-word, .dialog-meta-val, table th).
   Because the Cormorant webfont is no longer loaded, any survivor
   silently falls back to Georgia — which looks like a bug, not a
   choice. A premium brand runs ONE typeface, so enforce it globally
   rather than playing selector whack-a-mole.

   Monospace elements are exempted so any code/pre content keeps its
   intended face.
   -------------------------------------------------------------------- */
*:not(code):not(pre):not(kbd):not(samp):not(tt),
*::before,
*::after{
  font-family: var(--font) !important;
}

code, pre, kbd, samp, tt{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* Re-assert the intentional weights that the serif rules carried, so
   nothing flattens to a uniform 400 after the sweep. */
.hero-title{ font-weight:300 !important; }
.section-title, .cta-title{ font-weight:300 !important; }
.prop-title, .carousel-active-title{ font-weight:400 !important; }
.timeline-title{
  font-weight:600 !important;
  font-size:1rem !important;
  letter-spacing:.005em !important;
}
.vocab-word{ font-weight:600 !important; letter-spacing:.01em !important; }
.dialog-meta-val, .prop-qf-val, .trust-text-val{ font-weight:500 !important; }
.score-num, .why-accent-num, .why-point-num, .fg-rank{ font-weight:500 !important; }

/* .ph-text needs a class-level rule: premium.css declares its serif
   with !important at 0,1,0 specificity, which outranks the universal
   selector above even though that is also !important. Matching the
   specificity and coming later in the cascade wins cleanly. */
.ph-text,
.room-img-new .ph-text,
.gal-item-new .ph-text,
.prop-img-holder .ph-text,
.blog-cover-new .img-ph .ph-text,
.why-image-main .ph-text,
.hero-bg-ph .ph-bg-text{
  font-family: var(--font) !important;
}