/* Preserve the photographic cover and give the portfolio a clear hierarchy. */
.nav-links { font-size: 13px; }
.hero { min-height: 620px; height: calc(100svh - 90px); }
.hero::after {
  background: linear-gradient(90deg, #081219de 0%, #081219ae 29%, #08121932 61%, transparent 85%);
}
.hero-copy > p { max-width: 460px; font-size: 18px; }
.hero .pill { font-size: 13px; }
.hero-image img { object-position: center 53%; }
.featured { padding: clamp(60px, 8vw, 115px) 5vw; background: #fbfaf7; }
.featured-heading, .featured-grid { max-width: 1240px; margin-inline: auto; }
.featured-heading { margin-bottom: 32px; }
.featured-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px; align-items: start; }
.downtown-card, .villa-card { overflow: hidden; border-radius: 4px; }
.downtown-card { border: 1px solid #e1ddd3; background: #fff; }
.downtown-card figure { margin: 0; }
.downtown-card img { display: block; width: 100%; height: auto; }
.downtown-card > figure img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 43%; }
.downtown-card figcaption { padding: 10px 28px 0; font-size: 12px; color: #625f56; }
.featured-copy, .villa-copy { padding: clamp(26px, 4vw, 48px); }
.featured h3 { font-size: clamp(36px, 4.5vw, 61px); line-height: 1.06; letter-spacing: -.055em; }
.featured p { margin: 18px 0 24px; max-width: 40ch; color: #575b52; }
.feature-action { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; font-size: 14px; font-weight: 700; border-bottom: 1px solid currentColor; }
.feature-action:hover { color: #795b21; }
.villa-card { color: #fff; background: linear-gradient(150deg, #35433c, #18251f); }
.villa-layout-link {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin-top: 26px;
  padding: 12px 15px;
  border: 1px solid #ffffff42;
  border-radius: 4px;
  color: #f7f4e9;
  font-size: 14px;
  font-weight: 600;
}
.villa-layout-link:hover { background: #ffffff14; border-color: #f1d28b; }
.villa-layout-link svg, .villa-layout-arrow { color: #f1d28b; }
.villa-layout-link:focus-visible { outline-color: #f1d28b; }
.villa-dialog {
  width: min(1050px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  padding: clamp(18px, 3vw, 36px);
  border: 0;
  border-radius: 8px;
  color: #202820;
  background: #fbfaf7;
}
.villa-dialog::backdrop { background: #101b17bf; }
.villa-dialog-header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.villa-dialog h2 { font-size: clamp(28px, 4vw, 48px); }
.villa-dialog .eyebrow { margin-bottom: 8px; }
.villa-dialog-close {
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid #c8cfc3;
  border-radius: 24px;
  background: white;
  color: #203028;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.villa-dialog figure { margin: 22px 0 6px; }
.villa-dialog img { display: block; width: 100%; height: auto; border: 1px solid #e1ddd3; background: white; }
.villa-dialog figcaption { margin-top: 10px; color: #575b52; font-size: 12px; }
.villa-dialog-full { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.villa-card .eyebrow, .villa-card .feature-action { color: #f1d28b; }
.villa-card h3 { font-size: clamp(60px, 8vw, 105px); font-weight: 500; }
.villa-card p { color: #e0e5dd; }
.project-render { margin-top: 22px; border-top: 1px solid #e6e3da; padding-top: 13px; font-size: 13px; }
.project-render summary { cursor: pointer; padding: 8px 0; }
.project-render figure { margin-top: 10px; }
.project-render figcaption { padding-inline: 0; }
.concept-portfolio { padding-block: clamp(55px, 7vw, 90px); }
.contact .contact-details a { display: inline-block; }
@media (max-width: 760px) {
  .featured-grid { grid-template-columns: 1fr; }
  .featured { padding-inline: 24px; }
}
@media (max-width: 600px) {
  .menu { min-height: 44px; font-size: 14px; }
  .nav-links { font-size: 15px; }
  .hero { height: auto; min-height: 600px; min-height: max(600px, calc(100svh - 78px)); max-height: none; }
  .hero::after { background: linear-gradient(90deg, #091116dc, #09111684 65%, #09111646); }
  .hero h1 { font-size: clamp(38px, 9.6vw, 52px); line-height: 1.13; }
  .hero-copy { padding-block: 52px 84px; }
  .hero-copy > p { font-size: 16px; }
  .hero-image img { object-position: 59% center; }
  .hero .pill { min-height: 44px; font-size: 12px; }
  .hero .caption { text-shadow: 0 1px 6px #000; }
  .downtown-card figcaption { padding-inline: 25px; }
  .project-render figcaption { padding-inline: 0; }
}