@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('jost.woff2') format('woff2'); }
/* Clairen Haus tokens (from clairenhaus.com): Ivory #FAF8F5 · Dusty Rose #C79AA1 · Blush #E9D4D6 · Taupe #B39A86 · Bronze #7A5B3F · Espresso #3E2F28 */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --ivory: #FAF8F5; --ivory-deep: #F3EEE8; --rose: #C79AA1; --blush: #E9D4D6; --blush-soft: #F4E8E9;
  --taupe: #B39A86; --bronze: #7A5B3F; --espresso: #3E2F28; --text: #3E2F28; --text-soft: #5E4D44;
  --line: #E4DAD0; --white: #fff; --ok: #3f6b4a; --err: #8a2b2b;
  --font: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; --radius: 8px;
  --focus: 0 0 0 3px var(--ivory), 0 0 0 5px var(--bronze);
}
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; color: var(--text); background: var(--ivory); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0 0 .5rem; font-weight: 500; line-height: 1.2; color: var(--espresso); }
h1 { font-size: clamp(1.75rem, 4vw, 2.4rem); }
h2 { font-size: 1.35rem; }
p { margin: 0 0 .75rem; }
a { color: var(--bronze); }
a:hover { color: var(--espresso); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -100px; background: var(--espresso); color: var(--ivory); padding: .6rem 1rem; border-radius: var(--radius); z-index: 10; }
.skip-link:focus { top: 1rem; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 820px; }
main { padding: 2rem 1.25rem 3rem; }
.muted { color: var(--text-soft); }
.small { font-size: .875rem; }
.pre { white-space: pre-wrap; }
.eyebrow { font-size: .875rem; font-weight: 500; color: var(--bronze); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .4rem; }
.lede { font-size: 1.125rem; color: var(--text-soft); }

