:root{
  --warm:#f8f6f1;
  --paper:#fffdf8;
  --ink:#222326;
  --muted:#716d66;
  --gold:#b08d57;
  --line:#e4dbcf;
  --dark:#101418;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--warm);color:var(--ink);font-family:Inter,Arial,sans-serif;line-height:1.55}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.025em}
.header{position:sticky;top:0;z-index:20;background:rgba(248,246,241,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.nav{max-width:1500px;margin:auto;height:92px;padding:0 44px;display:flex;align-items:center;justify-content:space-between;gap:36px}
.logo img{width:330px;max-height:66px;object-fit:contain;object-position:left center}
.links{display:flex;gap:34px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#333;white-space:nowrap}
.hero{min-height:calc(100vh - 92px);display:flex;align-items:flex-end;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.35) 48%,rgba(0,0,0,.06)),url('assets/12-ocean-hero.jpeg') center/cover no-repeat;color:white}
.hero-inner{max-width:1500px;margin:0 auto;width:100%;padding:0 44px 92px}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700}
.hero .eyebrow{display:inline-block;padding:9px 12px;border:1px solid rgba(176,141,87,.55);background:rgba(0,0,0,.25);color:#e7d0a7}
h1{font-size:clamp(46px,6vw,86px);line-height:1.02;margin:18px 0 24px;max-width:930px}
.hero p{font-size:19px;max-width:720px;color:#f0ebe3;margin:0 0 34px}
.button{display:inline-block;border:1px solid rgba(255,255,255,.75);padding:15px 26px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.button.dark{border-color:#222;color:#222;background:white;text-align:center}
.section{max-width:1500px;margin:0 auto;padding:88px 44px}
.residences-intro{max-width:930px;margin:0 0 46px}
.residences-intro h2{font-size:clamp(48px,5vw,78px);line-height:1.02;margin:0 0 18px}
.lede{font-size:21px;color:#67625b;max-width:760px}
.vertical-residences{display:grid;grid-template-columns:1fr;gap:22px}
.res-card{display:grid;grid-template-columns:1.22fr .95fr;border:1px solid var(--line);background:#fff;overflow:hidden}
.card-image-link{display:block;min-height:520px;background:#ddd;overflow:hidden}
.card-image-link img{width:100%;height:100%;min-height:520px;object-fit:cover;transition:transform .45s ease}
.card-image-link:hover img{transform:scale(1.025)}
.res-info{padding:58px 62px;display:flex;flex-direction:column;justify-content:center}
.res-info h3{font-size:32px;line-height:1.1;margin:0 0 8px}
.location{font-size:18px;color:var(--muted);margin-bottom:22px}
.res-info p{font-size:16px;line-height:1.65;margin:0;color:#2d2e31}
.status-line,.completion-line{color:var(--gold);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.status-line{margin-top:24px}
.completion-line{margin-top:4px}
.specs-inline{margin:18px 0 22px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:0;color:#504c47;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.specs-inline span{white-space:nowrap;padding:0 14px;border-left:1px solid var(--line)}
.specs-inline span:first-child{padding-left:0;border-left:0}
.message{display:grid;grid-template-columns:.65fr 1fr;gap:64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.message h2{font-size:38px;line-height:1.15;margin:12px 0 0}
.message p{font-size:17px;color:#4c4944}
.approach{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.approach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.approach-item{background:var(--paper);padding:34px}
.approach-item h3{font-size:25px;margin:0 0 12px}
.approach-item p{color:var(--muted);margin:0}
.principals{margin-top:46px}
.principals h2{font-size:clamp(38px,4vw,58px);margin:0 0 26px}
.principals-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.where-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.panel{background:#fff;border:1px solid var(--line);padding:36px}
.panel h3{font-size:28px;margin:0 0 10px}
.panel .role{color:var(--gold);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:14px}
.contact-band{background:var(--dark);color:white}
.contact-band h2{color:white}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.footer{background:#0b0e11;color:#ddd;padding:38px 44px}
.footer-inner{max-width:1500px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:36px}
.footer img{width:250px}
.page-hero{height:62vh;min-height:520px;display:flex;align-items:flex-end;color:white;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.25),rgba(0,0,0,.05)),var(--bg) center/cover no-repeat}
.page-hero .hero-inner{padding-bottom:62px}
.project-detail{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
.detail-panel{align-self:start}
.detail-panel h2{font-size:clamp(60px,6.2vw,96px);line-height:1.02;margin:14px 0 0;max-width:780px}
.under-air{display:block}
.project-copy{align-self:start;padding-top:112px}
.project-copy p{font-size:20px;color:var(--muted);margin:0;max-width:720px}
.detail-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);margin-top:40px}
.detail-list div{background:#fff;border-left:1px solid var(--line);padding:42px 24px;text-align:center}
.detail-list div:first-child{border-left:0}
.detail-list b{display:block;font:400 40px Georgia,serif;margin-bottom:6px}
.detail-list span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gallery{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.gallery img{width:100%;height:300px;object-fit:cover;background:#ddd}
.gallery img:first-child{grid-column:span 2;height:430px}
.gallery img:nth-child(2){height:430px}
@media(max-width:1100px){
  .specs-inline{font-size:11px}
  .specs-inline span{padding:0 9px}
}
@media(max-width:1000px){
  .nav{height:auto;min-height:100px;padding:18px 24px;display:grid;gap:14px}
  .logo img{width:min(330px,88vw)}
  .links{gap:20px;overflow-x:auto;width:100%;font-size:11px}
  .section{padding:64px 24px}
  .res-card,.message,.where-grid,.principals-grid,.contact-grid,.project-detail{grid-template-columns:1fr}
  .project-copy{padding-top:0}
  .detail-list{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:1fr}
  .gallery img,.gallery img:first-child,.gallery img:nth-child(2){grid-column:auto;height:auto}
}
@media(max-width:650px){
  .res-info{padding:34px 28px}
  .card-image-link,.card-image-link img{min-height:320px}
  .specs-inline{display:grid;grid-template-columns:repeat(2,1fr);row-gap:12px}
  .specs-inline span{border-left:0;padding:0}
  .detail-list{grid-template-columns:1fr}
}


/* Final patch: keep existing layout, fix only the issues identified */

/* Make section intro text use the full available page width */
.section,
.approach .section {
  max-width: 100% !important;
  width: 100% !important;
}

.residences-intro,
.residences-intro h2,
.residences-intro .lede,
.lede {
  max-width: 100% !important;
  width: 100% !important;
}

/* Keep main-card specs on one line where possible */
.specs-inline {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
}

.specs-inline span {
  white-space: nowrap !important;
}

/* Residence detail page: top-align copy with SF / Under Air headline */
.project-detail {
  align-items: start !important;
}

.detail-panel,
.project-copy {
  align-self: start !important;
}

.project-copy {
  padding-top: 0 !important;
}

.detail-panel h2 {
  line-height: .98 !important;
}

.under-air {
  display: block !important;
}

/* Residence detail specs: one clean 5-column row */
.detail-list {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  border: 1px solid var(--line);
}

.detail-list > div {
  min-height: 168px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  border-left: 1px solid var(--line);
}

.detail-list > div:first-child {
  border-left: 0 !important;
}

.detail-list b {
  line-height: 1.1 !important;
}

.detail-list span {
  margin-top: 8px;
  line-height: 1.25 !important;
}

/* Make footer logo visible on dark background */
.footer img {
  filter: brightness(0) invert(1);
  opacity: .96;
}

@media(max-width:1000px){
  .detail-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .detail-list > div:nth-child(odd) {
    border-left: 0 !important;
  }
}

@media(max-width:650px){
  .detail-list {
    grid-template-columns: 1fr !important;
  }
  .detail-list > div {
    border-left: 0 !important;
    border-top: 1px solid var(--line);
  }
  .detail-list > div:first-child {
    border-top: 0 !important;
  }
  .specs-inline {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 12px;
  }
}


/* Publishing final: distinguish project status from completion timing */
.status-line {
  color: var(--gold) !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  margin-top: 24px !important;
}

.completion-line {
  color: #6b665f !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  margin-top: 6px !important;
}


/* Mobile footer fix */
.footer {
  overflow-x: hidden;
}

.footer-inner {
  width: 100%;
}

.footer-inner > div {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media(max-width: 760px) {
  .footer {
    padding: 34px 24px 42px !important;
  }

  .footer-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 22px !important;
    width: 100% !important;
  }

  .footer img {
    width: min(300px, 82vw) !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .footer-inner > div {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    text-align: left !important;
    white-space: normal !important;
  }
}


/* Publish-ready team section: three cards across desktop */
.principals-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

.principals-grid .panel {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.principals-grid .panel p {
  margin-bottom: 0;
}

@media(max-width: 1000px) {
  .principals-grid {
    grid-template-columns: 1fr !important;
  }
}


/* v28 contact and homepage CTA refinements */
.closing-cta {
  text-align: left;
  border-top: 1px solid var(--line);
}

.closing-cta .button {
  margin-top: 18px;
}

.contact-page-section {
  min-height: calc(100vh - 92px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.contact-three .panel {
  height: 100%;
}

.contact-three h3 {
  margin-bottom: 18px;
}

.contact-three p {
  color: #4c4944;
}

@media(max-width: 1000px) {
  .contact-three {
    grid-template-columns: 1fr;
  }

  .contact-page-section {
    min-height: auto;
  }
}


/* v30 contact page refinement */
.contact-title {
  margin-bottom: 48px !important;
}

.contact-title h1 {
  margin-bottom: 18px !important;
}

.contact-title .lede {
  max-width: 100% !important;
  font-size: clamp(22px, 1.8vw, 30px) !important;
  line-height: 1.4 !important;
}

.contact-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.contact-two .panel {
  height: 100%;
}

.contact-two h3 {
  margin-bottom: 18px;
}

.contact-two p {
  color: #4c4944;
}

@media(max-width: 900px) {
  .contact-two {
    grid-template-columns: 1fr;
  }
}


/* v33: cleaner status/completion hierarchy */
.status-line {
  color: var(--gold) !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  margin-top: 24px !important;
}

.completion-line {
  color: #6f6a63 !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  font-weight: 500 !important;
  margin-top: 7px !important;
}


/* v34 contact form and obfuscated email */
.inquiry-form-wrap {
  margin-top: 64px;
  padding-top: 54px;
  border-top: 1px solid var(--line);
}

.inquiry-intro {
  margin-bottom: 30px !important;
}

.inquiry-intro h2 {
  font-size: clamp(42px, 4.4vw, 68px) !important;
}

.inquiry-form {
  background: #fff;
  border: 1px solid var(--line);
  padding: clamp(28px, 3.2vw, 48px);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 26px;
  margin-bottom: 28px;
}

.inquiry-form label {
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: #4c4944;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}

.inquiry-form label.full {
  grid-column: 1 / -1;
}

.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: 16px Inter, Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  padding: 14px 15px;
  outline: none;
}

.inquiry-form textarea {
  resize: vertical;
}

.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  border-color: var(--gold);
}

.form-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}

@media(max-width: 760px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}


/* v36 legal pages and disclaimers */
.legal-footer {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #24303c;
  color: #b8b1a7;
  font-size: 12px;
  line-height: 1.6;
}

.legal-footer a {
  color: #d8c7a5;
  text-decoration: none;
}

.legal-page {
  max-width: 1100px !important;
}

.legal-content {
  background: #fff;
  border: 1px solid var(--line);
  padding: clamp(28px, 4vw, 56px);
  color: #3d3934;
}

.legal-content h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  margin: 34px 0 10px;
}

.legal-content p {
  font-size: 16px;
  line-height: 1.7;
  color: #4c4944;
}

.property-note {
  max-width: 1500px;
  margin: 0 auto 70px;
  padding: 0 44px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.form-consent {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

@media(max-width:760px){
  .property-note {
    padding: 0 24px;
    margin-bottom: 48px;
  }
}


/* v38: real footer separator element for consistent live rendering */
.footer-separator {
  width: 100%;
  height: 1px;
  background: #2f3a45;
  margin: 24px 0 18px;
  display: block;
  flex-basis: 100%;
}

.legal-footer {
  border-top: 0 !important;
  padding-top: 0 !important;
}


/* v39: Approach table mobile layout fix
   On phones, show the six approach items as 2 columns x 3 rows instead of overflowing as 3 columns x 2 rows. */
@media (max-width: 760px) {
  .approach-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .approach-item {
    min-width: 0 !important;
    padding: 28px 22px !important;
  }

  .approach-item h3 {
    font-size: 24px !important;
    line-height: 1.18 !important;
    word-break: normal !important;
  }

  .approach-item p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 390px) {
  .approach-item {
    padding: 24px 18px !important;
  }

  .approach-item h3 {
    font-size: 22px !important;
  }
}


/* v40: curated 696 Hastings gallery sections */
.gallery-section {
  grid-column: 1 / -1;
  margin-top: 46px;
}

.gallery-label {
  margin-bottom: 18px;
}

.gallery-extra {
  margin-top: 0 !important;
}

.gallery-extra img {
  background: #ddd;
}

@media(max-width: 1000px) {
  .gallery-section {
    margin-top: 34px;
  }
}


/* v42: 696 gallery label spacing and exterior section fix */
.gallery-section {
  grid-column: 1 / -1;
}

/* Prevent the first section label from creating a large blank area above the existing gallery */
.exterior-gallery-section {
  margin-top: 0 !important;
}

.exterior-gallery-section > .gallery-label {
  margin-bottom: 18px !important;
}

/* Existing gallery inside a labeled section should not add extra top spacing */
.gallery-section > .gallery {
  margin-top: 0 !important;
}

/* Keep the section labels tight and consistent */
.gallery-label {
  display: block;
  margin-bottom: 18px !important;
}


/* v45: 680 curated gallery */
.gallery-section {
  grid-column: 1 / -1;
}
.exterior-gallery-section {
  margin-top: 0 !important;
}
.gallery-section > .gallery {
  margin-top: 0 !important;
}
.gallery-label {
  display: block;
  margin-bottom: 18px !important;
}





/* v48: match 680 gallery spacing exactly to existing 696 spacing */
.gallery-section{
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: inherit !important;
}


/* v49: fix 680 gallery vertical spacing */
.gallery-section{
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

.gallery-section .gallery{
  margin-bottom: 0 !important;
}

.gallery-section img{
  display:block;
}

.gallery-label{
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}