/* Sei Saadiyat - single stylesheet.
   fonts.css + montserrat.css were merged in on 2026-09-02: the previous
   @import chain forced three serial round-trips before first paint.
   Edit this file, not the originals (kept in .backup-2026-09-02/). */

/* Self-hosted webfonts — no external requests at runtime. */

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/co3smX5slCNuHLi8bLeY9MK7whWMhyjYrGFEsdtdc62E6zd58jD-htM8A_6pUKz9ugk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/co3smX5slCNuHLi8bLeY9MK7whWMhyjYrGFEsdtdc62E6zd58jD-iNM8A_6pUKz9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKky2F7i6C.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtKky2F7g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKky2F7i6C.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtKky2F7g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKky2F7i6C.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtKky2F7g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/QGYvz_MVcBeNP4NJuktqUYLkn8BJ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/QGYvz_MVcBeNP4NJuktqUYLkn8BJ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/QGYvz_MVcBeNP4NJuktqUYLkn8BJ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/QGYvz_MVcBeNP4NJuktqUYLkn8BJ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/QGYvz_MVcBeNP4NJuktqUYLkn8BJ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Self-hosted Montserrat — no runtime request to Google. */
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Sei Saadiyat by Aldar — Saadiyat Cultural District, Abu Dhabi
   Layout system after The Bay Interiors; palette taken from the project's own
   teaser — gold script cut into dark figured timber.
   ========================================================================== */
:root{
  --void:#080503;
  --charcoal:#16100a;
  --elevated:#241708;
  --ink:#1a130c;

  --ivory:#f6f1e7;
  --ivory-2:#efe8da;
  --snow:#f7f3ea;
  --stone:#d9cdb8;

  --champagne:#c9a063;
  --champagne-lt:#e8c88a;
  --champagne-soft:rgba(201,160,99,.18);

  --text:#1a130c;
  --body:#5b4f41;
  --mute:#8b8071;

  --line:rgba(247,243,234,.13);
  --line-d:rgba(26,19,12,.10);

  --header:76px;
  --radius:2px;
  --shadow:0 24px 60px rgba(8,5,3,.20);
  --ease:cubic-bezier(.22,1,.36,1);

  --display:"Cormorant Garamond","Times New Roman",Georgia,serif;
  --sans:"Montserrat","Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ivory);
  color:var(--text);
  font-family:var(--sans);
  font-weight:400;
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}

::selection{background:var(--champagne);color:var(--void)}
:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------- structure */
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:1.25rem}
.wrap-wide{width:100%;max-width:1400px;margin-inline:auto;padding-inline:1rem}

.section{padding:clamp(4.25rem,9vw,7.5rem) 0;display:flow-root}
.section.tight{padding:clamp(3rem,6vw,4.5rem) 0}
.section.alt{background:var(--ivory-2)}
.section.dark{background:var(--charcoal);color:var(--snow)}
.section.void{background:var(--void);color:var(--snow)}

@media (max-width:700px){
  .wrap,.wrap-wide{padding-inline:1.1rem}
  .section{padding:clamp(3rem,10vw,4.25rem) 0}
}

/* ------------------------------------------------------------ typography */
.eyebrow{
  display:inline-block;
  font-size:.66rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--champagne);
}
.dark .eyebrow,.void .eyebrow{color:var(--champagne-lt)}

.kicker{
  display:inline-flex;align-items:center;gap:.85rem;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--champagne-lt);
}
.kicker::before{content:"";width:34px;height:1px;background:currentColor;opacity:.85}

.title{
  font-family:var(--display);
  font-size:clamp(2rem,4.2vw,3.35rem);
  font-weight:500;line-height:1.12;letter-spacing:-.015em;
  margin-top:.75rem;
  text-wrap:balance;
}
.title.lg{font-size:clamp(2.2rem,5.2vw,4.2rem);line-height:1.08}
.title.sm{font-size:clamp(1.6rem,3vw,2.35rem)}
@media (max-width:700px){.title{font-size:clamp(1.75rem,7.5vw,2.35rem)}}

.lede{max-width:38rem;margin-top:1.15rem;color:var(--body)}
.prose{max-width:40rem;color:var(--body)}
.prose p + p{margin-top:1rem}
.dark .lede,.dark .prose,.dark .muted,
.void .lede,.void .prose,.void .muted{color:rgba(247,243,234,.66)}
.muted{color:var(--body)}

.center{text-align:center}
.center .lede,.center .prose{margin-inline:auto}
.center .kicker::before{display:none}

.hairline{height:1px;background:var(--line-d);border:0;margin:0}
.dark .hairline,.void .hairline{background:var(--line)}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  min-height:48px;padding:.85rem 1.65rem;
  border:1px solid transparent;border-radius:var(--radius);
  font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background-color .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .35s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn-champagne{background:var(--champagne);color:var(--void);border-color:var(--champagne)}
.btn-champagne:hover{background:var(--champagne-lt);border-color:var(--champagne-lt)}
.btn-ghost{background:transparent;color:var(--snow);border-color:rgba(255,255,255,.32)}
.btn-ghost:hover{background:var(--snow);color:var(--void);border-color:var(--snow)}
.btn-line{background:transparent;border-color:rgba(26,19,12,.28);color:var(--text)}
.btn-line:hover{background:var(--void);color:var(--snow);border-color:var(--void)}
.btn-nav{min-height:40px;padding:.55rem 1.1rem;font-size:.65rem}
.btn-block{width:100%}

.icon-btn{
  width:44px;height:44px;border:1px solid var(--line-d);background:#fff;
  display:grid;place-items:center;cursor:pointer;border-radius:var(--radius);
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.icon-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}
.icon-btn:hover{background:var(--void);color:var(--snow);border-color:var(--void)}
.dark .icon-btn,.void .icon-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:var(--snow)}
.dark .icon-btn:hover,.void .icon-btn:hover{background:var(--champagne);color:var(--void);border-color:var(--champagne)}

.actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.actions.center{justify-content:center}

/* ----------------------------------------------------------------- header */
.header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:var(--header);display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background-color .45s var(--ease),height .45s var(--ease),
             border-color .45s var(--ease),backdrop-filter .45s ease;
}
.header.is-on{
  background:rgba(8,5,3,.94);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border-bottom-color:var(--line);
  height:64px;
}
.header-inner{
  width:100%;max-width:1400px;margin-inline:auto;padding-inline:1rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{height:clamp(34px,3vw,42px);width:auto;transition:height .45s var(--ease)}
.header.is-on .brand img{height:clamp(30px,2.5vw,36px)}

.nav{display:flex;align-items:center;gap:1.5rem}
.nav-links{display:flex;gap:1.35rem;align-items:center}
.nav-links a{
  font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(247,243,234,.82);text-decoration:none;padding:4px 0;position:relative;
  white-space:nowrap;transition:color .3s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--champagne);
  transform:scaleX(0);transform-origin:right center;transition:transform .4s var(--ease);
}
.nav-links a:hover{color:var(--snow)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left center}

.menu-btn{
  display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.22);
  background:transparent;color:#fff;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;cursor:pointer;border-radius:var(--radius);
}
.menu-btn span{display:block;width:18px;height:1px;background:currentColor;
  transition:transform .4s var(--ease),opacity .3s var(--ease)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:960px){
  .nav-links,.nav .btn-nav{display:none!important}
  .menu-btn{display:inline-flex}
}

.mobile-nav{
  position:fixed;inset:0;z-index:920;background:var(--void);
  display:grid;place-items:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s var(--ease),visibility .45s var(--ease);
}
.mobile-nav.is-open{opacity:1;visibility:visible;pointer-events:auto}
.mobile-nav nav{display:grid;gap:1.25rem;text-align:center;width:min(100% - 2.5rem,24rem);padding:1rem}
.mobile-nav a{
  font-family:var(--display);font-size:1.75rem;font-weight:500;
  color:var(--snow);text-decoration:none;transition:color .3s var(--ease);
}
.mobile-nav a:hover{color:var(--champagne)}
.mobile-nav a.btn{
  margin-top:1rem;width:100%;font-family:var(--sans);font-size:.7rem;
  color:var(--void);background:var(--champagne);border-color:var(--champagne);
}

/* ------------------------------------------------------------------- hero */
.hero{
  position:relative;min-height:100svh;
  display:grid;align-items:end;
  color:var(--snow);background:var(--void);overflow:hidden;
}
.hero-media{position:absolute;inset:0}
.hero-media img,.hero-media video{
  width:100%;height:100%;object-fit:cover;object-position:center 26%;
}
.hero-media img{
  transform:scale(1.07);animation:heroZoom 16s var(--ease) forwards;
  filter:sepia(.30) saturate(.95) brightness(1.02) contrast(1.04);
}
.hero-media video{display:block}
@keyframes heroZoom{to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero-media img{animation:none;transform:none}}

.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(8,5,3,.74) 0%,rgba(8,5,3,.18) 56%,rgba(8,5,3,.32) 100%),
    linear-gradient(180deg,rgba(8,5,3,.30) 0%,rgba(8,5,3,0) 32%,rgba(8,5,3,.68) 100%);
}
.hero-content{
  position:relative;z-index:2;
  width:100%;max-width:1400px;margin-inline:auto;
  padding:calc(var(--header) + 3.5rem) 1rem 4.5rem;
}
.hero h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.6rem,6.2vw,5rem);
  line-height:1.05;letter-spacing:-.01em;
  max-width:17ch;margin-top:1.6rem;
}
.hero .actions{margin-top:2.2rem}

.scroll-hint{
  position:absolute;right:1.75rem;bottom:2.75rem;z-index:2;
  display:inline-flex;flex-direction:column;align-items:center;gap:.75rem;
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(247,243,234,.6);text-decoration:none;
  writing-mode:vertical-rl;
}
.scroll-hint i{display:block;width:1px;height:52px;background:currentColor;
  transform-origin:top;animation:scrollPulse 2.4s var(--ease) infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(.35);opacity:.5}50%{transform:scaleY(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.scroll-hint i{animation:none}}

@media (max-width:760px){
  .hero-content{padding:calc(var(--header) + 1.75rem) 1.1rem 3.25rem}
  .hero h1{font-size:clamp(2rem,9.2vw,2.9rem);line-height:1.08;max-width:none}
  .hero .actions{margin-top:1.5rem;flex-direction:column;align-items:stretch}
  .hero .actions .btn{width:100%}
  .hero-veil{background:
    linear-gradient(180deg,rgba(8,5,3,.34) 0%,rgba(8,5,3,.06) 28%,rgba(8,5,3,.50) 64%,rgba(8,5,3,.90) 100%)}
  .scroll-hint{display:none}
}

/* ------------------------------------------------------------------ split */
.split{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.split.top{align-items:start}
.split.reverse .split-media{order:2}
.split-media img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:clamp(1.75rem,6vw,2.5rem)}
  .split.reverse .split-media{order:0}
}

/* two-column: heading left, prose right */
.vision{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:860px){.vision{grid-template-columns:1fr;gap:1.5rem}}

/* --------------------------------------------------------- feature bands */
.feature-band{position:relative;overflow:hidden;background:var(--charcoal)}
/* show every render whole — no crop. Natural ratio, edge to edge. */
.feature-band img{width:100%;height:auto;display:block}
/* opt-in crop, for bands where a fixed strip is wanted */
.feature-band.crop img{height:clamp(320px,62vh,700px);object-fit:cover}

/* duo images */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,1.4vw,1.25rem)}
.duo img{width:100%;height:clamp(230px,40vh,480px);object-fit:cover;border-radius:var(--radius)}
@media (max-width:700px){.duo{grid-template-columns:1fr}.duo img{height:clamp(210px,36vh,320px)}}

