/* Austin High Rise: site-wide design layer (October 2026). Palette revised for Class A towers.
   Literata for headings and prose, Hanken Grotesk for interface text, a warm
   limestone ground, charcoal primary for actions and dark bands, deep lake
   blue secondary. Removes the generated-site look: cream + rust palette, tiny tracked
   capital labels, pill badges, accent words in headlines, drop shadows,
   glows and rounded cards. Loaded after the build's own CSS. */
:root {
  /* Upscale palette: warm limestone white, charcoal primary, one deep lake blue. */
  --ground: #f5f4f0; --surface: #ebe9e3; --stone: #e0ddd4; --ink: #15191c; --muted: #4a4f53;
  --slate: #b9bcbc;
  --primary: #1c2226; --primary-ink: #f5f4f0; --primary-hover: #2e363b;
  --lake: #24506a; --lake-hover: #1c4256; --lake-tint: #dfe7ea; --lake-light: #a9c7d4;
  --blush: var(--lake-tint);
  --font-body: "Literata", Georgia, serif; --font-heading: "Literata", Georgia, serif;
  --font-ui: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --brand-cream: var(--ground); --brand-sand: var(--stone); --brand-text-dark: var(--ink);
  --brand-primary: var(--primary); --brand-secondary: var(--lake); --brand-accent: var(--lake);
  --brand-border: var(--surface);
  /* One type scale and one spacing scale (design pass, October 2026). Every new rule
     uses these; building.css is mapped onto them. Body text is 18px. */
  --fs-2xs: .75rem; --fs-xs: .8125rem; --fs-sm: .875rem; --fs-ui: .9375rem; --fs-base: 1rem;
  --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.75rem;
  --fs-h2: clamp(2rem, 4.2vw, 3.25rem); --fs-h1: clamp(2.75rem, 7.5vw, 6rem);
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem;
  --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;
  --radius: 2px; --line: var(--stone);
  --ok: #1b6236; --warn: #8a5a12; --bad: #9b2c2c;
}
html, body { background: var(--ground) !important; color: var(--ink) !important; }
body, .font-body { font-family: var(--font-body) !important; }
body { font-size: 18px; }
h1, h2, h3, h4, h5, h6, .font-heading, .section-title {
  font-family: var(--font-heading) !important; font-weight: 400 !important; letter-spacing: -0.015em; color: inherit;
}
h1 { line-height: 1.05 !important; }
/* One colour per headline: the accent word reads in the same ink. */
h1 span, h1 em, h2 span[class*="secondary"], h2 em { color: inherit !important; font-style: normal !important; }

