.project-detail { background: #000; color: var(--white); }
.detail-intro dl.ocean-facts { grid-template-columns: repeat(4,minmax(0,1fr)); }
.ocean-intro-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px,4vw,64px); align-items: start; }
.ocean-intro-grid > * { min-width: 0; }
.ocean-plans h3 { font-size: 20px; font-weight: 500; margin: 0 0 18px; }
.ocean-plans__tabs { display: flex; gap: 10px; margin-bottom: 16px; }
.ocean-plans__tabs button { min-height: 44px; padding: 10px 22px; border: 1px solid #89c5d666; border-radius: 40px; background: #112832; color: #fff; cursor: pointer; font: inherit; }
.ocean-plans__tabs button[aria-pressed="true"] { background: var(--accent,#a5e1ed); color: #102831; }
.ocean-plans__image { display: block; border-radius: 12px; overflow: hidden; }
.ocean-plans__image img { display: block; width: 100%; height: auto; }
.ocean-plans > p { color: #9ba6ad; font-size: 12px; margin-top: 12px; line-height: 1.5; }
.ocean-masterplans, .ocean-villa-plans__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.ocean-masterplans figure, .ocean-villa-plans figure { margin: 0; min-width: 0; }
.ocean-masterplans a, .ocean-villa-plans a { display: block; }
.ocean-masterplans img { display: block; width: 100%; height: auto; aspect-ratio: 0.6; object-fit: contain; }
.ocean-masterplans figcaption, .ocean-villa-plans figcaption { margin-top: 12px; color: #bfc5c9; font-size: 14px; }
.ocean-villa-plans { max-width: 1400px; margin: auto; padding: 0 6vw 40px; }
.ocean-villa-plans h2 { font-size: clamp(24px,3vw,40px); margin-bottom: 24px; }
.ocean-villa-plans img { display: block; width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 600px) { .ocean-villa-plans__grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .ocean-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .detail-intro dl.ocean-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

.detail-header { position: absolute; top: 22px; left: 4vw; right: 4vw; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 12px 22px; border: 1px solid #ffffff26; border-radius: 60px; background: #090c10cc; backdrop-filter: blur(18px); }
.detail-header > a:last-child { font-size: 12px; }
.detail-skip { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 16px; background: #fff; color: #000; transform: translateY(-200%); }
.detail-skip:focus { transform: none; }
.project-detail :is(a,button,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.detail-hero { position: relative; min-height: 84svh; display: flex; align-items: end; isolation: isolate; padding: 150px 6vw 64px; }
.detail-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.detail-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,#000e,transparent 95%); }
.detail-hero > div { max-width: 1100px; }
.detail-eyebrow { font-size: 10px; letter-spacing: .14em; line-height: 1.6; color: #b1b9bd; }
.detail-hero h1 { font-size: clamp(38px,8vw,130px); line-height: 1.06; margin: 22px 0; text-wrap: balance; }
.detail-hero h1 + p { max-width: 60ch; color: #e0e2e4; font-size: clamp(15px,1.5vw,21px); line-height: 1.6; }
.detail-image-note { display: block; margin-top: 24px; font-size: 10px; color: #9ba6ad; }
.detail-intro, .construction-history, .detail-gallery, .detail-contact, .detail-footer { max-width: 1400px; margin: auto; padding: 80px 6vw; }
.detail-intro dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: 1px solid #ffffff29; margin-bottom: 64px; }
.detail-intro dl > div { padding: 28px 20px 28px 0; }
.detail-intro dt { font-size: clamp(20px,2.8vw,40px); letter-spacing: -.03em; }
.detail-intro dd { margin-top: 10px; color: #9ba6ad; font-size: 12px; }
.detail-intro h2, .construction-heading h2, .detail-contact h2 { font-size: clamp(28px,4vw,64px); line-height: 1.2; margin-bottom: 24px; text-wrap: balance; }
.detail-intro__copy { max-width: 800px; }
#interiors { padding-bottom:32px; scroll-margin-top:24px; }
#interiors > p { max-width:65ch; font-size:17px; line-height:1.7; color:#bfc5c9; }
#interiors > .detail-disclaimer { margin-top:16px; font-size:13px; color:#8e979e; }
.detail-intro__copy > p, .construction-heading > p:last-child { font-size: 17px; line-height: 1.75; color: #bfc5c9; max-width: 65ch; }
.detail-intro__copy .detail-disclaimer, .archive-note { font-size: 12px; line-height: 1.7; color: #8e979e; margin-top: 20px; }
.detail-actions { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 32px; font-size: 13px; }
.detail-actions a { padding-block: 12px; border-bottom: 1px solid #ffffff40; }
.construction-history { padding-top: 24px; scroll-margin-top: 24px; }
.construction-heading .detail-eyebrow { margin-bottom: 18px; }
.construction-archive { margin-top: 32px; border-block: 1px solid #ffffff26; }
.construction-archive summary { display: flex; align-items: center; gap: 32px; padding: 24px 0; cursor: pointer; list-style: none; }
.construction-archive summary::-webkit-details-marker { display: none; }
.construction-archive summary > img { width: 180px; height: 128px; object-fit: cover; border-radius: 8px; }
.construction-archive summary > span { display: grid; gap: 12px; }
.construction-archive summary small { font-size: 11px; color: #97a4ad; }
.construction-archive summary strong { font-size: clamp(17px,2.5vw,28px); font-weight: 500; }
.archive-open-label, .archive-close-label { font-size: 12px; color: var(--accent); }
.archive-close-label, .construction-archive[open] .archive-open-label { display: none; }
.construction-archive[open] .archive-close-label { display: block; }
.construction-archive__content { padding-bottom: 28px; }
.archive-note { margin: 0 0 28px; max-width: 75ch; }
.construction-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px 20px; }
.construction-photo { min-width: 0; }
.construction-photo img { width: 100%; aspect-ratio: 4/3; height: auto; object-fit: cover; background: #101418; border-radius: 8px; }
.construction-photo > span { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: #bfc5c9; font-size: 12px; }
.construction-photo b { color: #748089; font-variant-numeric: tabular-nums; font-weight: 400; }
.construction-photo i { margin-left: auto; font-style: normal; }
.construction-viewer { width: calc(100% - 32px); max-width: 1440px; height: calc(100svh - 32px); max-height: none; margin: auto; padding: 20px; color: #f6f6f3; background: #0a0d10; border: 1px solid #ffffff26; border-radius: 14px; }
.construction-viewer[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 16px; }
.construction-viewer::backdrop { background: #000e; }
html:has(.construction-viewer[open]) { overflow: hidden; }
.viewer-toolbar, .viewer-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.viewer-toolbar button, .viewer-controls button, .viewer-controls a { min-height: 44px; padding: 10px 14px; border: 1px solid #ffffff26; background: transparent; border-radius: 8px; cursor: pointer; }
.viewer-controls button:disabled { opacity: .3; cursor: default; }
.viewer-image { position: relative; min-height: 0; display: grid; place-items: center; }
.viewer-image img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.viewer-image p { position: absolute; padding: 14px; background: #101418; }
.viewer-image p:empty { display: none; }
.detail-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px 24px; padding-top: 32px; }
.detail-gallery figure:first-child { grid-column: 1/-1; }
.detail-gallery img { width: 100%; height: auto; border-radius: 12px; }
.detail-gallery figure:not(:first-child) img { aspect-ratio: 1280 / 1100; object-fit: cover; }
.detail-gallery figcaption { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding-top: 12px; color: #c8cdd0; }
.detail-gallery figcaption span { color: #748089; }
.detail-building { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(28px,5vw,72px); max-width: 1400px; margin: auto; padding: 48px 6vw 72px; }
.detail-building .detail-eyebrow { margin-bottom: 18px; }
.detail-building h2 { margin-bottom: 20px; font-size: clamp(26px,3vw,44px); line-height: 1.15; text-wrap: balance; }
.detail-building h2 > span { color: #9ba6ad; }
.detail-building header > p:last-child { max-width: 52ch; color: #a4afb6; font-size: 14px; line-height: 1.7; }
.detail-building__principles { min-width: 0; border-top: 1px solid #ffffff26; }
.detail-building details { border-bottom: 1px solid #ffffff26; }
.detail-building summary { display: grid; grid-template-columns: 24px minmax(0,1fr) 18px; align-items: center; gap: 14px; min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none; font-size: clamp(16px,1.5vw,21px); line-height: 1.4; }
.detail-building summary::-webkit-details-marker { display: none; }
.detail-building__number { color: #8e979e; font-size: 11px; font-variant-numeric: tabular-nums; }
.detail-building__toggle { position: relative; width: 16px; height: 16px; color: var(--accent); }
.detail-building__toggle::before, .detail-building__toggle::after { position: absolute; content: ''; top: 7px; left: 1px; width: 14px; height: 1px; background: currentColor; }
.detail-building__toggle::after { transform: rotate(90deg); }
.detail-building details[open] .detail-building__toggle::after { display: none; }
.detail-building details > p { max-width: 65ch; margin: 0; padding: 0 32px 22px 38px; color: #bfc5c9; font-size: 15px; line-height: 1.7; }
@media (hover: hover) { .detail-building summary:hover { color: var(--accent); } }
@media (max-width: 800px) { .detail-building { grid-template-columns: minmax(0,1fr); gap: 24px; padding-block: 36px 48px; } }
.detail-contact { border-top: 1px solid #ffffff26; }
.detail-contact > p { margin-bottom: 24px; color: #a4afb6; line-height: 1.7; }
.detail-contact > a:last-child { display: block; width: fit-content; margin-top: 28px; font-size: 12px; }
.detail-footer { padding-top: 0; padding-bottom: 36px; font-size: 11px; color: #748089; line-height: 1.8; }
@media (hover:hover) { .construction-archive summary:hover strong, .detail-actions a:hover { color: var(--accent); } .construction-photo:hover img { filter: brightness(1.1); } }
@media (max-width: 600px) {
  .detail-header { top: 12px; padding: 10px 14px; }
  .detail-header .brand span { display: none; }
  .detail-header > a:last-child { font-size: 11px; }
  .detail-hero { min-height: 76svh; padding-bottom: 40px; }
  .detail-intro, .construction-history, .detail-gallery, .detail-contact { padding-block: 44px; }
  .detail-intro dl { gap: 14px; margin-bottom: 40px; }
  .detail-intro dl > div { padding: 20px 0; }
  .detail-intro dt { font-size: 19px; }
  .detail-intro dd { font-size: 10px; }
  .construction-archive summary { gap: 16px; }
  .construction-archive summary > img { width: 100px; height: 112px; }
  .construction-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 14px; }
  .detail-gallery { grid-template-columns: 1fr; }
  .construction-viewer { width: 100%; height: 100svh; padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); border: 0; border-radius: 0; }
  .viewer-toolbar, .viewer-controls { font-size: 11px; gap: 8px; }
  .viewer-controls button, .viewer-controls a { padding: 10px; }
}

/* Description and plans form a single aligned composition on every villa page. */
.ocean-intro-grid { align-items: stretch; }
.ocean-intro-grid > .detail-intro__copy { display: flex; flex-direction: column; }
.ocean-intro-grid > .detail-intro__copy > :not(.project-intro-photo) { flex: 0 0 auto; }
.project-intro-photo { position: relative; flex: 1 1 0; min-height: 120px; max-height: 220px; margin-top: 24px; overflow: hidden; border-radius: 12px; }
.detail-actions:empty { display: none; }
.project-intro-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width:1001px) {
  .ocean-intro-grid:has(.ocean-masterplans) { align-items: end; }
  .ocean-intro-grid:has(.ocean-masterplans) .project-intro-photo { flex: 0 0 auto; height: 220px; }
}
@media (max-width:1000px) {
  .ocean-intro-grid { grid-template-columns: 1fr; }
  .project-intro-photo { flex: 0 0 190px; height: 190px; }
}