/* -------------------------------------------------- oversized chapter type */
.chapter{font-family:var(--display);font-weight:500;line-height:.96;
  letter-spacing:-.02em;font-size:clamp(2.6rem,8.6vw,7.5rem);margin:0}
.chapter em{display:block;font-style:italic;color:var(--champagne);padding-left:.08em}

/* ================================================ hlx · ultra-lux highlights */

/* ---- section shell ---- */
.hlx-section{
  position:relative;
  background:var(--void);
  color:var(--snow);
  padding:clamp(5rem,10vw,9rem) 0 clamp(4rem,8vw,7rem);
  overflow:hidden;
}

/* ---- ambient background ---- */
.hlx-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;
}
.hlx-bg-grid{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:1;
}
.hlx-bg-glow{
  position:absolute;border-radius:50%;
  filter:blur(110px);pointer-events:none;
}
.hlx-bg-glow--a{
  width:55vw;height:55vw;max-width:700px;max-height:700px;
  top:-18%;left:-14%;
  background:radial-gradient(circle,rgba(201,160,99,.11) 0%,transparent 70%);
  animation:hlxDrift 18s ease-in-out infinite alternate;
}
.hlx-bg-glow--b{
  width:45vw;height:45vw;max-width:600px;max-height:600px;
  bottom:-20%;right:-10%;
  background:radial-gradient(circle,rgba(201,160,99,.09) 0%,transparent 70%);
  animation:hlxDrift 22s ease-in-out infinite alternate-reverse;
}
@keyframes hlxDrift{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(3%,3%) scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .hlx-bg-glow{animation:none}
}

/* ---- section header ---- */
.hlx-section .wrap{position:relative;z-index:1}
.hlx-header{
  text-align:center;
  margin-bottom:clamp(3rem,6vw,5.5rem);
}
.hlx-ornament{
  display:flex;justify-content:center;
  margin-bottom:1.4rem;
  opacity:.7;
}
.hlx-eyebrow{
  display:block;
  font-family:var(--sans);font-weight:600;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--champagne);
  margin-bottom:1.1rem;
}
.hlx-eyebrow::before,.hlx-eyebrow::after{
  content:"";display:inline-block;
  width:clamp(1.5rem,4vw,3rem);height:1px;
  background:var(--champagne);opacity:.5;
  vertical-align:middle;margin:0 .9em;
}
.hlx-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.4rem,5.5vw,4.4rem);
  line-height:1.08;letter-spacing:-.02em;
  color:var(--snow);
  margin:0 auto;max-width:18ch;
}
.hlx-title em{
  font-style:italic;
  background:linear-gradient(135deg,var(--champagne-lt) 0%,var(--champagne) 55%,#8f6b32 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hlx-subtitle{
  margin-top:1.1rem;
  font-size:.88rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(247,243,234,.38);
  font-family:var(--sans);font-weight:400;
}

/* ---- card grid ---- */
.hlx-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5px;
  background:rgba(201,160,99,.13);
  border:1.5px solid rgba(201,160,99,.13);
}

/* ---- individual card ---- */
.hlx-card{
  position:relative;
  background:rgba(8,5,3,.72);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  overflow:hidden;
  cursor:default;
  transition:background .5s var(--ease);
}
.hlx-card:hover{
  background:rgba(22,16,10,.82);
}

.hlx-card-inner{
  position:relative;z-index:2;
  padding:clamp(2.2rem,4.5vw,3.6rem) clamp(2rem,4vw,3.2rem);
  display:flex;flex-direction:column;
  gap:1.35rem;
  height:100%;
}

/* ghost oversized numeral */
.hlx-ghost{
  position:absolute;
  top:clamp(-1rem,-.5vw,-.25rem);
  right:clamp(-.5rem,1vw,.5rem);
  font-family:var(--display);font-weight:500;
  font-size:clamp(6rem,12vw,11rem);
  line-height:.8;letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(201,160,99,.12);
  text-stroke:1px rgba(201,160,99,.12);
  user-select:none;pointer-events:none;
  transition:-webkit-text-stroke-color .5s var(--ease);
}
.hlx-card:hover .hlx-ghost{
  -webkit-text-stroke-color:rgba(201,160,99,.22);
}

/* icon circle */
.hlx-card-top{
  display:flex;align-items:center;gap:1.2rem;
}
.hlx-icon-wrap{
  flex-shrink:0;
  width:clamp(2.8rem,5vw,3.6rem);
  height:clamp(2.8rem,5vw,3.6rem);
  display:flex;align-items:center;justify-content:center;
  color:var(--champagne);
  background:rgba(201,160,99,.06);
  border:1px solid rgba(201,160,99,.2);
  border-radius:50%;
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease);
}
.hlx-card:hover .hlx-icon-wrap{
  background:rgba(201,160,99,.13);
  border-color:rgba(201,160,99,.45);
  transform:scale(1.07) rotate(5deg);
}
.hlx-icon{
  width:58%;height:58%;
  display:block;
}

.hlx-card-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.35rem,2.5vw,1.85rem);
  line-height:1.18;letter-spacing:-.01em;
  color:var(--snow);
  transition:color .35s var(--ease);
}
.hlx-card:hover .hlx-card-title{color:var(--champagne-lt)}

.hlx-card-body{
  font-family:var(--sans);font-size:.875rem;
  line-height:1.8;
  color:rgba(247,243,234,.55);
  max-width:38ch;
  flex:1;
  transition:color .35s var(--ease);
}
.hlx-card:hover .hlx-card-body{color:rgba(247,243,234,.75)}

/* pill tags */
.hlx-card-footer{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-top:.3rem;
}
.hlx-tag{
  display:inline-block;
  font-family:var(--sans);font-size:.55rem;
  font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--champagne);
  border:1px solid rgba(201,160,99,.28);
  padding:.28em .9em;
  border-radius:99px;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.hlx-card:hover .hlx-tag{
  background:rgba(201,160,99,.1);
  border-color:rgba(201,160,99,.55);
}

/* ---- animated border trace ---- */
/* Four-sided "drawing" border using clip-path trick via pseudo-element and SVG outline */
.hlx-border-trace{
  position:absolute;inset:0;pointer-events:none;z-index:3;
}
.hlx-border-trace::before,
.hlx-border-trace::after{
  content:"";
  position:absolute;
  background:linear-gradient(90deg,var(--champagne-lt),var(--champagne),var(--champagne-lt));
  opacity:0;
  transition:opacity .4s var(--ease);
}
/* top + bottom bars */
.hlx-border-trace::before{
  top:0;left:0;right:0;height:1px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .7s var(--ease),opacity .3s var(--ease);
}
.hlx-border-trace::after{
  bottom:0;left:0;right:0;height:1px;
  transform:scaleX(0);transform-origin:right center;
  transition:transform .7s var(--ease) .1s,opacity .3s var(--ease);
}
.hlx-card:hover .hlx-border-trace::before,
.hlx-card:hover .hlx-border-trace::after{
  transform:scaleX(1);opacity:1;
}
/* left + right bars via box-shadow technique */
.hlx-card::before,.hlx-card::after{
  content:"";
  position:absolute;
  width:1px;
  background:linear-gradient(180deg,var(--champagne-lt),var(--champagne),var(--champagne-lt));
  opacity:0;
  transition:opacity .3s var(--ease),transform .7s var(--ease);
  z-index:3;
}
.hlx-card::before{
  left:0;top:0;bottom:0;
  transform:scaleY(0);transform-origin:top center;
  transition:transform .7s var(--ease) .05s,opacity .3s var(--ease);
}
.hlx-card::after{
  right:0;top:0;bottom:0;
  transform:scaleY(0);transform-origin:bottom center;
  transition:transform .7s var(--ease) .15s,opacity .3s var(--ease);
}
.hlx-card:hover::before,
.hlx-card:hover::after{
  transform:scaleY(1);opacity:1;
}

/* bottom ornament */
.hlx-bottom-ornament{
  display:flex;justify-content:center;
  margin-top:clamp(3rem,5.5vw,4.5rem);
  opacity:.6;
}

/* ---- responsive ---- */
@media (max-width:860px){
  .hlx-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hlx-card-inner{padding:2rem 1.5rem}
  .hlx-ghost{font-size:5.5rem}
  .hlx-title{font-size:clamp(2rem,8vw,2.8rem)}
}

/* -------------------------------------------------------- unit schedule */
.schedule{background:var(--ivory-2)}

.sched{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-d)}

.sched-row{
  position:relative;
  display:grid;
  grid-template-columns:1.5fr .85fr .85fr;
  grid-template-areas:
    "name  size  price"
    "note  note  note";
  column-gap:clamp(1rem,2.5vw,2.5rem);
  padding:clamp(1.5rem,2.8vw,2.15rem) 0;
  border-bottom:1px solid var(--line-d);
  transition:padding-left .5s var(--ease);
}
.sched-row:hover{padding-left:clamp(.5rem,1.2vw,1.1rem)}

/* champagne hairline that draws across on hover */
.sched-row::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--champagne);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--ease);
}
.sched-row:hover::after{transform:scaleX(1)}

.sched-name{
  grid-area:name;align-self:center;
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.35rem,2.3vw,1.9rem);
  line-height:1.2;letter-spacing:-.01em;color:var(--text);
}

.sched-spec{display:flex;flex-direction:column;justify-content:center;gap:.3rem}
.sched-spec:nth-of-type(1){grid-area:size}
.sched-spec:nth-of-type(2){grid-area:price}
.sched-spec dt{
  font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);
}
.sched-spec dd{
  margin:0;font-family:var(--display);
  font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.1;
  color:var(--champagne);white-space:nowrap;
}

.sched-note{grid-area:note;margin-top:.75rem;max-width:62ch}
.sched-note p{color:var(--body);font-size:.93rem;line-height:1.65}

@media (max-width:760px){
  .sched-row{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "name  name"
      "size  price"
      "note  note";
    row-gap:.9rem;
  }
  .sched-row:hover{padding-left:0}
  .sched-note{margin-top:.25rem}
}

/* -------------------------------------------------------------- amenities */
.amenities .eyebrow-rule{margin-bottom:clamp(2rem,4vw,3.25rem)}

.am-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(2.25rem,4vw,3.25rem) clamp(1.5rem,2.6vw,2.25rem);
}

.am-media{
  position:relative;margin:0 0 clamp(1rem,1.8vw,1.35rem);
  overflow:hidden;border-radius:2px;
}
.am-media img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease);
}
.am-card:hover .am-media img{transform:scale(1.05)}
.am-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,5,3,0) 55%,rgba(8,5,3,.65) 100%);
  pointer-events:none;
}
.am-num{
  position:absolute;left:.85rem;bottom:.6rem;z-index:2;
  font-family:var(--display);font-size:.95rem;letter-spacing:.06em;
  color:rgba(247,243,234,.85);
}

.am-card{display:flex;flex-direction:column}
.am-card h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.2rem,1.9vw,1.5rem);
  line-height:1.25;color:var(--snow);
  margin-bottom:clamp(.85rem,1.4vw,1.1rem);
  /* reserve two lines so every list in a row starts on the same baseline */
  min-height:calc(2 * 1.25em);
}
@media (max-width:620px){.am-card h3{min-height:0}}

