/* ============================================================
   VILLA MARTES — style.css
   ============================================================ */

/* 1. CSS Custom Properties
   ============================================================ */
:root {
  --color-bg:            #f7f8f9;
  --color-text:          #222222;
  --color-text-muted:    #575760;
  --color-primary:       #2f3542;
  --color-primary-dark:  #1f232c;
  --color-primary-light: rgba(47, 53, 66, 0.07);
  --color-accent:        #d98324;
  --color-accent-dark:   #b86d1a;
  --color-accent-light:  rgba(217, 131, 36, 0.12);
  --color-header-bg:     #ffffff;
  --color-footer-bg:     #2f3542;
  --color-footer-text:   #ffffff;
  --color-topbar-bg:     #1f232c;
  --color-topbar-text:   #ffffff;
  --color-card-bg:       #ffffff;
  --color-border:        #e2e4e7;

  --font-stack: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --container-max: 1200px;
  --container-pad: 1.5rem;

  --radius-card:       6px;
  --shadow-card:       0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.14);

  --transition: 0.2s ease;
}

/* Screen reader only */
.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;
}

.sr-only:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 0.75rem 1.5rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--color-primary);
  color: #fff;
  z-index: 9999;
  font-weight: 600;
}

/* 2. Reset / Base
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-stack);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-accent-dark);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-primary);
}

ul {
  list-style: none;
}

/* 3. Typography
   ============================================================ */
h1, h2, h3, h4 {
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-text);
}

h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }

p {
  color: var(--color-text-muted);
  max-width: 65ch;
}

/* 4. Layout
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: 4rem;
}

.section--alt {
  background-color: var(--color-header-bg);
}

.section__title {
  margin-bottom: 1rem;
}

.section__title + p {
  margin-bottom: 2rem;
}

.text-center {
  text-align: center;
}

.text-center p {
  margin-inline: auto;
}

/* 5. Top Bar
   ============================================================ */
.topbar {
  background-color: var(--color-topbar-bg);
  color: var(--color-topbar-text);
  font-size: 0.8rem;
  padding-block: 0.4rem;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.topbar a {
  color: var(--color-topbar-text);
  opacity: 0.9;
}

.topbar a:hover {
  color: var(--color-topbar-text);
  opacity: 1;
}

/* Language switcher */
.lang {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.lang__link {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
}

.lang__link:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.12);
}

.lang__link--active {
  opacity: 1;
  background-color: var(--color-accent);
  color: #ffffff;
}

.lang__link--active:hover {
  background-color: var(--color-accent);
}

.lang__sep {
  opacity: 0.35;
}

/* 6. Header & Navigation
   ============================================================ */
.site-header {
  background-color: var(--color-header-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--color-text);
}

.site-header__logo img {
  height: 44px;
  width: auto;
}

.site-header__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.site-header__name {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.site-header__tagline {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* Hamburger toggle */
.site-header__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 110;
}

.hamburger {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  position: relative;
  transition: background-color var(--transition);
}

.hamburger::before,
.hamburger::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  position: absolute;
  left: 0;
  transition: transform var(--transition);
}

.hamburger::before { top: -7px; }
.hamburger::after  { top: 7px; }

.site-header__toggle[aria-expanded="true"] .hamburger {
  background-color: transparent;
}

.site-header__toggle[aria-expanded="true"] .hamburger::before {
  transform: rotate(45deg);
  top: 0;
}

