/* Tru Service: the three audience pages (agents, property managers, designers and builders).
   Loaded after tru.css. Colors, type, spacing and radii come from the variables at the top of tru.css.
   Every class here starts with "au-" so nothing collides with the shared file.
   Each moving object is written into the page in its finished state. aud.js adds "is-live" to the ones
   it takes over, so with scripts off the page still reads top to bottom. */

html { scroll-padding-top: 88px; }
html:not(.js) .top:not(.is-plain) { position: absolute; }
.au-live-only { display: none; }
.wrap:has(.is-live) .au-live-only { display: inline; }
.au-hero :focus-visible, .au-dark :focus-visible, .close :focus-visible { outline-color: var(--amber); }
.au-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ───────── Hero: one outcome over one photo, with the reader's three moments on the glass ───────── */
.hero.au-hero { display: flex; flex-direction: column; background: #0b0f14; min-height: max(100svh, 640px); }
.au-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The hero photo never sits still: a slow push in and drift, then back, so the page feels live */
.js .au-hero > img { animation: au-live 26s ease-in-out infinite alternate; transform-origin: 50% 55%; will-change: transform; }
@keyframes au-live { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-1.2%, -1.4%, 0); } }
@media (prefers-reduced-motion: reduce) { .js .au-hero > img { animation: none; } }
.hero.au-hero::after { background: linear-gradient(180deg, rgba(8,11,15,.62) 0%, rgba(8,11,15,.40) 36%, rgba(8,11,15,.50) 62%, rgba(8,11,15,.78) 100%); }
.au-hero-in { position: relative; z-index: 2; margin: auto; text-align: center; padding: 136px 0 44px; }
.au-hero .display { font-size: clamp(46px, min(7.4vw, 12.5vh), 104px); letter-spacing: -0.025em; margin-top: 26px; }
.au-hero .lede { max-width: 29em; }
.au-hero .sendbar { margin-top: 34px; }
.au-hero-in > small { display: block; margin-top: 14px; font-size: 14px; color: rgba(255,255,255,.82); }
.js .au-hero-in > * { animation: au-rise .9s cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes au-rise { from { opacity: 0; transform: translateY(14px); } }
.js .au-hero-in > :nth-child(1) { animation-delay: .1s; } .js .au-hero-in > :nth-child(2) { animation-delay: .2s; }
.js .au-hero-in > :nth-child(3) { animation-delay: .34s; } .js .au-hero-in > :nth-child(4) { animation-delay: .48s; }
.js .au-hero-in > :nth-child(5) { animation-delay: .56s; }

.au-moments { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.au-moment { display: grid; grid-template-columns: 1fr auto 32px; align-items: center; gap: 8px 14px; padding: 15px 16px 16px 18px; border-radius: 16px; text-align: left; text-decoration: none; color: #fff; background: rgba(15,20,26,.38); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 18px 50px rgba(8,11,15,.24); transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.au-moment:hover { background: rgba(15,20,26,.52); border-color: rgba(255,255,255,.4); transform: translateY(-3px); }
.au-moment small { font-size: 12.5px; color: rgba(255,255,255,.8); }
.au-moment em { grid-column: 2 / 4; justify-self: end; font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--amber); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.au-moment b { grid-column: 1 / 3; font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 2.1vw, 29px); letter-spacing: -0.02em; line-height: 1.1; }
.au-moment i { grid-column: 3; justify-self: end; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.14); transition: background .25s ease, color .25s ease; }
.au-moment i svg { width: 14px; height: 14px; }
.au-moment:hover i { background: #fff; color: var(--ink); }
.js .au-moment { animation: au-rise .9s cubic-bezier(.2,.7,.2,1) backwards; }
.js .au-moment:nth-child(1) { animation-delay: .8s; } .js .au-moment:nth-child(2) { animation-delay: .92s; } .js .au-moment:nth-child(3) { animation-delay: 1.04s; }
.au-credit { position: relative; z-index: 2; text-align: center; font-size: 12px; color: rgba(255,255,255,.6); padding: 12px 0 14px; }

/* ───────── The statement under the hero ───────── */
.au-say .say { max-width: 19em; }
.au-say .lede { margin: 30px auto 0; }

/* ───────── Section head: statement on the left, one quiet line on the right ───────── */
.au-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.au-head .lede { justify-self: end; max-width: 26em; padding-bottom: 6px; }

/* ───────── Shared small parts ───────── */
.au-glass { color: #fff; background: rgba(15,20,26,.5); border: 1px solid rgba(255,255,255,.24); border-radius: 16px; -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 18px 50px rgba(8,11,15,.28); }
.au-done { flex: none; display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--amber); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.au-done svg { width: 11px; height: 11px; }
.au-meter { height: 4px; border-radius: 4px; background: rgba(255,255,255,.22); overflow: hidden; }
.au-meter i { display: block; height: 100%; width: 100%; border-radius: 4px; background: var(--amber); transition: width .8s cubic-bezier(.2,.7,.2,1); }
.au-card { background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(15,20,26,.10), 0 2px 6px rgba(15,20,26,.05); color: var(--ink); }
.au-card > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.au-card > header b { font-size: 15px; font-weight: 600; color: var(--ink); }
.au-card > header span { font-size: 12px; color: var(--quiet); white-space: nowrap; }
.au-card > footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--quiet); }
.au-card > footer b { color: var(--ink); font-weight: 600; }

/* The dark panel that holds each page's main object */
.au-dark { position: relative; overflow: hidden; background: var(--ink); color: rgba(255,255,255,.84); border-radius: var(--r-panel); padding: clamp(36px, 6vw, 84px); display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 6vw, 84px); align-items: center; }
.au-dark .chip { background: rgba(242,178,102,.16); color: var(--amber); }
.au-dark .h3 { color: #fff; margin-top: 22px; }
.au-dark .lede { color: rgba(255,255,255,.8); margin-top: 20px; }
.au-dark .note { color: rgba(255,255,255,.52); }
.au-dark .clock { margin-top: 30px; min-height: clamp(92px, 10.2vw, 146px); }
.au-dark .clock b { font-size: clamp(84px, 10vw, 150px); }
.au-dark .clock.done b { font-size: clamp(60px, 7vw, 104px); letter-spacing: -0.03em; }
.au-dark .clock.done { flex-wrap: wrap; gap: 6px 16px; }
.au-dark > * { position: relative; z-index: 1; min-width: 0; }

/* A track you can drag, with named stops */
.au-scrub { display: none; margin-top: 26px; }
.is-live .au-scrub { display: block; }
.au-scrub > p { font-size: 17px; font-weight: 600; color: #fff; min-height: 1.5em; }
.au-scrub input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: 14px 0 0; background: transparent; cursor: pointer; --p: calc(15px + (100% - 30px) * var(--f, 1)); }
.au-scrub input::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--amber) var(--p), rgba(255,255,255,.2) var(--p)); }
.au-scrub input::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255,255,255,.2); }
.au-scrub input::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--amber); }
.au-scrub input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 6px 18px rgba(8,11,15,.45); transition: transform .2s ease; }
.au-scrub input::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 6px 18px rgba(8,11,15,.45); }
.au-scrub input:active::-webkit-slider-thumb { transform: scale(1.08); }
.au-scrub input:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 8px; }
.au-scrub ol { position: relative; height: 22px; margin-top: 8px; }
.au-scrub ol li { position: absolute; top: 0; left: calc(15px + (100% - 30px) * var(--at)); transform: translateX(-50%); font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.52); white-space: nowrap; cursor: pointer; padding: 4px 0; transition: color .2s ease; }
.au-scrub ol li:first-child { transform: translateX(-15px); } .au-scrub ol li:last-child { transform: translateX(calc(-100% + 15px)); }
.au-scrub ol li:hover { color: rgba(255,255,255,.86); }
.au-scrub ol li.is-on { color: #fff; }

/* Three plain facts in a row */
.au-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); margin-top: clamp(40px, 5vw, 68px); }
.au-facts > div { border-top: 1px solid var(--line); padding-top: 22px; }
.au-facts h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 27px); letter-spacing: -0.014em; line-height: 1.15; color: var(--ink); }
.au-facts p { font-size: 16px; color: var(--text); margin-top: 10px; max-width: 24em; }