.am-list{list-style:none;margin:0;padding:0}
.am-list li{
  display:flex;gap:.8rem;
  padding:.42rem 0;
  font-size:.66rem;font-weight:400;letter-spacing:.09em;
  line-height:1.75;text-transform:uppercase;
  color:rgba(247,243,234,.62);
}
/* flex-basis fixes every dash to exactly the same length, whatever the item wraps to */
.am-list li::before{
  content:"";flex:0 0 12px;height:1px;margin-top:.85em;
  background:var(--champagne);
}

/* group 6 is prose in the source copy, so it stays sentence case */
.am-prose{padding-top:.1rem}
.am-prose p{
  font-size:.88rem;line-height:1.7;color:rgba(247,243,234,.62);
}
.am-prose p + p{margin-top:.85rem}

@media (max-width:900px){
  .am-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .am-grid{grid-template-columns:1fr;gap:2.25rem}
}

/* ---------------------------------------------------------------- gallery */
.gallery-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;
  gap:1.25rem;margin-bottom:1.35rem}
.gallery-stage{position:relative;overflow:hidden;background:var(--charcoal);
  aspect-ratio:16/9;border-radius:var(--radius)}
.gallery-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.03);
  transition:opacity .55s var(--ease),transform .9s var(--ease)}
.gallery-stage img.is-active{opacity:1;transform:scale(1)}
.gallery-controls{display:flex;align-items:center;justify-content:space-between;
  margin-top:1.1rem;gap:1rem}
.gallery-counter{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.dark .gallery-counter,.void .gallery-counter{color:rgba(247,243,234,.55)}
.gallery-nav{display:flex;gap:.5rem}
@media (max-width:700px){.gallery-stage{aspect-ratio:4/3}}

/* ------------------------------------------------------------ pull quote */
.pullquote{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line-d)}
.dark .pullquote,.void .pullquote{border-top-color:var(--line)}
.pullquote p{font-family:var(--display);font-weight:500;
  font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.35;max-width:24ch;
  color:var(--text);margin-top:.75rem}
.dark .pullquote p,.void .pullquote p{color:var(--snow)}

/* ------------------------------------------------------------------ forms */
.form-card{background:#fff;border:1px solid var(--line-d);
  padding:clamp(1.5rem,3vw,2.35rem);border-radius:var(--radius)}
