:root{--ease:cubic-bezier(.16,1,.3,1)}
.ariaNav{position:sticky;top:0;z-index:4010;height:104px;background:rgba(243,239,231,.94);backdrop-filter:blur(10px);border-bottom:1px solid #E0D8C8;font-family:Jost,sans-serif;transition:background .3s ease,border-color .3s ease}
.ariaNav--dark{background:rgba(35,40,46,.96);border-bottom-color:rgba(243,239,231,.18)}
.ariaNav__inner{max-width:1520px;margin:0 auto;padding:0 44px;box-sizing:border-box;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:40px;height:100%}
.ariaNav__side{display:flex;align-items:center;justify-content:flex-start}
.ariaNav__side--end{justify-content:flex-end;gap:26px}
.ariaNav__toggle{background:none;border:none;padding:6px 2px;cursor:pointer;display:flex;align-items:center;gap:13px;font-family:Jost,sans-serif}
.ariaNav__bars{display:flex;flex-direction:column;gap:5px;width:26px}
.ariaNav__bar{display:block;height:1px;background:#211D15;transition:width .3s ease,background .3s ease}
.ariaNav__bar1{width:20px}.ariaNav__bar2{width:13px}
.ariaNav--dark .ariaNav__bar{background:#F3EFE7}
.ariaNav__toggle:hover .ariaNav__bar{width:26px}
.ariaNav__word{display:grid;font-size:10.5px;letter-spacing:.28em;color:#211D15;transition:color .5s ease}
.ariaNav__word>span{grid-area:1/1;transition:opacity .35s ease}
.ariaNav__wordClose{opacity:0}
.ariaNav--dark .ariaNav__word{color:#F3EFE7}
.ariaNav__logo{display:block;line-height:0;padding:0 12px}
.ariaNav__logo img{height:74px;display:block;filter:brightness(0) invert(.11);transition:opacity .3s ease}
.ariaNav--dark .ariaNav__logo img{filter:brightness(0) invert(.94)}
.ariaNav__phone{font-size:11px;letter-spacing:.18em;color:#5F5748;white-space:nowrap;transition:opacity .45s ease,color .45s ease}
.ariaNav--dark .ariaNav__phone{color:#C3C7CB}
.ariaNav__tour{white-space:nowrap;border:1px solid #23282E;color:#23282E;padding:10px 20px;font-size:10.5px;letter-spacing:.22em;font-family:Jost,sans-serif;transition:opacity .45s ease,background .45s ease,color .45s ease,border-color .45s ease}
.ariaNav__tour:hover{background:#23282E;color:#F3EFE7}
.ariaNav--dark .ariaNav__tour{border-color:rgba(243,239,231,.7);color:#F3EFE7}
.ariaNav--dark .ariaNav__tour:hover{background:#F3EFE7;color:#23282E}
html.nav-open .ariaNav{background:rgba(35,40,46,0);border-bottom-color:transparent}
html.nav-open .ariaNav__logo img{opacity:0}
html.nav-open .ariaNav__bar{background:#F3EFE7;width:26px}
html.nav-open .ariaNav__word{color:#F3EFE7}
html.nav-open .ariaNav__wordMenu{opacity:0}
html.nav-open .ariaNav__wordClose{opacity:1}
html.nav-open .ariaNav__phone,html.nav-open .ariaNav__tour{opacity:0;pointer-events:none}
.ariaMenu{position:fixed;inset:0;z-index:4000;background:#23282E;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s;pointer-events:none;font-family:Jost,sans-serif}
html.nav-open .ariaMenu{opacity:1;visibility:visible;transition:opacity .35s ease;pointer-events:auto}
.ariaMenu__inner{overflow-y:auto;height:100%;box-sizing:border-box;padding:118px 44px 44px;display:flex;flex-direction:column;justify-content:center;max-width:1520px;margin:0 auto}
.ariaMenu__nav{display:flex;flex-direction:column}
/* Hover warms the whole row: label plus its top and bottom rules turn gold.
   Every row owns both borders (overlapped 1px) so the pair can recolor
   together; the hovered row lifts above its neighbours' rules. */
.ariaMenu__link{display:block;padding:11px 0;position:relative;border-top:1px solid rgba(243,239,231,.12);border-bottom:1px solid rgba(243,239,231,.12);margin-top:-1px;transition:border-color .35s ease}
.ariaMenu__link:first-child{margin-top:0}
.ariaMenu__link:hover{border-color:#C89B66;z-index:1}
.ariaMenu__link span{font-family:'Cormorant Garamond',serif;font-size:34px;line-height:1.1;color:#F3EFE7;font-style:normal;display:inline-block;transition:color .35s ease}
.ariaMenu__link:hover span{color:#C89B66}
.ariaMenu__aside{display:flex;gap:30px;align-items:baseline;flex-wrap:wrap;margin-top:38px;padding-top:20px;border-top:1px solid rgba(243,239,231,.14)}
.ariaMenu__aside a{font-size:12px;letter-spacing:.2em;color:#C89B66;text-decoration:none}
.ariaMenu__aside a:hover{color:#F3EFE7}
.ariaMenu__aside span{font-size:12px;letter-spacing:.14em;color:#6F757D}
@media (max-width:900px){
.ariaNav__inner{padding:0 20px;column-gap:16px}
.ariaNav__phone{display:none}
.ariaNav__logo img{height:54px}
.ariaMenu__inner{overflow-y:auto;padding:104px 22px 34px}
.ariaMenu__link span{font-size:26px}
}
.ariaNav__residents{font-size:10.5px;letter-spacing:.22em;color:#8A6534;white-space:nowrap;transition:opacity .45s ease,color .45s ease}
.ariaNav__residents:hover{color:#211D15}
.ariaNav--dark .ariaNav__residents{color:#C89B66}
.ariaNav--dark .ariaNav__residents:hover{color:#F3EFE7}
html.nav-open .ariaNav__residents{opacity:0;pointer-events:none}

/* Hover states for pages that no longer load dc-runtime.js. The runtime used
   to synthesise these from style-hover="..." attributes at boot; browsers
   ignore that attribute natively, so they are real classes now.

   !important is not decoration. Almost every element on this site carries an
   inline style attribute, and many of these links set their own colour there
   (the footer links are colour:#E4DFD3). An inline style beats a class rule on
   specificity, so without !important the hover simply never applies. This is
   what dc-runtime did too: createPseudoSheet() ran every pseudo-class rule
   through importantify() for exactly this reason. */
.hv-gold:hover{color:#E0B87C!important}
.hv-ink:hover{color:#211D15!important}
.hv-brown:hover{background:#8A6534!important;color:#F3EFE7!important}
.hv-dark:hover{background:#23282E!important;color:#F3EFE7!important}
.hv-glass:hover{background:rgba(243,239,231,0.12)!important;color:#F3EFE7!important}
.hv-brown-alt:hover{background:#8A6534!important;color:#F5F1E7!important}

/* ---------------------------------------------------------------------------
   Shared footer.

   Every page used to carry its own copy of the footer as inline styles, and
   they had drifted: three pages still used the dead style-hover="" attribute
   from the old export runtime, so their footer links had no hover at all. It
   is one block of markup now, driven from here, so a change lands everywhere.

   Reading order top to bottom: who and where we are, where to go, the legal
   notice, and the small print. Powered by Kiara stays in the identity column
   under the Aria logo, separated from it by its own hairline rule.

   The phone links must keep href="tel:9805770927" and the plain "980 577 0927"
   text: source.js matches on exactly that to swap in the per-source relay
   number (see docs/INTEGRATIONS.md). Do not reformat them.
   --------------------------------------------------------------------------- */
.ariaFoot{background:#23282E;color:#D8D2C4;font-family:Jost,sans-serif}
.ariaFoot__inner{max-width:1320px;margin:0 auto;padding:0 40px}
.ariaFoot a{color:#E4DFD3}
.ariaFoot__legal,.ariaFoot__bar{border-top:1px solid rgba(216,210,196,.15)}

/* Row 1 — identity and the link columns */
.ariaFoot__top{display:grid;grid-template-columns:1.5fr 1fr .9fr 1.1fr;gap:56px;padding:72px 0 52px}
.ariaFoot__top>*{min-width:0}
.ariaFoot__logo{height:54px;width:auto;display:block;filter:brightness(0) invert(.92)}
.ariaFoot__address{font-size:13.5px;line-height:1.8;color:#C3C7CB;margin:22px 0 0;max-width:340px}
.ariaFoot__inline{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px;font-size:12px;letter-spacing:.14em}
.ariaFoot__social{font-size:11.5px;letter-spacing:.16em;margin-top:14px}
.ariaFoot__head{font-size:10px;font-weight:400;letter-spacing:.3em;color:#B6BBC0;margin:0 0 18px;font-family:inherit}
.ariaFoot__col{display:flex;flex-direction:column;gap:13px;font-size:11.5px;letter-spacing:.18em}
.ariaFoot__col--prose{gap:14px;font-size:13px;line-height:1.8;letter-spacing:normal;color:#C3C7CB}
.ariaFoot__col--prose p{margin:0}

/* Row 2 — equal housing / accessibility notice */
.ariaFoot__legal{display:flex;align-items:flex-start;gap:18px;padding:26px 0;color:#B6BBC0}
.ariaFoot__badges{display:flex;gap:12px;flex:none;color:#D8D2C4;padding-top:2px}
.ariaFoot__legal p{font-size:11px;line-height:1.75;margin:0;max-width:820px}
.ariaFoot__ul{color:#D8D2C4!important;border-bottom:1px solid rgba(216,210,196,.45)}
.ariaFoot__ul:hover{color:#E0B87C!important}

/* Row 3 — copyright and policy links */
.ariaFoot__bar{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:22px 0 30px;font-size:11px;letter-spacing:.06em;color:#B6BBC0}
.ariaFoot__copy{margin:0;line-height:1.75;max-width:660px}
.ariaFoot__policy{margin-top:0;flex:none;font-size:11px;letter-spacing:.06em}
.ariaFoot__policy a{color:#C3C7CB}

/* The clean divider inside the identity column, above Powered by Kiara.
   max-width matches .ariaFoot__address so the rule ends with the address
   block rather than running the full column width. */
.ariaFoot__kiara{border-top:1px solid rgba(216,210,196,.2);max-width:340px;margin-top:26px;padding-top:24px}
.ariaFoot__kiara a{display:inline-flex;align-items:center;gap:10px;color:#C3C7CB;font-size:10px;letter-spacing:.24em;white-space:nowrap}
.ariaFoot__kiara img{height:20px;width:auto;display:block}
.ariaFoot__kiaraWord{height:17px!important;filter:brightness(0) invert(.86)}
.ariaFoot a:focus-visible{outline:2px solid #E0B87C;outline-offset:5px}

/* Tablet — identity spans the top, the three groups share two columns. */
@media (max-width:1100px){
  .ariaFoot__inner{padding:0 32px}
  .ariaFoot__top{grid-template-columns:1fr 1fr;gap:34px 32px;padding:52px 0 40px}
  .ariaFoot__brand{grid-column:1/-1;max-width:420px}
  .ariaFoot__col{border-top:1px solid rgba(216,210,196,.15);padding-top:28px}
}

/* Phone — one column, and every footer link gets a 44px touch target. */
@media (max-width:640px){
  .ariaFoot__inner{padding:0 20px}
  .ariaFoot__top{grid-template-columns:1fr;gap:28px;padding:44px 0 32px}
  .ariaFoot__brand{max-width:none}
  .ariaFoot__legal{flex-direction:column;gap:16px}
  .ariaFoot__bar{flex-direction:column;gap:14px}
  .ariaFoot__copy{max-width:none}
  .ariaFoot__kiara{max-width:none}
}
@media (max-width:900px){
  .ariaFoot__col a,.ariaFoot__inline a,.ariaFoot__kiara a{display:inline-flex;align-items:center;min-height:44px}
  .ariaFoot__col{gap:2px}
  .ariaFoot__inline{gap:0 20px}
}

/* The wordmark is the widest fixed thing in the footer; below ~340px it is
   what would force a horizontal scrollbar. */
@media (max-width:360px){
  .ariaFoot__kiara a{gap:8px;font-size:9px;letter-spacing:.18em}
  .ariaFoot__kiaraWord{height:15px!important}
}