.site-header__toggle[aria-expanded="true"] .hamburger::after {
  transform: rotate(-45deg);
  top: 0;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.site-nav__link {
  display: inline-block;
  color: var(--color-text);
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  font-size: 0.95rem;
  transition: background-color var(--transition), color var(--transition);
}

.site-nav__link:hover {
  background-color: var(--color-bg);
  color: var(--color-primary);
}

.site-nav__link--active {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.site-nav__cta {
  margin-left: 0.5rem;
}

/* 7. Hero
   ============================================================ */
.hero {
  background: linear-gradient(135deg, #3a4150 0%, #2f3542 50%, #1f232c 100%);
  color: #ffffff;
  padding-block: 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Home hero only — the closing CTA band reuses .hero and must keep
   the flat gradient and its centred copy.

   The overlay is directional rather than flat: opaque enough for white
   text on the left, nearly clear on the right, so the building is seen
   in colour instead of as a grey field. */
.hero--photo {
  background-image:
    linear-gradient(100deg,
      rgba(31, 35, 44, 0.90) 0%,
      rgba(31, 35, 44, 0.74) 38%,
      rgba(31, 35, 44, 0.14) 100%),
    url("../images/hero.jpg");
  background-size: cover;
  background-position: center 45%;
  padding-block: 7rem;
  text-align: left;
}

/* Hold the copy in the opaque half of the gradient. */
.hero--photo .hero__title {
  max-width: 28ch;
}

.hero--photo .hero__subtitle {
  max-width: 42ch;
  margin-inline: 0;
}

.hero--photo .hero__cta {
  justify-content: flex-start;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
}

/* The white lift is there to relieve the flat CTA gradient; over a photo
   it only muddies the fade. */
.hero--photo::before {
  display: none;
}

.hero__title {
  color: #ffffff;
  letter-spacing: 0.03em;
  margin-bottom: 0.75rem;
  position: relative;
}

.hero__subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 400;
  max-width: 46ch;
  margin-inline: auto;
  position: relative;
}

.hero__cta {
  margin-top: 2rem;
  position: relative;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Page hero (subpages).

   Its own strip rather than a slice of hero.jpg: at this band's height any
   background-position that centres a window row drifts as the viewport
   widens, and 50% landed squarely on the blank wall between floors.
   page-hero.jpg is cut to the upper window row — sky, the curved bay and
   the balcony railings — so a plain `center` holds at every width. */
.page-hero {
  background-color: var(--color-primary-dark);
  background-image:
    linear-gradient(100deg,
      rgba(31, 35, 44, 0.88) 0%,
      rgba(31, 35, 44, 0.55) 50%,
      rgba(31, 35, 44, 0.24) 100%),
    url("../images/page-hero.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding-block: 3rem;
}

.page-hero__title {
  color: #ffffff;
}

.page-hero__subtitle {
  color: rgba(255, 255, 255, 0.82);
  margin-top: 0.5rem;
}

/* 8. Intro / About
   ============================================================ */
.intro__text {
  font-size: 1.05rem;
  max-width: 72ch;
  margin-inline: auto;
  text-align: left;
}

.intro__highlight {
  color: var(--color-accent-dark);
  font-weight: 600;
  font-size: 1.1rem;
  margin-top: 1rem;
  max-width: none;
}

/* 9. Features / Highlights
   ============================================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.feature {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.feature__icon {
  width: 48px;
  height: 48px;
  margin-inline: auto;
  margin-bottom: 1rem;
  color: var(--color-accent);
}

.feature__title {
  margin-bottom: 0.5rem;
}

.feature__text {
  font-size: 0.95rem;
  margin-inline: auto;
}

/* 10. Cards
   ============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.card {
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.card__image-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card:hover .card__image {
  transform: scale(1.03);
}

.card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
}

.card__title {
  margin-bottom: 0.6rem;
  color: var(--color-text);
}

.card__list {
  flex: 1;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}

.card__list li {
  padding: 0.22rem 0;
  padding-left: 1.4rem;
  position: relative;
}

.card__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.card__link {
  font-weight: 600;
  font-size: 0.9rem;
}

.card__link::after {
  content: " \2192";
}

/* 11. Apartment specification blocks
   ============================================================ */
.spec-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: start;
}

.spec-layout > p {
  margin-bottom: 1rem;
}

.spec-layout h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.25rem;
}

.spec-figure img {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  width: 100%;
}

.spec-figure figcaption {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.6rem;
}

.spec-list {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.spec-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.spec-item__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--color-accent);
}

.spec-item__title {
  margin-bottom: 0.15rem;
}

.spec-item p {
  font-size: 0.95rem;
}

/* 12. Apartment table
   ============================================================ */
.table-wrap {
  overflow-x: auto;
  margin-top: 2rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  background: var(--color-card-bg);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 640px;
}

.table caption {
  caption-side: bottom;
  text-align: left;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding: 0.9rem 1rem;
}

.table th,
.table td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.table thead th {
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-bottom: none;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:nth-child(even) {
  background-color: rgba(47, 53, 66, 0.03);
}

.table tbody tr:hover {
  background-color: var(--color-accent-light);
}

/* The apartment number is a row header, not a cell. */
.table tbody th {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

/* Numeric columns. `.table th, .table td` above scores higher than a bare
   class, so these must name the element too — otherwise the headings move
   right and the figures stay left. */
.table th.table__num,
.table td.table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Size the numeric columns to their content so the figures sit under their
   headings rather than stranded at the far edge of a wide cell; the slack
   goes to the three text columns. */
.table__num {
  width: 1%;
  white-space: nowrap;
}

/* 13. Gallery
   ============================================================ */
/* Five photographs: one portrait of the building and four 1400x536 strips
   from the old site's homepage slider. The column split is the ratio at
   which the uncropped building shot stands exactly as tall as four stacked
   strips plus their gaps in the 1200px container; the absolutely positioned
   image lets the strips size the rows, and object-fit absorbs the few px of
   drift at other widths. */
.gallery-grid {
  display: grid;
  grid-template-columns: 1.156fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

.gallery-item {
  overflow: hidden;
  border-radius: var(--radius-card);
  cursor: pointer;
  position: relative;
  border: none;
  padding: 0;
  background: none;
  display: block;
  width: 100%;
}

.gallery-item--tall {
  grid-row: 1 / span 4;
  min-height: 0;
}

.gallery-item--tall img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background var(--transition);
}

.gallery-item:hover::after {
  background: rgba(0, 0, 0, 0.1);
}

.gallery-item:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.6rem 1rem 0.7rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
}

/* Homepage preview grid */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 190px);
  gap: 0.75rem;
  margin-top: 2rem;
}

.preview-grid__item {
  overflow: hidden;
  border-radius: var(--radius-card);
}

.preview-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.preview-grid__item:hover img {
  transform: scale(1.05);
}

/* The exterior shot is the only portrait in the set, so it takes the one
   tall cell and the four panoramas get wide ones. */
.preview-grid__item:first-child {
  grid-column: span 1;
  grid-row: span 2;
}

/* Lightbox (dialog-based) */
.lightbox {
  border: none;
  background: rgba(0, 0, 0, 0.92);
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  padding: 2rem;
}

/* Only when open: a bare `display: flex` on .lightbox would override the
   browser's `dialog:not([open]) { display: none }`, leaving the closed
   dialog laid out at the end of the page and its position: fixed close
   button floating over the header, where it swallows clicks. */
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox::backdrop {
  background: transparent;
}

.lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
}

