/* A visible home experience, tactile controls and one arrival story. */
/* Keep the purpose and enquiry action together before the product on small screens. */
.home-page .home-entry {
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.15fr);
  align-items:center;
  gap:28px;
  min-height:680px;
  height:auto;
  max-height:none;
  padding:145px var(--gutter) 85px;
}
.home-page .home-entry .ultra-heading { pointer-events:auto; }
.home-page .home-entry h1 {
  font-size:clamp(48px, 5.2vw, 80px);
  line-height:1.03;
  margin-top:25px;
  max-width:none;
}
.home-page .home-entry-benefit {
  max-width:360px;
  color:#c8cbd0;
  font-size:19px;
  line-height:1.55;
  margin-top:26px;
}
.home-page .home-entry-action {
  font-size:18px;
  margin-top:20px;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:7px;
}
.home-page .home-entry-product { min-width:0;position:relative;margin:0; }
.home-page .home-entry .ultra-image {
  position:relative;
  inset:auto;
  z-index:0;
  width:135%;
  max-width:none;
  height:auto;
  margin-left:-9%;
}
.home-page .home-entry-product figcaption { position:relative;z-index:2;margin-top:28px;text-align:right;transform:translate3d(0,var(--ultra-depth-offset,0px),0); }
.home-page .home-entry-product .text-link { font-size:14px;color:#c8cbd0; }
/* A short invitation followed by two genuine views of the place. */
.home-page .experience.experience-showhouse { display:block;padding:72px 48px 28px;background:#fff; }
.home-page .showhouse-intro,.home-page .showhouse-gallery,.home-page .showhouse-visit-details { max-width:1256px;margin-inline:auto; }
.home-page .showhouse-intro { display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:32px; }
.home-page .experience-showhouse .experience-heading { max-width:790px;min-width:0;margin:0;text-align:left; }
.home-page .experience-showhouse .experience-heading .section-label { font-size:13px;color:#6e6e73; }
.home-page .experience-showhouse .experience-heading h2 { font-size:clamp(34px,3.5vw,48px);line-height:1.08;letter-spacing:-.04em;font-weight:500;margin-top:16px; }
.home-page .experience-showhouse .experience-copy { margin:16px 0 0;max-width:none;font-size:17px;line-height:1.5;color:#6e6e73; }
.home-page .experience-showhouse .experience-primary { min-height:44px;flex-shrink:0;margin:0 0 1px;font-size:17px;gap:10px; }
.home-page .showhouse-gallery { display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);gap:16px; }
.home-page .showhouse-photo { min-width:0;margin:0; }
.home-page .showhouse-photo img { display:block;width:100%;height:clamp(290px,27vw,360px);object-fit:cover;object-position:50% 60%;border-radius:24px; }
.home-page .showhouse-photo:nth-child(2) img { object-position:50% 42%; }
.home-page .showhouse-photo figcaption { padding:13px 2px 0;font-size:12px;color:#6e6e73;line-height:1.5; }
.home-page .showhouse-visit-details { display:flex;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:20px; }
.home-page .experience-showhouse .experience-location { margin:0;font-size:12px;line-height:1.5;color:#6e6e73; }
.home-page .experience-showhouse .experience-secondary { min-height:44px;margin:0;font-size:13px;color:#515154;gap:8px; }
.home-page .showhouse-gallery-nav { display:none; }
.home-page .showhouse-gallery:focus-visible { outline:2px solid #496b7a;outline-offset:5px; }
@media(max-width:1000px) and (min-width:761px) {
 .home-page .showhouse-intro { gap:24px; }
 .home-page .experience-showhouse .experience-heading h2 { max-width:560px; }
}
@media(max-width:760px) {
 .home-page .experience.experience-showhouse { padding:44px 0 18px; }
 .home-page .showhouse-intro { display:block;padding-inline:24px;margin-bottom:24px; }
 .home-page .experience-showhouse .experience-heading .section-label { font-size:12px; }
 .home-page .experience-showhouse .experience-heading h2 { font-size:clamp(32px,8vw,40px);margin-top:14px; }
 .home-page .experience-showhouse .experience-copy { font-size:15px;margin-top:14px;max-width:420px; }
 .home-page .experience-showhouse .experience-primary { font-size:16px;margin-top:12px; }
 .home-page .showhouse-gallery { display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:24px;padding:0 24px 6px;scrollbar-width:none; }
 .home-page .showhouse-gallery::-webkit-scrollbar { display:none; }
 .home-page .showhouse-photo { flex:0 0 86vw;scroll-snap-align:start;scroll-snap-stop:always; }
 .home-page .showhouse-photo img { height:auto;aspect-ratio:3 / 2;border-radius:20px; }
 .home-page .showhouse-photo figcaption { font-size:11px;padding-top:10px; }
 .home-page .showhouse-gallery-nav:not([hidden]) { display:flex;align-items:center;justify-content:flex-end;gap:4px;margin:4px 20px 0; }
 .home-page .showhouse-gallery-nav > span { color:#6e6e73;font-size:11px;font-variant-numeric:tabular-nums;margin-right:8px; }
 .home-page .showhouse-gallery-nav button { display:grid;place-items:center;width:44px;height:44px;position:relative;isolation:isolate;color:#515154;cursor:pointer; }
 .home-page .showhouse-gallery-nav button::before { content:"";position:absolute;inset:5px;background:#f0f0f2;border-radius:50%;z-index:-1; }
 .home-page .showhouse-gallery-nav button svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
 .home-page .showhouse-gallery-nav button:disabled { opacity:.35;cursor:default; }
 .home-page .showhouse-gallery-nav button:focus-visible { outline:2px solid #496b7a;border-radius:50%;outline-offset:1px; }
 .home-page .showhouse-visit-details { align-items:flex-start;flex-direction:column;gap:2px;margin:12px 24px 0; }
 .home-page .experience-showhouse .experience-location { font-size:11px; }
 .home-page .experience-showhouse .experience-secondary { font-size:12px; }
}
@media(min-width:1500px) {
  .home-page .home-entry { min-height:800px;padding-block:170px 110px; }
}
@media(max-width:1000px) and (min-width:801px) {
  .home-page .home-entry { gap:12px;padding-top:125px;min-height:650px; }
  .home-page .home-entry h1 { font-size:clamp(44px,5.2vw,60px); }
  .home-page .home-entry-benefit { font-size:17px; }
}
@media(max-width:800px) {
  .home-page .home-entry {
    grid-template-columns:minmax(0,1fr);
    gap:20px;
    padding:34px var(--gutter) 30px;
    min-height:0;
  }
  .home-page .home-entry h1 { font-size:clamp(44px,10.8vw,70px);margin-top:20px;line-height:1.04; }
  .home-page .home-entry .nova-intro { font-size:13px;line-height:1.5; }
  .home-page .home-entry-benefit { max-width:420px;font-size:16px;line-height:1.5;margin-top:20px; }
  .home-page .home-entry-action { font-size:17px;margin-top:12px; }
  .home-page .home-entry-product { width:100%;max-width:580px;margin-inline:auto; }
  .home-page .home-entry .ultra-image { width:110%;margin-left:-5%;height:auto;max-width:none; }
  .home-page .home-entry-product figcaption { margin-top:4px;text-align:left; }
  .home-page .home-entry-product .text-link { font-size:13px; }
}
@media(max-width:360px) {
  .home-page .global-header { column-gap:6px; }
  .home-page .global-page-label { white-space:nowrap; }
  .home-page .home-entry { padding-top:28px;gap:12px; }
  .home-page .home-entry h1 { font-size:40px; }
  .home-page .home-entry-benefit { margin-top:17px; }
}
/* Reserve the complete mobile depth journey so the moving product link never
   reaches the clipped edge of the hero. Scrolling itself stays native. */
@media (max-width:800px) and (prefers-reduced-motion:no-preference) {
  .home-page .home-entry { padding-bottom:78px; }
}
/* Follow the browser's scroll timeline on touch screens. Animate the whole
   product figure as one layer; no JS frame updates or separate caption motion. */
@supports (animation-timeline: --ultra-scroll) and (animation-range: exit-crossing 0px exit-crossing 160px) {
  @media (max-width:800px), (hover:none), (pointer:coarse) {
    @media (prefers-reduced-motion:no-preference) {
      .home-page .home-entry { view-timeline:--ultra-scroll block;view-timeline-inset:0; }
      .home-page .home-entry-product {
        animation:ultra-touch-depth 1s linear both;
        animation-timeline:--ultra-scroll;
        animation-range:exit-crossing 0px exit-crossing 160px;
      }
      .home-page .home-entry .ultra-image,
      .home-page .home-entry-product figcaption { transform:none; }
    }
  }
}
@keyframes ultra-touch-depth {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(0,48px,0); }
}
@media (prefers-reduced-motion:reduce) {
  .home-page .home-entry-product { animation:none;transform:none; }
  .home-page .home-entry .ultra-image,
  .home-page .home-entry-product figcaption { transform:none; }
}
.home-page .nova-intro { color:#c8cbd0;font-size:16px;line-height:1.55;letter-spacing:0; }
.home-page .home-paths { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px;padding-block:46px;background:#fff; }
.home-page .home-paths > a { padding:12px 0;min-width:0; }
.home-page .home-path-title { display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:20px;font-weight:500;letter-spacing:-.025em; }
.home-page .home-path-title > span { font-size:19px;font-weight:400; }
.home-page .home-path-purpose { display:block;margin-top:8px;color:#66666b;font-size:14px;line-height:1.5; }
.home-page .home-paths > a:hover .home-path-title { text-decoration:underline;text-underline-offset:5px; }
.home-page .home-paths > a:focus-visible { outline:2px solid currentColor;outline-offset:6px; }
.home-page .home-paths + .home-scenes { padding-top:50px; }
@media(max-width:760px) {
 .home-page .nova-intro { font-size:14px;line-height:1.55; }
 .home-page .home-paths { grid-template-columns:1fr;gap:0;padding-block:20px; }
 .home-page .home-paths > a { padding-block:18px; }
 .home-page .home-paths > a + a { border-top:1px solid #e7e7e9; }
 .home-page .home-path-title { font-size:19px; }
 .home-page .home-path-purpose { font-size:14px;margin-top:4px; }
 .home-page .home-paths + .home-scenes { padding-top:44px; }
}
.home-page .home-scenes { background: #fff; padding-top: 92px; }
.home-page .scene-heading { text-align: center; max-width: 720px; margin-bottom: 26px; }
.home-page .scene-heading .section-label,
.home-page .home-chapter-heading .section-label { color: #66666b; font-size: 14px; margin-bottom: 20px; }
.home-page .scene-heading h2 { font-size: clamp(42px, 4.3vw, 62px); line-height: 1.1; letter-spacing: -.045em; }
.home-page .scene-lead { font-size: 18px; line-height: 1.65; color: #66666b; max-width: 510px; margin: 24px auto 0; }
.home-page .scene-figure { width: calc(100% - 48px); max-width: 1600px; margin: 0 auto; }
.home-page .scene-images { position: relative; width: 100%; aspect-ratio: 1672 / 941; max-height: 64svh; overflow: hidden; border-radius:28px; background: #eeeae3; }
.home-page .scene-images img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home-page [data-scene-image="evening"] { opacity: 0; transition: opacity 900ms ease; }
.home-page [data-scene="evening"] [data-scene-image="evening"] { opacity: 1; }
.home-page .scene-caption { display: flex; justify-content: space-between; gap: 20px; font-size: 12px; line-height: 1.5; color: #6e6e73; padding-top: 15px; }
.home-page .scene-caption > span { flex-shrink: 0; }
.home-page .scene-controls { display:flex;justify-content:center;align-items:stretch;position:relative;isolation:isolate;gap:2px;width:fit-content;max-width:calc(100% - 32px);margin:0 auto 22px;padding:0 3px;border-radius:999px;background:transparent; }
.home-page .scene-controls[hidden] { display:none; }
.home-page .scene-controls::before { content:"";position:absolute;inset:4px 0;background:#eeeff0;border-radius:inherit;z-index:-1; }
.home-page .scene-controls button { display:flex;align-items:center;justify-content:center;position:relative;isolation:isolate;gap:6px;min-height:44px;padding:0 12px;border-radius:999px;font-size:13px;line-height:1.4;color:#51575b;white-space:nowrap;cursor:pointer;background:transparent; }
.home-page .scene-controls button svg { width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.home-page .scene-controls button::before { content:"";position:absolute;inset:7px 0;border-radius:inherit;z-index:-1; }
.home-page .scene-controls button[aria-pressed="true"] { color:#fff; }
.home-page .scene-controls button[aria-pressed="true"]::before { background:#1d2225; }
.home-page .scene-controls button:not([aria-pressed="true"]):hover { color:#1d2225; }
.home-page .scene-controls button:not([aria-pressed="true"]):hover::before { background:#e1e3e4; }
.home-page .scene-controls button:focus-visible { outline:2px solid #496b7a;outline-offset:3px; }
.home-page .scene-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 58px 70px; }
.home-page .scene-foot p { font-size: 17px; letter-spacing: -.015em; }
.home-page .scene-foot div > span { display: block; color: #6e6e73; font-size: 12px; margin-top: 10px; }
.home-page .scene-foot .text-link { font-size: 15px; }

.home-page .home-controls-story { background: var(--surface-stone); padding-block: 88px 64px; }
.home-page .home-chapter-heading { display: grid; grid-template-columns: 1fr 1fr; column-gap: 11%; align-items: end; }
.home-page .home-chapter-heading > * { min-width: 0; }
.home-page .home-chapter-heading h2 { font-size: clamp(40px, 4vw, 56px); line-height: 1.1; letter-spacing: -.04em; }
.home-page .chapter-summary { max-width: 360px; color: #66666b; font-size: 17px; line-height: 1.65; }
.home-page .home-chapter-heading .text-link { margin-top: 15px; font-size: 15px; }
.home-page .controls-editorial { margin-top: 38px; }
.home-page .controls-lineup { display: grid; grid-template-columns: 1fr 1fr; gap: 11%; }
.home-page .g1-feature,
.home-page .mixswitch-story { min-width: 0; }
.home-page .mixswitch-story { background: transparent; color: var(--ink); overflow: visible; }
.home-page .g1-art,
.home-page .mixswitch-visual { display: flex; align-items: flex-end; justify-content: center; position: relative; inset: auto; z-index: 0; width: 100%; height: clamp(330px, 39vw, 550px); aspect-ratio: auto; margin: 0 0 30px; }
.home-page .mixswitch-visual::after { display: none; }
.home-page .g1-art img,
.home-page .mixswitch-visual img { width: 100%; max-width: 570px; height: 100%; object-fit: contain; object-position: center bottom; }
.home-page .g1-copy,
.home-page .mixswitch-copy { width: auto; margin: 0; max-width: 390px; }
.home-page .g1-copy h3,
.home-page .mixswitch-copy h3 { font-size: 26px; line-height: 1.2; letter-spacing: -.025em; }
.home-page .g1-copy p,
.home-page .mixswitch-summary { margin-top: 15px; font-size: 16px; line-height: 1.65; color: #66666b; }
.home-page .g1-copy .text-link,
.home-page .mixswitch-copy > .text-link { margin-top: 12px; font-size: 15px; }
.home-page .magicdot-note { display: grid; grid-template-columns: 96px 1fr; column-gap: 38px; align-items: center; margin-top: 58px; padding-top: 40px; border-top: 1px solid #dcdcdf; }
.home-page .magicdot-note > img { width: 96px; height: auto; object-fit: contain; }
.home-page .magicdot-note > div { min-width: 0; }
.home-page .magicdot-note .product-name { font-size: 12px; color: #66666b; }
.home-page .magicdot-note h3 { margin-top: 8px; font-size: 23px; line-height: 1.2; letter-spacing: -.025em; }
.home-page .magicdot-note p:not(.product-name) { margin-top: 10px; font-size: 15px; line-height: 1.65; color: #66666b; }
.home-page .magicdot-note .text-link { margin-top: 5px; font-size: 14px; }

/* Alternate dark and light lock stories to separate the two products. */
.home-page .home-access-story { --ink:#1d1d1f; --muted:#666461; background:var(--surface-stone); color:var(--ink); padding:0; }
.home-page .v5 { --ink:#f5f5f7; --muted:#b8b8bc; background:#1d1d1f; color:var(--ink); }
.home-page .lock-showcases { margin-top: 0; }
.home-page .v5 h2 { font-size: clamp(48px, 5vw, 72px); line-height: 1.08; letter-spacing: -.045em; margin: 22px 0 32px; }
.home-page .v5-copy .body-copy { font-size: 18px; }
.home-page .v5-note { left: var(--gutter); right: auto; max-width: 380px; color:var(--muted); }
.home-page .c1 { display: block; width: 100%; max-width: none; margin: 0; min-height: 870px; padding: 105px var(--gutter) 80px; background: #fff; color: var(--ink); border: 0; }
.home-page .c1-heading { position: relative; z-index: 2; width: 42%; margin-left: 58%; }
.home-page .c1-heading .product-name { color: var(--ink); font-size: 18px; }
.home-page .c1 h3 { font-size: clamp(48px, 5vw, 72px); line-height: 1.08; letter-spacing: -.045em; margin: 22px 0 32px; }
.home-page .c1-summary { color: var(--muted); font-size: 18px; line-height: 1.6; max-width: 390px; margin: 0; }
.home-page .c1 .text-link { margin-top: 24px; font-size: 16px; }
.home-page .c1-art { position: absolute; left: 0; top: 2%; width: 58%; height: 90%; margin: 0; overflow: visible; display: flex; align-items: center; justify-content: center; }
/* The supplied C1 square has white margins; frame those out without cropping the hardware. */
.home-page .c1-image { position: relative; inset: auto; top: 2.66%; width: auto; max-width: none; height: 130.412%; max-height: calc(88.7vw - 72px); flex-shrink: 0; margin: 0; object-fit: contain; object-position: center; z-index: 0; mix-blend-mode: multiply; }
.home-page .product-dialog[data-tone="white"] .detail-media { background: #fff; padding: 0; }
.home-page .product-dialog[data-tone="white"] .detail-media img { width: 100%; max-height: 620px; }

.home-page .experience { padding-block: 100px; grid-template-columns: 1.25fr 1fr; gap: 13%; align-items: center; }
.home-page .experience-heading .section-label { color: #66666b; font-size: 14px; }
.home-page .experience-heading h2 { font-size: clamp(38px, 3.5vw, 50px); line-height: 1.1; margin-top: 20px; }
.home-page .experience-copy { max-width: 460px; margin-top: 26px; font-size: 17px; }
.home-page .experience-heading > .text-link { margin-top: 17px; }
.home-page .experience-actions { display:flex; flex-wrap:wrap; gap:0 24px; margin-top:17px; }
.home-page .experience-actions .text-link { min-height:44px; font-size:15px; }
.home-page .experience-location { font-size: 12px; margin-top: 14px; }
.home-page .experience-details { padding-top: 0; max-width: 340px; }
.home-page .experience-details h3 { font-size: 26px; line-height: 1.2; letter-spacing: -.03em; }
.home-page .experience-details > p { color: #66666b; font-size: 16px; line-height: 1.65; margin-top: 20px; }
.home-page .experience-details > .text-link { margin-top: 14px; font-size: 15px; }

@media (prefers-reduced-motion: reduce) { .home-page [data-scene-image="evening"] { transition: none; } }
@media (max-width: 1100px) {
  .home-page .home-chapter-heading,
  .home-page .controls-lineup,
  .home-page .experience { column-gap: 8%; }
  .home-page .v5-copy .body-copy, .home-page .c1-summary { font-size: 17px; }
}
@media (max-width: 760px) {
  .home-page .home-scenes { padding-top: 64px; }
  .home-page .scene-heading { margin-bottom: 22px; }
  .home-page .scene-heading h2 { font-size: clamp(34px, 9vw, 44px); }
  .home-page .scene-lead { font-size: 16px; margin-top: 20px; }
  .home-page .scene-figure { width: calc(100% - 24px); }
  .home-page .scene-images { aspect-ratio: 16 / 9; max-height: none; border-radius:18px; }
  .home-page .scene-images img { object-fit: contain; object-position: center; }
  .home-page .scene-caption { font-size: 11px; padding: 10px 4px 0; gap: 12px; }
  .home-page .scene-caption > p { max-width: 200px; }
  .home-page .scene-controls { margin-bottom:18px; }
  .home-page .scene-foot { display: block; padding-block: 40px 50px; }
  .home-page .scene-foot p { font-size: 16px; }
  .home-page .scene-foot .text-link { margin-top: 15px; }
  .home-page .home-controls-story { padding-block: 60px 46px; }
  .home-page .home-chapter-heading { display: block; }
  .home-page .home-chapter-heading h2 { font-size: clamp(34px, 9vw, 44px); }
  .home-page .home-chapter-heading .section-label { margin-bottom: 18px; }
  .home-page .chapter-summary { margin-top: 23px; font-size: 16px; max-width: 440px; }
  .home-page .home-chapter-heading .text-link { margin-top: 10px; }
  .home-page .controls-editorial { margin-top: 25px; }
  .home-page .controls-lineup { display: block; }
  .home-page .g1-art, .home-page .mixswitch-visual { height: 350px; max-width: 380px; margin: 0 auto 24px; }
  .home-page .g1-art img, .home-page .mixswitch-visual img { max-width: 360px; }
  .home-page .mixswitch-story { display: block; margin-top: 48px; }
  .home-page .mixswitch-visual, .home-page .mixswitch-copy { order: 0; }
  .home-page .g1-copy h3, .home-page .mixswitch-copy h3 { font-size: 25px; }
  .home-page .magicdot-note { grid-template-columns: 58px 1fr; gap: 22px; align-items: center; margin-top: 40px; padding-top: 32px; }
  .home-page .magicdot-note > img { width: 58px; }
  .home-page .magicdot-note h3 { font-size: 21px; }
  .home-page .magicdot-note p:not(.product-name) { font-size: 14px; }
  .home-page .v5 h2 { font-size: clamp(42px, 10vw, 52px); margin: 20px 0 24px; }
  .home-page .v5-copy .body-copy { font-size: 16px; }
  .home-page .v5-note { max-width: none; }
  .home-page .c1 { min-height: 0; padding: 50px 24px 35px; }
  .home-page .c1-heading { width: 100%; margin: 0; }
  .home-page .c1-heading .product-name { font-size: 16px; }
  .home-page .c1 h3 { font-size: clamp(42px, 10vw, 52px); margin: 20px 0 24px; }
  .home-page .c1-summary { font-size: 16px; }
  .home-page .c1 .text-link { margin-top: 14px; font-size: 15px; }
  .home-page .c1-art { position: relative; inset: auto; width: calc(100% + 48px); height: clamp(390px, 110vw, 470px); margin: 12px -24px 28px; }
  .home-page .c1-image { max-height: 140vw; }
  .home-page .experience { display: block; padding-block: 64px; }
  .home-page .experience-heading h2 { font-size: clamp(34px, 9vw, 44px); }
  .home-page .experience-copy { font-size: 16px; margin-top: 23px; }
  .home-page .experience-details { margin-top: 42px; padding-top: 32px; border-top: 1px solid #e5e5e7; max-width: none; }
  .home-page .experience-details h3 { font-size: 24px; }
  .home-page .experience-details > p { margin-top: 15px; font-size: 15px; }
}
@media (max-width: 360px) {
  .home-page .scene-caption { flex-direction: column; gap: 3px; }
  .home-page .scene-caption > p { max-width: none; }
  .home-page .g1-art, .home-page .mixswitch-visual { height: 310px; }
  .home-page .magicdot-note { grid-template-columns: 48px 1fr; gap: 18px; }
  .home-page .magicdot-note > img { width: 48px; }
}