/* Open Door components (od-). Used by the Open Door option and by the Hybrid. */

.od-header { background: var(--nest-petrol); color: var(--nest-sand); }

/* Hero: the door opens. Photo grows from a small arch to fill the doorway, then a Clay arch draws over it. */
.od-hero { background: var(--nest-petrol); color: var(--nest-sand); padding: clamp(16px, 2.5vw, 40px) 0 clamp(40px, 5vw, 72px); overflow: hidden; }
.od-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.od-hero .eyebrow { color: var(--nest-sea-glass); margin-bottom: 18px; }
.od-hero h1 { font-size: clamp(2.5rem, 4.4vw, 4.25rem); letter-spacing: -.015em; }
.od-hero .intro { font-size: 1.125rem; line-height: 1.55; max-width: 30em; margin-top: 18px; }
.od-hero .crumbs { color: var(--nest-sea-glass); }
.od-copy > * { animation: nest-fade-up .9s var(--ease) both; }
.od-copy > *:nth-child(2) { animation-delay: .15s; }
.od-copy > *:nth-child(3) { animation-delay: .3s; }
.od-copy > *:nth-child(4) { animation-delay: .45s; }
.od-copy > *:nth-child(5) { animation-delay: .6s; }

.od-search { margin-top: 28px; background: var(--nest-cream); color: var(--nest-petrol); border-radius: var(--nest-radius-pill); padding: 10px 10px 10px 28px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: center; max-width: 600px; }
.od-search label + label { border-left: 1px solid var(--nest-line); padding-left: 16px; }
.od-search .nest-label { color: var(--nest-muted); display: block; margin-bottom: 2px; }
.od-hero .search-status { color: var(--nest-sea-glass); margin-top: 10px; }

/* Door geometry. The frame's clip-path radii always resolve to a half-ellipse top: rx = 50% of width, ry = 36% of width.
   The Clay arch SVG uses 1 unit = 1% of the door width, so it sits exactly 3% outside that curve. */
.door { position: relative; padding-top: 7.2%; width: 100%; max-width: 520px; margin-left: auto; }
.door-frame { position: relative; aspect-ratio: 4 / 5; width: 100%;
  clip-path: inset(0 0 0 0 round 1000px 1000px 24px 24px / 720px 720px 24px 24px); background: var(--nest-sea-glass); }
.door-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* The roof: the flatter brand arch, set slightly left of the door, so its left end sits outside the photo
   and its right end crosses over the image (the original Open Door placement) */
.door-arch { position: absolute; left: -7.6%; top: 0; width: 103%; max-width: none; height: auto; overflow: visible; pointer-events: none; z-index: 1; }
.door-tag { position: absolute; left: -24px; bottom: 32px; background: var(--nest-cream); color: var(--nest-petrol); border-radius: var(--nest-radius-card); padding: 14px 18px; display: flex; gap: 12px; align-items: center; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .5); max-width: 280px; font-size: .875rem; line-height: 1.35; margin: 0; }
.door-tag svg { width: 40px; flex: 0 0 auto; }
.door-tag strong { display: block; font-size: .9375rem; }
@keyframes od-open {
  from { clip-path: inset(64% 32% 0 32% round 1000px 1000px 24px 24px / 720px 720px 24px 24px); }
  to { clip-path: inset(0 0 0 0 round 1000px 1000px 24px 24px / 720px 720px 24px 24px); }
}
@keyframes od-zoom { from { transform: scale(1.18); } to { transform: none; } }
.door-frame { animation: od-open 1.9s cubic-bezier(.65, 0, .25, 1) .2s both; }
.door-frame img { animation: od-zoom 2.4s var(--ease) .2s both; }
.door-arch path { stroke-dasharray: 1; animation: arch-draw 1.4s var(--ease) 1.5s both; }
.door-tag { animation: nest-fade-up .8s var(--ease) 2.1s both; }

/* Home hero fills the first screen exactly: full window height below the header, content centred,
   and the door sized from the window height so it is as large as the screen allows */
.od-hero:not(.od-hero--page) { min-height: calc(100vh - 80px); display: flex; align-items: center; padding-block: 24px 40px; }
.od-hero:not(.od-hero--page) > .wrap { width: 100%; }
.od-hero:not(.od-hero--page) h1 { font-size: clamp(2.75rem, min(5.2vw, 9vh), 5.25rem); }
.od-hero:not(.od-hero--page) .door { max-width: min(600px, calc((100vh - 190px) * .8)); }
@media (max-width: 960px) { .od-hero:not(.od-hero--page) { min-height: 0; display: block; } }

/* Inner page hero: same door, shorter */
.od-hero--page { padding-bottom: clamp(56px, 6vw, 88px); }
.od-hero--page h1 { font-size: clamp(2.5rem, 5.2vw, 4.5rem); }
.od-hero--page .door-frame { aspect-ratio: 1 / 1; }
.od-hero--page .door { max-width: 440px; }