.fields{display:grid;gap:1rem;margin-top:1.5rem}
.field label{display:block;font-size:.6rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);margin-bottom:.4rem}
.field input{
  width:100%;min-height:48px;padding:.7rem .9rem;
  background:var(--ivory);border:1px solid var(--line-d);border-radius:var(--radius);
  font-family:var(--sans);font-size:.98rem;color:var(--text);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.field input:focus{outline:0;border-color:var(--champagne);background:#fff}
.field input::placeholder{color:var(--mute)}

.choice-group > p{font-size:.6rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);margin-bottom:.6rem}
.choices{display:flex;flex-wrap:wrap;gap:.5rem}
.choice{position:relative}
.choice input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice span{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:0 1.05rem;border:1px solid var(--line-d);border-radius:var(--radius);
  font-size:.63rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--body);cursor:pointer;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.choice input:hover + span{border-color:rgba(26,19,12,.3)}
.choice input:checked + span{background:var(--void);border-color:var(--void);color:var(--champagne)}
.choice input:focus-visible + span{outline:2px solid var(--champagne);outline-offset:3px}

.form-note{margin-top:.85rem;font-size:.82rem;color:var(--mute);text-align:center}
.form-status{margin-top:.6rem;font-size:.9rem;line-height:1.5;min-height:1.2em}
.form-status.is-error{color:#a3231b}
.form-status.is-ok{color:#1f6b4f}
.hp{position:absolute!important;left:-9999px!important;width:0;height:0;opacity:0}

/* -------------------------------------------------------------- enquiry */
.enquire{background:var(--snow);color:var(--text);padding-block:clamp(3.5rem,7vw,6.5rem)}

.enquire-grid{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.enquire-copy .eyebrow-rule{margin-bottom:clamp(1rem,2vw,1.5rem)}
.enquire-copy .eyebrow-rule::after{display:none}
.enquire-copy .title{max-width:13ch}
.enquire-copy .lede{margin-top:1.15rem;max-width:38ch;color:var(--body)}

/* card */
.enquire .form-card{
  background:#fff;border:1px solid rgba(26,19,12,.06);
  border-radius:16px;padding:clamp(1.5rem,3vw,2.5rem);
  box-shadow:0 30px 70px -35px rgba(26,19,12,.18);
}

/* two-up field grid */
.fields-2{grid-template-columns:1fr 1fr;column-gap:clamp(.85rem,1.6vw,1.15rem)}
.fields-2 .field-full{grid-column:1 / -1}
@media (max-width:560px){.fields-2{grid-template-columns:1fr}}

/* rounded, filled inputs */
.enquire .field label{
  font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin-bottom:.45rem;
}
.enquire .field input,
.enquire .field select{
  width:100%;min-height:54px;
  padding:.8rem 1rem;
  background:#f6f1e7;border:1px solid rgba(26,19,12,.12);border-radius:9px;
  font-family:var(--sans);font-size:.98rem;color:var(--text);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.enquire .field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8e96' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:16px;
  padding-right:2.4rem;
}
.enquire .field input:focus,
.enquire .field select:focus{outline:0;border-color:var(--champagne);background:#fff}
.enquire .field input::placeholder{color:#a9a094}

/* dial code + number */
/* dial code + number read as one field, as in the reference */
.phone{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch;
  background:#f6f1e7;border:1px solid rgba(26,19,12,.12);border-radius:9px;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.phone:focus-within{border-color:var(--champagne);background:#fff}
.enquire .phone input[type=tel],
.modal .phone input[type=tel]{
  background:transparent;border:0;border-radius:0 9px 9px 0;min-height:54px;
}
.enquire .phone input[type=tel]:focus{background:transparent}

.dial{position:relative;display:flex}
.dial-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:54px;padding:0 .85rem 0 1rem;
  background:transparent;border:0;border-right:1px solid rgba(26,19,12,.10);
  cursor:pointer;font-family:var(--sans);font-size:.98rem;color:var(--text);
}
.dial-flag{font-size:1.05rem;line-height:1}
.dial-code{font-weight:500;letter-spacing:.01em}
.dial-btn svg{width:14px;height:14px;fill:none;stroke:var(--mute);stroke-width:1.8;
  transition:transform .3s var(--ease)}
.dial-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

.dial-pop{
  position:absolute;top:calc(100% + .4rem);left:0;z-index:40;
  width:min(21rem,78vw);
  background:#fff;border:1px solid rgba(26,19,12,.10);border-radius:10px;
  box-shadow:0 24px 60px -20px rgba(26,19,12,.28);
  overflow:hidden;
}
.dial-search{
  width:100%;min-height:46px;padding:.7rem .95rem;
  border:0;border-bottom:1px solid rgba(26,19,12,.08);
  font-family:var(--sans);font-size:.92rem;color:var(--text);
}
.dial-search:focus{outline:0;background:#f7f3ea}
.dial-list{
  list-style:none;margin:0;padding:.25rem;
  max-height:16rem;overflow-y:auto;overscroll-behavior:contain;
}
.dial-list li{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.65rem;
  padding:.5rem .7rem;border-radius:6px;cursor:pointer;
  font-size:.9rem;color:var(--text);
}
.dial-list li[hidden]{display:none}
.dial-list li:hover,.dial-list li.is-active{background:#f6f1e7}
.dial-list li[aria-selected="true"]{color:var(--champagne);font-weight:500}
.dial-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dial-num{color:var(--mute);font-size:.84rem}
.dial-empty{padding:.9rem 1rem;font-size:.88rem;color:var(--mute)}

/* dark submit, as in the reference */
.btn-dark{
  background:var(--void);color:var(--snow);border-color:var(--void);
  border-radius:9px;min-height:54px;
}
.btn-dark:hover{background:var(--charcoal);border-color:var(--charcoal);color:var(--champagne)}

.enquire .form-status{margin-top:.6rem;text-align:center}
.enquire .form-note{margin-top:.75rem}

@media (max-width:860px){
  .enquire-grid{grid-template-columns:1fr;gap:clamp(1.5rem,5vw,2.25rem)}
  .enquire-copy .title{max-width:none}
  .enquire-copy .lede{max-width:none}
}

/* ----------------------------------------------------------------- footer */
.footer{background:var(--void);color:rgba(247,243,234,.6);
  padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.footer-top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:start}
.footer-mark{height:90px;width:auto}
.footer-nav{display:flex;flex-wrap:wrap;gap:.85rem 1.35rem;align-content:start}
.footer-nav a{font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(247,243,234,.72);text-decoration:none;transition:color .3s var(--ease)}
.footer-nav a:hover{color:var(--champagne)}
.footer-disclaimer{margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--line)}
.footer-disclaimer .eyebrow{margin-bottom:.75rem}
.footer-disclaimer p{font-size:.78rem;line-height:1.75;color:rgba(247,243,234,.5)}
.footer-bottom{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--line);
  font-size:.72rem;color:rgba(247,243,234,.45)}

/* ------------------------------------------------------------- sticky cta */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:880;display:none;
  padding:.7rem 1.1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(8,5,3,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .5s var(--ease);
}
.sticky-cta.is-visible{transform:none}
.sticky-cta .btn{width:100%;box-shadow:var(--shadow)}
@media (max-width:960px){
  .sticky-cta{display:block}
  .footer{padding-bottom:calc(2rem + 76px + env(safe-area-inset-bottom))}
}

/* ----------------------------------------------------------------- modals */
/* flex + margin:auto centres the panel without clipping its top when it
   overflows, and lets the scroll live here so the dial popup is not cut off */
.modal{position:fixed;inset:0;z-index:950;display:flex;align-items:center;justify-content:center;
  overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(.9rem,3vw,2rem);opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s var(--ease)}
.modal.is-open{opacity:1;visibility:visible}
.modal-scrim{position:absolute;inset:0;background:rgba(8,5,3,.74);backdrop-filter:blur(6px)}
.modal-panel{
  position:relative;width:min(620px,100%);margin:auto;overflow:visible;
  /* white, like the register card — on --snow the #f6f1e7 fields disappeared */
  background:#fff;border-radius:16px;
  transform:translateY(20px) scale(.985);transition:transform .45s var(--ease);
  box-shadow:0 50px 120px -40px rgba(8,5,3,.7);
}
.modal.is-open .modal-panel{transform:none}
/* no-image variant — narrower, centred */
.modal-panel--no-media{width:min(480px,100%)}
.modal-body{padding:clamp(1.5rem,3.5vw,2.5rem)}
.modal-body .title{margin-top:0;margin-bottom:clamp(1.1rem,2.5vw,1.6rem)}
.modal-close{position:absolute;top:.7rem;right:.7rem;z-index:3;
  width:40px;height:40px;border:0;background:rgba(26,19,12,.06);cursor:pointer;
  display:grid;place-items:center;border-radius:8px;color:var(--body);
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.modal-close:hover{background:var(--void);color:var(--champagne)}
.modal-close svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none}

/* the card styling lives on the section; inside a modal the panel already is the card */
.modal .form-card{background:transparent;border:0;padding:0;border-radius:0;box-shadow:none}
.modal .fields{margin-top:0}

/* modal forms use the same controls as the register section */
.modal .field label{
  font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin-bottom:.45rem;
}
.modal .field input:not([type=hidden]):not(.hp),
.modal .field select{
  width:100%;min-height:54px;padding:.8rem 1rem;
  background:#f6f1e7;border:1px solid rgba(26,19,12,.12);border-radius:9px;
  font-family:var(--sans);font-size:.98rem;color:var(--text);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.modal .field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8e96' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:16px;
  padding-right:2.4rem;
}
.modal .field input:focus,.modal .field select:focus{outline:0;border-color:var(--champagne);background:#fff}
.modal .field input::placeholder{color:#a9a094}
.modal .phone input[type=tel]{background:transparent;border:0;border-radius:0 9px 9px 0}
.modal .phone input[type=tel]:focus{background:transparent}
.modal .dial-list{max-height:12.5rem}
.modal .form-status{margin-top:.6rem;text-align:center}
.modal .form-note{margin-top:.75rem}

@media (max-width:560px){
  .modal-panel{width:100%}
}

/* ----------------------------------------------------------------- reveal */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in-view{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}
.reveal.d5{transition-delay:.40s}
.reveal.d6{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ------------------------------------------------------- statement band */
.statement{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--void);color:var(--snow);
  padding:clamp(5rem,11vw,9.5rem) 0;
  text-align:center;
}
/* soft champagne bloom so the flat ground reads as lit, not painted */
.statement-glow{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 78% at 50% 0%,rgba(201,160,99,.16) 0%,rgba(201,160,99,0) 62%),
    radial-gradient(90% 60% at 50% 100%,rgba(201,160,99,.09) 0%,rgba(201,160,99,0) 70%);
}
.statement .wrap{max-width:1000px}

.statement-text{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.3rem,2.5vw,2.05rem);
  line-height:1.55;
  letter-spacing:-.005em;
  color:rgba(247,243,234,.94);
  max-width:42ch;
  margin-inline:auto;
  text-wrap:pretty;
}
.statement-text::first-line{color:#fff}

/* hairline + diamond, drawn not typed */
.ornament{
  display:block;width:min(240px,54%);height:9px;margin:0 auto;
  position:relative;
}
.ornament::before{
  content:"";position:absolute;top:50%;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    rgba(201,160,99,0) 0%,rgba(201,160,99,.55) 22%,
    rgba(201,160,99,.55) 78%,rgba(201,160,99,0) 100%);
}
.ornament::after{
  content:"";position:absolute;top:50%;left:50%;
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  background:var(--champagne);transform:rotate(45deg);
}
.statement .ornament:first-of-type{margin-bottom:clamp(1.75rem,3.4vw,2.75rem)}
.statement .ornament:last-of-type{margin-top:clamp(1.75rem,3.4vw,2.75rem)}

@media (max-width:700px){
  .statement{padding:clamp(3.5rem,13vw,5rem) 0}
  .statement-text{font-size:clamp(1.15rem,5.4vw,1.5rem);line-height:1.5;max-width:28ch}
}

/* -------------------------------------------------------------- location */
.location{background:var(--void);color:var(--snow)}
.location .prose{color:rgba(247,243,234,.62);max-width:56ch;margin-inline:auto;margin-top:1.15rem}
.location .title{max-width:22ch;margin-inline:auto}

/* eyebrow flanked by hairlines */
.eyebrow-rule{
  display:inline-flex;align-items:center;gap:1rem;
  font-size:.66rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--champagne);
}
.eyebrow-rule::before,.eyebrow-rule::after{
  content:"";width:clamp(28px,5vw,64px);height:1px;background:currentColor;opacity:.75;
}

/* map fades into the ground rather than stopping at a hard edge */
.location-map{
  margin:clamp(2.25rem,5vw,3.5rem) 0 0;
  border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.location-map img{width:100%;display:block}
.location-map iframe{
  display:block;width:100%;height:clamp(320px,46vh,520px);border:0;
  /* the embed ships light; tone it down so it sits in the dark section */
  filter:grayscale(.35) contrast(1.05) brightness(.88);
}

.dest-grid{
  list-style:none;margin:clamp(1.5rem,3vw,2.25rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);   /* 3 + 3, even rows */
  gap:clamp(.7rem,1.2vw,1rem);
}
@media (max-width:920px){.dest-grid{grid-template-columns:repeat(2,1fr)}}
.dest{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.15rem;border-radius:10px;
  background:var(--charcoal);border:1px solid rgba(255,255,255,.06);
  transition:background-color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.dest:hover{background:var(--elevated);border-color:var(--champagne-soft);transform:translateY(-2px)}
.dest-icon{
  flex:0 0 auto;width:42px;height:42px;border-radius:9px;
  display:grid;place-items:center;
  background:rgba(201,160,99,.12);border:1px solid rgba(201,160,99,.22);
}
.dest-icon svg{width:19px;height:19px;fill:var(--champagne)}
.dest-icon svg circle{fill:var(--void)}
.dest h3{font-family:var(--sans);font-size:.95rem;font-weight:600;line-height:1.3;color:var(--snow)}
.dest p{margin-top:.15rem;font-size:.82rem;color:rgba(247,243,234,.52)}

@media (max-width:700px){
  .location .title{max-width:none}
  .dest-grid{grid-template-columns:1fr}
}

/* ---------------------------------------------------- investment / CTA */
.opportunity{background:var(--void);color:var(--snow);overflow:hidden}

/* the render runs full width and uncropped */
.opp-media{margin:0}
.opp-media img{width:100%;height:auto;display:block}

/* sits between two full-bleed renders, so pad it evenly on both sides */
.opp-body{padding-block:clamp(3.25rem,6.5vw,5.5rem)}
.opp-body .eyebrow-rule{margin-bottom:clamp(1.5rem,3vw,2.25rem)}

.opp-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(1.5rem,4vw,4rem);align-items:start;
  padding-top:clamp(1.25rem,2.5vw,1.85rem);
  border-top:1px solid rgba(247,243,234,.14);
}
.opp-grid .title{max-width:16ch;color:var(--snow)}
.opp-side .lede{margin-top:0;color:rgba(247,243,234,.68);max-width:44ch}
.opp-side .actions{margin-top:clamp(1.35rem,2.5vw,1.85rem)}

@media (max-width:860px){
  .opp-grid{grid-template-columns:1fr;gap:1.25rem}
  .opp-grid .title{max-width:none}
  .opp-side .actions{flex-direction:column;align-items:stretch}
  .opp-side .actions .btn{width:100%}
}

/* ============================================= fqx · ultra-lux FAQ section */

/* ---- section shell ---- */
.fqx-section{
  position:relative;
  background:var(--snow);   /* distinct from void above & ivory-2 elsewhere */
  overflow:hidden;
  padding:clamp(5rem,10vw,8.5rem) 0 clamp(4.5rem,9vw,8rem);
}

/* top + bottom hairline rules in champagne */
.fqx-rule-top,
.fqx-rule-bottom{
  position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(201,160,99,.35) 20%,
    rgba(201,160,99,.7) 50%,
    rgba(201,160,99,.35) 80%,
    transparent 100%);
}
.fqx-rule-top{top:0}
.fqx-rule-bottom{bottom:0}

/* ---- wrap: centred single column ---- */
.fqx-center-wrap{
  max-width:820px;
  margin-inline:auto;
}

/* ---- section header: centred ---- */
.fqx-center-head{
  text-align:center;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.fqx-center-head .fqx-ornament{
  justify-content:center;
}
.fqx-center-head .fqx-heading{
  max-width:none;
  margin:0;
}
.fqx-center-head .fqx-sub{
  max-width:52ch;
  margin-left:auto;
  margin-right:auto;
}

/* ---- shared typographic styles ---- */
.fqx-ornament{
  display:flex;
  margin-bottom:1.4rem;
  opacity:.75;
}

.fqx-eyebrow{
  display:block;
  font-family:var(--sans);font-weight:600;
  font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--champagne);
  margin-bottom:.9rem;
}

.fqx-heading{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.4rem,4.8vw,4rem);
  line-height:1.05;letter-spacing:-.025em;
  color:var(--ink);
  margin:0 0 1.4rem;
}
.fqx-heading em{
  display:block;
  font-style:italic;
  background:linear-gradient(135deg,var(--champagne-lt) 0%,var(--champagne) 60%,#8f6b32 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.fqx-sub{
  font-size:.88rem;line-height:1.78;
  color:var(--body);
  margin:0 0 0;
}

/* ---- accordion list ---- */
.fqx-list{
  border-top:1px solid rgba(26,19,12,.08);
}

/* each item */
.fqx-item h3{margin:0}
.fqx-item{
  position:relative;
  border-bottom:1px solid rgba(26,19,12,.08);
  transition:border-color .35s var(--ease);
}
.fqx-item.fqx-open{
  border-color:rgba(201,160,99,.3);
}

/* the button */
.fqx-btn{
  width:100%;display:grid;
  grid-template-columns:3rem 1fr 2.2rem;
  align-items:center;
  gap:clamp(.6rem,1.5vw,1.2rem);
  padding:clamp(1.2rem,2.5vw,1.75rem) 0;
  background:none;border:0;cursor:pointer;
  text-align:left;
  font-family:var(--sans);
  color:var(--ink);
  transition:color .3s var(--ease);
}
.fqx-btn:hover{color:var(--champagne)}

/* numbered badge */
.fqx-num{
  font-family:var(--display);
  font-size:clamp(.9rem,1.4vw,1.1rem);
  font-weight:500;line-height:1;
  color:transparent;
  -webkit-text-stroke:1px var(--champagne);
  text-stroke:1px var(--champagne);
  letter-spacing:-.01em;
  transition:color .3s var(--ease),-webkit-text-stroke-color .3s var(--ease);
  flex-shrink:0;
}
.fqx-item.fqx-open .fqx-num,
.fqx-btn:hover .fqx-num{
  color:var(--champagne);
  -webkit-text-stroke-color:var(--champagne);
}

/* question text */
.fqx-q-text{
  font-size:clamp(.95rem,1.5vw,1.1rem);
  font-weight:500;line-height:1.4;
  letter-spacing:-.005em;
}

/* toggle icon */
.fqx-toggle{
  display:flex;align-items:center;justify-content:center;
  width:2.2rem;height:2.2rem;
  border:1px solid rgba(201,160,99,.3);
  border-radius:50%;
  flex-shrink:0;
  color:var(--champagne);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .45s var(--ease);
}
.fqx-btn:hover .fqx-toggle{
  background:rgba(201,160,99,.08);
  border-color:rgba(201,160,99,.6);
}
.fqx-plus{
  width:14px;height:14px;display:block;
  overflow:visible;
}
.fqx-plus-v{
  transform-origin:12px 12px;
  transition:transform .4s var(--ease),opacity .3s var(--ease);
}
.fqx-item.fqx-open .fqx-toggle{
  background:rgba(201,160,99,.12);
  border-color:var(--champagne);
  transform:rotate(45deg);
}

/* champagne hairline that draws across on open */
.fqx-item-line{
  position:absolute;
  bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--champagne-lt),var(--champagne),transparent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--ease);
  pointer-events:none;
}
.fqx-item.fqx-open .fqx-item-line{transform:scaleX(1)}

/* answer panel — grid-rows height trick */
.fqx-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .48s var(--ease);
}
.fqx-item.fqx-open .fqx-answer{
  grid-template-rows:1fr;
}
.fqx-answer-inner{
  overflow:hidden;
  min-height:0;
}
.fqx-answer-inner p{
  padding:0 0 clamp(1.2rem,2.5vw,1.75rem) 0;
  padding-left:calc(3rem + clamp(.6rem,1.5vw,1.2rem));
  font-size:.9rem;line-height:1.82;
  color:var(--body);
  max-width:56ch;
}

/* no-JS: leave answers visible if JS never ran */
.fqx-answer{visibility:visible}

/* ---- responsive ---- */
@media (max-width:560px){
  .fqx-btn{grid-template-columns:2.4rem 1fr 2rem}
  .fqx-answer-inner p{padding-left:calc(2.4rem + clamp(.6rem,1.5vw,1.2rem))}
  .fqx-heading{font-size:clamp(2rem,8vw,2.8rem)}
}

/* ------------------------------------------------------- phone field fix */
/* `.modal .field input:not([type=hidden]):not(.hp)` scores the same as the
   earlier phone override, so the number input kept its own border/background
   and drew a second box inside the wrapper. These match that specificity and
   come last, so the composite field renders as one control. */
.enquire .field .phone input[type=tel],
.modal .field .phone input[type=tel]{
  background:transparent;
  border:0;
  border-radius:0 9px 9px 0;
  min-height:52px;
}
.enquire .field .phone input[type=tel]:focus,
.modal .field .phone input[type=tel]:focus{
  background:transparent;
  border:0;
}
/* SUCCESS TOAST */
.success-toast{position:fixed;bottom:2rem;right:2rem;z-index:9999;width:min(22rem,calc(100vw - 2rem));background:linear-gradient(135deg,#0d2016 0%,#10301f 100%);border:1px solid rgba(201,160,99,.25);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;overflow:hidden;opacity:0;transform:translateY(1.5rem) scale(.96);pointer-events:none;transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1)}
.success-toast.is-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.success-toast__inner{display:flex;align-items:center;gap:1rem;padding:1.15rem 1.1rem 1.15rem 1.25rem}
.success-toast__icon{flex-shrink:0;width:48px;height:48px;color:#c9a063}
.success-toast__icon svg{width:100%;height:100%}
.success-toast__circle{stroke-dasharray:151;stroke-dashoffset:151;transition:stroke-dashoffset .55s ease .1s}
.success-toast__check{stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .4s ease .55s}
.success-toast.is-visible .success-toast__circle,.success-toast.is-visible .success-toast__check{stroke-dashoffset:0}
.success-toast__content{flex:1;min-width:0}
.success-toast__title{font-family:var(--font-serif,Georgia,serif);font-size:1rem;color:#e8dcc8;margin:0 0 .18rem;font-weight:600;letter-spacing:.01em}
.success-toast__msg{font-size:.82rem;color:rgba(232,200,138,.7);margin:0;line-height:1.45}
.success-toast__close{flex-shrink:0;background:none;border:none;cursor:pointer;padding:.35rem;margin:-.35rem;color:rgba(232,200,138,.45);transition:color .2s;display:flex;align-items:center;justify-content:center}
.success-toast__close:hover{color:#c9a063}
.success-toast__close svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.success-toast__progress{height:2px;background:linear-gradient(90deg,#c9a063,#dcb87a);width:100%;transform-origin:left;transform:scaleX(1)}
.success-toast.is-dismissing .success-toast__progress{transform:scaleX(0);transition:transform var(--toast-duration,5s) linear}
@media(max-width:480px){.success-toast{bottom:1rem;right:1rem;width:calc(100vw - 2rem)}}


/* ==========================================================================
   Sei Saadiyat — header
   Transparent over the hero, solid #080503 once scrolled. The header carries the
   full Sei / SAADIYAT lockup, so it is sized for a stacked wordmark.
   ========================================================================== */
:root{ --header:112px; }
@media (max-width:960px){ :root{ --header:92px; } }
@media (max-width:560px){ :root{ --header:80px; } }

.header{
  background:transparent;
  border-bottom-color:transparent;
}
.header.is-on{
  background:#080503;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:var(--line);
  height:84px;
}
@media (max-width:960px){ .header.is-on{height:76px} }
@media (max-width:560px){ .header.is-on{height:68px} }

.brand img{height:clamp(50px,5.4vw,74px)}
.header.is-on .brand img{height:clamp(40px,4.2vw,56px)}

/* hero sub-line under the H1 — .lede is dark-on-light, so the hero needs its own */
.hero-lede{
  max-width:44rem;margin-top:1.35rem;
  font-size:clamp(1rem,1.15vw,1.2rem);font-weight:300;line-height:1.65;
  color:rgba(247,243,234,.86);
  text-shadow:0 1px 24px rgba(8,5,3,.5);
}
.hero .actions{margin-top:1.9rem}
@media (max-width:560px){ .hero-lede{font-size:1rem;margin-top:1.1rem} }

/* --------------------------------------------------------- about split */
/* Image one side, copy the other. The render keeps its natural ratio inside
   the column — no crop — and drifts slowly so the block is not static. */
/* the overview title and this block read as one unit — collapse the gap */
.overview-title{padding-bottom:clamp(1.25rem,2.4vw,2rem)}
.about-section{padding:clamp(1.25rem,2.4vw,2rem) 0 clamp(3.5rem,7vw,6rem)}
.about-split{
  grid-template-columns:1.24fr .76fr;
  align-items:center;
  gap:clamp(1.75rem,3.6vw,3.25rem);
}
.about-copy .prose{max-width:none}
.about-copy .prose p{font-size:.94rem;line-height:1.78}
.about-copy .prose p + p{margin-top:.85rem}
@media (max-width:1100px){
  .about-split{grid-template-columns:1.1fr .9fr}
  .about-copy .prose p{font-size:.9rem}
}
@media (max-width:860px){
  .about-split{grid-template-columns:1fr}
  .about-copy .prose p{font-size:.95rem}
}
.about-media{
  margin:0;overflow:hidden;border-radius:var(--radius);
  background:var(--charcoal);
}
.about-media img{
  width:100%;height:auto;display:block;border-radius:0;
  transform:scale(1.04);
  animation:aboutDrift 26s ease-in-out infinite alternate;
}
@keyframes aboutDrift{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to  {transform:scale(1.11) translate3d(-1.4%,-1.2%,0)}
}
/* the wipe is an enhancement — with no JS the image is simply visible */
.about-media.in-view{animation:aboutWipe 1.1s var(--ease) both}
@keyframes aboutWipe{
  from{clip-path:inset(0 0 100% 0)}
  to  {clip-path:inset(0 0 0 0)}
}
.about-copy .prose p:last-child{margin-bottom:0}

@media (max-width:860px){
  .about-media{order:0}
}
@media (prefers-reduced-motion:reduce){
  .about-media.in-view{animation:none}
  .about-media img{animation:none;transform:none}
}

/* ---------------------------------------------------------- residences */
.residences-sec{padding:clamp(3.5rem,7vw,6rem) 0}
.res-head{max-width:62rem}
.res-head .title{margin:.75rem 0 1.15rem}
.res-head .prose{max-width:56rem;font-size:.94rem;line-height:1.78}

.trio{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.75rem,1.4vw,1.25rem);
  margin-top:clamp(2rem,4vw,3.25rem);
}
.trio-item{
  margin:0;overflow:hidden;border-radius:var(--radius);background:var(--charcoal);
}
.trio-item img{
  width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease);
}
.trio-item:hover img{transform:scale(1.06)}
@media (max-width:860px){
  .trio{grid-template-columns:1fr 1fr}
  .trio-item:last-child{grid-column:1 / -1}
}
@media (max-width:560px){
  .trio{grid-template-columns:1fr}
  .trio-item:last-child{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){.trio-item:hover img{transform:none}}

/* in-page anchors clear the sticky header */
[id]{scroll-margin-top:calc(var(--header) + 16px)}

/* --------------------------------------------------- residence cards */
.res-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid rgba(26,19,12,.08);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.res-card:hover{
  transform:translateY(-4px);
  border-color:rgba(201,160,99,.4);
  box-shadow:0 18px 44px rgba(26,19,12,.10);
}
.res-card-media{margin:0;overflow:hidden;background:var(--charcoal)}
.res-card-media img{
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease);
}
.res-card:hover .res-card-media img{transform:scale(1.06)}
.res-card-body{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(1.15rem,1.8vw,1.6rem);
}
.res-card-body h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.15;
  color:var(--text);margin:0 0 .6rem;
}
.res-card-body p{
  font-family:var(--sans);font-weight:300;
  font-size:.875rem;line-height:1.72;color:var(--body);
  margin:0 0 1.15rem;flex:1;
}
.res-cta{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.55rem;
  padding:0;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:.68rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text);
  position:relative;padding-bottom:6px;
}
.res-cta::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--champagne);transform:scaleX(1);transform-origin:left center;
  transition:transform .45s var(--ease);
}
.res-cta:hover{color:var(--champagne)}
.res-cta:hover::after{transform:scaleX(.4)}
.res-cta svg{
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .4s var(--ease);
}
.res-cta:hover svg{transform:translateX(4px)}

.modal-unit{
  font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--champagne);
  margin:-.35rem 0 1rem;
}
@media (prefers-reduced-motion:reduce){
  .res-card:hover{transform:none}
  .res-card:hover .res-card-media img{transform:none}
  .res-cta:hover svg{transform:none}
}

/* ---------------------------------------------------------- master plan */
.masterplan-sec{padding:clamp(3.5rem,7vw,6rem) 0}
.mp-split{
  grid-template-columns:1.06fr .94fr;
  align-items:center;
  gap:clamp(1.75rem,4vw,3.5rem);
}
.mp-copy .eyebrow{margin-bottom:.9rem}
.mp-copy .title{margin:0 0 1.15rem}
.mp-copy .prose{max-width:none}
.mp-copy .prose p{font-size:.94rem;line-height:1.78}
.mp-copy .prose p + p{margin-top:.85rem}

.mp-media{
  margin:0;overflow:hidden;border-radius:var(--radius);background:var(--charcoal);
}
.mp-media img{
  width:100%;height:auto;display:block;border-radius:0;
  transform:scale(1.02);
  animation:aboutDrift 30s ease-in-out infinite alternate;
}
.mp-media.in-view{animation:aboutWipe 1.1s var(--ease) both}

@media (max-width:1100px){.mp-copy .prose p{font-size:.9rem}}
@media (max-width:860px){
  .mp-split{grid-template-columns:1fr}
  .mp-copy .prose p{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  .mp-media.in-view{animation:none}
  .mp-media img{animation:none;transform:none}
}

/* ------------------------------------------------------- amenity tiles */
.am-head{max-width:64rem;margin-inline:auto}
.amenities .am-head .eyebrow-rule{margin-bottom:1rem}
.amenities .title{max-width:22ch;margin-inline:auto}
.amenities .prose{
  color:rgba(247,243,234,.62);max-width:64ch;
  margin-inline:auto;margin-top:1.15rem;font-size:.94rem;line-height:1.78;
}

/* A hairline matrix rather than six boxes — the rules do the dividing, so the
   grid reads as one plane instead of a row of cards. */
.am-tiles{
  list-style:none;padding:0;
  margin:clamp(2.5rem,5vw,4rem) 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid rgba(247,243,234,.12);
}
.am-tile{
  position:relative;isolation:isolate;
  padding:clamp(1.75rem,3vw,2.6rem) clamp(1.25rem,2.2vw,2rem) clamp(1.75rem,3vw,2.4rem);
  border-bottom:1px solid rgba(247,243,234,.12);
  border-right:1px solid rgba(247,243,234,.12);
  transition:color .4s var(--ease);
}
.am-tiles .am-tile:nth-child(3n){border-right:0}
/* a champagne wash grows from the bottom edge on hover */
.am-tile::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(201,160,99,0) 0%,rgba(201,160,99,.10) 100%);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .55s var(--ease);
}
.am-tile:hover::before{transform:scaleY(1)}
/* and a champagne rule replaces the hairline underneath */
.am-tile::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--champagne);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--ease);
}
.am-tile:hover::after{transform:scaleX(1)}