/* Proof: one review beside the numbers */
.au-proof { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; background: var(--panel); border-radius: var(--r-panel); padding: clamp(28px, 5vw, 68px); margin-top: clamp(44px, 6vw, 84px); }
.au-proof-solo { margin-top: 0; }
.au-proof blockquote { font-family: var(--serif); font-size: clamp(23px, 2.5vw, 34px); line-height: 1.24; letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; }
.au-proof cite { display: block; margin-top: 18px; font-family: var(--sans); font-style: normal; font-size: 15px; color: var(--quiet); }
.au-proof ul li { display: grid; grid-template-columns: minmax(2.3em, auto) 1fr; align-items: baseline; gap: 18px; padding: 16px 0; border-top: 1px solid var(--faint); font-size: 15px; color: var(--quiet); }
.au-proof ul li:first-child { border-top: 0; padding-top: 0; } .au-proof ul li:last-child { padding-bottom: 0; }
.au-proof ul b { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 3.6vw, 50px); letter-spacing: -0.025em; line-height: 1; color: var(--ink); white-space: nowrap; }
.au-proof ul b span { font: inherit; color: inherit; }

/* Close: one action */
.au-or { margin-top: 20px; font-size: 15px; color: rgba(255,255,255,.7); }
.close p.au-or { margin-top: 20px; color: rgba(255,255,255,.7); }
.au-or a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.4); }
.au-or a:hover { text-decoration-color: #fff; }

/* ═════════ AGENTS ═════════ */

/* Before you list: the walkthrough draws its way through the house and the list writes itself */
.au-walk { width: min(440px, 100%); padding: 20px 22px 4px; }
.au-walk > header { padding-bottom: 14px; }
.au-plan { position: relative; aspect-ratio: 360 / 232; }
.au-plan svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.au-plan .w { stroke: var(--ink); stroke-width: 2.4; }
.au-plan .w2 { stroke: var(--ink); stroke-width: 1.5; }
.au-plan .arc { stroke: var(--faint); stroke-width: 1; }
.au-plan .route { stroke: var(--amber); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.au-plan span { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); font-size: 10.5px; font-weight: 500; letter-spacing: .01em; color: var(--quiet); white-space: nowrap; }
.au-plan i { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--amber-deep); box-shadow: 0 0 0 4px rgba(242,178,102,.34); }
.au-walk ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin-top: 12px; border-top: 1px solid var(--line); }
.au-walk li { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.au-walk li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--amber-deep); }
.au-walk > footer { padding: 12px 0; }
.js .au-plan .route { stroke-dashoffset: 1; }
.js .seen .au-plan .route { stroke-dashoffset: 0; transition: stroke-dashoffset 3.5s cubic-bezier(.45,.05,.4,1) .25s; }
.js .au-plan i { opacity: 0; transform: scale(.3); transition: opacity .3s ease, transform .5s cubic-bezier(.2,.9,.2,1.4); }
.js .seen .au-plan i { opacity: 1; transform: none; transition-delay: var(--d); }
.js .au-walk li { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.js .seen .au-walk li { opacity: 1; transform: none; transition-delay: var(--d); }
.js .au-walk > footer b { transition: color .4s ease 4s; }
.js .au-walk > footer span:last-child { opacity: 0; transition: opacity .5s ease 4s; }
.js .seen .au-walk > footer span:last-child { opacity: 1; }

/* The week before photos: markers on the front of the house */
.au-shot { --cx: 0%; --cw: 1; --cy: 7.8125%; --ch: .84375; }
.au-shot-pic { position: relative; border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 16 / 9; background: var(--panel); }
.au-shot-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.au-shot-pic::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,11,15,.20), rgba(8,11,15,.04) 34%, rgba(8,11,15,.10) 60%, rgba(8,11,15,.42)); }
.au-when { position: absolute; z-index: 2; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; font-size: 13px; font-weight: 500; border-radius: 12px; }
.au-when svg { width: 14px; height: 14px; flex: none; }
.au-pins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(20px, 3vw, 44px); margin-top: 20px; }
.au-pins li { padding: 14px 0; border-top: 1px solid var(--line); }
.au-pin { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; }
.au-pin > i { display: none; }
.au-pin b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.au-pin small { display: block; font-size: 14px; color: var(--quiet); margin-top: 2px; }
.au-pin em { display: none; }
.au-shot-card { display: none; }
.au-shot.is-live, .au-shot.is-live .au-shot-stage { position: relative; }
.au-shot.is-live .au-pins { display: block; margin: 0; }
.au-shot.is-live .au-pins li { position: absolute; z-index: 2; padding: 0; border: 0; left: calc((var(--x) - var(--cx)) / var(--cw)); top: calc((var(--y) - var(--cy)) / var(--ch)); transform: translate(-50%, -50%); }
.au-shot.is-live .au-pin { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; }
.au-shot.is-live .au-pin > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.au-shot.is-live .au-pin > i { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(15,20,26,.46); border: 1.5px solid rgba(255,255,255,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(8,11,15,.3); transition: background .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2,.9,.2,1.3), box-shadow .3s ease; }
.au-pin > i svg { width: 13px; height: 13px; color: var(--ink); opacity: 0; transform: scale(.5); transition: opacity .25s ease, transform .3s ease; }
.au-shot.is-live .au-pin.is-done > i { background: var(--amber); border-color: var(--amber); }
.au-pin.is-done > i svg { opacity: 1; transform: none; }
.au-shot.is-live .au-pin:hover > i { transform: scale(1.1); }
.au-shot.is-live .au-pin.is-on > i { transform: scale(1.2); box-shadow: 0 0 0 7px rgba(242,178,102,.3), 0 6px 18px rgba(8,11,15,.3); }
.au-pin:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
.au-shot.is-live .au-shot-card { display: block; position: absolute; z-index: 3; left: 18px; bottom: 18px; width: min(340px, calc(100% - 36px)); padding: 16px 18px 17px; }
.au-shot-card header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.au-shot-card header b { font-size: 17px; font-weight: 600; }
.au-shot-card header em { transition: opacity .3s ease; }
.au-shot-card:not(.is-done) header em { opacity: 0; }
.au-shot-card p { font-size: 14.5px; color: rgba(255,255,255,.88); margin-top: 5px; }
.au-shot-card .au-meter { margin-top: 14px; }
.au-shot-card small { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: rgba(255,255,255,.66); margin-top: 9px; }
.au-shot-card.is-in header b, .au-shot-card.is-in p { animation: au-in .45s ease both; }
@keyframes au-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* After the buyer's inspection: the report sorts itself and the repair window runs down */
.au-win-copy + .au-scrub { margin-top: 30px; }
.au-win-left > .note { margin-top: 26px; max-width: 34em; }
.au-win-card { justify-self: center; width: min(460px, 100%); padding: 20px 22px 4px; }
.au-win-card > header { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.au-win-card li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 45px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink); background: #fff; transition: transform .7s cubic-bezier(.2,.7,.2,1), color .4s ease; }
.au-win-card li > span { position: relative; flex: none; display: grid; justify-items: end; }
.au-win-card li .tag { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; transition: opacity .3s ease, transform .4s cubic-bezier(.2,.9,.2,1.2); }
.au-win-card li .tag svg { width: 11px; height: 11px; }
.au-win-card .au-fixed { background: var(--amber); color: var(--ink); opacity: 0; transform: scale(.7); }
.au-win-card li.is-fixed .au-fixed { opacity: 1; transform: none; }
.au-win-card li.is-fixed .tag.fix { opacity: 0; }
.au-win-card ul:not(.is-sorted) .tag { opacity: 0; transform: scale(.7); }
.au-win-card ul.is-sorted li[data-k="leave"] { color: var(--quiet); }
.au-win-card > footer { padding: 13px 0; }