/* Wide arch divider that draws below the hero */
.od-divider { padding-top: clamp(48px, 7vw, 96px); }
.od-divider svg { width: 100%; height: auto; overflow: visible; }

/* Included cards with an arch over each icon */
.od-inc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.od-inc li { background: var(--nest-cream); border-radius: var(--nest-radius-card); padding: 28px 20px 24px; text-align: center; font-weight: 600; transition: transform .3s var(--ease); }
.od-inc li:hover { transform: translateY(-4px); }
.od-inc-icon { display: block; position: relative; width: 96px; height: 72px; margin: 0 auto 16px; }
.od-inc-icon .draw { position: absolute; inset: 0 0 auto 0; width: 96px; }
.od-inc-icon .icon { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 34px; height: 34px; }

/* Room cards */
.od-rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.od-room { background: var(--nest-cream); border-radius: var(--nest-radius-card); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.od-room:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(23, 63, 71, .55); }
.od-room .frame { aspect-ratio: 16 / 10; overflow: hidden; border-top-left-radius: clamp(56px, 8vw, 120px); }
.od-room:nth-child(2) .frame { border-top-left-radius: 0; border-top-right-radius: clamp(56px, 8vw, 120px); }
.od-room img { width: 100%; height: 100%; object-fit: cover; }
.od-room .body { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.od-room h3 { font-size: 2rem; }
.od-room p { color: var(--nest-muted); }
.od-room .btn-row { margin-top: 12px; }
.od-room.is-match { box-shadow: 0 0 0 4px var(--nest-clay); }

/* Why Nest band */
.od-why { background: var(--nest-petrol); color: var(--nest-sand); overflow: hidden; }
.od-why-roof { width: min(900px, 100%); margin: 0 auto -40px; overflow: visible; }
.od-why blockquote { margin: 0 auto; max-width: 22ch; font-family: var(--nest-font-heading); font-weight: 600; font-size: clamp(1.875rem, 4vw, 3.25rem); line-height: 1.12; text-align: center; }
.od-why .points { margin-top: 72px; }

/* Community */
.od-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.od-media .frame img { border-radius: var(--nest-radius-card); border-top-right-radius: clamp(64px, 10vw, 160px); width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.od-media ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.od-media li { display: flex; gap: 14px; align-items: center; font-weight: 500; }
.od-media li::before { content: ""; width: 22px; height: 11px; border: 2.5px solid var(--nest-clay); border-bottom: 0; border-radius: 22px 22px 0 0; flex: 0 0 auto; }
.od-media--flip .frame { order: 2; }

/* Team band */
.od-team { background: var(--nest-sea-glass); }
.od-team-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.od-team blockquote { margin: 14px 0 0; font-family: var(--nest-font-heading); font-weight: 600; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.1; }
.od-team img { border-radius: var(--nest-radius-card); border-top-left-radius: clamp(64px, 10vw, 160px); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.od-team p:not(.nest-label) { margin-top: 20px; font-size: 1.125rem; }

/* Place */
.od-place img { border-radius: var(--nest-radius-card); border-top-left-radius: clamp(64px, 10vw, 160px); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.od-loc { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; font-weight: 500; font-size: 1.0625rem; }
.od-loc svg { width: 36px; flex: 0 0 auto; margin-top: 4px; }

/* Parents card */
.od-card { background: var(--nest-cream); border-radius: var(--nest-radius-card); border-top-left-radius: clamp(64px, 10vw, 140px); padding: clamp(32px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.od-card p:not(.nest-label) { color: var(--nest-muted); font-size: 1.0625rem; }
.od-card p:not(.nest-label) + p { margin-top: 14px; }

/* CTA */
.od-cta { background: var(--nest-petrol); color: var(--nest-sand); text-align: center; }
.od-cta .stacked { width: 220px; margin: 0 auto 36px; }
.od-cta h2 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); max-width: 13ch; margin: 0 auto; }

@media (max-width: 1100px) { .od-inc { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) {
  .od-hero-grid, .od-media, .od-team-grid, .od-card { grid-template-columns: 1fr; }
  .door, .od-hero--page .door { max-width: min(440px, calc(100% - 48px)); margin: 0 auto; }
  .door-tag { left: -16px; }
  .od-media--flip .frame { order: 0; }
}
@media (max-width: 640px) {
  .od-search { border-radius: var(--nest-radius-card); grid-template-columns: 1fr; padding: 18px; gap: 12px; }
  .od-search label + label { border-left: 0; padding-left: 0; border-top: 1px solid var(--nest-line); padding-top: 12px; }
  .od-search .nest-button { width: 100%; }
  .od-inc { grid-template-columns: 1fr 1fr; }
  .od-inc li:last-child { grid-column: 1 / -1; }
  .od-rooms { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .door-frame { animation: none; } }