/* ===== amenities.html ===== */
/* ============================================================
FOUNDATION — tokens · type · layout · reveals
============================================================ */
:root {
--olive: #2D3823;
--ivory: #F2F6EA;
--tea: #D5E6C2;
--pistachio: #A4C36F;
--moss: #141B0A;
--rule: rgba(45, 56, 35, .18);
--serif: "Fraunces", "Times New Roman", serif;
--sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
--display: "Inter", "Helvetica Neue", sans-serif;
--t-h1-size: clamp(56px, 8.4vw, 132px);
--t-h1-lh: .92;
--t-h1-tracking: -.04em;
--t-h2-size: clamp(44px, 6vw, 96px);
--t-h2-lh: .95;
--t-h2-tracking: -.035em;
--t-h3-size: clamp(40px, 5vw, 80px);
--t-h3-lh: 1;
--t-h3-tracking: -.03em;
--t-h4-size: clamp(32px, 3.2vw, 48px);
--t-h4-lh: 1.2;
--t-h4-tracking: -.02em;
--t-h5-size: clamp(22px, 2vw, 32px);
--t-h5-lh: 1.15;
--t-h5-tracking: -.015em;
--t-h6-size: clamp(18px, 1.4vw, 22px);
--t-h6-lh: 1.25;
--t-h6-tracking: -.005em;
--t-body-lg-size: clamp(18px, 1.4vw, 22px);
--t-body-size: 17px;
--t-body-sm-size: 15px;
--t-body-xs-size: 13px;
--t-label-lg-size: 13px;
--t-label-size: 11px;
}
/* Honor the native HTML `hidden` attribute even when class-based
display rules (e.g. .enquire-form{display:flex}) would otherwise win */
html {
scroll-behavior: smooth;
}
body {
background: var(--ivory);
color: var(--olive);
font-family: var(--sans);
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* clip (not hidden) so position:sticky in descendants still works.
overflow-x:hidden on body makes body a scrolling container, which
breaks vertical sticky in Chrome/Safari. overflow-x:clip is purely
visual, no scroll context. */
overflow-x: clip;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
button {
font: inherit;
color: inherit;
}
/* TYPE BASE */
.body-lg {
font-size: var(--t-body-lg-size);
line-height: 1.55;
color: var(--olive);
}
.body {
font-size: var(--t-body-size);
line-height: 1.6;
color: var(--olive);
}
.body-sm {
font-size: var(--t-body-sm-size);
line-height: 1.55;
color: var(--olive);
}
.body-xs {
font-size: var(--t-body-xs-size);
line-height: 1.5;
color: var(--olive);
}
/* Headline em — heavier optical-size 144 emphasis (no italic) */
h1 em,
h2 em,
h3 em,
.opening-h em,
.closing-h em,
.shape-h em {
font-weight: 500;
font-variation-settings: "opsz" 144;
}
.text-danger {
color:red
}
.d-none {
display:none
}
.d-block {
display:block;
}
.mt-2 {
margin-top: 8px;
}
textarea {
resize:none !important;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* Word-by-word reveal — applied via JS to every H1–H6 on the page.
Preserves inline markup (em, br, strong). */
@media (prefers-reduced-motion:reduce) {
.reveal-words .word {
transition: none;
opacity: 1;
transform: none;
}
}
/* layout */
@media (max-width:768px) {
.wrap {
padding: 0 20px;
}
}
@media (max-width:480px) {
.wrap {
padding: 0 16px;
}
}
/* eyebrow / labels */
/* pill button — copied verbatim from index.html so visuals match exactly */
/* Oval-arrow icon for pill buttons */
/* Icon colors flow via custom properties so they cascade through