.site-head { background: var(--white); border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; flex-wrap: wrap; }
.brand img { width: 168px; height: auto; }
.top-nav { display: flex; align-items: center; gap: 1rem; font-size: .9375rem; flex-wrap: wrap; }
.top-nav form { margin: 0; }
.who { color: var(--text-soft); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-foot { border-top: 1px solid var(--line); padding: 1.5rem 0; font-size: .9rem; color: var(--text-soft); }

.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; margin: 0 0 1.25rem; }
.login-card { max-width: 520px; margin: 2rem auto; }
.stack { display: grid; gap: .5rem; }
.stack .btn { margin-top: .5rem; justify-self: start; }
label { font-weight: 500; font-size: .9375rem; }
input[type=text], input[type=email], input[type=tel], input:not([type]), textarea, select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text); background: var(--ivory); border: 1px solid #CDBFB2; border-radius: 6px; padding: .65rem .75rem; min-height: 46px; }
textarea { resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: none; box-shadow: var(--focus); background: var(--white); }
.check { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.check input { width: 20px; height: 20px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .6rem 1.3rem; font: inherit; font-size: 1rem; font-weight: 500; text-decoration: none; border: 2px solid var(--espresso); border-radius: 6px; cursor: pointer; }
.btn-primary { background: var(--espresso); color: var(--ivory); }
.btn-primary:hover { background: #2A1F1A; color: var(--ivory); }
.btn-secondary { background: transparent; color: var(--espresso); }
.btn-secondary:hover { background: var(--espresso); color: var(--ivory); }
.btn-lg { min-height: 54px; padding: .8rem 1.8rem; }
.btn[disabled] { opacity: .6; cursor: progress; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--bronze); text-decoration: underline; cursor: pointer; }
.linkish.danger { color: var(--err); font-size: .875rem; }
.text-link { color: var(--espresso); font-weight: 500; text-decoration: underline; text-decoration-color: var(--rose); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.flash { background: #EEF4EF; border: 1px solid #C9DCCD; color: var(--ok); padding: .75rem 1rem; border-radius: 6px; margin: 0 0 1rem; }
.flash-error { background: #F8ECEC; border-color: #E5C5C5; color: var(--err); }

.hero-block { margin-bottom: 1.25rem; }
.progress { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; counter-reset: s; }
.progress li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; font-size: .875rem; color: var(--text-soft); padding: 0 .25rem; }
.progress li::before { content: ''; position: absolute; top: 17px; left: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.progress li:first-child::before { display: none; }
.progress li.done::before, .progress li.current::before { background: var(--rose); }
.progress .dot { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: var(--white); border: 2px solid var(--line); color: var(--text-soft); }
.progress li.done .dot { background: var(--rose); border-color: var(--rose); color: var(--white); }
.progress li.current .dot { background: var(--espresso); border-color: var(--espresso); color: var(--ivory); box-shadow: 0 0 0 5px var(--blush); }
.progress li.current { color: var(--espresso); font-weight: 600; }
.now { border-left: 4px solid var(--rose); }
.now-lbl { font-size: .875rem; color: var(--text-soft); margin: 0; }
.now-step { font-size: 1.5rem; font-weight: 500; color: var(--espresso); margin: 0 0 .25rem; }

.todo { background: var(--blush-soft); border-color: var(--blush); }
.checklist { margin: 0 0 1rem; padding-left: 1.25rem; }
.checklist li { margin: .25rem 0; }
.checklist li.ok { color: var(--ok); }
.checklist li.ok::after { content: ' ✓'; }

.info-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; margin-top: 1rem; }
.info-form .field { display: grid; gap: .35rem; align-content: start; }
.info-form .field:has(textarea) { grid-column: 1 / -1; }
.info-form .btn { justify-self: start; }

.upload { display: grid; gap: .5rem; margin: 1rem 0 1.25rem; }
.upload .btn { justify-self: start; }
.drop { display: block; border: 2px dashed var(--taupe); border-radius: var(--radius); padding: 1.25rem; text-align: center; cursor: pointer; background: var(--ivory); }
.drop span { color: var(--bronze); text-decoration: underline; }
.drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.drop:focus-within { box-shadow: var(--focus); }
.photo-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; }
.photo a { display: block; aspect-ratio: 4 / 3; background: var(--ivory-deep); border-radius: 6px; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.file-tile { display: grid; place-items: center; height: 100%; font-weight: 600; color: var(--bronze); }
.photo-meta { display: grid; font-size: .8125rem; margin-top: .35rem; }
.photo-meta .fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.admin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.add summary { list-style: none; }
.add summary::-webkit-details-marker { display: none; }
.add[open] form { margin-top: 1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; min-width: min(420px, 90vw); }
.table-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
table.clients { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.clients th, .clients td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.clients th { font-weight: 500; color: var(--text-soft); font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; background: var(--ivory); }
.clients tr:last-child td { border-bottom: 0; }
.num { text-align: right !important; }
.pill { display: inline-block; padding: .15rem .6rem; border-radius: 99px; font-size: .8125rem; background: var(--ivory-deep); white-space: nowrap; }
.pill-warn { background: #F8ECEC; color: var(--err); }
.step-deposit_paid { background: var(--blush); }
.step-building, .step-content_received { background: #EFE6DC; }
.step-review { background: #F3E3C4; }
.step-live { background: #DDEBDF; color: var(--ok); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.grid-2 > .card { margin: 0 0 1.25rem; }
.kv { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr; gap: .4rem 1rem; margin: 0 0 1rem; font-size: .9375rem; }
.kv dt { color: var(--text-soft); }
.kv dd { margin: 0; }
.inline-form { margin: .5rem 0; }
.inline-form .row { display: flex; gap: .5rem; }
.sec-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.edits, .events { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.edits li, .events li { border-bottom: 1px solid var(--line); padding-bottom: .75rem; }
.diff { margin: .35rem 0 0; display: grid; gap: .2rem; font-size: .9rem; }
.diff dt { font-weight: 500; }
.diff dd { margin: 0 0 .4rem; white-space: pre-wrap; }
del { background: #F8ECEC; color: var(--err); text-decoration: line-through; display: block; padding: .1rem .3rem; border-radius: 3px; }
ins { background: #EEF4EF; color: var(--ok); text-decoration: none; display: block; padding: .1rem .3rem; border-radius: 3px; }
.sig { margin: 1rem 0; padding: 1rem; border: 1px dashed var(--line); border-radius: 6px; max-width: 420px; }
.sig figcaption { font-size: .8125rem; color: var(--text-soft); margin-top: .35rem; }

@media (max-width: 720px) {
  main { padding: 1.25rem 1rem 2rem; }
  .card { padding: 1.1rem; }
  .info-form, .grid-2 { grid-template-columns: 1fr; }
  .progress { grid-template-columns: 1fr; gap: .1rem; }
  .progress li { flex-direction: row; text-align: left; gap: .75rem; padding: .2rem 0; }
  .progress li::before { top: -50%; left: 17px; width: 3px; height: 100%; }
  .who { display: none; }
  .clients th:nth-child(n+3), .clients td:nth-child(n+3) { display: none; }
  .kv { grid-template-columns: 1fr; gap: .1rem; }
  .kv dd { margin-bottom: .5rem; }
}

/* Portal tabs + payments */
.tabs { display: flex; gap: .25rem; margin: 1rem 0 .25rem; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { display: inline-flex; align-items: center; gap: .45rem; min-height: 46px; padding: .5rem 1rem; color: var(--text-soft); font-weight: 500; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--espresso); }
.tab.is-current { color: var(--espresso); border-bottom-color: var(--rose); }
.tab-badge { font-size: .75rem; font-weight: 600; line-height: 1; padding: .3rem .5rem; border-radius: 99px; background: var(--blush); color: var(--espresso); }
.tab-badge-late { background: #F8ECEC; color: var(--err); }
.pay-summary { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.25rem; margin: 0 0 1.25rem; }
.pay-next { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--rose); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.pay-next.is-late { border-left-color: var(--err); }
.pay-next-amt { font-size: 2rem; font-weight: 500; color: var(--espresso); margin: 0; line-height: 1.2; }
.pay-next .btn { margin-top: .5rem; }
.pay-totals { margin: 0; display: grid; gap: .5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem; align-content: center; }
.pay-totals div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.pay-totals div:last-child { border-bottom: 0; padding-bottom: 0; }
.pay-totals dt { color: var(--text-soft); }
.pay-totals dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.pay-list { list-style: none; margin: .5rem 0 1rem; padding: 0; }
.pay-item { display: grid; grid-template-columns: 1fr 7.5rem 7rem 7.5rem; gap: .5rem 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.pay-item:first-child { border-top: 1px solid var(--line); }
.pay-desc { display: grid; gap: .1rem; min-width: 0; }
.pay-title { font-weight: 500; color: var(--espresso); }
.pay-when { color: var(--text-soft); }
.pay-overdue .pay-when { color: var(--err); }
.pay-amt { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; color: var(--espresso); }
.pay-act { text-align: right; }
.btn-pay { min-height: 42px; padding: .45rem 1.3rem; }
.pay-pill-paid { background: #DDEBDF; color: var(--ok); }
.pay-pill-due { background: var(--blush); color: var(--espresso); }
.pay-pill-overdue { background: #F8ECEC; color: var(--err); font-weight: 500; }
.pay-pill-upcoming { background: var(--ivory-deep); color: var(--text-soft); }
.pay-empty { text-align: center; padding: 1.5rem 1rem; background: var(--ivory); border: 1px dashed var(--taupe); border-radius: var(--radius); margin-top: .5rem; }
.pay-empty-title { font-size: 1.15rem; font-weight: 500; color: var(--espresso); margin-bottom: .35rem; }
.pay-empty .muted { max-width: 34rem; margin: 0 auto; }
.pay-foot { margin: 0; }
code { font-size: .875em; background: var(--ivory-deep); padding: .05rem .3rem; border-radius: 3px; }
@media (max-width: 720px) {
  .pay-summary { grid-template-columns: 1fr; gap: .75rem; }
  .pay-next, .pay-totals { padding: 1rem 1.1rem; }
  .pay-item { grid-template-columns: 1fr auto; grid-template-areas: 'desc amt' 'status act'; gap: .5rem .75rem; }
  .pay-desc { grid-area: desc; } .pay-amt { grid-area: amt; align-self: start; }
  .pay-status { grid-area: status; align-self: center; } .pay-act { grid-area: act; }
  .tab { padding: .5rem .75rem; }
}