.am-idx{
  display:block;
  font-family:var(--display);font-size:.9rem;letter-spacing:.14em;
  color:rgba(201,160,99,.65);margin-bottom:clamp(1.25rem,2.4vw,2rem);
}
.am-icon{display:block;margin-bottom:clamp(.9rem,1.6vw,1.25rem)}
.am-icon svg{
  width:60px;height:60px;fill:none;stroke:var(--champagne);
  stroke-width:1;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s var(--ease),stroke .4s var(--ease);
}
.am-tile:hover .am-icon svg{transform:translateY(-3px);stroke:var(--gold-2,#e8c88a)}

.am-tile h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.25;
  color:var(--snow);margin:0 0 .55rem;
}
.am-tag{
  display:block;font-family:var(--sans);
  font-size:.6rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(247,243,234,.38);
}

@media (max-width:900px){
  .am-tiles{grid-template-columns:repeat(2,1fr)}
  .am-tiles .am-tile:nth-child(3n){border-right:1px solid rgba(247,243,234,.12)}
  .am-tiles .am-tile:nth-child(2n){border-right:0}
}
@media (max-width:560px){
  .am-tiles{grid-template-columns:1fr}
  .am-tiles .am-tile{border-right:0!important}
  .am-idx{margin-bottom:1rem}
}
@media (prefers-reduced-motion:reduce){
  .am-tile:hover .am-icon svg{transform:none}
}

/* Image-led amenities carousel */
.amenities{
  background:var(--snow);color:var(--text);overflow:hidden;
}
.amenities .am-intro{margin-bottom:clamp(2rem,4vw,3.5rem)}
.amenities .am-head .eyebrow-rule{margin-bottom:1rem}
.amenities .title{max-width:22ch;margin-inline:auto}
.amenities .prose{
  color:var(--body);max-width:58ch;margin:1.15rem auto 0;
  font-size:.94rem;line-height:1.78;
}
.am-carousel{position:relative;width:100%}
.am-viewport{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-inline:contain;
  padding-inline:clamp(1.1rem,2.4vw,3rem);
}
.am-viewport::-webkit-scrollbar{display:none}
.am-viewport:focus-visible{outline-offset:-3px}
.am-cards{
  width:max-content;display:flex;gap:clamp(.85rem,1.35vw,1.65rem);
  list-style:none;margin:0;padding:0 0 .25rem;
}
.am-card{
  position:relative;isolation:isolate;overflow:hidden;
  flex:0 0 clamp(300px,26.5vw,540px);
  aspect-ratio:.76;border-radius:10px;background:var(--charcoal);
  scroll-snap-align:start;
}
.am-card::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 42%,rgba(8,5,3,.12) 58%,rgba(8,5,3,.91) 100%);
}
.am-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.am-card:nth-child(2) img,.am-card:nth-child(5) img{object-position:center}
.am-card:hover img{transform:scale(1.035)}
.am-card-copy{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(1.1rem,2vw,1.7rem);
  color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.25);
}
.am-card-copy h3{
  margin:0 0 .55rem;font-family:var(--sans);font-size:clamp(1rem,1.4vw,1.45rem);
  min-height:0;font-weight:500;line-height:1.2;letter-spacing:-.01em;text-transform:uppercase;
}
.am-card-copy p{
  margin:0;max-width:34ch;font-family:var(--sans);
  font-size:clamp(.82rem,1.02vw,1.08rem);line-height:1.38;font-weight:300;
}
.am-arrow{
  position:absolute;top:50%;z-index:4;width:58px;height:58px;
  display:grid;place-items:center;border:0;border-radius:50%;
  color:#0e3557;background:#fff;box-shadow:0 8px 28px rgba(8,5,3,.18);
  cursor:pointer;transform:translateY(-50%);
  transition:opacity .25s ease,transform .3s var(--ease),background-color .3s ease;
}
.am-arrow:hover{background:var(--ivory);transform:translateY(-50%) scale(1.05)}
.am-arrow:disabled{opacity:0;pointer-events:none}
.am-arrow svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.am-arrow-prev{left:clamp(.5rem,1.4vw,1.75rem)}
.am-arrow-next{right:clamp(.5rem,1.4vw,1.75rem)}

