.construction-project-main { --noir: var(--wp--preset--color--noir); --beige: var(--wp--preset--color--beige); --fog: var(--wp--preset--color--fog); --blue: var(--wp--preset--color--blue); --mid: var(--wp--preset--color--mid); --rule: var(--wp--preset--color--rule); --w: var(--wp--preset--color--base); --f-serif: var(--wp--preset--font-family--spectral); --f-sans: var(--wp--preset--font-family--manrope); --max: 1200px; --g: clamp(1.5rem, 5vw, 4rem);  --cp-card-w: min(78vw, 620px); --cp-card-gap: clamp(24px, 4vw, 64px); --cp-gutter: calc((100% - var(--cp-card-w)) / 2); }  .construction-project-main :where(*,*::before,*::after) { box-sizing: border-box; } .construction-project-main img { display: block; max-width: 100%; } .construction-project-main a { color: inherit; text-decoration: none; } .construction-project-main button { cursor: pointer; border: none; background: none; padding: 0; font: inherit; color: inherit; }  .construction-project-main .eyebrow { display: block; font-family: var(--f-sans); font-size: 10px; font-weight: 700; letter-spacing: .18em; line-height: 1; text-transform: uppercase; color: var(--blue); margin: 0 0 16px; } .construction-project-main .cp-eyebrow-tan { color: rgba(255,255,255,.62); } .construction-project-main .cp-heading { font-family: var(--f-serif); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 20px; color: var(--noir); } .construction-project-main .cp-heading-on-noir { color: var(--w); }  .construction-project-main .cp-section { padding: clamp(4rem, 8vw, 6.5rem) max(40px, calc((100% - var(--max)) / 2)); } .construction-project-main .cp-section-fog { background: var(--fog); } .construction-project-main .cp-section-noir { background: var(--noir); } .construction-project-main #contact { scroll-margin-top: 100px; }   .construction-project-main .cp-hatch { display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--fog); background-image: repeating-linear-gradient(45deg, transparent, transparent 9px, rgba(10,9,8,.05) 9px, rgba(10,9,8,.05) 10px); } .construction-project-main .cp-hatch-label { font-family: var(--f-sans); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); padding: 24px; }  .construction-project-main .cp-hero { position: relative; height: 56vh; min-height: 420px; max-height: 620px; overflow: hidden; } .construction-project-main .cp-hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center; } .construction-project-main .cp-hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,8,.82), rgba(10,9,8,.32)); } .construction-project-main .cp-hero .cp-hatch.cp-hero-photo .cp-hatch-label { color: var(--noir); } .construction-project-main .cp-hero .cp-hatch.cp-hero-photo + .cp-hero-scrim { background: linear-gradient(to top, rgba(255,255,255,.92), rgba(255,255,255,.35)); } .construction-project-main .cp-hero-text { position: absolute; left: max(40px, calc((100% - var(--max)) / 2)); right: max(40px, calc((100% - var(--max)) / 2)); top: 50%; transform: translateY(-50%); z-index: 2; text-align: left; } .construction-project-main .cp-hero-text .eyebrow { color: rgba(255,255,255,.72); margin-bottom: 16px; } .construction-project-main .cp-hero-title { margin: 0 0 16px; font-family: var(--f-serif); font-size: clamp(2.75rem, 6vw, 4rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.025em; color: var(--w); } .construction-project-main .cp-hero-meta { margin: 0; font-family: var(--f-sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.78); }  .construction-project-main .cp-vision { margin: 0; max-width: 820px; font-family: var(--f-serif); font-size: clamp(1.15rem, 2.2vw, 1.7rem); font-weight: 300; line-height: 1.5; letter-spacing: -0.01em; color: var(--noir); } .construction-project-main .cp-vision-emphasis { font-style: italic; }  .construction-project-main .cp-plans-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(2rem, 5vw, 5.5rem); align-items: start; } @media (max-width: 860px) { .construction-project-main .cp-plans-grid { grid-template-columns: 1fr; } } .construction-project-main .cp-plans-selector { display: flex; flex-direction: column; gap: 18px; } .construction-project-main .cp-plan-active { height: 30vw; max-height: 480px; min-height: 260px; border: 1px solid var(--rule); background: var(--w) center / contain no-repeat; } .construction-project-main .cp-plan-label { margin: 0; font-family: var(--f-sans); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mid); } .construction-project-main .cp-plan-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .construction-project-main .cp-plan-thumb { position: relative; height: 92px; background-size: cover; background-position: center; border: 1px solid var(--rule); opacity: .62; transition: opacity .15s ease, border-color .15s ease; } .construction-project-main .cp-plan-thumb.is-active { opacity: 1; border-color: var(--noir); } .construction-project-main .cp-specs-list { margin-top: 32px; } .construction-project-main .cp-spec-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px;  padding: 12px 0; border-top: 1px solid var(--rule); } .construction-project-main .cp-spec-label { margin: 0; font-family: var(--f-sans); font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--mid); } .construction-project-main .cp-spec-value { margin: 0; font-family: var(--f-serif); font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--noir); }   .construction-project-main .cp-progress { padding-bottom: 16px; } .construction-project-main .cp-progress-inner { max-width: 640px; margin: 0 auto; text-align: center; } .construction-project-main .cp-progress-copy { margin: 0; font-family: var(--f-sans); font-size: 15px; line-height: 1.88; color: rgba(255,255,255,.62); }  .construction-project-main .cp-timeline-section { position: relative; background: var(--noir);  padding: 16px 0 64px; } .construction-project-main .cp-timeline-controls { position: absolute; top: 50%; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 max(12px, calc((100% - var(--max)) / 2 - 44px)); pointer-events: none; z-index: 4; } .construction-project-main .cp-timeline-arrow { pointer-events: auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(10,9,8,.4); color: var(--w); font-size: 22px; font-weight: 300; transition: opacity .15s ease, background .15s ease; } .construction-project-main .cp-timeline-arrow:hover { background: rgba(10,9,8,.7); } .construction-project-main .cp-timeline-row { display: flex; gap: var(--cp-card-gap); overflow-x: auto; scroll-snap-type: x mandatory;  scroll-padding-inline: var(--cp-gutter); padding-inline: var(--cp-gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .construction-project-main .cp-timeline-row::-webkit-scrollbar { display: none; } .construction-project-main .cp-milestone-card { flex: 0 0 auto; width: var(--cp-card-w); scroll-snap-align: center; transform-origin: center center;  opacity: 1; transform: scale(1); transition: transform .12s linear, opacity .12s linear; will-change: transform, opacity; } .construction-project-main .cp-milestone-media { position: relative; margin-bottom: 26px; } .construction-project-main .cp-milestone-frames { position: relative; height: min(52vh, 520px); } .construction-project-main .cp-milestone-frame { position: absolute; inset: 0; display: none; padding: 0; } .construction-project-main .cp-milestone-frame.is-active { display: block; cursor: zoom-in; } .construction-project-main .cp-milestone-frame img { width: 100%; height: 100%; object-fit: cover; } .construction-project-main .cp-milestone-frame.is-active { animation: cp-frame-in .4s ease-out; } @keyframes cp-frame-in { from { opacity: 0; } to { opacity: 1; } } .construction-project-main .cp-hatch.cp-milestone-frame { position: relative; display: flex; height: min(52vh, 520px); } .construction-project-main .cp-hatch.cp-milestone-frame .cp-hatch-label { color: var(--mid); } .construction-project-main .cp-frame-dots { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 2; display: flex; gap: 5px; justify-content: center; }  .construction-project-main .cp-frame-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--w); font-family: var(--f-sans); font-size: 24px; font-weight: 300; line-height: 1; opacity: 0; transition: opacity .15s ease; } .construction-project-main .cp-milestone-media:hover .cp-frame-arrow, .construction-project-main .cp-frame-arrow:focus-visible { opacity: .82; } .construction-project-main .cp-frame-arrow:hover { opacity: 1; } .construction-project-main .cp-frame-arrow-prev { left: 6px; } .construction-project-main .cp-frame-arrow-next { right: 6px; } .construction-project-main .cp-frame-dot { width: 5px; height: 5px; background: rgba(255,255,255,.38); transition: width .3s ease, background .3s ease; } .construction-project-main .cp-frame-dot.is-active { width: 18px; background: rgba(255,255,255,.92); } .construction-project-main .cp-milestone-text { text-align: center; } .construction-project-main .cp-milestone-date { margin: 0 0 10px; font-family: var(--f-serif); font-style: italic; font-size: 24px; font-weight: 300; letter-spacing: -0.01em; color: var(--w); } .construction-project-main .cp-milestone-title { margin: 0 0 16px; font-family: var(--f-serif); font-size: 22px; font-weight: 300; letter-spacing: -0.01em; color: var(--w); } .construction-project-main .cp-milestone-caption { margin: 0; font-family: var(--f-sans); font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.58); } .construction-project-main .cp-milestone-card-final { display: flex; align-items: center; } .construction-project-main .cp-milestone-text-final .cp-milestone-title { font-size: 34px; margin-bottom: 14px; } .construction-project-main .cp-milestone-text-final .cp-milestone-caption { font-size: 15px; margin-bottom: 28px; } .construction-project-main .cp-final-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border: 1px solid rgba(255,255,255,.4); font-family: var(--f-sans); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--w); transition: opacity .15s ease; } .construction-project-main .cp-final-cta:hover { opacity: .72; }  .construction-project-main .cp-lb-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(10,9,8,.97); display: none; flex-direction: column; } .construction-project-main .cp-lb-overlay.is-open { display: flex; } .construction-project-main .cp-lb-header { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 26px max(28px, calc((100% - var(--max)) / 2)) 18px; } .construction-project-main .cp-lb-header-text { display: flex; align-items: baseline; gap: 18px; } .construction-project-main .cp-lb-date { margin: 0; font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: 24px; color: var(--w); } .construction-project-main .cp-lb-title { margin: 0; font-family: var(--f-sans); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.62); } .construction-project-main .cp-lb-close { font-family: var(--f-sans); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72); } .construction-project-main .cp-lb-close:hover { opacity: .72; } .construction-project-main .cp-lb-body { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 max(28px, calc((100% - var(--max)) / 2)); } .construction-project-main .cp-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; } .construction-project-main .cp-lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-family: var(--f-serif); font-size: 40px; font-weight: 300; color: rgba(255,255,255,.82); } .construction-project-main .cp-lb-arrow:hover { opacity: .72; } .construction-project-main .cp-lb-prev { left: max(8px, calc((100% - var(--max)) / 2 - 46px)); } .construction-project-main .cp-lb-next { right: max(8px, calc((100% - var(--max)) / 2 - 46px)); } .construction-project-main .cp-lb-counter { margin: 0; text-align: center; padding: 12px 0 28px; font-family: var(--f-sans); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); }  .construction-project-main .cp-hood-photo { width: 100%; height: 46vw; max-height: 460px; min-height: 260px; background-size: cover; background-position: center; } .construction-project-main .cp-hood-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 4vw, 4.5rem); margin-top: 40px; align-items: start; } @media (max-width: 780px) { .construction-project-main .cp-hood-grid { grid-template-columns: 1fr; } } .construction-project-main .cp-hood-p { margin: 0 0 22px; font-family: var(--f-sans); font-size: 15px; line-height: 1.88; color: #555; } .construction-project-main .cp-hood-p:last-child { margin-bottom: 0; }  .construction-project-main .cp-contact { text-align: center; padding-top: 128px; padding-bottom: 128px; } .construction-project-main .cp-contact-inner { max-width: 560px; margin: 0 auto; }  .construction-project-main .cp-contact-rule { width: 48px; height: 1px; background: rgba(255,255,255,.4); margin: 0 auto 32px; } .construction-project-main .cp-contact-heading { margin-top: 0; margin-bottom: 18px; } .construction-project-main .cp-contact-body { margin: 0 0 40px; font-family: var(--f-sans); font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.66); } .construction-project-main .cp-contact form { text-align: left; } .construction-project-main .cp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 16px; } @media (max-width: 560px) { .construction-project-main .cp-form-row { grid-template-columns: 1fr; } } .construction-project-main .cp-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .construction-project-main .cp-form-row .cp-form-group { margin-bottom: 0; } .construction-project-main .cp-form-label { font-family: var(--f-sans); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); } .construction-project-main .cp-form-label-optional { font-weight: 400; text-transform: none; letter-spacing: 0; } .construction-project-main .cp-form-input { display: block; width: 100%; box-sizing: border-box; font-family: var(--f-sans); font-size: 15px; padding: 12px 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.24); color: var(--w); } .construction-project-main .cp-form-input::placeholder { color: rgba(255,255,255,.34); } .construction-project-main .cp-form-input:focus { outline: none; border-color: rgba(255,255,255,.6); } .construction-project-main .cp-form-textarea { resize: none; min-height: 90px; line-height: 1.6; font-family: var(--f-sans); } .construction-project-main .cp-form-hint { margin: 0 0 20px; font-family: var(--f-sans); font-size: 11px; color: rgba(255,255,255,.42); } .construction-project-main .cp-form-submit { display: flex; width: 100%; align-items: center; justify-content: center; padding: 18px 28px; background: var(--w); color: var(--noir); font-family: var(--f-sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: opacity .15s ease; } .construction-project-main .cp-form-submit:hover { opacity: .82; } .construction-project-main .cp-form-submit:disabled { opacity: .5; cursor: not-allowed; } .construction-project-main .cp-form-success { display: none; text-align: left; font-family: var(--f-sans); font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.82); }