/* ═════════ PROPERTY MANAGERS ═════════ */

/* 75 homes, one mark each */
.au-homes { display: grid; grid-template-columns: repeat(25, 1fr); gap: clamp(5px, .8vw, 11px); max-width: 1000px; margin: clamp(40px, 5vw, 64px) auto 0; }
.au-homes i { aspect-ratio: 1 / 1.04; clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); background: linear-gradient(var(--amber), var(--amber)) 50% 72% / 24% 26% no-repeat, var(--ink); }
.js .au-homes i { opacity: .1; transform: translateY(5px); transition: opacity .45s ease, transform .5s cubic-bezier(.2,.8,.2,1.2); transition-delay: calc(var(--i, 0) * 16ms); }
.js .au-homes.seen i { opacity: 1; transform: none; }
.au-say .au-homes + .note { margin-top: 18px; }

/* Between tenants: one home, running down to its move-in date */
.au-scene { position: relative; display: grid; border-radius: var(--r-panel); overflow: hidden; background: var(--panel); min-height: clamp(520px, 50vw, 640px); }
.au-scene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.au-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8,11,15,0) 40%, rgba(8,11,15,.22)); }
.au-turn { position: relative; z-index: 2; align-self: center; justify-self: end; width: min(410px, calc(100% - 56px)); margin: 28px; padding: 20px 22px 14px; background: rgba(15,20,26,.66); }
.au-turn > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,.8); }
.au-turn-clock { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; font-family: var(--serif); }
.au-turn-clock b { font-weight: 400; font-size: 58px; line-height: .9; letter-spacing: -0.03em; color: var(--amber); font-variant-numeric: tabular-nums; }
.au-turn-clock span { font-size: 20px; color: #fff; }
.au-turn-clock.done b { font-size: 44px; line-height: 1.1; }
.au-turn-clock.done span { font-family: var(--sans); font-size: 14px; color: rgba(255,255,255,.8); }
.au-turn .au-meter { margin-top: 16px; }
.au-turn ul { margin-top: 8px; }
.au-turn li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.14); }
.au-turn li:first-child { border-top: 0; }
.au-turn li i { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid rgba(255,255,255,.45); display: grid; place-items: center; transition: background .3s ease, border-color .3s ease; }
.au-turn li i svg { width: 12px; height: 12px; color: var(--ink); opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .25s ease; }
.au-turn li b { font-size: 15px; font-weight: 600; color: #fff; transition: color .3s ease; }
.au-turn li small { font-size: 13px; color: rgba(255,255,255,.7); opacity: 0; transform: translateX(-6px); transition: opacity .35s ease, transform .35s ease; }
.au-turn li.is-done i { background: var(--amber); border-color: var(--amber); }
.au-turn li.is-done i svg { opacity: 1; transform: none; }
.au-turn li.is-done b { color: rgba(255,255,255,.66); }
.au-turn li.is-done small { opacity: 1; transform: none; }
.au-turn > footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 12.5px; color: rgba(255,255,255,.62); }
.au-again { display: none; flex: none; white-space: nowrap; background: none; border: 0; padding: 4px 0; font-size: 13px; font-weight: 600; color: var(--amber); cursor: pointer; }
.au-again:hover { text-decoration: underline; text-underline-offset: 4px; }
.is-live .au-again { display: inline-block; }