.lightbox__close {
  position: fixed;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 2rem;
  cursor: pointer;
  z-index: 200;
  line-height: 1;
  padding: 0.5rem;
}

.lightbox__close:hover {
  opacity: 0.7;
}

/* 14. Rules / terms list
   ============================================================ */
.terms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.term {
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.75rem 1.5rem;
}

.term__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.term__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--color-accent);
}

.term p {
  font-size: 0.95rem;
}

.term p + p {
  margin-top: 0.6rem;
}

.term ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-top: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.term--warn {
  border-left: 4px solid var(--color-accent);
}

/* 15. Contact page
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3rem;
  align-items: start;
}

.contact-info .section__title {
  margin-bottom: 1.5rem;
}

.contact-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
}

.contact-list dt {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  padding-block: 0.3rem;
}

.contact-list dd {
  color: var(--color-text-muted);
  padding-block: 0.3rem;
  border-bottom: 1px solid var(--color-border);
}

.contact-list dd:last-child {
  border-bottom: none;
}

.contact-map iframe {
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: var(--radius-card);
  display: block;
}

.contact-map__link {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Getting-around distances */
.access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.access-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.access-item__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--color-accent);
}

.access-item__text {
  font-size: 0.95rem;
}

.access-item__text strong {
  display: block;
  color: var(--color-text);
  margin-bottom: 0.15rem;
}

