/* ZenHome (/zenhome): one home, then one kitchen from idea to record.
   The page is Night field dark. ZenHome's own screens are .lit cream cards,
   so they read as the app sitting on the page. */

.zh{--zh-shadow:0 22px 50px rgb(0 0 0 / .45),0 2px 6px rgb(0 0 0 / .25)}

/* Hero */
.zh-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(40px,6vw,80px) clamp(56px,7vw,96px)}
.zh-hero h1{font-size:var(--text-display);margin:0 0 22px}
.zh-hero .lead{max-width:33em;margin:0 0 30px}
.zh-mark{width:56px;height:56px;border-radius:14px;color:#fff}
.zh-rings{display:block;width:64%;height:64%}
.zh-rings path{fill:currentColor;transform-box:view-box;transform-origin:324px 324px}
@media (prefers-reduced-motion:no-preference){
  .zh-rings path{animation:zh-ring .9s var(--ease) both}
  .zh-rings path:nth-child(7){animation-delay:.1s}
  .zh-rings path:nth-child(6){animation-delay:.2s}
  .zh-rings path:nth-child(5){animation-delay:.3s}
  .zh-rings path:nth-child(4){animation-delay:.4s}
  .zh-rings path:nth-child(3){animation-delay:.5s}
  .zh-rings path:nth-child(2){animation-delay:.6s}
  .zh-rings path:nth-child(1){animation-delay:.7s}
}
@keyframes zh-ring{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
.zh-hero-media{position:relative;gap:0}
.zh-hero-media .zh-frame{aspect-ratio:5/4}
.zh-hero-media .zh-frame img{object-position:30% 50%}
.zh-hero-media .zh-float{right:-22px;bottom:-30px;width:min(318px,78%)}
.zh-remodel-hero .zh-frame{aspect-ratio:3/2}
.zh-remodel-hero .zh-frame img{object-position:center}
.zh-remodel-plan{position:relative;display:grid;gap:12px;margin:-26px 20px 0;padding:24px;border-radius:10px;box-shadow:var(--zh-shadow);text-decoration:none}
.zh-remodel-plan strong{font:600 22px/1.2 var(--font-head);letter-spacing:-.025em}
.zh-remodel-plan>span:last-child{font-size:14px}
.zh-remodel-plan:hover>span:last-child{text-decoration:underline;text-underline-offset:4px}
.zh-remodel-plan:focus-visible{outline:2px solid var(--zenhome-ink);outline-offset:4px}

/* ZenHome screens as cream cards */
.zh-app{padding:14px 16px 16px;font-size:14px;line-height:1.45;box-shadow:var(--zh-shadow)}
.zh-app p{margin:0}
.zh-app>p+p{margin-top:4px}
.zh-app .zh-app-head{display:flex;align-items:center;gap:7px;margin-bottom:10px;font:600 12px/1 var(--font-body);color:var(--zenhome)}
.zh-app-meta{margin-left:auto;font:11px/1.2 var(--font-mono);letter-spacing:.02em;color:var(--text-muted)}
.zh-rows .zh-app-meta{margin:0 6px 0 0}
.zh-app-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:600 16px/1.25 var(--font-head);letter-spacing:-.02em;color:var(--zenhome)}
.zh-app .zh-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.zh-chip{display:inline-flex;align-items:center;flex:none;padding:5px 9px;border-radius:999px;font:600 12px/1.1 var(--font-body);white-space:nowrap;background:var(--surface-sunk);color:var(--text)}
.zh-chip.ok{background:var(--zenhome-tint);color:var(--zenhome)}
.zh-chip.warm{background:#f3e5b5;color:#594600}
.zh-chip.pro{background:var(--zenlink-tint);color:#0b5c55}
.zh-chip.home{background:var(--zenhome);color:#fff}
.zh-rows{list-style:none;margin:0;padding:0}
.zh-rows li{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:9px 0;border-top:1px solid var(--rule)}
.zh-rows li:first-child{border-top:0;padding-top:2px}
.zh-rows li>span:first-child{min-width:0}
.zh-record li{justify-content:flex-start}
.zh-record .zh-app-meta{min-width:4.6em}
.zh-app .zh-app-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}
.zh-app-foot>span:first-child{flex:1 1 12em;font-size:13px;color:var(--text-muted)}
.zh-btn{padding:8px 13px;border-radius:7px;background:var(--zenhome);color:#fff;font:600 13px/1 var(--font-body)}
.zh-btn.ghost{background:transparent;color:var(--zenhome);box-shadow:inset 0 0 0 1px var(--rule-strong)}
.zh-app .zh-note{margin-top:10px;padding:10px 12px;border-radius:9px;background:#f6ecc9;color:#4d3d00;font-size:13.5px}
.zh-note b{display:block;margin-bottom:2px;font:600 12px/1.2 var(--font-body);letter-spacing:.02em}
.zh-float{position:absolute;z-index:2}

/* Photos */
.zh-frame>img{object-fit:cover}

/* One home, one year */
.zh-jobs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.zh-jobs li{--s:var(--text-muted);position:relative;display:grid;gap:10px;align-content:start;margin:0;padding-top:18px;border-top:2px solid var(--rule)}
.zh-jobs li::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--s)}
.zh-jobs .done{--s:var(--zenhome-ink)}.zh-jobs .done::before{background:var(--zenhome-ink)}
.zh-jobs .now{--s:var(--signal);border-top-color:var(--signal)}.zh-jobs .now::before{background:var(--signal);box-shadow:0 0 0 5px color-mix(in srgb,var(--signal) 22%,transparent)}
.zh-jobs .next{--s:var(--text)}
.zh-jobs .someday{--s:var(--zendesign-ink);border-top-style:dashed}
.zh-job-photo{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--rule);border-radius:9px;background:var(--surface-sunk)}
.zh-job-photo img{display:block;width:100%;height:100%;object-fit:cover}
.zh-jobs .now .zh-job-photo{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal)}
.zh-state{position:absolute;top:28px;left:8px;padding:4px 8px;border-radius:999px;background:rgb(20 26 23 / .88);color:var(--s);font:600 11.5px/1.1 var(--font-body)}
.zh-when{font:11.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.zh-jobs strong{font:600 15.5px/1.3 var(--font-head);letter-spacing:-.01em}
.zh-jobs .someday a{font-size:14px;color:var(--zendesign-ink)}

/* From an idea to a record */
.zh-journey{border-top:1px solid var(--rule);background:var(--surface-sunk)}
.zh-rail{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.zh-rail li{--c:var(--zenhome-ink);margin:0}
.zh-rail .zendesign{--c:var(--zendesign-ink)}.zh-rail .zenlink{--c:var(--zenlink-ink)}
.zh-rail a{position:relative;display:grid;gap:6px;height:100%;padding:16px 14px 4px 0;border-top:2px solid var(--rule);text-decoration:none}
.zh-rail a::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--c)}
.zh-rail a:hover b{text-decoration:underline;text-underline-offset:.25em}
.zh-rail span{font:11.5px/1 var(--font-mono);color:var(--text-muted)}
.zh-rail b{font:600 16px/1.25 var(--font-head);letter-spacing:-.01em}
.zh-rail em{font:600 13px/1 var(--font-body);font-style:normal;color:var(--c)}
.zh-step{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(44px,5vw,72px);border-top:1px solid var(--rule);scroll-margin-top:16px}
.zh-rail+.zh-step{border-top:0}
.zh-step.flip>.zh-step-media{order:2}
.zh-step-media{position:relative;gap:0}
.zh-step-media>.media-frame{aspect-ratio:16/10}
.zh-step-media>.zh-float{width:min(300px,66%);right:-32px;bottom:-44px}
.zh-step.flip .zh-step-media>.zh-float{right:auto;left:-32px}
.zh-step-text h3{margin:0 0 14px;font-size:clamp(26px,2.8vw,36px);line-height:1.08;letter-spacing:-.03em}
.zh-step-text>p{margin:0}
.zh-step-text>p:not([class]){max-width:30em;font-size:17.5px;color:var(--text-muted)}
.zh-step-text>p a{color:var(--text)}
.zh-step-text>.zh-step-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:16px}
.zh-step-meta>span:first-child{font:12px/1 var(--font-mono);letter-spacing:.06em;color:var(--text-muted)}
.zh-product{display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 var(--font-body);color:var(--c)}
.zh-product.zenhome{--c:var(--zenhome-ink)}.zh-product.zendesign{--c:var(--zendesign-ink)}.zh-product.zenlink{--c:var(--zenlink-ink)}
.zh-product .product-mark{width:22px;height:22px;border-radius:6px}
.zh-product small{font:500 12.5px/1 var(--font-body);color:var(--text-muted)}
.zh-step-text>.zh-who{margin-top:18px;font-size:14px;color:var(--text-faint)}
.zh-who b{color:var(--text);font-weight:600}
.zh-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zh-options figure{margin:0;min-width:0}
.zh-options .media-frame{aspect-ratio:4/3}
.zh-options figcaption{display:block;margin-top:8px;font-size:13.5px;color:var(--text-muted)}
.zh-options figcaption b{color:var(--text)}
.zh-pin{position:absolute;left:10px;bottom:10px;z-index:1;max-width:calc(100% - 20px);padding:7px 10px;border-radius:10px 10px 10px 2px;background:var(--sheet);color:var(--sheet-text);font:600 12.5px/1.25 var(--font-body);box-shadow:0 8px 20px rgb(0 0 0 / .35)}
.zh-take{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:12px;padding:12px 14px}
.zh-take b{font:600 13px/1 var(--font-body);color:var(--zenhome)}
.zh-take>span:not(.product-mark){font-size:13.5px}
.zh-backdrop{display:grid;place-items:center;aspect-ratio:16/11;padding:22px;overflow:hidden;border:1px solid var(--rule);border-radius:var(--radius)}
.zh-backdrop>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.8)}
.zh-backdrop>.zh-app{position:relative;width:min(390px,100%)}
.zh-screens{max-width:300px;margin:clamp(24px,4vw,48px) auto 0}
.zh-screens .sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Close */
.zh-start{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.zh-start h2{margin:0 0 14px}
.zh-start .lead{max-width:30em;margin:0 0 24px}
.zh-process{margin:18px 0 0}
.zh-services .service-index{padding:0}
.zh-services summary{cursor:pointer;margin-bottom:10px;font:600 15px/1.3 var(--font-body);color:var(--text-muted)}
.zh-services .service-index ul{display:grid;gap:0;margin:0;border-top:1px solid var(--rule)}
.zh-services .service-index li{margin:0;border-bottom:1px solid var(--rule)}
.zh-services .service-index a{display:flex;justify-content:space-between;gap:12px;padding:14px 2px;font-size:16px;text-decoration:none}
.zh-services .service-index a::after{content:"↗";color:var(--text-muted)}
.zh-services .service-index a[href^="/"]::after{content:"→"}
.zh-services .service-index a:hover{text-decoration:underline}

@media (max-width:1000px){
  .zh-hero,.zh-step,.zh-start{grid-template-columns:1fr}
  .zh-step.flip>.zh-step-media{order:0}
  .zh-hero-media .zh-float,.zh-step-media>.zh-float,.zh-step.flip .zh-step-media>.zh-float{position:relative;inset:auto;width:auto;margin:-48px 14px 0}
  .zh-jobs{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
  .zh-backdrop{aspect-ratio:auto;padding:36px 14px}
}
@media (max-width:700px){
  .zh-rail{display:none}
  .zh-jobs{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .zh-options{gap:8px}
  .zh-pin{font-size:11.5px;left:6px;bottom:6px}
}