Placeholder files

assets/css/style.css

@@ -0,0 +1,590 @@
+/* ============================================================
+   SIENA — Design tokens
+   ============================================================ */
+:root{
+  --limestone:      #F1E9DA;
+  --limestone-dim:  #E8DDC9;
+  --paper:          #FBF7EE;
+  --ink:            #221C16;
+  --ink-soft:       #4A4038;
+  --sienna:         #9A4A2C;
+  --sienna-deep:    #7A3A22;
+  --cypress:        #3F4A38;
+  --cypress-deep:   #2C3527;
+  --brass:          #A9803F;
+  --stone-line:     #CBBFA6;
+
+  --display: "Fraunces", "Iowan Old Style", serif;
+  --body:    "Inter", -apple-system, "Segoe UI", sans-serif;
+
+  --measure: 62ch;
+  --arch-radius: 260px 260px 0 0;
+  --radius-sm: 4px;
+
+  --ease: cubic-bezier(.22,.61,.36,1);
+}
+
+@media (prefers-color-scheme: dark){
+  /* Site is intentionally light/warm regardless of system scheme —
+     the palette itself is the brand, not a mode. */
+}
+
+*, *::before, *::after{ box-sizing: border-box; }
+html{ scroll-behavior: smooth; }
+@media (prefers-reduced-motion: reduce){
+  html{ scroll-behavior: auto; }
+  *, *::before, *::after{
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+body{
+  margin: 0;
+  background: var(--limestone);
+  color: var(--ink);
+  font-family: var(--body);
+  font-size: 17px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+img, svg{ display: block; max-width: 100%; }
+
+a{ color: inherit; text-decoration: none; }
+
+h1, h2, h3, h4{
+  font-family: var(--display);
+  font-weight: 500;
+  color: var(--ink);
+  margin: 0;
+  line-height: 1.08;
+  letter-spacing: -0.01em;
+}
+
+p{ margin: 0 0 1em; max-width: var(--measure); }
+p:last-child{ margin-bottom: 0; }
+
+::selection{ background: var(--sienna); color: var(--paper); }
+
+:focus-visible{
+  outline: 2px solid var(--sienna);
+  outline-offset: 3px;
+  border-radius: 2px;
+}
+
+.container{
+  width: 100%;
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 0 32px;
+}
+
+@media (max-width: 640px){
+  .container{ padding: 0 20px; }
+}
+
+/* ============================================================
+   Header / Nav
+   ============================================================ */
+.site-header{
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: rgba(241, 233, 218, 0.86);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom: 1px solid transparent;
+  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
+}
+.site-header.is-scrolled{
+  border-bottom-color: var(--stone-line);
+  box-shadow: 0 8px 24px -20px rgba(34,28,22,0.4);
+}
+.site-header .container{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 84px;
+}
+.wordmark{
+  font-family: var(--display);
+  font-size: 1.5rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: var(--ink);
+}
+.wordmark span{ color: var(--sienna); }
+
+.main-nav{ display: flex; align-items: center; gap: 40px; }
+.main-nav ul{
+  list-style: none;
+  display: flex;
+  gap: 32px;
+  margin: 0;
+  padding: 0;
+}
+.main-nav a{
+  font-size: 0.95rem;
+  color: var(--ink-soft);
+  position: relative;
+  padding: 4px 0;
+  transition: color .2s var(--ease);
+}
+.main-nav a:hover,
+.main-nav a[aria-current="page"]{ color: var(--sienna); }
+.main-nav a[aria-current="page"]::after{
+  content: "";
+  position: absolute;
+  left: 0; right: 0; bottom: -3px;
+  height: 2px;
+  background: var(--sienna);
+}
+
+.btn{
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 13px 26px;
+  font-family: var(--body);
+  font-size: 0.92rem;
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease);
+}
+.btn:active{ transform: translateY(1px); }
+.btn-primary{ background: var(--sienna); color: var(--paper); }
+.btn-primary:hover{ background: var(--sienna-deep); }
+.btn-ghost{ border-color: var(--ink); color: var(--ink); }
+.btn-ghost:hover{ background: var(--ink); color: var(--paper); }
+.btn-ghost-light{ border-color: rgba(251,247,238,.55); color: var(--paper); }
+.btn-ghost-light:hover{ background: var(--paper); color: var(--ink); }
+
+.nav-toggle{
+  display: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  flex-direction: column;
+  gap: 5px;
+}
+.nav-toggle span{
+  width: 24px; height: 2px; background: var(--ink);
+  transition: transform .25s var(--ease), opacity .25s var(--ease);
+}
+.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
+.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
+.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
+
+@media (max-width: 860px){
+  .main-nav{
+    position: fixed;
+    inset: 84px 0 0 0;
+    background: var(--limestone);
+    flex-direction: column;
+    align-items: stretch;
+    padding: 12px 20px 32px;
+    transform: translateY(-8px);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .25s var(--ease), transform .25s var(--ease);
+    overflow-y: auto;
+  }
+  .main-nav.is-open{
+    opacity: 1; transform: translateY(0); pointer-events: auto;
+  }
+  .main-nav ul{ flex-direction: column; gap: 0; }
+  .main-nav li{ border-bottom: 1px solid var(--stone-line); }
+  .main-nav a{ display: block; padding: 16px 4px; font-size: 1.05rem; }
+  .main-nav .nav-cta{ margin-top: 20px; }
+  .nav-toggle{ display: flex; }
+}
+
+/* ============================================================
+   Hero
+   ============================================================ */
+.hero{
+  position: relative;
+  overflow: hidden;
+  background: var(--ink);
+  color: var(--paper);
+}
+.hero .container{
+  display: grid;
+  grid-template-columns: 1.05fr 0.95fr;
+  align-items: center;
+  gap: 40px;
+  padding-top: 76px;
+  padding-bottom: 76px;
+  min-height: 640px;
+}
+.hero-eyebrow{
+  font-size: 0.95rem;
+  color: var(--brass);
+  margin-bottom: 22px;
+  font-style: italic;
+  font-family: var(--display);
+}
+.hero h1{
+  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
+  color: var(--paper);
+  margin-bottom: 26px;
+}
+.hero-lede{
+  color: rgba(251,247,238,.82);
+  font-size: 1.1rem;
+  max-width: 46ch;
+  margin-bottom: 36px;
+}
+.hero-actions{ display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 44px; }
+.hero-stats{
+  display: flex;
+  gap: 36px;
+  border-top: 1px solid rgba(251,247,238,.2);
+  padding-top: 24px;
+}
+.hero-stats div{ display: flex; flex-direction: column; gap: 4px; }
+.hero-stats strong{
+  font-family: var(--display);
+  font-size: 1.6rem;
+  color: var(--paper);
+  font-weight: 500;
+}
+.hero-stats span{ font-size: 0.85rem; color: rgba(251,247,238,.6); }
+
+.hero-art{
+  position: relative;
+  height: 100%;
+  min-height: 460px;
+  display: flex;
+  align-items: flex-end;
+}
+.hero-art svg{ width: 100%; height: auto; }
+
+.hero[data-reveal] .hero-eyebrow,
+.hero[data-reveal] h1,
+.hero[data-reveal] .hero-lede,
+.hero[data-reveal] .hero-actions,
+.hero[data-reveal] .hero-stats,
+.hero[data-reveal] .hero-art{
+  opacity: 0;
+  transform: translateY(16px);
+}
+.hero.is-revealed .hero-eyebrow,
+.hero.is-revealed h1,
+.hero.is-revealed .hero-lede,
+.hero.is-revealed .hero-actions,
+.hero.is-revealed .hero-stats,
+.hero.is-revealed .hero-art{
+  opacity: 1;
+  transform: none;
+  transition: opacity .8s var(--ease), transform .8s var(--ease);
+}
+.hero.is-revealed h1{ transition-delay: .08s; }
+.hero.is-revealed .hero-lede{ transition-delay: .16s; }
+.hero.is-revealed .hero-actions{ transition-delay: .24s; }
+.hero.is-revealed .hero-stats{ transition-delay: .32s; }
+.hero.is-revealed .hero-art{ transition-delay: .1s; }
+
+@media (max-width: 900px){
+  .hero .container{ grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 48px; min-height: auto; }
+  .hero-art{ order: -1; min-height: 280px; }
+  .hero-stats{ flex-wrap: wrap; row-gap: 18px; }
+}
+
+/* ============================================================
+   Section rhythm
+   ============================================================ */
+.section{ padding: 108px 0; }
+.section-tight{ padding: 72px 0; }
+.section-dark{ background: var(--cypress-deep); color: var(--paper); }
+.section-paper{ background: var(--paper); }
+@media (max-width: 640px){
+  .section{ padding: 68px 0; }
+  .section-tight{ padding: 52px 0; }
+}
+
+.section-head{
+  display: grid;
+  grid-template-columns: 1.1fr 0.9fr;
+  gap: 48px;
+  align-items: end;
+  margin-bottom: 56px;
+}
+.section-head h2{ font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
+.section-head p{ color: var(--ink-soft); }
+.section-dark .section-head p{ color: rgba(251,247,238,.75); }
+@media (max-width: 760px){
+  .section-head{ grid-template-columns: 1fr; gap: 16px; }
+}
+
+.divider{
+  border: none;
+  border-top: 1px solid var(--stone-line);
+  margin: 0;
+}
+
+/* ============================================================
+   Arch motif — the recurring signature shape
+   ============================================================ */
+.arch{
+  border-radius: var(--arch-radius);
+  overflow: hidden;
+}
+.arch-frame{
+  border-radius: var(--arch-radius);
+  border: 1px solid var(--stone-line);
+  padding: 2px;
+}
+
+/* ============================================================
+   Amenity / feature cards
+   ============================================================ */
+.grid-3{
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 28px;
+}
+.grid-2{
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 28px;
+}
+@media (max-width: 860px){
+  .grid-3{ grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 620px){
+  .grid-3, .grid-2{ grid-template-columns: 1fr; }
+}
+
+.feature-card{
+  background: var(--paper);
+  border: 1px solid var(--stone-line);
+  border-radius: var(--arch-radius);
+  padding: 40px 30px 30px;
+}
+.feature-card .icon{ margin-bottom: 22px; color: var(--sienna); }
+.feature-card h3{ font-size: 1.2rem; margin-bottom: 10px; }
+.feature-card p{ color: var(--ink-soft); font-size: 0.96rem; }
+
+/* ============================================================
+   Residence / plan rows
+   ============================================================ */
+.plan-row{
+  display: grid;
+  grid-template-columns: 1.1fr 0.5fr 0.5fr 0.5fr auto;
+  align-items: center;
+  gap: 20px;
+  padding: 26px 0;
+  border-top: 1px solid var(--stone-line);
+}
+.plan-row:last-child{ border-bottom: 1px solid var(--stone-line); }
+.plan-row .plan-name{ font-family: var(--display); font-size: 1.15rem; }
+.plan-row .plan-meta{ color: var(--ink-soft); font-size: 0.9rem; }
+.plan-row .plan-label{
+  display: none;
+  font-size: 0.75rem;
+  color: var(--brass);
+  margin-bottom: 3px;
+}
+.plan-head{
+  display: grid;
+  grid-template-columns: 1.1fr 0.5fr 0.5fr 0.5fr auto;
+  gap: 20px;
+  padding-bottom: 14px;
+  font-size: 0.78rem;
+  color: var(--brass);
+}
+@media (max-width: 760px){
+  .plan-head{ display: none; }
+  .plan-row{ grid-template-columns: 1fr; gap: 4px; }
+  .plan-row .plan-label{ display: block; }
+  .plan-row a.btn{ margin-top: 12px; width: fit-content; }
+}
+
+/* ============================================================
+   Steps (genuine sequence — used only for process flows)
+   ============================================================ */
+.steps{
+  counter-reset: step;
+  display: grid;
+  gap: 30px;
+}
+.step{
+  display: grid;
+  grid-template-columns: 52px 1fr;
+  gap: 20px;
+}
+.step::before{
+  counter-increment: step;
+  content: counter(step);
+  font-family: var(--display);
+  font-size: 1.3rem;
+  color: var(--sienna);
+  border: 1px solid var(--sienna);
+  width: 52px; height: 52px;
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+}
+.step h3{ font-size: 1.05rem; margin-bottom: 6px; }
+.step p{ color: var(--ink-soft); font-size: 0.95rem; }
+
+/* ============================================================
+   Forms
+   ============================================================ */
+.form-card{
+  background: var(--paper);
+  border: 1px solid var(--stone-line);
+  border-radius: 18px;
+  padding: 44px;
+}
+@media (max-width: 640px){ .form-card{ padding: 28px 22px; } }
+
+.field{ margin-bottom: 24px; }
+.field label{
+  display: block;
+  font-size: 0.88rem;
+  color: var(--ink-soft);
+  margin-bottom: 8px;
+}
+.field .hint{ font-size: 0.8rem; color: var(--stone-line); margin-top: 6px; }
+.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+@media (max-width: 560px){ .field-row{ grid-template-columns: 1fr; } }
+
+input, select, textarea{
+  width: 100%;
+  font-family: var(--body);
+  font-size: 1rem;
+  color: var(--ink);
+  background: var(--limestone);
+  border: 1px solid var(--stone-line);
+  border-radius: var(--radius-sm);
+  padding: 13px 14px;
+  transition: border-color .2s var(--ease), background .2s var(--ease);
+}
+input:focus, select:focus, textarea:focus{
+  border-color: var(--sienna);
+  background: var(--paper);
+  outline: none;
+}
+textarea{ resize: vertical; min-height: 120px; }
+
+fieldset{ border: none; padding: 0; margin: 0 0 24px; }
+legend{ font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 10px; padding: 0; }
+.radio-group{ display: flex; gap: 20px; flex-wrap: wrap; }
+.radio-option{ display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
+.radio-option input{ width: auto; }
+
+.form-status{
+  display: none;
+  margin-top: 22px;
+  padding: 16px 18px;
+  border-radius: var(--radius-sm);
+  background: rgba(63,74,56,0.1);
+  border: 1px solid var(--cypress);
+  color: var(--cypress-deep);
+  font-size: 0.92rem;
+}
+.form-status.is-visible{ display: block; }
+
+/* ============================================================
+   Quote / testimonial
+   ============================================================ */
+.quote{
+  font-family: var(--display);
+  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
+  font-style: italic;
+  line-height: 1.4;
+  max-width: 34ch;
+}
+.quote-attr{
+  margin-top: 22px;
+  font-family: var(--body);
+  font-style: normal;
+  font-size: 0.9rem;
+  color: var(--brass);
+}
+
+/* ============================================================
+   CTA band
+   ============================================================ */
+.cta-band{
+  background: var(--sienna);
+  color: var(--paper);
+  border-radius: var(--arch-radius);
+  padding: 64px 56px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 32px;
+  flex-wrap: wrap;
+}
+.cta-band h2{ color: var(--paper); font-size: clamp(1.6rem, 3vw, 2.2rem); max-width: 20ch; }
+@media (max-width: 640px){
+  .cta-band{ padding: 44px 28px; flex-direction: column; align-items: flex-start; }
+}
+
+/* ============================================================
+   Footer
+   ============================================================ */
+.site-footer{
+  background: var(--ink);
+  color: rgba(251,247,238,.7);
+  padding: 72px 0 32px;
+}
+.footer-grid{
+  display: grid;
+  grid-template-columns: 1.4fr 1fr 1fr 1fr;
+  gap: 36px;
+  padding-bottom: 48px;
+  border-bottom: 1px solid rgba(251,247,238,.14);
+}
+.footer-grid h4{ color: var(--paper); font-size: 0.95rem; margin-bottom: 16px; font-family: var(--body); font-weight: 600; }
+.footer-grid .wordmark{ color: var(--paper); margin-bottom: 14px; display: block;}
+.footer-grid p{ font-size: 0.92rem; }
+.footer-links{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 0.92rem; }
+.footer-links a:hover{ color: var(--paper); }
+.footer-bottom{
+  padding-top: 28px;
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.82rem;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+@media (max-width: 760px){
+  .footer-grid{ grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 480px){
+  .footer-grid{ grid-template-columns: 1fr; }
+}
+
+/* ============================================================
+   Page header (interior pages)
+   ============================================================ */
+.page-hero{
+  background: var(--ink);
+  color: var(--paper);
+  padding: 64px 0 56px;
+}
+.page-hero .hero-eyebrow{ margin-bottom: 16px; }
+.page-hero h1{ color: var(--paper); font-size: clamp(2.1rem, 4vw, 3rem); }
+.page-hero p{ color: rgba(251,247,238,.78); margin-top: 18px; max-width: 56ch; }
+
+.breadcrumb{ font-size: 0.85rem; color: var(--brass); margin-bottom: 14px; }
+.breadcrumb a{ color: rgba(251,247,238,.7); }
+.breadcrumb a:hover{ color: var(--paper); }
+
+/* utility */
+.mt-0{ margin-top: 0 !important; }
+.text-center{ text-align: center; }
+.visually-hidden{
+  position: absolute; width: 1px; height: 1px;
+  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
+}

assets/js/main.js

@@ -0,0 +1,82 @@
+// SIENA — shared site behavior
+
+document.addEventListener('DOMContentLoaded', () => {
+  initHeaderScroll();
+  initMobileNav();
+  initHeroReveal();
+  initForms();
+});
+
+/* Give the sticky header a hairline + shadow once the page scrolls. */
+function initHeaderScroll() {
+  const header = document.querySelector('.site-header');
+  if (!header) return;
+  const setState = () => {
+    header.classList.toggle('is-scrolled', window.scrollY > 8);
+  };
+  setState();
+  window.addEventListener('scroll', setState, { passive: true });
+}
+
+/* Mobile nav toggle button. */
+function initMobileNav() {
+  const toggle = document.querySelector('.nav-toggle');
+  const nav = document.querySelector('.main-nav');
+  if (!toggle || !nav) return;
+
+  toggle.addEventListener('click', () => {
+    const isOpen = nav.classList.toggle('is-open');
+    toggle.setAttribute('aria-expanded', String(isOpen));
+    document.body.style.overflow = isOpen ? 'hidden' : '';
+  });
+
+  nav.querySelectorAll('a').forEach((link) => {
+    link.addEventListener('click', () => {
+      nav.classList.remove('is-open');
+      toggle.setAttribute('aria-expanded', 'false');
+      document.body.style.overflow = '';
+    });
+  });
+}
+
+/* One orchestrated reveal for the hero on first paint, not per-scroll. */
+function initHeroReveal() {
+  const hero = document.querySelector('.hero[data-reveal]');
+  if (!hero) return;
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => hero.classList.add('is-revealed'));
+  });
+}
+
+/* Support + lease inquiry forms: client-side confirmation only.
+   No backend is wired up — this simulates a submission and shows
+   the confirmation state so the page is demonstrable end to end. */
+function initForms() {
+  document.querySelectorAll('form[data-inquiry-form]').forEach((form) => {
+    const status = form.querySelector('.form-status');
+    form.addEventListener('submit', (event) => {
+      event.preventDefault();
+      if (!form.checkValidity()) {
+        form.reportValidity();
+        return;
+      }
+      const submitBtn = form.querySelector('button[type="submit"]');
+      const originalLabel = submitBtn.textContent;
+      submitBtn.disabled = true;
+      submitBtn.textContent = 'Sending…';
+
+      window.setTimeout(() => {
+        form.reset();
+        submitBtn.disabled = false;
+        submitBtn.textContent = originalLabel;
+        if (status) {
+          status.textContent = form.dataset.successMessage ||
+            "Thank you — we've received your message and will be in touch shortly.";
+          status.classList.add('is-visible');
+          status.setAttribute('tabindex', '-1');
+          status.focus();
+        }
+      }, 650);
+    });
+  });
+}

contact.html

@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Visit &amp; Contact — Siena</title>
+<meta name="description" content="Visit the Siena leasing office in Portland, Oregon, or get in touch by phone or email.">
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23221C16'/%3E%3Cpath d='M9 24V15a7 7 0 0 1 14 0v9' fill='none' stroke='%23A9803F' stroke-width='2.2'/%3E%3C/svg%3E">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/css/style.css">
+</head>
+<body>
+
+<header class="site-header">
+  <div class="container">
+    <a href="index.html" class="wordmark">SIENA<span>.</span></a>
+    <nav class="main-nav" aria-label="Primary">
+      <ul>
+        <li><a href="index.html">Home</a></li>
+        <li><a href="residences.html">Residences</a></li>
+        <li><a href="residences.html#amenities">Amenities</a></li>
+        <li><a href="support.html">Resident Support</a></li>
+        <li><a href="contact.html" aria-current="page">Visit</a></li>
+      </ul>
+      <a href="lease.html" class="btn btn-primary nav-cta">Inquire About Leasing</a>
+    </nav>
+    <button class="nav-toggle" aria-label="Toggle menu" aria-expanded="false">
+      <span></span><span></span><span></span>
+    </button>
+  </div>
+</header>
+
+<main>
+
+  <section class="page-hero">
+    <div class="container">
+      <p class="breadcrumb"><a href="index.html">Home</a> / Visit &amp; Contact</p>
+      <h1>Visit Siena</h1>
+      <p>Our leasing office sits just off the courtyard entrance. Walk-ins are welcome, but a scheduled tour means someone will actually be free to show you around.</p>
+    </div>
+  </section>
+
+  <section class="section">
+    <div class="container">
+      <div class="grid-2" style="align-items:start;">
+
+        <div>
+          <div class="arch-frame" style="margin-bottom:36px;">
+            <iframe
+              title="Map showing the Siena leasing office location in downtown Portland, Oregon"
+              src="https://www.google.com/maps?q=Portland,+OR&output=embed"
+              width="100%" height="360" style="border:0; border-radius:254px 254px 0 0; display:block;"
+              loading="lazy"
+              referrerpolicy="no-referrer-when-downgrade">
+            </iframe>
+          </div>
+
+          <div class="grid-2">
+            <div class="feature-card">
+              <h3>Address</h3>
+              <p>820 SW Ankeny Street<br>Portland, OR 97205</p>
+            </div>
+            <div class="feature-card">
+              <h3>Leasing office hours</h3>
+              <p>Mon–Sat, 9am–6pm<br>Sun, 11am–4pm</p>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <h3 style="font-size:1.15rem; margin-bottom:18px;">Reach us directly</h3>
+          <div style="display:grid; gap:20px; margin-bottom:36px;">
+            <div class="feature-card">
+              <h3>Leasing inquiries</h3>
+              <p>(503) 555-0142<br>[email protected]</p>
+              <a href="lease.html" class="btn btn-ghost" style="margin-top:16px;">Start a Lease Inquiry</a>
+            </div>
+            <div class="feature-card">
+              <h3>Current residents</h3>
+              <p>For maintenance and account questions, use the resident support form — it routes faster than email.</p>
+              <a href="support.html" class="btn btn-ghost" style="margin-top:16px;">Go to Resident Support</a>
+            </div>
+            <div class="feature-card" style="border-color:var(--sienna);">
+              <h3>After-hours emergency</h3>
+              <p>(503) 555-0199 — for anything that can't wait until morning.</p>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
+</main>
+
+<footer class="site-footer">
+  <div class="container">
+    <div class="footer-grid">
+      <div>
+        <span class="wordmark">SIENA<span style="color:var(--brass);">.</span></span>
+        <p>128 residences around a shared courtyard, in the heart of Portland.</p>
+      </div>
+      <div>
+        <h4>Explore</h4>
+        <ul class="footer-links">
+          <li><a href="residences.html">Residences</a></li>
+          <li><a href="residences.html#amenities">Amenities</a></li>
+          <li><a href="residences.html#neighborhood">Neighborhood</a></li>
+        </ul>
+      </div>
+      <div>
+        <h4>Get in touch</h4>
+        <ul class="footer-links">
+          <li><a href="lease.html">Lease inquiry</a></li>
+          <li><a href="support.html">Resident support</a></li>
+          <li><a href="contact.html">Visit &amp; contact</a></li>
+        </ul>
+      </div>
+      <div>
+        <h4>Leasing office</h4>
+        <ul class="footer-links">
+          <li>820 SW Ankeny Street<br>Portland, OR 97205</li>
+          <li>(503) 555-0142</li>
+          <li>[email protected]</li>
+        </ul>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <span>© 2026 Siena Residences. All rights reserved.</span>
+      <span>Equal Housing Opportunity</span>
+    </div>
+  </div>
+</footer>
+
+<script src="assets/js/main.js"></script>
+</body>
+</html>

index.html

@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Siena — Residences in Portland, Oregon</title>
+<meta name="description" content="Siena is a 128-residence community in Portland, Oregon, drawn from the brickwork, arches, and courtyards of the Tuscan city it takes its name from.">
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23221C16'/%3E%3Cpath d='M9 24V15a7 7 0 0 1 14 0v9' fill='none' stroke='%23A9803F' stroke-width='2.2'/%3E%3C/svg%3E">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/css/style.css">
+</head>
+<body>
+
+<header class="site-header">
+  <div class="container">
+    <a href="index.html" class="wordmark">SIENA<span>.</span></a>
+    <nav class="main-nav" aria-label="Primary">
+      <ul>
+        <li><a href="index.html" aria-current="page">Home</a></li>
+        <li><a href="residences.html">Residences</a></li>
+        <li><a href="residences.html#amenities">Amenities</a></li>
+        <li><a href="support.html">Resident Support</a></li>
+        <li><a href="contact.html">Visit</a></li>
+      </ul>
+      <a href="lease.html" class="btn btn-primary nav-cta">Inquire About Leasing</a>
+    </nav>
+    <button class="nav-toggle" aria-label="Toggle menu" aria-expanded="false">
+      <span></span><span></span><span></span>
+    </button>
+  </div>
+</header>
+
+<main>
+
+  <section class="hero" data-reveal>
+    <div class="container">
+      <div class="hero-copy">
+        <p class="hero-eyebrow">Now leasing — Portland, Oregon</p>
+        <h1>An address built the way old cities are built — slowly, and with care.</h1>
+        <p class="hero-lede">Siena is a 128-residence community drawn from the brickwork, arcades, and courtyards of the Tuscan city it's named for, reworked for how people actually live today.</p>
+        <div class="hero-actions">
+          <a href="lease.html" class="btn btn-primary">Schedule a Tour</a>
+          <a href="residences.html" class="btn btn-ghost-light">View Residences</a>
+        </div>
+        <div class="hero-stats">
+          <div><strong>128</strong><span>Residences</span></div>
+          <div><strong>9</strong><span>Stories</span></div>
+          <div><strong>24/7</strong><span>On-site concierge</span></div>
+        </div>
+      </div>
+      <div class="hero-art" aria-hidden="true">
+        <svg viewBox="0 0 560 640" xmlns="http://www.w3.org/2000/svg" role="img">
+          <defs>
+            <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="#4A392C"/>
+              <stop offset="55%" stop-color="#8A4B30"/>
+              <stop offset="100%" stop-color="#C98B4E"/>
+            </linearGradient>
+            <linearGradient id="archFace" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="#E9DCC3"/>
+              <stop offset="100%" stop-color="#CBB78F"/>
+            </linearGradient>
+            <linearGradient id="archFaceFar" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="#C79A62"/>
+              <stop offset="100%" stop-color="#9E6E3E"/>
+            </linearGradient>
+          </defs>
+
+          <rect x="0" y="0" width="560" height="640" fill="url(#sky)"/>
+          <circle cx="430" cy="120" r="72" fill="#F3D8A8" opacity="0.55"/>
+
+          <!-- receding arcade, far to near -->
+          <g opacity="0.9">
+            <path d="M40 380 a60 60 0 0 1 120 0 v130 h-120 z" fill="url(#archFaceFar)"/>
+            <path d="M170 380 a60 60 0 0 1 120 0 v130 h-120 z" fill="url(#archFaceFar)"/>
+          </g>
+          <g>
+            <path d="M-10 400 a80 80 0 0 1 160 0 v170 h-160 z" fill="url(#archFace)"/>
+            <path d="M150 400 a80 80 0 0 1 160 0 v170 h-160 z" fill="url(#archFace)"/>
+            <path d="M310 400 a80 80 0 0 1 160 0 v170 h-160 z" fill="url(#archFace)"/>
+          </g>
+
+          <!-- brick coursing -->
+          <g stroke="#8A6B3F" stroke-width="1" opacity="0.35">
+            <line x1="-10" y1="440" x2="470" y2="440"/>
+            <line x1="-10" y1="480" x2="470" y2="480"/>
+            <line x1="-10" y1="520" x2="470" y2="520"/>
+            <line x1="-10" y1="560" x2="470" y2="560"/>
+          </g>
+
+          <rect x="-10" y="568" width="580" height="72" fill="#2C1E14"/>
+          <g fill="#B08D57" opacity="0.9">
+            <circle cx="70" cy="410" r="4"/>
+            <circle cx="230" cy="410" r="4"/>
+            <circle cx="390" cy="410" r="4"/>
+          </g>
+        </svg>
+      </div>
+    </div>
+  </section>
+
+  <section class="section section-dark">
+    <div class="container">
+      <div class="section-head">
+        <h2>Every good city has a Campo.</h2>
+        <p>In Siena, Italy, the Piazza del Campo is where the city actually happens — the square everyone crosses, meets in, and lingers. Our courtyard borrows the idea, not the postcard.</p>
+      </div>
+      <div class="grid-2">
+        <div class="arch-frame">
+          <svg viewBox="0 0 500 360" role="img" aria-label="Illustration of the courtyard, shown as a warm arched colonnade around a shared lawn">
+            <rect width="500" height="360" fill="#EFE7D8"/>
+            <rect x="0" y="230" width="500" height="130" fill="#4B5842"/>
+            <g fill="none" stroke="#7A3A22" stroke-width="3">
+              <path d="M20 230 v-60 a40 40 0 0 1 80 0 v60"/>
+              <path d="M110 230 v-60 a40 40 0 0 1 80 0 v60"/>
+              <path d="M200 230 v-60 a40 40 0 0 1 80 0 v60"/>
+              <path d="M290 230 v-60 a40 40 0 0 1 80 0 v60"/>
+              <path d="M380 230 v-60 a40 40 0 0 1 80 0 v60"/>
+            </g>
+            <rect x="0" y="60" width="500" height="20" fill="#9A4A2C"/>
+          </svg>
+        </div>
+        <div style="display:flex; flex-direction:column; justify-content:center; gap:28px;">
+          <blockquote class="quote">
+            "We moved in for the apartment and stayed for the courtyard. There's always someone reading, or the dog, or a birthday — it's the closest thing our block has to a piazza."
+            <div class="quote-attr">— Nora F., resident since 2022</div>
+          </blockquote>
+          <a href="residences.html#amenities" class="btn btn-ghost-light" style="width:fit-content;">Explore the Amenities</a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="section" id="amenities">
+    <div class="container">
+      <div class="section-head">
+        <h2>Designed for the hours outside your door.</h2>
+        <p>A short list of what's just downstairs — the fuller one lives on the residences page.</p>
+      </div>
+      <div class="grid-3">
+        <div class="feature-card">
+          <div class="icon" aria-hidden="true">
+            <svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><path d="M6 30V17a11 11 0 0 1 22 0v13"/></svg>
+          </div>
+          <h3>Courtyard &amp; loggia</h3>
+          <p>A shared arcade and lawn at the center of the building, open from sunrise to midnight.</p>
+        </div>
+        <div class="feature-card">
+          <div class="icon" aria-hidden="true">
+            <svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><rect x="5" y="10" width="24" height="17" rx="2"/><path d="M11 10V6h12v4"/></svg>
+          </div>
+          <h3>Rooftop terrace</h3>
+          <p>West-facing views, communal grills, and a fireplace for the nine months it isn't sunny.</p>
+        </div>
+        <div class="feature-card">
+          <div class="icon" aria-hidden="true">
+            <svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><circle cx="10" cy="25" r="5"/><circle cx="26" cy="25" r="5"/><path d="M10 25 15 12h6l5 13M15 12l4-6"/></svg>
+          </div>
+          <h3>Bike &amp; gear room</h3>
+          <p>Secure storage, a repair stand, and direct courtyard access for muddy boots.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="section section-paper">
+    <div class="container">
+      <div class="section-head">
+        <h2>Six floor plans, one address.</h2>
+        <p>From a well-proportioned studio to a top-floor two-bedroom with its own loggia.</p>
+      </div>
+      <div class="plan-head">
+        <span>Plan</span><span>Beds</span><span>Baths</span><span>Sq. Ft.</span><span></span>
+      </div>
+      <div class="plan-row">
+        <div><span class="plan-label">Plan</span><span class="plan-name">The Cortile</span><div class="plan-meta">Studio</div></div>
+        <div><span class="plan-label">Beds</span>Studio</div>
+        <div><span class="plan-label">Baths</span>1</div>
+        <div><span class="plan-label">Sq. Ft.</span>512</div>
+        <a href="lease.html" class="btn btn-ghost">Inquire</a>
+      </div>
+      <div class="plan-row">
+        <div><span class="plan-label">Plan</span><span class="plan-name">The Duomo</span><div class="plan-meta">One bedroom</div></div>
+        <div><span class="plan-label">Beds</span>1</div>
+        <div><span class="plan-label">Baths</span>1</div>
+        <div><span class="plan-label">Sq. Ft.</span>701</div>
+        <a href="lease.html" class="btn btn-ghost">Inquire</a>
+      </div>
+      <div class="plan-row">
+        <div><span class="plan-label">Plan</span><span class="plan-name">The Torre</span><div class="plan-meta">Two bedroom, corner</div></div>
+        <div><span class="plan-label">Beds</span>2</div>
+        <div><span class="plan-label">Baths</span>2</div>
+        <div><span class="plan-label">Sq. Ft.</span>1,140</div>
+        <a href="lease.html" class="btn btn-ghost">Inquire</a>
+      </div>
+      <div class="text-center" style="margin-top:44px;">
+        <a href="residences.html#plans" class="btn btn-primary">View All Floor Plans</a>
+      </div>
+    </div>
+  </section>
+
+  <section class="section-tight">
+    <div class="container">
+      <div class="cta-band">
+        <h2>See it in person before you decide on paper.</h2>
+        <div style="display:flex; gap:16px; flex-wrap:wrap;">
+          <a href="contact.html" class="btn btn-ghost-light">Schedule a Tour</a>
+          <a href="lease.html" class="btn" style="background:var(--paper); color:var(--sienna);">Start a Lease Inquiry</a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</main>
+
+<footer class="site-footer">
+  <div class="container">
+    <div class="footer-grid">
+      <div>
+        <span class="wordmark">SIENA<span style="color:var(--brass);">.</span></span>
+        <p>128 residences around a shared courtyard, in the heart of Portland.</p>
+      </div>
+      <div>
+        <h4>Explore</h4>
+        <ul class="footer-links">
+          <li><a href="residences.html">Residences</a></li>
+          <li><a href="residences.html#amenities">Amenities</a></li>
+          <li><a href="residences.html#neighborhood">Neighborhood</a></li>
+        </ul>
+      </div>
+      <div>
+        <h4>Get in touch</h4>
+        <ul class="footer-links">
+          <li><a href="lease.html">Lease inquiry</a></li>
+          <li><a href="support.html">Resident support</a></li>
+          <li><a href="contact.html">Visit &amp; contact</a></li>
+        </ul>
+      </div>
+      <div>
+        <h4>Leasing office</h4>
+        <ul class="footer-links">
+          <li>820 SW Ankeny Street<br>Portland, OR 97205</li>
+          <li>(503) 555-0142</li>
+          <li>[email protected]</li>
+        </ul>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <span>© 2026 Siena Residences. All rights reserved.</span>
+      <span>Equal Housing Opportunity</span>
+    </div>
+  </div>
+</footer>
+
+<script src="assets/js/main.js"></script>
+</body>
+</html>

lease.html

@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Lease Inquiry — Siena</title>
+<meta name="description" content="Start a lease inquiry for Siena, a 128-residence community in Portland, Oregon. Tell us what you're looking for and we'll follow up within one business day.">
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23221C16'/%3E%3Cpath d='M9 24V15a7 7 0 0 1 14 0v9' fill='none' stroke='%23A9803F' stroke-width='2.2'/%3E%3C/svg%3E">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/css/style.css">
+</head>
+<body>
+
+<header class="site-header">
+  <div class="container">
+    <a href="index.html" class="wordmark">SIENA<span>.</span></a>
+    <nav class="main-nav" aria-label="Primary">
+      <ul>
+        <li><a href="index.html">Home</a></li>
+        <li><a href="residences.html">Residences</a></li>
+        <li><a href="residences.html#amenities">Amenities</a></li>
+        <li><a href="support.html">Resident Support</a></li>
+        <li><a href="contact.html">Visit</a></li>
+      </ul>
+      <a href="lease.html" class="btn btn-primary nav-cta" aria-current="page">Inquire About Leasing</a>
+    </nav>
+    <button class="nav-toggle" aria-label="Toggle menu" aria-expanded="false">
+      <span></span><span></span><span></span>
+    </button>
+  </div>
+</header>
+
+<main>
+
+  <section class="page-hero">
+    <div class="container">
+      <p class="breadcrumb"><a href="index.html">Home</a> / Lease Inquiry</p>
+      <h1>Start a lease inquiry</h1>
+      <p>Tell us a little about what you're looking for. A member of our leasing team will follow up within one business day with availability and next steps.</p>
+    </div>
+  </section>
+
+  <section class="section">
+    <div class="container">
+      <div class="grid-2" style="grid-template-columns: 1.4fr 1fr; align-items:start;">
+
+        <div class="form-card">
+          <h2 style="font-size:1.5rem; margin-bottom:28px;">Tell us about your search</h2>
+          <form data-inquiry-form data-success-message="Thank you — we've received your inquiry. A member of our leasing team will reach out within one business day.">
+            <div class="field-row">
+              <div class="field">
+                <label for="name">Full name</label>
+                <input type="text" id="name" name="name" required autocomplete="name">
+              </div>
+              <div class="field">
+                <label for="email">Email</label>
+                <input type="email" id="email" name="email" required autocomplete="email">
+              </div>
+            </div>
+            <div class="field-row">
+              <div class="field">
+                <label for="phone">Phone</label>
+                <input type="tel" id="phone" name="phone" autocomplete="tel">
+              </div>
+              <div class="field">
+                <label for="move-in">Desired move-in date</label>
+                <input type="date" id="move-in" name="move-in">
+              </div>
+            </div>
+            <div class="field-row">
+              <div class="field">
+                <label for="plan">Floor plan of interest</label>
+                <select id="plan" name="plan">
+                  <option value="">Not sure yet</option>
+                  <option>The Cortile — Studio</option>
+                  <option>The Duomo — One bedroom</option>
+                  <option>The Palio — One bedroom + den</option>
+                  <option>The Contrada — Two bedroom</option>
+                  <option>The Torre — Two bedroom, corner</option>
+                  <option>The Belvedere — Penthouse</option>
+                </select>
+              </div>
+              <div class="field">
+                <label for="household">Household size</label>
+                <input type="number" id="household" name="household" min="1" max="8" placeholder="e.g. 2">
+              </div>
+            </div>
+            <fieldset>
+              <legend>How would you like to see the property?</legend>
+              <div class="radio-group">
+                <label class="radio-option"><input type="radio" name="tour-type" value="in-person" checked> In-person tour</label>
+                <label class="radio-option"><input type="radio" name="tour-type" value="virtual"> Virtual tour</label>
+                <label class="radio-option"><input type="radio" name="tour-type" value="self-guided"> Self-guided</label>
+              </div>
+            </fieldset>
+            <div class="field">
+              <label for="notes">Anything else we should know?</label>
+              <textarea id="notes" name="notes" placeholder="Timeline, budget, pets, parking needs — whatever's relevant."></textarea>
+            </div>
+            <div class="field" style="display:flex; align-items:flex-start; gap:10px;">
+              <input type="checkbox" id="consent" name="consent" required style="width:auto; margin-top:4px;">
+              <label for="consent" style="margin:0;">I agree to be contacted by Siena's leasing team by phone or email.</label>
+            </div>
+            <button type="submit" class="btn btn-primary">Send Inquiry</button>
+            <div class="form-status" role="status" aria-live="polite"></div>
+          </form>
+        </div>
+
+        <div>
+          <h3 style="font-size:1.15rem; margin-bottom:22px;">How leasing works</h3>
+          <div class="steps" style="margin-bottom:44px;">
+            <div class="step">
+              <div>
+                <h3>Tour</h3>
+                <p>See the residence and courtyard in person, virtually, or on your own schedule.</p>
+              </div>
+            </div>
+            <div class="step">
+              <div>
+                <h3>Apply</h3>
+                <p>A short online application, processed within two business days.</p>
+              </div>
+            </div>
+            <div class="step">
+              <div>
+                <h3>Sign</h3>
+                <p>Review and sign your lease electronically — no office visit required.</p>
+              </div>
+            </div>
+            <div class="step">
+              <div>
+                <h3>Move in</h3>
+                <p>Pick up your keys and access fob from the concierge desk.</p>
+              </div>
+            </div>
+          </div>
+          <div class="feature-card">
+            <h3>Prefer to talk it through?</h3>
+            <p>Call the leasing office directly at <strong>(503) 555-0142</strong>, Monday through Saturday, 9am–6pm.</p>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
+</main>
+
+<footer class="site-footer">
+  <div class="container">
+    <div class="footer-grid">
+      <div>
+        <span class="wordmark">SIENA<span style="color:var(--brass);">.</span></span>
+        <p>128 residences around a shared courtyard, in the heart of Portland.</p>
+      </div>
+      <div>
+        <h4>Explore</h4>
+        <ul class="footer-links">
+          <li><a href="residences.html">Residences</a></li>
+          <li><a href="residences.html#amenities">Amenities</a></li>
+          <li><a href="residences.html#neighborhood">Neighborhood</a></li>
+        </ul>
+      </div>
+      <div>
+        <h4>Get in touch</h4>
+        <ul class="footer-links">
+          <li><a href="lease.html">Lease inquiry</a></li>
+          <li><a href="support.html">Resident support</a></li>
+          <li><a href="contact.html">Visit &amp; contact</a></li>
+        </ul>
+      </div>
+      <div>
+        <h4>Leasing office</h4>
+        <ul class="footer-links">
+          <li>820 SW Ankeny Street<br>Portland, OR 97205</li>
+          <li>(503) 555-0142</li>
+          <li>[email protected]</li>
+        </ul>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <span>© 2026 Siena Residences. All rights reserved.</span>
+      <span>Equal Housing Opportunity</span>
+    </div>
+  </div>
+</footer>
+
+<script src="assets/js/main.js"></script>
+</body>
+</html>

residences.html

@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Residences &amp; Amenities — Siena</title>
+<meta name="description" content="Floor plans, amenities, and neighborhood details for Siena, a 128-residence community in Portland, Oregon.">
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23221C16'/%3E%3Cpath d='M9 24V15a7 7 0 0 1 14 0v9' fill='none' stroke='%23A9803F' stroke-width='2.2'/%3E%3C/svg%3E">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/css/style.css">
+</head>
+<body>
+
+<header class="site-header">
+  <div class="container">
+    <a href="index.html" class="wordmark">SIENA<span>.</span></a>
+    <nav class="main-nav" aria-label="Primary">
+      <ul>
+        <li><a href="index.html">Home</a></li>
+        <li><a href="residences.html" aria-current="page">Residences</a></li>
+        <li><a href="residences.html#amenities">Amenities</a></li>
+        <li><a href="support.html">Resident Support</a></li>
+        <li><a href="contact.html">Visit</a></li>
+      </ul>
+      <a href="lease.html" class="btn btn-primary nav-cta">Inquire About Leasing</a>
+    </nav>
+    <button class="nav-toggle" aria-label="Toggle menu" aria-expanded="false">
+      <span></span><span></span><span></span>
+    </button>
+  </div>
+</header>
+
+<main>
+
+  <section class="page-hero">
+    <div class="container">
+      <p class="breadcrumb"><a href="index.html">Home</a> / Residences</p>
+      <h1>Residences &amp; amenities</h1>
+      <p>Six floor plans and the shared spaces around them — from the courtyard loggia to the room where you'll actually keep your bike.</p>
+    </div>
+  </section>
+
+  <section class="section" id="plans">
+    <div class="container">
+      <div class="section-head">
+        <h2>Floor plans</h2>
+        <p>Every residence includes white oak flooring, a full-size washer and dryer, and at least one operable window with an actual view.</p>
+      </div>
+
+      <div class="plan-head">
+        <span>Plan</span><span>Beds</span><span>Baths</span><span>Sq. Ft.</span><span></span>
+      </div>
+      <div class="plan-row">
+        <div><span class="plan-label">Plan</span><span class="plan-name">The Cortile</span><div class="plan-meta">Studio</div></div>
+        <div><span class="plan-label">Beds</span>Studio</div>
+        <div><span class="plan-label">Baths</span>1</div>
+        <div><span class="plan-label">Sq. Ft.</span>512</div>
+        <a href="lease.html" class="btn btn-ghost">Inquire</a>
+      </div>
+      <div class="plan-row">
+        <div><span class="plan-label">Plan</span><span class="plan-name">The Palio</span><div class="plan-meta">One bedroom + den</div></div>
+        <div><span class="plan-label">Beds</span>1 + den</div>
+        <div><span class="plan-label">Baths</span>1</div>
+        <div><span class="plan-label">Sq. Ft.</span>820</div>
+        <a href="lease.html" class="btn btn-ghost">Inquire</a>
+      </div>
+      <div class="plan-row">
+        <div><span class="plan-label">Plan</span><span class="plan-name">The Duomo</span><div class="plan-meta">One bedroom</div></div>
+        <div><span class="plan-label">Beds</span>1</div>
+        <div><span class="plan-label">Baths</span>1</div>
+        <div><span class="plan-label">Sq. Ft.</span>701</div>
+        <a href="lease.html" class="btn btn-ghost">Inquire</a>
+      </div>
+      <div class="plan-row">
+        <div><span class="plan-label">Plan</span><span class="plan-name">The Contrada</span><div class="plan-meta">Two bedroom</div></div>
+        <div><span class="plan-label">Beds</span>2</div>
+        <div><span class="plan-label">Baths</span>2</div>
+        <div><span class="plan-label">Sq. Ft.</span>980</div>
+        <a href="lease.html" class="btn btn-ghost">Inquire</a>
+      </div>
+      <div class="plan-row">
+        <div><span class="plan-label">Plan</span><span class="plan-name">The Torre</span><div class="plan-meta">Two bedroom, corner</div></div>
+        <div><span class="plan-label">Beds</span>2</div>
+        <div><span class="plan-label">Baths</span>2</div>
+        <div><span class="plan-label">Sq. Ft.</span>1,140</div>
+        <a href="lease.html" class="btn btn-ghost">Inquire</a>
+      </div>
+      <div class="plan-row">
+        <div><span class="plan-label">Plan</span><span class="plan-name">The Belvedere</span><div class="plan-meta">Penthouse, top floor</div></div>
+        <div><span class="plan-label">Beds</span>2</div>
+        <div><span class="plan-label">Baths</span>2.5</div>
+        <div><span class="plan-label">Sq. Ft.</span>1,460</div>
+        <a href="lease.html" class="btn btn-ghost">Inquire</a>
+      </div>
+    </div>
+  </section>
+
+  <section class="section section-dark" id="amenities">
+    <div class="container">
+      <div class="section-head">
+        <h2>Amenities</h2>
+        <p>Shared spaces that earn their square footage.</p>
+      </div>
+      <div class="grid-3">
+        <div class="feature-card">
+          <div class="icon" aria-hidden="true"><svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><path d="M6 30V17a11 11 0 0 1 22 0v13"/></svg></div>
+          <h3>Courtyard &amp; loggia</h3>
+          <p>A shared arcade and lawn at the building's center, open sunrise to midnight, with fixed seating and a communal fireplace.</p>
+        </div>
+        <div class="feature-card">
+          <div class="icon" aria-hidden="true"><svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><rect x="5" y="10" width="24" height="17" rx="2"/><path d="M11 10V6h12v4"/></svg></div>
+          <h3>Rooftop terrace</h3>
+          <p>West-facing views over the West End, communal grills, string lighting, and a gas fireplace for the wetter months.</p>
+        </div>
+        <div class="feature-card">
+          <div class="icon" aria-hidden="true"><svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><circle cx="10" cy="25" r="5"/><circle cx="26" cy="25" r="5"/><path d="M10 25 15 12h6l5 13M15 12l4-6"/></svg></div>
+          <h3>Bike &amp; gear room</h3>
+          <p>Secure ground-floor storage, a repair stand with tools, and direct courtyard access for wet boots and muddy tires.</p>
+        </div>
+        <div class="feature-card">
+          <div class="icon" aria-hidden="true"><svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><path d="M17 4v26M6 12h22M6 22h22"/></svg></div>
+          <h3>Fitness studio</h3>
+          <p>Free weights, cardio, and a separate room for the 7am class you keep meaning to sign up for.</p>
+        </div>
+        <div class="feature-card">
+          <div class="icon" aria-hidden="true"><svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><rect x="5" y="6" width="24" height="22" rx="2"/><path d="M5 14h24"/></svg></div>
+          <h3>Resident lounge</h3>
+          <p>A quiet room for working, a bookable dining room for the nights your kitchen is too small, and coffee that's actually good.</p>
+        </div>
+        <div class="feature-card">
+          <div class="icon" aria-hidden="true"><svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><circle cx="17" cy="17" r="12"/><path d="M17 10v7l5 3"/></svg></div>
+          <h3>24/7 concierge</h3>
+          <p>Package acceptance, guest check-in, and someone to call after hours who actually picks up.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="section" id="neighborhood">
+    <div class="container">
+      <div class="section-head">
+        <h2>The neighborhood</h2>
+        <p>Set in Portland's West End, a few minutes' walk from the Park Blocks, the Pearl District, and the streetcar line.</p>
+      </div>
+      <div class="grid-3">
+        <div class="feature-card">
+          <h3>Walk Score® 94</h3>
+          <p>Groceries, coffee, and the streetcar are all within a five-minute walk.</p>
+        </div>
+        <div class="feature-card">
+          <h3>Bike Score® 91</h3>
+          <p>Protected lanes run directly to the river and the east side.</p>
+        </div>
+        <div class="feature-card">
+          <h3>4 min to the Park Blocks</h3>
+          <p>Portland State's tree-lined promenade, straight down 9th.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="section-tight">
+    <div class="container">
+      <div class="cta-band">
+        <h2>Found a plan you like?</h2>
+        <div style="display:flex; gap:16px; flex-wrap:wrap;">
+          <a href="lease.html" class="btn" style="background:var(--paper); color:var(--sienna);">Start a Lease Inquiry</a>
+          <a href="contact.html" class="btn btn-ghost-light">Schedule a Tour</a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</main>
+
+<footer class="site-footer">
+  <div class="container">
+    <div class="footer-grid">
+      <div>
+        <span class="wordmark">SIENA<span style="color:var(--brass);">.</span></span>
+        <p>128 residences around a shared courtyard, in the heart of Portland.</p>
+      </div>
+      <div>
+        <h4>Explore</h4>
+        <ul class="footer-links">
+          <li><a href="residences.html">Residences</a></li>
+          <li><a href="residences.html#amenities">Amenities</a></li>
+          <li><a href="residences.html#neighborhood">Neighborhood</a></li>
+        </ul>
+      </div>
+      <div>
+        <h4>Get in touch</h4>
+        <ul class="footer-links">
+          <li><a href="lease.html">Lease inquiry</a></li>
+          <li><a href="support.html">Resident support</a></li>
+          <li><a href="contact.html">Visit &amp; contact</a></li>
+        </ul>
+      </div>
+      <div>
+        <h4>Leasing office</h4>
+        <ul class="footer-links">
+          <li>820 SW Ankeny Street<br>Portland, OR 97205</li>
+          <li>(503) 555-0142</li>
+          <li>[email protected]</li>
+        </ul>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <span>© 2026 Siena Residences. All rights reserved.</span>
+      <span>Equal Housing Opportunity</span>
+    </div>
+  </div>
+</footer>
+
+<script src="assets/js/main.js"></script>
+</body>
+</html>

support.html

@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Resident Support — Siena</title>
+<meta name="description" content="Submit a maintenance or support request as a Siena resident, or find the after-hours emergency line.">
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23221C16'/%3E%3Cpath d='M9 24V15a7 7 0 0 1 14 0v9' fill='none' stroke='%23A9803F' stroke-width='2.2'/%3E%3C/svg%3E">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="assets/css/style.css">
+</head>
+<body>
+
+<header class="site-header">
+  <div class="container">
+    <a href="index.html" class="wordmark">SIENA<span>.</span></a>
+    <nav class="main-nav" aria-label="Primary">
+      <ul>
+        <li><a href="index.html">Home</a></li>
+        <li><a href="residences.html">Residences</a></li>
+        <li><a href="residences.html#amenities">Amenities</a></li>
+        <li><a href="support.html" aria-current="page">Resident Support</a></li>
+        <li><a href="contact.html">Visit</a></li>
+      </ul>
+      <a href="lease.html" class="btn btn-primary nav-cta">Inquire About Leasing</a>
+    </nav>
+    <button class="nav-toggle" aria-label="Toggle menu" aria-expanded="false">
+      <span></span><span></span><span></span>
+    </button>
+  </div>
+</header>
+
+<main>
+
+  <section class="page-hero">
+    <div class="container">
+      <p class="breadcrumb"><a href="index.html">Home</a> / Resident Support</p>
+      <h1>Resident support</h1>
+      <p>For current residents. Submit a maintenance request, a billing question, or anything else — our team responds within one business day, and same-day for urgent issues.</p>
+    </div>
+  </section>
+
+  <section class="section">
+    <div class="container">
+      <div class="grid-2" style="grid-template-columns: 1.4fr 1fr; align-items:start;">
+
+        <div class="form-card">
+          <h2 style="font-size:1.5rem; margin-bottom:28px;">Submit a request</h2>
+          <form data-inquiry-form data-success-message="Thank you — your request has been logged. You'll hear from our team shortly, sooner if you marked it urgent.">
+            <div class="field-row">
+              <div class="field">
+                <label for="name">Full name</label>
+                <input type="text" id="name" name="name" required autocomplete="name">
+              </div>
+              <div class="field">
+                <label for="unit">Unit number</label>
+                <input type="text" id="unit" name="unit" required placeholder="e.g. 412">
+              </div>
+            </div>
+            <div class="field-row">
+              <div class="field">
+                <label for="email">Email</label>
+                <input type="email" id="email" name="email" required autocomplete="email">
+              </div>
+              <div class="field">
+                <label for="phone">Phone</label>
+                <input type="tel" id="phone" name="phone" autocomplete="tel">
+              </div>
+            </div>
+            <div class="field">
+              <label for="category">What's this about?</label>
+              <select id="category" name="category" required>
+                <option value="" disabled selected>Select a category</option>
+                <option>Maintenance &amp; repairs</option>
+                <option>Billing &amp; payments</option>
+                <option>Amenity reservation</option>
+                <option>Noise or neighbor concern</option>
+                <option>Package or delivery</option>
+                <option>Other</option>
+              </select>
+            </div>
+            <fieldset>
+              <legend>Priority</legend>
+              <div class="radio-group">
+                <label class="radio-option"><input type="radio" name="priority" value="routine" checked> Routine</label>
+                <label class="radio-option"><input type="radio" name="priority" value="urgent"> Urgent</label>
+              </div>
+            </fieldset>
+            <div class="field">
+              <label for="message">Details</label>
+              <textarea id="message" name="message" required placeholder="Tell us what's going on — the more detail, the faster we can help."></textarea>
+            </div>
+            <button type="submit" class="btn btn-primary">Submit Request</button>
+            <div class="form-status" role="status" aria-live="polite"></div>
+          </form>
+        </div>
+
+        <div>
+          <div class="steps" style="margin-bottom:44px;">
+            <div class="step">
+              <div>
+                <h3>Submit your request</h3>
+                <p>Include your unit number and as much detail as you can — photos help, but there's nowhere to attach one here, so just describe it well.</p>
+              </div>
+            </div>
+            <div class="step">
+              <div>
+                <h3>Get a confirmation</h3>
+                <p>You'll receive an email confirming we've received it, usually within a few minutes.</p>
+              </div>
+            </div>
+            <div class="step">
+              <div>
+                <h3>We schedule a visit</h3>
+                <p>Our maintenance team reaches out to confirm a time that works for you.</p>
+              </div>
+            </div>
+            <div class="step">
+              <div>
+                <h3>Follow-up</h3>
+                <p>We check back in to make sure it's actually resolved, not just closed.</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="feature-card" style="border-color:var(--sienna);">
+            <h3>After-hours emergency</h3>
+            <p>For anything that can't wait — flooding, no heat, being locked out after hours — call the 24/7 emergency line directly.</p>
+            <p style="margin-top:14px; font-family:var(--display); font-size:1.3rem; color:var(--sienna);">(503) 555-0199</p>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
+</main>
+
+<footer class="site-footer">
+  <div class="container">
+    <div class="footer-grid">
+      <div>
+        <span class="wordmark">SIENA<span style="color:var(--brass);">.</span></span>
+        <p>128 residences around a shared courtyard, in the heart of Portland.</p>
+      </div>
+      <div>
+        <h4>Explore</h4>
+        <ul class="footer-links">
+          <li><a href="residences.html">Residences</a></li>
+          <li><a href="residences.html#amenities">Amenities</a></li>
+          <li><a href="residences.html#neighborhood">Neighborhood</a></li>
+        </ul>
+      </div>
+      <div>
+        <h4>Get in touch</h4>
+        <ul class="footer-links">
+          <li><a href="lease.html">Lease inquiry</a></li>
+          <li><a href="support.html">Resident support</a></li>
+          <li><a href="contact.html">Visit &amp; contact</a></li>
+        </ul>
+      </div>
+      <div>
+        <h4>Leasing office</h4>
+        <ul class="footer-links">
+          <li>820 SW Ankeny Street<br>Portland, OR 97205</li>
+          <li>(503) 555-0142</li>
+          <li>[email protected]</li>
+        </ul>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <span>© 2026 Siena Residences. All rights reserved.</span>
+      <span>Equal Housing Opportunity</span>
+    </div>
+  </div>
+</footer>
+
+<script src="assets/js/main.js"></script>
+</body>
+</html>