:root { --font-sans: "Montserrat"; --font-serif: Georgia; }
.hero-subtitle .hero-location { display: block; width: fit-content; margin: 8px auto 0; white-space: nowrap; }
.brand-break { background-position: center 22% !important; height: clamp(260px, 44vw, 680px); min-height: 0; }
details.faq-item > summary { list-style: none; cursor: pointer; }
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item[open] .faq-answer-wrap { grid-template-rows: 1fr; }
details.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-question:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid #748636; outline-offset: 5px; }
.footer-legal { display: block !important; line-height: 1.8; font-size: 12px; }
.beachfront-editorial { background: var(--paper); }
.beachfront-editorial .section, .bf-terms.section { width: min(1280px, calc(100% - 96px)); margin: 0 auto; padding: 72px 0; }
.beachfront-editorial h2, .bf-terms h2, .company-document-links h2 { font-family: "Unbounded", sans-serif; font-size: clamp(27px, 3.2vw, 43px); font-weight: 400; line-height: 1.28; letter-spacing: -.035em; }
.beachfront-editorial h3 { font-size: 20px; line-height: 1.4; font-weight: 600; }
.beachfront-editorial p, .bf-terms dd { font-size: 16px; line-height: 1.8; }
.bf-heading { max-width: 880px; margin: 0 auto 40px; text-align: center; }
.bf-heading h2 { margin-bottom: 24px; }
.bf-heading p { margin-bottom: 0; }
.bf-heading .section-kicker, .bf-gift .section-kicker, .bf-location > .section-kicker, .bf-terms .section-kicker { font-size: 11px; letter-spacing: .18em; line-height: 1.7; margin-bottom: 16px; text-transform: uppercase; }
.bf-gift.section { border-top: 1px solid var(--line); }
.bf-gift-copy { max-width: 960px; margin: 0 auto 40px; text-align: center; }
.bf-gift-copy h2 { margin: 0 0 24px; }
.bf-gift-copy p { max-width: 880px; margin: 0 auto; }
.bf-gift-copy strong { font-weight: 600; }
.bf-gift-options { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.bf-gift-option { min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; }
.bf-gift-islands { background: #dfe7e3; color: #253f3c; }
.bf-gift-club { background: #eae1d3; color: #4c3e2c; }
.bf-gift-option h3 { margin: 0 0 14px; font-size: clamp(20px, 2vw, 27px); font-weight: 600; letter-spacing: .035em; }
.bf-gift-option p { margin: 0; font-size: 18px; }
.bf-about-heading { max-width: 850px; margin-bottom: 48px; }
.bf-about-heading .section-kicker { color: #74746e; font-size: 11px; font-weight: 500; letter-spacing: .22em; line-height: 1.7; margin-bottom: 16px; text-transform: uppercase; }
.bf-about-heading h2 { margin: 0; max-width: 800px; }
.bf-about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; }
.bf-about-content ul { margin: 0; padding: 28px 0 0; border-top: 1px solid var(--line); list-style: none; }
.bf-about-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; align-content: start; }
.bf-about-facts strong { display: block; font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; line-height: 1.4; letter-spacing: -.03em; }
.bf-about-facts span { display: block; max-width: 230px; margin-top: 8px; color: #5c5c55; font-size: 14px; line-height: 1.7; }
.bf-about-amenities { display: grid; gap: 14px; align-content: start; font-size: 16px; line-height: 1.6; }
.bf-rooftop > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; }
.bf-room-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 32px; }
.bf-room img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.bf-room h3 { margin: 20px 0 10px; }
.bf-room-wide { grid-column: 1 / -1; }
.bf-room-wide img { aspect-ratio: 16 / 9; }
.bf-location { text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bf-distances { display: grid; grid-template-columns: repeat(3, 1fr); margin: 48px 0 42px; }
.bf-distances > div { padding: 8px 24px; }
.bf-distances > div + div { border-left: 1px solid var(--line); }
.bf-distances strong { display: block; font-size: clamp(35px, 5vw, 62px); font-weight: 500; margin-bottom: 14px; letter-spacing: -.04em; }
.bf-distances span { font-size: 14px; line-height: 1.6; display: block; }
.bf-facilities { margin-bottom: 0; }
.bf-services ul { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 48px; padding: 0; margin: 0; list-style: none; }
.bf-services li { border-bottom: 1px solid var(--line); }
.bf-services li a { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 20px 0; line-height: 1.6; font-size: 16px; height: 100%; }
.bf-services li a:hover { color: #6b782f; }
.bf-services li a span { font-size: 18px; opacity: .55; }
.bf-service-note { text-align: center; max-width: 820px; margin: 32px auto 0; color: #5c5c55; font-weight: 600; }
.bf-terms dl { max-width: 1040px; margin: 0 auto; }
.bf-terms dl > div { display: grid; grid-template-columns: 260px 1fr; padding: 20px 0; border-bottom: 1px solid var(--line); gap: 32px; }
.bf-terms dt { font-weight: 600; font-size: 16px; line-height: 1.8; }
.bf-terms dd { margin: 0; }
.company-document-links { margin-top: 48px; }
.company-document-links h2 { font-size: 26px; }
.company-document-links > a { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding: 20px 0; line-height: 1.6; }
.company-content .company-row strong { overflow-wrap: anywhere; }
.company-content h1 { font-size: clamp(32px, 5vw, 64px); line-height: 1.2; overflow-wrap: anywhere; }
.company-content > .section-kicker { color: #64675c; }
@media (max-width: 767px) {
  .beachfront-editorial .section, .bf-terms.section { width: calc(100% - 40px); padding: 44px 0; }
  .bf-gift-copy { margin-bottom: 28px; text-align: left; }
  .bf-gift-options { grid-template-columns: 1fr; gap: 16px; }
  .bf-gift-option { min-height: 180px; padding: 28px; }
  .bf-gift-option h3 { font-size: 21px; }
  .bf-heading { margin-bottom: 28px; }
  .bf-about-heading { margin-bottom: 30px; }
  .bf-about-content { grid-template-columns: 1fr; gap: 30px; }
  .bf-about-content ul { padding-top: 24px; }
  .bf-about-facts { gap: 28px 18px; }
  .bf-about-facts strong { font-size: 23px; }
  .bf-about-facts span { font-size: 13px; }
  .bf-about-amenities { font-size: 14px; gap: 12px; }
  .beachfront-editorial h2, .bf-terms h2 { font-size: 27px; }
  .beachfront-editorial p, .bf-terms dd { font-size: 14px; }
  .bf-room-grid { grid-template-columns: 1fr; gap: 32px; }
  .bf-room h3 { font-size: 19px; margin-top: 16px; }
  .bf-distances { gap: 0; margin: 32px 0; }
  .bf-distances > div { padding: 8px; }
  .bf-distances strong { font-size: 29px; white-space: nowrap; }
  .bf-distances span { font-size: 11px; line-height: 1.7; }
  .bf-services ul { column-gap: 22px; }
  .bf-services li a { font-size: 13px; gap: 5px; height: 100%; }
  .bf-terms dl > div { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .bf-terms dt { font-size: 14px; }
  .company-document-links h2 { font-size: 23px; }
  .company-content h1 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* September 17: interior galleries, consistent icons and readable mobile copy. */
.bf-services li a svg { flex: 0 0 20px; width: 20px; height: 20px; opacity: .6; }
.bf-privilege .bf-heading { margin-bottom: 0; }
.interior-carousel { min-width: 0; }
.interior-rail { position: relative; display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.interior-rail::-webkit-scrollbar { display: none; }
.interior-slide { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.interior-slide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.interior-slide figcaption { font-size: 20px; font-weight: 500; line-height: 1.5; margin-top: 20px; }
.interior-controls { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 24px; }
.interior-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.interior-controls button:disabled { opacity: .3; cursor: default; }
.interior-controls button:not(:disabled):hover { background: #eae1d3; }
.interior-controls span { min-width: 48px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
#availability { scroll-margin-top: 100px; }
.booking-live-form button:disabled { cursor: wait; opacity: .55; }
.booking-days button.unknown { background: #efeee9; color: #888; cursor: default; }
.booking-calendar[data-state="loading"] .booking-legend,
.booking-calendar[data-state="error"] .booking-legend { visibility: hidden; }

/* Desktop only: remove the accumulated double padding between sections. */
@media (min-width: 768px) {
  main > .section:not(.property-intro):not(.property-showcase) { padding-top: 64px; padding-bottom: 64px; }
  .section > .section-heading { margin-bottom: 44px; }
  .property-page .property-showcase { padding-top: 56px; padding-bottom: 48px; }
  .beachfront-editorial .section, .property-page .bf-terms.section { padding-top: 44px; padding-bottom: 44px; }
  .bf-about-heading { margin-bottom: 32px; }
  .bf-heading, .bf-gift-copy { margin-bottom: 28px; }
  .bf-heading h2 { margin-bottom: 18px; }
  .bf-distances { margin: 30px 0; }
  .property-page .property-details-zone { padding-top: 56px; padding-bottom: 56px; }
  .property-page .property-next { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 767px) {
  .section-experiences .experience-card p { display: block !important; -webkit-line-clamp: unset !important; line-clamp: unset; max-height: none !important; height: auto !important; overflow: visible !important; }
  .interior-slide img { aspect-ratio: 3 / 2; }
  .interior-slide figcaption { font-size: 17px; margin-top: 16px; }
  /* Mobile heroes must render before hydration, even on a slow connection. */
  .property-page[data-residence="angsana-beachfront-residences"] .property-hero-image { background-image: url('/images/residences/angsana-beachfront/hero-mobile-crop-20260917.webp') !important; }
  .property-page[data-residence="angsana-oceanview-residences"] .property-hero-image { background-image: url('/images/residences/angsana-oceanview/045.webp') !important; }
  .property-page[data-residence="laguna-beachside-residences"] .property-hero-image { background-image: url('/images/residences/laguna-beachside/014.webp') !important; }
  /* The enhanced gallery replaces this raw image list. Avoid fetching every
     background at once before JavaScript builds the visible gallery. */
  .property-page .property-gallery { display: none !important; }
}