/* Grounds and fields */
.bg-cream, .bg-white, .bg-cream\/95 { background-color: var(--ground) !important; }
.bg-sand, .bg-sand\/60, .bg-primary-50 { background-color: var(--stone) !important; }
.bg-primary-500, .bg-primary-600, .navy-section { background-color: var(--primary) !important; color: var(--primary-ink) !important; }
.bg-primary-900\/40 { background-color: rgb(28 28 28 / .45) !important; }
.bg-secondary-500, .hover\:bg-secondary-500:hover { background-color: var(--lake) !important; color: #fff !important; }
.from-primary-500\/95, .from-primary-600\/85, .from-primary-600\/95 { --tw-gradient-from: rgb(20 20 20 / .78) var(--tw-gradient-from-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.via-primary-500\/90, .via-primary-600\/70 { --tw-gradient-stops: var(--tw-gradient-from), rgb(20 20 20 / .55) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.to-primary-600\/30, .to-primary-600\/85, .to-primary-600\/95 { --tw-gradient-to: rgb(20 20 20 / .25) var(--tw-gradient-to-position) !important; }

/* Ink */
.text-primary-500, .text-primary-700, .text-charcoal { color: var(--ink) !important; }
.text-muted { color: var(--muted) !important; }
.text-secondary-500, .text-secondary-600, .text-secondary-700, .hover\:text-secondary-500:hover, .hover\:text-secondary-600:hover, .hover\:text-secondary-700:hover { color: var(--lake) !important; }
.bg-primary-500 .text-secondary-500, .navy-section .text-secondary-500, .bg-primary-600 .text-secondary-500 { color: var(--lake-light) !important; }
.text-accent-500 { color: var(--lake) !important; }
.prose-site a { color: var(--lake) !important; text-decoration-color: var(--lake-light); }
.text-primary-200, .text-on-dark-muted, .section-lead { color: inherit; }
.navy-section .section-lead, .bg-primary-500 .text-on-dark-muted, .bg-primary-600 .text-on-dark-muted { color: #c9ccc8 !important; }
.border-line, .border-primary-200 { border-color: var(--surface) !important; }
.border-primary-500, .hover\:border-secondary-500:hover { border-color: var(--ink) !important; }
.divide-line > * + * { border-color: var(--surface) !important; }

/* No tiny tracked capitals, no pill labels */
.kicker, .kicker-pill, .badge, .badge-navy, .badge-sand, .concession-label, .form-label, .uppercase {
  text-transform: none !important; letter-spacing: 0 !important;
}
.kicker, .kicker-pill { background: none !important; padding: 0 !important; border-radius: 0 !important; font-family: var(--font-body) !important; font-size: 1rem !important; font-weight: 600 !important; color: var(--lake) !important; }
.navy-section .kicker, .bg-primary-500 .kicker { color: var(--lake-light) !important; }
.badge, .badge-navy, .badge-sand { border-radius: 0 !important; font-size: .85rem !important; font-weight: 600 !important; }
.badge-navy { background-color: var(--primary) !important; color: var(--primary-ink) !important; }
.badge-sand { background-color: var(--lake) !important; color: #fff !important; }
[class*="tracking-["], .tracking-tight { letter-spacing: 0 !important; }
.form-label { font-size: .95rem !important; font-weight: 600 !important; }

/* Surfaces: a tone step, no shadows, no outlines, square corners */
[class*="shadow"], .form-panel, .img-frame { box-shadow: none !important; }
.card, .faq-item, .form-panel, .trust-bar, .transparency-banner { border: 0 !important; border-radius: 0 !important; background-color: var(--surface) !important; }
.navy-section .transparency-banner, .bg-primary-500 .transparency-banner { background-color: rgb(255 255 255 / .08) !important; color: #c9ccc8 !important; }
.img-frame, .rounded-card, .rounded-lg, .rounded-\[10px\], .rounded, .rounded-sm, .rounded-badge { border-radius: 0 !important; }
.img-frame { border: 0 !important; }
.concession { background-color: var(--lake-tint) !important; border-left: 0 !important; color: var(--ink) !important; }
.concession-label { color: var(--lake) !important; font-size: .85rem !important; }
.spec-grid { border: 0 !important; background: var(--ground); padding: .75rem !important; }
.backdrop-blur, .backdrop-blur-md { backdrop-filter: none !important; }
.hover\:shadow-card-hover:hover, .group:hover .group-hover\:scale-105, .group:hover .group-hover\:scale-\[1\.03\] { transform: none !important; }

/* Buttons: flat, square, named for the action */
.btn, .btn-primary, .btn-outline, .btn-outline-light { border-radius: 0 !important; box-shadow: none !important; font-weight: 600 !important; letter-spacing: 0 !important; }
.btn-primary { background-color: var(--primary) !important; color: var(--primary-ink) !important; }
.btn-primary:hover { background-color: var(--primary-hover) !important; }
.btn-outline { border-color: var(--lake) !important; color: var(--lake) !important; }
.btn-outline:hover { background-color: var(--lake) !important; color: #fff !important; }
.btn-ghost-link { border-color: var(--lake) !important; color: var(--lake) !important; }
.form-control { border-radius: 0 !important; background-color: #f4f6f6 !important; border-color: var(--slate) !important; color: var(--ink) !important; }
.form-control:focus { border-color: var(--lake) !important; background-color: #fff !important; }
.rounded-button { border-radius: 0 !important; }

/* Accent words in headings read as plain heading text (class beats element selectors). */
h1 .text-secondary-500, h1 .text-secondary-600, h2 .text-secondary-500, h2 .text-secondary-600 { color: inherit !important; }
/* Square corners on the floating text button, back to top and FAQ toggles too. */
.rounded-full { border-radius: 0 !important; }

/* Phone overflow (present before this layer): the off-canvas menu parked past the right
   edge, and wide tables forcing grid columns open. clip keeps sticky headers working. */
html, body { overflow-x: clip; }
.grid > * { min-width: 0; }
/* Tables in page text: a full width table on wide screens; on phones the table scrolls
   inside itself (with the scroll shadows set further down). */
@media (max-width: 767px) { .prose-site table { display: block; max-width: 100%; overflow-x: auto; } }
@media (min-width: 768px) { .prose-site table { display: table; width: 100%; } }
.prose-site table, .prose-site table thead, .prose-site table th { border-radius: 0 !important; }

/* District tags on photos use the secondary color. */
.relative > a.absolute.bg-primary-500 { background-color: var(--lake) !important; color: #fff !important; }
.relative > a.absolute.bg-primary-500:hover { background-color: var(--lake-hover) !important; }

/* Accessibility: a visible focus ring for keyboard users, calmer motion when asked,
   and form fields at least 44px tall for thumbs. */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--lake) !important; outline-offset: 2px !important;
}
.bg-primary-500 a:focus-visible, .navy-section a:focus-visible, .btn-primary:focus-visible { outline-color: var(--lake-light) !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.form-control { min-height: 44px; }
/* On dark bands, secondary text uses the light lake tone. */
.bg-primary-500 .text-accent-500, .bg-primary-600 .text-accent-500, .navy-section .text-accent-500, .bg-primary-500 .text-secondary-600, .navy-section .text-secondary-600 { color: var(--lake-light) !important; }
.bg-sand .kicker, .bg-sand .text-secondary-500, .bg-primary-50 .kicker { color: var(--lake-hover) !important; }

/* Interface type: nav, buttons, labels and form text in a quiet sans; prose stays serif. */
nav, .btn, .btn-primary, .btn-outline, .btn-outline-light, .btn-ghost-link, .kicker, .kicker-pill, .badge, .badge-navy, .badge-sand,
.form-label, .form-control, .concession-label, .trust-bar, #site-header, .text-\[0\.72rem\], .text-\[0\.78rem\], .text-\[0\.8rem\], button, select, input, textarea, label {
  font-family: var(--font-ui) !important;
}
.kicker, .kicker-pill { font-size: .9rem !important; font-weight: 600 !important; letter-spacing: .02em !important; }
/* More air between sections reads as considered, not crowded. */
.section, .section-y { padding-top: 6rem !important; padding-bottom: 6rem !important; }
@media (max-width: 767px) { .section, .section-y { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } }
hr, .border-t.border-line { border-color: var(--stone) !important; }
a[href^="sms:"] span, #back-to-top { font-family: var(--font-ui) !important; }

/* Where you are: the menu item for this page (and its section) is marked by aria-current,
   written by tools/pages/link-site.mjs, never by a color class copied from another page. */
#site-header .nav-link[aria-current] { color: var(--lake) !important; box-shadow: inset 0 -2px 0 currentColor; }
#site-header [aria-current="page"].block { color: var(--lake) !important; font-weight: 700 !important; }
#mobile-menu a[aria-current="page"] { color: var(--lake) !important; font-weight: 700 !important; background: var(--surface) !important; }
/* Browser surfaces carry the palette too. */
::selection { background: var(--lake-tint); color: var(--ink); }
:root { accent-color: var(--lake); }
a { text-underline-offset: .18em; }
/* The phone's sticky contact bar never covers the end of the page. */
@media (max-width: 767px) { body { padding-bottom: 56px; } }
/* Phones have the sticky contact bar; the floating back to top button sat over content. */
@media (max-width: 767px) { #back-to-top { display: none !important; } }
/* FAQ questions were set in Newsreader, a font the site never loads, so they fell back to
   Georgia or Times. They read in the heading face like every other heading. */
.faq-item summary { font-family: var(--font-heading) !important; font-weight: 500 !important; color: var(--ink) !important; }
/* The floating "Text a locator" button on wide screens sat over forms and the footer, and a
   desktop browser can't send a text. The header carries the number, "Text us" and the main
   action on every page; phones keep their sticky contact bar. */
@media (min-width: 768px) { body > .fixed.bottom-6.right-6 { display: none !important; } }
/* The five step lists (how it works) ran three and two with a hole; on wide screens all
   five sit in one row so the order reads left to right. */
@media (min-width: 1024px) {
  ol.grid:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 1rem !important; }
  ol.grid:has(> li:nth-child(5):last-child) > li { padding: 1.25rem !important; }
}
/* Footer on phones: the link lists ran one per line for most of a screen's height. Two
   columns halve that, and each link gets a 24px tap height. */
@media (max-width: 767px) {
  footer nav ul.space-y-2\.5 { columns: 2; column-gap: 1.25rem; }
  footer nav ul.space-y-2\.5 > li { break-inside: avoid; margin: 0 0 .5rem !important; }
}
footer nav li a { display: inline-block; min-height: 24px; }
/* Form errors: named in words under the field, with a red edge on the field itself. */
.field-error, .calc-note { margin-top: .35rem; font-family: var(--font-ui) !important; font-size: .875rem; line-height: 1.4; }
.field-error { color: var(--bad); font-weight: 600; }
.calc-note { color: var(--lake); }
.form-control[aria-invalid="true"] { border-color: var(--bad) !important; box-shadow: inset 0 0 0 1px var(--bad) !important; }
/* Boxed notes in page text (blockquotes in .prose-site) kept the export's rust left rule
   and rounded corners; the building pages dropped that callout look in the first pass.
   A tone step carries the box, like every other surface. (Group b request.) */
.prose-site blockquote, .prose blockquote { border: 0 !important; border-radius: 0 !important; background-color: var(--surface) !important; color: var(--ink) !important; padding: 1rem 1.25rem !important; font-style: normal !important; quotes: none !important; }
.prose-site blockquote p::before, .prose-site blockquote p::after { content: none !important; }
/* Wide tables scroll inside themselves on phones; an edge shadow shows there's more to the
   side, and cell text wraps at spaces, never mid-word. The cover color follows the surface
   the table sits on. (Group b request; also the comparison tool's table.) */
:root { --scroll-bg: var(--ground); }
.card, .bg-sand, .bg-sand\/60, .faq-item { --scroll-bg: var(--surface); }
@media (max-width: 767px) {
  .table-scroll, .overflow-x-auto, .prose-site table {
    background:
      linear-gradient(to right, var(--scroll-bg) 40%, transparent) left center / 2.5rem 100% no-repeat local,
      linear-gradient(to left, var(--scroll-bg) 40%, transparent) right center / 2.5rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgb(21 25 28 / .22), transparent) left center / .9rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgb(21 25 28 / .22), transparent) right center / .9rem 100% no-repeat scroll;
    -webkit-overflow-scrolling: touch;
  }
  table th, table td { word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; }
  .prose-site table th, .prose-site table td { min-width: 6.5rem; }
  .prose-site table:has(tr > :nth-child(5)) th, .prose-site table:has(tr > :nth-child(5)) td { min-width: 8.5rem; }
}
/* Text pages (legal, guides): list markers were still the old rust; the first heading in a
   boxed text block carried a 3rem top margin into an already padded box; on phones the box
   padding cut the line to about 35 characters, so the box opens up there. */
.prose-site, .prose { --tw-prose-bullets: var(--lake); --tw-prose-counters: var(--muted); --tw-prose-quote-borders: transparent; }
.prose-site > :first-child { margin-top: 0 !important; }
@media (max-width: 767px) { .prose-site.border { padding: 0 !important; border: 0 !important; background: none !important; } }

/* Diagrams on phones (October 31, 2026). An inline diagram (an svg labelled "dg-...")
   keeps a width where its smallest label reads at 14px or more, and its frame scrolls
   sideways, with a line above it and a fade on the edge that has more to see. */
@property --dg-fade { syntax: "<length>"; inherits: false; initial-value: 0px; }
@media (max-width: 620px) {
  figure:has(> svg[aria-labelledby^="dg-"]) { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; max-width: 100%; --dg-fade: 2.5rem; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--dg-fade)), transparent); mask-image: linear-gradient(to right, #000 calc(100% - var(--dg-fade)), transparent); }
  figure > svg[aria-labelledby^="dg-"] { min-width: var(--dg-min, 560px); }
  figure:has(> svg[aria-labelledby^="dg-"])::before { content: "Swipe sideways to see the whole diagram \2192"; content: "Swipe sideways to see the whole diagram \2192" / ""; position: sticky; left: 0; display: block; width: max-content; max-width: 100%; margin: 0 0 .5rem; font-size: .875rem; line-height: 1.3; font-weight: 600; opacity: .75; }
  figure:has(> svg[aria-labelledby^="dg-"]) > figcaption { position: sticky; left: 0; max-width: calc(100vw - 2.5rem); }
  @supports (animation-timeline: scroll()) {
    figure:has(> svg[aria-labelledby^="dg-"]) { animation: dg-edge linear both; animation-timeline: scroll(self inline); }
  }
}
@keyframes dg-edge { 0%, 85% { --dg-fade: 2.5rem; } 100% { --dg-fade: 0px; } }

/* Shell pass (November 1, 2026): Resources menu groups, footer grid without the Legal
   column, and the legal line under the broker line. Legal text stays at 0.88rem (14.08px),
   over the 13.33px that the full TREC labels need. */
.ahr-dd-label { margin: .35rem 0 0; padding: .65rem 1rem .25rem; border-top: 1px solid var(--line, #e4ddd2); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.ahr-dd-label-m { padding-left: 1rem; }
@media (min-width: 1024px) { footer .ahr-foot-grid { grid-template-columns: 1.6fr 1.3fr 1.1fr 1fr; } }
footer .ahr-legal { font-size: .88rem; }
footer .ahr-legal a { display: inline-block; min-height: 24px; padding: 2px 0; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,.3); }
footer .ahr-legal a:hover { text-decoration-color: currentColor; }