/* Repair lists by property: a week on one board */
.au-board-wrap { display: grid; gap: 14px; justify-items: center; }
.au-board { justify-self: center; width: min(500px, 100%); padding: 20px 22px 4px; }
.au-board > header { padding-bottom: 14px; }
.au-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.au-days button { display: block; width: 100%; padding: 9px 0 8px; border: 0; border-radius: 10px; background: var(--panel); text-align: center; font-size: 12px; font-weight: 600; color: var(--quiet); cursor: pointer; transition: background .25s ease, color .25s ease; }
.au-days button b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--ink); transition: color .25s ease; }
.au-days button:disabled { cursor: default; color: var(--quiet); }
.au-days button[aria-pressed="false"]:not(:disabled):hover { background: var(--line); }
.au-days button[aria-pressed="true"] { background: var(--ink); color: rgba(255,255,255,.72); }
.au-days button[aria-pressed="true"] b { color: #fff; }
.au-rows { margin-top: 6px; }
.au-row { padding: 13px 0 14px; border-bottom: 1px solid var(--line); }
.au-row > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.au-row b { font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.au-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; background: var(--panel); color: var(--quiet); white-space: nowrap; transition: background .3s ease, color .3s ease; }
.au-st svg { width: 11px; height: 11px; display: none; }
.au-st.is-work { background: var(--amber-wash); color: var(--amber-deep); }
.au-st.is-ready { background: var(--amber); color: var(--ink); }
.au-st.is-ready svg { display: block; }
.au-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 10px; }
.au-track > span { grid-row: 1; height: 26px; border-radius: 8px; background: var(--panel); transition: background .3s ease; }
.au-track > span:nth-child(1) { grid-column: 1; } .au-track > span:nth-child(2) { grid-column: 2; } .au-track > span:nth-child(3) { grid-column: 3; }
.au-track > span:nth-child(4) { grid-column: 4; } .au-track > span:nth-child(5) { grid-column: 5; }
.au-track > span.is-today { background: var(--line); }
.au-bar { grid-row: 1; position: relative; height: 26px; border-radius: 8px; background: var(--amber-wash); overflow: hidden; display: flex; align-items: center; justify-content: flex-end; }
.au-bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--fill, 1) * 100%); border-radius: 8px; background: var(--amber); transition: width .7s cubic-bezier(.2,.7,.2,1); }
.au-bar em { position: relative; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ink); opacity: .7; padding-right: 9px; white-space: nowrap; transition: opacity .3s ease; }
.au-bar.is-ready em { opacity: 1; }
.au-board > footer { padding: 13px 0; }