/* 16. Buttons
   ============================================================ */
.btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
  text-decoration: none;
  border: 2px solid transparent;
}

.btn--primary {
  background-color: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
}

.btn--primary:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #ffffff;
}

.btn--outline {
  background-color: transparent;
  color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

.btn--outline:hover {
  background-color: var(--color-accent-dark);
  color: #ffffff;
}

.btn--white {
  background-color: #ffffff;
  color: var(--color-primary);
  border-color: #ffffff;
}

.btn--white:hover {
  background-color: rgba(255, 255, 255, 0.88);
  color: var(--color-primary-dark);
}

.btn--ghost {
  background-color: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.7);
}

.btn--ghost:hover {
  background-color: #ffffff;
  color: var(--color-primary);
  border-color: #ffffff;
}

/* 17. Footer
   ============================================================ */
.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding-block: 2.5rem;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}

.site-footer__col h4 {
  color: var(--color-footer-text);
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.site-footer__col p,
.site-footer__col a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  max-width: none;
}

.site-footer__col a:hover {
  color: #ffffff;
}

.site-footer__col p + p {
  margin-top: 0.25rem;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 2rem;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.site-footer__copy {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: none;
}

.site-footer__copy a {
  color: rgba(255, 255, 255, 0.6);
}

.site-footer__copy a:hover {
  color: #ffffff;
}

/* 18. Legal / Privacy page
   ============================================================ */
.legal-content {
  max-width: 72ch;
}

.legal-content h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.legal-content h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.legal-content p {
  margin-bottom: 1rem;
}

.legal-content ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  list-style: disc;
}

.legal-content li {
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}

/* 19. Media Queries
   ============================================================ */
@media (max-width: 900px) {
  .spec-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Photo first on narrow screens: it sells the room faster than the copy. */
  .spec-figure {
    order: -1;
  }
}

@media (max-width: 768px) {
  .section {
    padding-block: 2.5rem;
  }

  .topbar__inner {
    justify-content: center;
    gap: 1rem;
  }

  /* Mobile nav */
  .site-header__toggle {
    display: block;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-header-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 1rem;
  }

  .site-nav--open {
    display: block;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__link {
    display: block;
    padding: 0.7rem 1rem;
    border-radius: 4px;
  }

  .site-nav__cta {
    margin-left: 0;
    margin-top: 0.5rem;
    text-align: center;
  }

  .hero {
    padding-block: 3.5rem;
  }

  .hero--photo {
    padding-block: 4.5rem;
  }

  /* Full-width copy has nowhere to hide, so the fade flattens out. */
  .hero--photo {
    background-image:
      linear-gradient(rgba(31, 35, 44, 0.78), rgba(31, 35, 44, 0.86)),
      url("../images/hero.jpg");
  }

  .hero--photo .hero__title,
  .hero--photo .hero__subtitle {
    max-width: none;
  }

  .page-hero {
    background-image:
      linear-gradient(rgba(31, 35, 44, 0.80), rgba(31, 35, 44, 0.88)),
      url("../images/page-hero.jpg");
  }

  .site-header__tagline {
    display: none;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .contact-map iframe {
    height: 300px;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .site-footer__bottom {
    justify-content: center;
    text-align: center;
  }

  /* One column: the building shot goes back to its natural height. */
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-item--tall {
    grid-row: auto;
  }

  .gallery-item--tall img {
    position: static;
    height: auto;
  }

  .preview-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 150px);
  }

  .preview-grid__item:first-child {
    grid-column: span 1;
    grid-row: span 2;
  }
}

@media (max-width: 480px) {
  :root {
    --container-pad: 1rem;
  }

  .site-header__name {
    font-size: 1rem;
  }

  .card-grid {
    gap: 1.25rem;
  }

  .preview-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .preview-grid__item {
    aspect-ratio: 16 / 10;
  }

  .preview-grid__item:first-child {
    grid-column: span 1;
  }

}