@media (max-width:700px){
  .amenities .am-intro{margin-bottom:1.75rem}
  .am-viewport{padding-inline:1.1rem;scroll-padding-inline:1.1rem}
  .am-card{flex-basis:min(82vw,360px);aspect-ratio:.72}
  .am-card-copy{padding:1.2rem}
  .am-card-copy h3{font-size:1rem}
  .am-card-copy p{font-size:.84rem}
  .am-arrow{width:48px;height:48px}
  .am-arrow svg{width:23px;height:23px}
}
@media (prefers-reduced-motion:reduce){
  .am-viewport{scroll-behavior:auto}
  .am-card:hover img{transform:none}
}

/* the old two-column highlights layout was removed with its markup */


/* --------------------------------------------------- Sei additions */
.status-list{margin:clamp(2rem,4vw,3rem) 0 0;padding:0;border-top:1px solid var(--line)}
.section:not(.dark):not(.void) .status-list{border-top-color:var(--line-d)}
.status-list div{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  padding:1.1rem .2rem;border-bottom:1px solid var(--line)}
.section:not(.dark):not(.void) .status-list div{border-bottom-color:var(--line-d)}
.status-list dt{font-family:var(--display);font-size:1.28rem;font-weight:600;line-height:1.3}
.status-list dd{margin:0;font-size:.63rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--champagne);border:1px solid var(--line);padding:.45rem .85rem;border-radius:var(--radius);white-space:nowrap}
.section:not(.dark):not(.void) .status-list dd{border-color:var(--line-d)}
.status-list dd.is-open{color:var(--void);background:var(--champagne);border-color:var(--champagne)}
@media (max-width:560px){
  .status-list div{grid-template-columns:1fr}
  .status-list dd{justify-self:start}
}
.media-note{margin-top:1rem;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);line-height:1.7}
.feature-band figcaption{padding:.9rem 1rem;margin:0;text-align:center;font-size:.63rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mute);background:var(--void)}

/* Full-bleed location photography sits with the warm palette rather than
   pulling the page back towards Gulf blue. */
.feature-band img{filter:sepia(.16) saturate(.9) contrast(1.03)}
.trio-item img,.split-media img{filter:sepia(.1) saturate(.94)}

/* District gallery: portrait source photography needs a taller frame than the
   16/10 the trio uses elsewhere, or the picture is lost to the crop. */
.location .trio-item img{aspect-ratio:4/5}
@media (max-width:700px){.location .trio-item img{aspect-ratio:16/10}}

/* "To be announced" chips need more weight against the cream ground */
.section:not(.dark):not(.void) .status-list dd{color:#8f6b32;border-color:rgba(143,107,50,.34)}

/* Every call to action on this page is gold — the form submit included. */
.form-card .btn-dark{background:var(--champagne);color:var(--void);border-color:var(--champagne)}
.form-card .btn-dark:hover{background:var(--champagne-lt);border-color:var(--champagne-lt);color:var(--void)}

/* ==========================================================================
   Timber ground
   The teaser sets the gold script into dark figured walnut. Every flat dark
   surface on the page carries that same timber rather than a plain black:
   a seamless 1400px tile, dimmed under a warm wash so type stays legible.
   ========================================================================== */
:root{
  --timber:url("../img/timber-walnut.webp");
  --timber-size:760px;
}

.statement,
.location,
.footer,
.hero,
.feature-band figcaption,
.modal-panel--no-media{
  background-color:var(--void);
  background-image:linear-gradient(rgba(8,5,3,.62),rgba(8,5,3,.62)),var(--timber);
  background-size:auto,var(--timber-size);
  background-repeat:repeat,repeat;
  background-position:center,center;
}

/* the statement band is the one place the grain is allowed to show properly */
.statement{
  background-image:
    radial-gradient(120% 78% at 50% 50%,rgba(8,5,3,.40),rgba(8,5,3,.86) 78%),
    var(--timber);
  background-size:auto,860px;
}

/* caption strips are only ~40px tall — a big tile reads as a smear there */
.feature-band figcaption{
  background-size:auto,300px;
}

/* scrolled header and the mobile sticky bar pick the timber up too */
.header.is-on{
  background-image:linear-gradient(rgba(8,5,3,.90),rgba(8,5,3,.90)),var(--timber);
  background-size:auto,var(--timber-size);
}
.sticky-cta{
  background-image:linear-gradient(rgba(8,5,3,.93),rgba(8,5,3,.93)),var(--timber);
  background-size:auto,420px;
}

/* the dark chips inside the district band sit on the same board, one shade up */
.dest{
  background-image:linear-gradient(rgba(22,16,10,.80),rgba(22,16,10,.80)),var(--timber);
  background-size:auto,520px;
}
.dest:hover{
  background-image:linear-gradient(rgba(36,23,8,.74),rgba(36,23,8,.74)),var(--timber);
}

/* The About figure is a marketing render, not stock. It is shown whole at its
   natural ratio and at its own colour — no cover crop, no drift scale, no grade. */
.about-media img{
  transform:none;
  animation:none;
  filter:none;
  object-fit:fill;
}
.about-media figcaption{
  margin-top:.85rem;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);line-height:1.7;
}

/* Marketing renders are shown as the developer drew them: whole, at natural
   ratio, ungraded. The warm grade and the drift scale are for stock only. */
.feature-band.is-render img{filter:none;transform:none}
.about-media figcaption{
  margin-top:0;padding:.9rem 1.15rem 1rem;
  color:rgba(247,243,234,.62);
}

/* ==========================================================================
   Film bands
   Chromeless Vimeo background players, full-bleed at 16:9, sitting on the same
   timber board as the other dark surfaces. The iframe is only given its src
   once the band scrolls close (see main.js) — two players loaded at first paint
   would cost more than the rest of the page put together.
   ========================================================================== */
.video-band{
  position:relative;
  background-color:var(--void);
  background-image:linear-gradient(rgba(8,5,3,.55),rgba(8,5,3,.55)),var(--timber);
  background-size:auto,var(--timber-size);
}
.video-frame{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--void);
}
.video-frame iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;border:0;display:block;
  /* the player letterboxes itself unless it is allowed to overflow the frame */
  min-width:177.78vh;min-height:56.25vw;
  pointer-events:none;
}
/* a hairline of the board top and bottom keeps the film from floating loose */
.video-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 18px 40px -18px rgba(8,5,3,.9),inset 0 -18px 40px -18px rgba(8,5,3,.9);
}
.video-band figcaption{
  position:relative;z-index:2;
  padding:.9rem 1rem;margin:0;text-align:center;
  font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);
}
/* until the player loads, the band is the board rather than a white flash */
.video-frame:not(.is-loaded){background:var(--void)}

@media (max-width:700px){
  .video-frame{aspect-ratio:4/3}
}

/* A still sits behind each player: it covers the black gap before the iframe
   attaches, and it is what a visitor sees if Vimeo is blocked for them. */
.video-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;
}
.video-frame iframe{z-index:1}

/* ==========================================================================
   Prime attractions
   A dark, image-led grid sitting between the cream Island copy and the shores
   film, so the page does not run three light bands together.
   ========================================================================== */
.attractions-sec{
  background-color:var(--void);color:var(--snow);
  background-image:linear-gradient(rgba(8,5,3,.66),rgba(8,5,3,.66)),var(--timber);
  background-size:auto,var(--timber-size);
}
.attractions-sec .prose{color:rgba(247,243,234,.62);max-width:62ch;margin-inline:auto;margin-top:1.15rem}
.attractions-sec .title{max-width:24ch;margin-inline:auto}