/* Ongoing accounts: the invoice your books can follow */
.au-inv { width: min(410px, 100%); padding: 22px 22px 6px; transform: rotate(1.2deg); }
.au-inv > header { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.au-inv > header b { font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: -0.015em; }
.au-inv dl { margin: 0; }
.au-inv dl > div { display: grid; grid-template-columns: 9.2em 1fr; gap: 10px; align-items: baseline; padding: 11px 10px; margin: 0 -10px; border-radius: 8px; font-size: 14px; }
.au-inv dt { font-size: 12px; font-weight: 600; color: var(--quiet); }
.au-inv dd { margin: 0; color: var(--ink); }
.au-inv .au-wo { background: var(--amber-wash); }
.au-inv .au-wo dt { color: var(--amber-deep); }
.au-inv ul { margin-top: 6px; border-top: 1px solid var(--line); padding: 8px 0; }
.au-inv ul li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; font-size: 13.5px; color: var(--text); }
.au-inv ul li::after { content: ""; flex: none; width: 46px; height: 8px; border-radius: 4px; background: var(--panel); }
.au-inv > footer { padding: 14px 0; border-top: 1px solid var(--line); }
.js .au-inv .au-wo { background: transparent; transition: background .7s ease .7s; }
.js .seen .au-inv .au-wo { background: var(--amber-wash); }
.au-list { margin-top: 22px; }
.au-list li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 17px; color: var(--ink); }
.au-list + .lede { margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 16px; color: var(--quiet); }

/* ═════════ DESIGNERS AND BUILDERS ═════════ */

/* The punch list closes and the room comes up to light */
.au-punch { --lit: 1; align-items: start; }
.au-punch > img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: calc(.05 + var(--lit) * .95); filter: saturate(calc(.3 + var(--lit) * .8)) brightness(calc(.7 + var(--lit) * .55)); transition: opacity 1.1s ease, filter 1.1s ease; }
.au-punch::after { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(90deg, rgba(15,20,26,.88) 0%, rgba(15,20,26,.66) 48%, rgba(15,20,26,.2) 100%); }
.au-punch-copy { align-self: center; }
.au-punch .clock.done b { font-size: clamp(50px, 5.4vw, 80px); white-space: nowrap; }
.au-punch-ctl { display: none; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 28px; }
.is-live .au-punch-ctl { display: flex; }
.au-punch-ctl span { font-size: 14px; color: rgba(255,255,255,.66); }
.au-punch-ctl .btn { min-width: 9.6em; justify-content: center; }
.au-ticks { padding: 8px 20px; background: rgba(15,20,26,.52); }
.au-ticks li { border-top: 1px solid rgba(255,255,255,.14); }
.au-ticks li:first-child { border-top: 0; }
.au-tick { display: grid; grid-template-columns: 26px 1fr auto; align-items: start; gap: 14px; width: 100%; padding: 13px 0; border: 0; background: none; text-align: left; color: inherit; cursor: pointer; }
.au-tick:disabled { cursor: default; color: inherit; }
.au-tick > i { width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.45); display: grid; place-items: center; margin-top: 1px; transition: background .3s ease, border-color .3s ease, transform .2s ease; }
.au-tick > i svg { width: 14px; height: 14px; color: var(--ink); opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .25s ease; }
.au-tick:not(:disabled):hover > i { border-color: #fff; transform: scale(1.06); }
.au-tick b { display: block; font-size: 16px; font-weight: 600; color: #fff; transition: color .3s ease; }
.au-tick small { display: block; font-size: 14px; color: rgba(255,255,255,.68); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s ease, opacity .4s ease, margin .4s ease; }
.au-tick em { font-style: normal; font-size: 12px; color: rgba(255,255,255,.56); padding-top: 4px; white-space: nowrap; }
.au-tick[aria-pressed="true"] > i { background: var(--amber); border-color: var(--amber); }
.au-tick[aria-pressed="true"] > i svg { opacity: 1; transform: none; }
.au-tick[aria-pressed="true"] b { color: rgba(255,255,255,.66); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.36); }
.au-tick[aria-pressed="true"] small { max-height: 3em; opacity: 1; margin-top: 3px; }
.au-tick:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 8px; }