.attractions-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.9rem,1.6vw,1.4rem);
  margin-top:clamp(2.25rem,4.5vw,3.5rem);
}
@media (max-width:1000px){.attractions-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.attractions-grid{grid-template-columns:1fr}}

.attraction{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:rgba(22,16,10,.55);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.attraction:hover{border-color:var(--champagne-soft);transform:translateY(-3px)}
.attraction-media{margin:0;overflow:hidden;background:var(--charcoal)}
.attraction-media img{
  width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.attraction:hover .attraction-media img{transform:scale(1.05)}
.attraction-body{padding:1.25rem 1.3rem 1.5rem}
.attraction-body h3{
  font-family:var(--display);font-size:1.4rem;font-weight:600;line-height:1.2;
  color:var(--champagne-lt);margin-bottom:.5rem;
}
.attraction-body p{margin:0;font-size:.86rem;line-height:1.72;color:rgba(247,243,234,.66)}
.attractions-sec .media-note{text-align:center;margin-top:clamp(1.5rem,3vw,2.25rem)}

/* ==========================================================================
   Project highlights
   Was a beige two-column list with an unrelated interior photo beside it — the
   flattest band on the page. Now four numbered panels on the timber board, with
   the numeral cut in gold outline so the section carries weight without needing
   photography it does not have.
   ========================================================================== */
.highlights-sec{
  background-color:var(--void);color:var(--snow);
  background-image:linear-gradient(rgba(8,5,3,.72),rgba(8,5,3,.72)),var(--timber);
  background-size:auto,var(--timber-size);
}
.highlights-sec .prose{color:rgba(247,243,234,.62);max-width:60ch;margin-inline:auto;margin-top:1.15rem}
.highlights-sec .title{max-width:20ch;margin-inline:auto}

.hl-grid{
  list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,1.8vw,1.6rem);
}
@media (max-width:1080px){.hl-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.hl-grid{grid-template-columns:1fr}}

.hl-panel{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(1.6rem,2.2vw,2.1rem) clamp(1.3rem,1.8vw,1.6rem) clamp(1.8rem,2.4vw,2.2rem);
  border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(22,16,10,.5);
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease);
}
.hl-panel::before{
  content:"";position:absolute;top:-1px;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--champagne),transparent);
  transition:width 1s var(--ease) .15s;
}
.hl-panel.in-view::before{width:100%}
.hl-panel:hover{
  border-color:var(--champagne-soft);
  background:rgba(36,23,8,.5);
  transform:translateY(-3px);
}

/* the numeral is drawn, not set: outlined gold, sitting behind the copy */
.hl-numeral{
  display:block;font-family:var(--display);font-style:italic;font-weight:600;
  font-size:clamp(3.4rem,4.4vw,4.6rem);line-height:.85;
  color:transparent;
  -webkit-text-stroke:1px rgba(201,160,99,.55);
  margin-bottom:1.1rem;
  transition:color .5s var(--ease),-webkit-text-stroke-color .5s var(--ease);
}
.hl-panel:hover .hl-numeral{
  color:rgba(201,160,99,.14);
  -webkit-text-stroke-color:rgba(232,200,138,.85);
}
/* Firefox has no text-stroke on this property path — fall back to a solid fill */
@supports not (-webkit-text-stroke: 1px red){
  .hl-numeral{color:rgba(201,160,99,.42)}
}

.hl-panel-body h3{
  font-family:var(--display);font-size:1.42rem;font-weight:600;line-height:1.22;
  color:var(--champagne-lt);margin-bottom:.65rem;
}
.hl-panel-body p{margin:0;font-size:.85rem;line-height:1.75;color:rgba(247,243,234,.66)}

/* --------------------------------------------------------------- modal type
   The panel was given the timber ground with the other dark surfaces, but its
   type was still coloured for the light panel it used to be — the heading was
   near-black on near-black. Everything inside now reads for a dark ground. */
.modal-panel--no-media .modal-body .title{color:var(--champagne-lt)}
.modal-panel--no-media .modal-body .modal-unit{color:rgba(247,243,234,.72)}
.modal-panel--no-media .modal-body label{color:rgba(247,243,234,.6)}
.modal-panel--no-media .modal-body .form-status{color:rgba(247,243,234,.72)}
.modal-panel--no-media .modal-close{color:rgba(247,243,234,.7);border-color:var(--line)}
.modal-panel--no-media .modal-close:hover{background:var(--champagne);color:var(--void);border-color:var(--champagne)}

/* ==========================================================================
   FAQ — redesign
   Bay centres the list in a ~500px column inside a 1440px band, so open answers
   wrapped into a thin ribbon. Kept as one centred column, but the heading sits
   above it and the list is given a readable measure, with each row a bordered
   card and a gold spine marking the open one.
   ========================================================================== */
.fqx-shell{max-width:960px;margin-inline:auto}

.fqx-head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.fqx-head .fqx-heading{
  margin:1.1rem 0 0;
  font-size:clamp(2rem,4vw,3.4rem);line-height:1.06;
}
.fqx-head .fqx-sub{
  margin:1.25rem auto 0;max-width:56ch;
  font-size:.95rem;line-height:1.8;color:var(--body);
}

/* ---- the list gets the room it was missing ---- */
.fqx-shell .fqx-list{border-top:0}
.fqx-shell .fqx-item{
  border-bottom:0;
  border:1px solid rgba(26,19,12,.09);
  border-radius:var(--radius);
  background:rgba(255,255,255,.5);
  margin-bottom:.6rem;
  overflow:hidden;
  transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.fqx-shell .fqx-item:hover{border-color:rgba(201,160,99,.4)}
.fqx-shell .fqx-item.fqx-open{
  border-color:rgba(201,160,99,.5);
  background:var(--ivory-2);
  box-shadow:0 14px 34px -22px rgba(26,19,12,.4);
}
/* a gold spine marks the open row */
.fqx-shell .fqx-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--champagne);
  transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--ease);
}
.fqx-shell .fqx-item.fqx-open::before{transform:scaleY(1)}
.fqx-shell .fqx-item-line{display:none}

.fqx-shell .fqx-btn{padding:1.25rem 1.5rem}
.fqx-shell .fqx-q-text{
  font-family:var(--display);
  font-size:clamp(1.18rem,1.8vw,1.45rem);
  font-weight:600;line-height:1.3;letter-spacing:0;
  color:var(--text);
}
.fqx-shell .fqx-answer-inner p{
  padding:0 1.5rem 1.6rem;
  padding-left:calc(3rem + 1.5rem);
  max-width:72ch;
  font-size:.93rem;line-height:1.85;color:var(--body);
}
@media (max-width:560px){
  .fqx-shell .fqx-answer-inner p{padding-left:1.5rem}
}

/* closing call to action, centred under the list */
.fqx-foot{
  margin-top:clamp(2.25rem,4vw,3.25rem);
  padding-top:clamp(1.75rem,3vw,2.5rem);
  border-top:1px solid rgba(201,160,99,.35);
  text-align:center;
}
.fqx-foot p{
  margin:0 0 1.1rem;font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
}

/* the band no longer needs the deep bottom padding it carried before */
.fqx-section{padding-bottom:clamp(3.5rem,6vw,5.5rem)}


/* ============================================================================
   YAS PARK PLACE — brand theme (matched to aldar.com/properties/en/yasparkplace)
   and editorial section layouts. Palette sampled live from the Aldar page:
   terracotta #75362B is their primary ink/accent, deep olive #414A2A the
   secondary, warm cream #E7E3DC / taupe #CDC4B7 the light neutrals, sharp
   (radius:0) corners throughout — no pill buttons, no bordered card grids.
   Everything above this line is the shared house stylesheet.
   ========================================================================= */

:root{
  --void:#14180d;
  --charcoal:#1d2314;
  --elevated:#28311c;
  --ink:#211609;

  --ivory:#f2eee3;
  --ivory-2:#e7e3dc;
  --snow:#faf8f2;
  --stone:#cdc4b7;

  --champagne:#75362b;
  --champagne-lt:#a4573f;
  --champagne-soft:rgba(117,54,43,.14);

  --olive:#414a2a;
  --olive-lt:#5c6a3c;

  --text:#241a13;
  --body:#5a4f42;
  --mute:#8c8172;

  --line:rgba(247,243,234,.14);
  --line-d:rgba(36,26,19,.12);

  --radius:0px;
  --shadow:0 24px 60px rgba(20,15,10,.20);
}

/* the blurred-foliage green wash Aldar uses behind their hero type, laid
   over the real render rather than replacing it */
.hero-veil{
  background:
    linear-gradient(90deg,rgba(22,32,14,.82) 0%,rgba(30,42,18,.30) 56%,rgba(22,32,14,.46) 100%),
    linear-gradient(180deg,rgba(26,38,16,.34) 0%,rgba(26,38,16,0) 32%,rgba(18,26,11,.86) 100%),
    radial-gradient(120% 85% at 28% 100%,rgba(93,112,52,.40) 0%,rgba(18,26,11,0) 62%);
}
.video-band{background-image:none;background-color:var(--void)}
figcaption,.modal-panel--no-media{background-image:none;background-color:var(--void)}

/* the sand CTA Aldar pairs beside the terracotta one — bg #CDC4B7, olive text */
.btn-champagne{background:var(--champagne);color:#fff;border-color:var(--champagne)}
.btn-champagne:hover{background:var(--champagne-lt);border-color:var(--champagne-lt)}
.btn-sand{background:var(--stone);color:var(--olive);border-color:var(--stone)}
.btn-sand:hover{background:var(--ivory-2);border-color:var(--ivory-2)}
.btn{letter-spacing:.16em}

/* --------------------------------------------------------- renders whole.
   No render on this page is cropped — natural ratio throughout, the grid
   gives way to the picture rather than the other way round. */
.split-media img,
.about-media img,
.location-map img,
.feature-band img{
  width:100%;height:auto;display:block;object-fit:none;
}
.about-media img{transform:none;animation:none}
.feature-band img{filter:none}
.split-media img{filter:none}
.about-split,.loc-split{grid-template-columns:1fr 1fr;align-items:center}
.location-map{margin:0;border-radius:0;border:0}
@media (max-width:860px){
  /* the split stacks on mobile, so the render can run edge to edge
     without fighting the copy column beside it */
  .location-map{width:100vw;margin-left:calc(50% - 50vw)}
}

/* ------------------------------------------------------- key facts line
   A single typographic line, not a bordered grid — the way a masthead or
   a brochure colophon states particulars. */
.meta-line{
  list-style:none;margin:clamp(1.75rem,3vw,2.5rem) 0 0;padding:clamp(1.1rem,2vw,1.5rem) 0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.4em 1.6em;
  border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
}
.meta-line li{
  font-size:.72rem;letter-spacing:.09em;color:var(--body);
  white-space:nowrap;
}
.meta-line strong{
  font-family:var(--display);font-weight:500;font-size:1rem;
  color:var(--champagne);letter-spacing:0;margin-right:.4em;
}

/* ------------------------------------------------------------ residences
   Floor plans, shown whole, alternating with copy — no card, no border.
   The plan art already sits on a warm cream ground that reads as one
   surface with the section behind it. */
.residences-sec{background:var(--ivory-2)}
.res-rows{margin-top:clamp(2.5rem,5vw,4rem)}
.res-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;
  padding:clamp(2.25rem,4.5vw,3.5rem) 0;
  border-bottom:1px solid var(--line-d);
}
.res-rows .res-row:first-child{padding-top:0}
.res-rows .res-row:last-child{border-bottom:0;padding-bottom:0}
.res-row:nth-child(even) .res-row-media{order:2}
.res-row-media{margin:0}
.res-row-media img{width:100%;height:auto;display:block}
.res-row-copy .res-tag{
  font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--champagne);
}
.res-row-copy h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.18;margin:.5rem 0 0;
}
.res-row-copy p{margin:.9rem 0 0;color:var(--body);max-width:34rem}
.res-row-copy .res-cta{margin-top:1.4rem}

/* ------------------------------------------------------ interiors reel */
.interiors-sec{background:var(--void);color:var(--snow)}
.interiors-sec .gallery-head{color:var(--snow)}
.interiors-sec .lede{color:rgba(250,248,242,.68)}
/* the reel mixes wide exteriors with portrait interior detail shots — contain,
   not cover, so nothing is cropped; the charcoal ground reads as a mat rather
   than empty letterboxing */
/* main.js sets aspect-ratio inline per active image so the frame always
   matches it exactly; this is only the pre-JS/first-paint fallback */
.interiors-sec .gallery-stage{background:var(--charcoal);aspect-ratio:3/2;max-height:82vh}
.interiors-sec .gallery-stage img{object-fit:contain}

/* the frame breaks out of the wrap-wide gutters on mobile and runs edge to
   edge, so it isn't squeezed down by the section's side padding */
@media (max-width:760px){
  .interiors-sec .gallery-stage{
    width:100vw;margin-left:50%;transform:translateX(-50%);
    max-height:70vh;
  }
}
.interiors-sec .icon-btn{background:rgba(250,248,242,.06);border-color:rgba(250,248,242,.2);color:var(--snow)}
.interiors-sec .icon-btn:hover{background:var(--champagne);border-color:var(--champagne);color:#fff}
.interiors-sec .gallery-counter{color:rgba(250,248,242,.55)}

/* -------------------------------------------------------------- amenities
   Six of the twelve are shown as real photography, whole and uncropped —
   a mosaic of renders with the name set into the image, not an icon grid.
   The rest run as a single quiet line of type beneath. */
.amenities{background:var(--ivory)}
.amen-mosaic{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.7rem,1.4vw,1.15rem);
  margin-top:clamp(2.5rem,5vw,3.75rem);
}
.amen-tile{margin:0;position:relative}
.amen-tile img{width:100%;height:auto;display:block}
.amen-tile figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:2.5rem 1.15rem 1rem;
  background:linear-gradient(180deg,rgba(20,24,13,0) 0%,rgba(20,24,13,.72) 100%);
  color:#fff;font-family:var(--sans);
  font-size:.82rem;font-weight:500;letter-spacing:.02em;
  text-align:left;text-transform:none;
}

.amen-more{
  margin:clamp(2.5rem,5vw,3.5rem) auto 0;max-width:52rem;text-align:center;
  font-size:.92rem;line-height:2;color:var(--body);
}
.amen-more strong{
  display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--champagne);margin-bottom:.6rem;font-weight:600;
}

.svc-line{
  margin-top:clamp(2.25rem,4vw,3.25rem);
  padding-top:clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid var(--line-d);
  text-align:center;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}
.svc-line span{margin:0 .9em;white-space:nowrap}

@media (max-width:760px){
  .amen-mosaic{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .amen-mosaic{grid-template-columns:1fr}
}

/* --------------------------------------------------------------- location */
.location{background:var(--charcoal);color:var(--snow)}
.location .lede,.location .prose{color:rgba(250,248,242,.68)}
.dist-list{
  list-style:none;margin:clamp(1.75rem,3vw,2.5rem) 0 0;padding:0;
  border-top:1px solid var(--line);
}
.dist{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:clamp(.9rem,2vw,1.6rem);
  padding:.95rem 0;border-bottom:1px solid var(--line);
}
.dist-n{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1;color:var(--champagne-lt);
  min-width:3.4ch;
}
.dist-n em{
  font-family:var(--sans);font-style:normal;
  font-size:.52em;letter-spacing:.06em;margin-left:.15em;
}
.dist-p{font-size:.95rem}
.dist-t{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,248,242,.5);
  white-space:nowrap;
}

/* --------------------------------------------------------------- island */
.island-sec .lede{max-width:44rem}
.dest-grid{
  list-style:none;margin:clamp(1.5rem,3vw,2.25rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;border-top:1px solid var(--line);
}
.dest{
  display:flex;align-items:center;gap:1rem;
  padding:1.1rem .5rem;background:transparent;border:0;
  border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease);
}
.dest:hover{padding-left:.65rem}
.dest-icon svg{fill:none}
@media (max-width:760px){.dest-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.dest-grid{grid-template-columns:1fr}}

/* ------------------------------------------------------- launch momentum */
.statement{padding:clamp(4.5rem,10vw,8rem) 0}
.statement-bg{
  position:absolute;inset:0;z-index:-1;
  width:100%;height:100%;object-fit:cover;
  opacity:.32;filter:saturate(.8);
}
.statement::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 78% at 50% 0%,rgba(164,87,63,.16) 0%,rgba(164,87,63,0) 60%),
    linear-gradient(180deg,rgba(20,24,13,.78) 0%,rgba(20,24,13,.90) 100%);
}
.statement .wrap.statement-text{
  font-family:inherit;font-size:inherit;line-height:inherit;
  max-width:1180px;color:inherit;text-align:center;
}
.statement .lede{margin-inline:auto;color:rgba(250,248,242,.72)}
.stat-line{
  list-style:none;margin:clamp(2.5rem,5vw,3.75rem) 0 0;padding:clamp(1.75rem,3vw,2.5rem) 0 0;
  border-top:1px solid rgba(250,248,242,.16);
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(1.75rem,4vw,3.5rem);
}
.stat{display:flex;flex-direction:column;gap:.5rem;align-items:center}
.stat-n{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.7rem,3vw,2.5rem);line-height:1;color:var(--champagne-lt);
  white-space:nowrap;
}
.stat-l{
  font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(250,248,242,.6);line-height:1.6;text-align:center;
}
.stat-note{
  margin:clamp(1.75rem,3vw,2.5rem) auto 0;max-width:52rem;
  font-size:.78rem;line-height:1.8;color:rgba(250,248,242,.5);
}

/* ------------------------------------------------------ purchase terms
   A typographic flow — three figures joined by a rule — not a bordered
   card. */
.terms-sec{background:var(--ivory)}
.terms-flow{margin-top:clamp(2.25rem,4vw,3.25rem)}
.terms-steps{
  display:flex;align-items:center;flex-wrap:wrap;gap:0;
  padding-bottom:clamp(1.75rem,3vw,2.5rem);
  border-bottom:1px solid var(--line-d);
}
.terms-step{display:flex;flex-direction:column;gap:.4rem}
.terms-step .n{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.1rem,4vw,3rem);line-height:1;color:var(--champagne);
}
.terms-step .l{
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);
}
.terms-arrow{
  flex:1 1 auto;min-width:2.5rem;height:1px;background:var(--line-d);
  margin:0 clamp(1rem,2.5vw,2rem);position:relative;top:-.6rem;
}
.terms-facts{
  display:flex;flex-wrap:wrap;gap:2.5rem;
  margin-top:clamp(1.75rem,3vw,2.5rem);
}
.terms-fact .l{
  display:block;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);
}
.terms-fact .v{
  font-family:var(--display);font-weight:500;font-size:1.15rem;color:var(--text);
}
.sched-note{
  margin:clamp(1.75rem,3vw,2.5rem) 0 1.75rem;max-width:38rem;
  font-size:.76rem;line-height:1.8;color:var(--mute);
}

/* ---------------------------------------------------------------- film */
.video-el{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;background:var(--void);
}

/* ------------------------------------------------------------ responsive */
@media (max-width:860px){
  .about-split,.loc-split{grid-template-columns:1fr}
  .split-media{order:-1}
  .res-row{grid-template-columns:1fr}
  .res-row:nth-child(even) .res-row-media{order:0}
  .terms-steps{flex-direction:column;align-items:flex-start;gap:1.5rem}
  .terms-arrow{display:none}
}
@media (max-width:640px){
  .meta-line{gap:.3em 1em}
  .dist{grid-template-columns:auto 1fr;row-gap:.2rem}
  .dist-t{grid-column:2;justify-self:start}
}

.hero-tagline{
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(1.2rem,2.3vw,1.65rem);line-height:1.4;
  margin:.65rem 0 1.15rem;color:var(--champagne-lt);max-width:30rem;
}

/* -------------------------------------------------------- mobile hero
   Below 760px the cinematic full-bleed hero (image behind overlaid type)
   is replaced with a stacked layout: the render sits whole in its own
   photo block up top, un-veiled, and the copy runs on a solid ground
   beneath it — closer to a printed cover than a poster. */
.hero-lede--short{display:none}
@media (max-width:760px){
  .hero{display:block;min-height:0;overflow:visible}
  .hero-media{
    position:relative;inset:auto;aspect-ratio:1/1;overflow:hidden;
  }
  .hero-media img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 38%;
  }
  /* the render melts into the panel below rather than cutting to it */
  .hero-media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(20,24,13,0) 22%,rgba(20,24,13,.55) 68%,var(--void) 100%);
  }
  .hero-veil{display:none}
  .hero-content{
    position:relative;z-index:2;width:100%;max-width:none;
    padding:1.5rem 1.25rem 2.75rem;margin-top:-1px;
  }
  .hero .kicker{flex-wrap:wrap}
  .hero .kicker::before{display:none}
  .hero h1{margin-top:.85rem}
  .hero-tagline{font-size:1.05rem;margin:.5rem 0 .9rem}
  .hero-lede--full{display:none}
  .hero-lede--short{display:block;font-size:1rem;margin-top:0}
  .hero .actions{margin-top:1.5rem}
  .hero .actions .btn-ghost{display:none}
}

/* -------------------------------------------------------- strip the timber
   The house stylesheet washes every dark surface with a walnut-grain tile
   (see "Timber ground" above) — a holdover from Sei Saadiyat's material
   story that has no place in Yas Park Place's palette. Every surface that
   picked it up gets a flat, solid ground instead. */
.hero,
.statement,
.footer{
  background-image:none;background-color:var(--void);
}
.header.is-on{
  background-image:none;background-color:rgba(20,24,13,.93);
}
.sticky-cta{
  background-image:none;background-color:rgba(20,24,13,.95);
}

/* island destinations sit on a light section, not the dark one the base
   .dest component assumes — its text and icon chip were unreadable here */
.island-sec .dest-icon{background:transparent;border:0}
.island-sec .dest-icon svg{fill:none;stroke:var(--champagne)}
.island-sec .dest h3{color:var(--text)}
.island-sec .dest p{color:var(--mute)}

/* text-wrap:balance in the house .title rule shrinks the block to a
   "balanced" content width and centers that box — invisible when a
   heading already fills its container, but it knocks a short heading
   (like "Twelve reasons to stay in" inside the wide .am-head) out of
   alignment with the eyebrow above and the lede below it. Titles always
   span their full container now; text-align (left by default, or
   .center's override) still positions the text correctly either way. */
.title{width:100%;max-width:none;margin-left:0;margin-right:0;text-wrap:wrap}

/* the sticky CTA is opaque and fixed to the bottom of every section as the
   page scrolls — without this, whatever text happens to be there gets a
   hard, ugly guillotine cut right at the bar's edge. A soft fade above it
   means content dissolves into the bar instead of being chopped off. */
.sticky-cta::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:2.75rem;
  background:linear-gradient(180deg,rgba(20,24,13,0) 0%,rgba(20,24,13,.92) 100%);
  pointer-events:none;
}