/* Installs: a frame, a line and a level you can move */
.au-hang { --tilt: 0; --b: 0; width: min(430px, 100%); display: grid; justify-items: center; }
.au-wall { position: relative; width: 100%; padding: 34px 0 30px; display: grid; justify-items: center; }
.au-wall::before { content: ""; position: absolute; left: -8%; right: -8%; top: 34px; height: 1.5px; background: linear-gradient(90deg, transparent, var(--amber) 14%, var(--amber) 86%, transparent); }
.au-frame { position: relative; z-index: 1; width: 66%; margin: 0; padding: 14px; background: #fff; border: 7px solid var(--ink); border-radius: 3px; box-shadow: 0 22px 44px rgba(15,20,26,.2), 0 2px 6px rgba(15,20,26,.1); transform-origin: 50% -20px; transform: rotate(calc(var(--tilt) * 1deg)); }
.au-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.au-level { position: relative; width: 82%; height: 50px; border-radius: 12px; background: var(--ink); display: grid; place-items: center; box-shadow: 0 14px 30px rgba(15,20,26,.2); }
.au-level::before, .au-level::after { content: ""; position: absolute; top: 50%; width: calc(43% - 78px); height: 2px; margin-top: -1px; background: rgba(255,255,255,.2); }
.au-level::before { left: 7%; } .au-level::after { right: 7%; }
.au-vial { position: relative; width: 132px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); overflow: hidden; }
.au-vial::before, .au-vial::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.5); transition: background .3s ease; }
.au-vial::before { left: calc(50% - 19px); } .au-vial::after { left: calc(50% + 17px); }
.au-vial i { position: absolute; top: 50%; left: 50%; width: 26px; height: 20px; margin: -10px 0 0 -13px; border-radius: 10px; background: var(--amber); box-shadow: inset 0 -3px 5px rgba(169,105,28,.5), inset 0 2px 3px rgba(255,255,255,.5); transform: translateX(calc(var(--b) * 46px)); }
.au-hang.is-true .au-vial::before, .au-hang.is-true .au-vial::after { background: var(--amber); }
.au-level input { display: none; }
.au-hang.is-live .au-level input { display: block; position: absolute; inset: -10px 0; width: 100%; height: calc(100% + 20px); margin: 0; opacity: 0; cursor: ew-resize; }
.au-hang.is-live .au-level:has(input:focus-visible) { outline: 2px solid var(--amber-deep); outline-offset: 4px; }
.au-read { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--quiet); min-height: 28px; }
.au-read b { font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 6px; background: #fff; color: var(--quiet); display: inline-flex; align-items: center; gap: 5px; transition: background .3s ease, color .3s ease; font-variant-numeric: tabular-nums; }
.au-read b svg { width: 11px; height: 11px; display: none; }
.au-hang.is-true .au-read b { background: var(--amber); color: var(--ink); }
.au-hang.is-true .au-read b svg { display: block; }

/* Small repairs: three closed items on the glass */
.au-stack { position: relative; margin: 0; border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 1 / 1.04; background: var(--panel); display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 16px; }
.au-stack > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.au-stack::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,11,15,0) 40%, rgba(8,11,15,.16)); }
.au-stack > div { position: relative; z-index: 2; padding: 13px 16px 14px; border-radius: 16px; background: rgba(255,255,255,.9); color: var(--ink); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 36px rgba(15,20,26,.14), 0 1px 3px rgba(15,20,26,.08); }
.au-stack header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.au-stack header b { font-size: 15.5px; font-weight: 600; }
.au-stack p { font-size: 14px; color: var(--quiet); margin-top: 4px; }
.js .au-stack > div { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1.1); }
.js .au-stack.seen > div { opacity: 1; transform: none; }
.js .au-stack.seen > div:nth-of-type(2) { transition-delay: .16s; } .js .au-stack.seen > div:nth-of-type(3) { transition-delay: .32s; }

/* True: the level mark, large, and the line it stands for */
.au-true { display: block; width: clamp(96px, 11vw, 150px); height: auto; margin: 0 auto; color: var(--ink); }
.au-true circle { transform-box: fill-box; transform-origin: center; }
.js .au-true circle { transform: translateX(-7px); transition: transform 2s cubic-bezier(.3,1.5,.4,1) .2s; }
.js .seen .au-true circle { transform: none; }
.au-true + .creed { margin-top: 30px; }
h2.creed { font-weight: 400; font-size: clamp(26px, 3.2vw, 44px); max-width: 21em; }

/* ═════════ Smaller screens ═════════ */
@media (max-width: 1040px) {
  .au-moment em { display: none; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 76px; }
  .au-hero-in { padding: 108px 0 30px; }
  .au-hero .display { margin-top: 22px; }
  .au-hero .lede { margin-top: 20px; }
  .au-hero .sendbar { margin-top: 26px; }
  .au-moments { grid-template-columns: 1fr; gap: 8px; }
  .au-moment { grid-template-columns: 1fr auto; padding: 11px 12px 11px 16px; gap: 2px 12px; border-radius: 14px; }
  .au-moment small { grid-column: 1; grid-row: 1; }
  .au-moment b { grid-column: 1; grid-row: 2; font-size: 22px; }
  .au-moment i { grid-column: 2; grid-row: 1 / 3; }
  .au-moment em { display: none; }
  .au-credit { padding: 10px 0 12px; }
  .au-head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .au-head .lede { justify-self: start; padding-bottom: 0; }
  .au-dark { grid-template-columns: 1fr; padding: 34px 20px 24px; gap: 28px; }
  .au-scrub ol li span { display: none; }
  .au-facts { grid-template-columns: 1fr; gap: 0; }
  .au-facts > div { padding: 22px 0; }
  .au-facts > div:last-child { padding-bottom: 0; }
  .au-proof { grid-template-columns: 1fr; }
  .vis:has(.au-walk), .vis:has(.au-hang) { padding: 18px; }
  .au-walk { padding: 18px 16px 2px; }
  .au-walk ul { gap: 0 14px; }
  .au-walk li { font-size: 13px; }
  .au-shot { --cx: 8.3333%; --cw: .83333; --cy: 0%; --ch: 1; }
  .au-shot-pic { aspect-ratio: 5 / 4; }
  .au-when { top: auto; bottom: 12px; right: 12px; font-size: 12px; padding: 7px 10px; }
  .au-scrub > p { min-height: 3em; }
  .au-shot.is-live .au-pin > i { width: 28px; height: 28px; }
  .au-shot.is-live .au-shot-card { position: static; width: auto; margin-top: 10px; background: var(--ink); border-color: var(--ink); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .au-pins { grid-template-columns: 1fr 1fr; }
  .au-win { gap: 0; }
  .au-win-left { display: contents; }
  .au-win-card { order: 3; width: min(560px, 100%); margin-top: 26px; padding: 18px 16px 2px; }
  .au-win-card li { font-size: 14px; }
  .au-win-left > .note { order: 4; margin-top: 18px; }
  .au-scene { min-height: 0; padding-top: 46%; }
  .au-scene::after { background: linear-gradient(180deg, rgba(8,11,15,0) 20%, rgba(8,11,15,.3)); }
  .au-turn { width: auto; justify-self: stretch; margin: 10px; padding: 18px 16px 12px; background: rgba(15,20,26,.78); }
  .au-turn li { grid-template-columns: 22px 1fr; gap: 0 12px; }
  .au-turn li small { grid-column: 2; max-height: 0; overflow: hidden; transform: none; transition: max-height .4s ease, opacity .4s ease, margin .4s ease; }
  .au-turn li.is-done small { max-height: 2em; margin-top: 2px; }
  .au-turn-clock b { font-size: 50px; }
  .au-board { width: min(560px, 100%); padding: 18px 16px 2px; }
  .au-inv { padding: 20px 18px 4px; }
  .au-inv dl > div { grid-template-columns: 1fr; gap: 2px; }
  .au-inv > footer { flex-direction: column; align-items: flex-start; gap: 2px; }
  .au-ticks { padding: 6px 16px; }
  .au-tick { grid-template-columns: 26px 1fr; }
  .au-tick em { grid-column: 2; padding-top: 0; margin-top: -8px; }
  .au-stack { aspect-ratio: auto; min-height: 480px; padding: 10px; }
  .au-list li { font-size: 16px; }
}
@media (max-width: 600px) {
  .au-homes { grid-template-columns: repeat(15, 1fr); gap: 6px; }
}
@media (max-width: 420px) {
  .au-scrub ol li { font-size: 11.5px; }
  .au-days button b { font-size: 19px; }
}

@media (min-width: 901px) and (max-height: 760px) {
  .au-hero-in { padding: 112px 0 28px; }
  .au-hero .sendbar { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .au-hero > img, .js .au-hero-in > *, .js .au-moment { animation: none; opacity: 1; transform: none; }
  .js .au-plan .route { stroke-dashoffset: 0; transition: none; }
  .js .au-plan i, .js .au-walk li, .js .au-walk > footer span:last-child, .js .au-homes i, .js .au-stack > div { opacity: 1; transform: none; transition: none; }
  .js .au-inv .au-wo { background: var(--amber-wash); transition: none; }
  .js .au-true circle { transform: none; transition: none; }
  .au-meter i, .au-bar i, .au-win-card li, .au-win-card li .tag, .au-pin > i, .au-pin > i svg, .au-turn li *, .au-tick *, .au-punch > img, .au-moment, .au-scrub input::-webkit-slider-thumb { transition: none; }
  .au-shot-card.is-in header b, .au-shot-card.is-in p { animation: none; }
}