/* Concierge 8 team portal: same palette, type and shapes as conciergeeight.com */
:root {
  --canvas: #EFEDE4; --canvas-warm: #F6F4EE; --card: #FBFAF6;
  --ink: #374142; --ink-deep: #2B3334; --cream: #F2F1ED;
  --brass: #A98B5D; --brass-dark: #7D6440; --brass-light: #C9AE82;
  --line: #DDD8CB; --meta: #5C6668;
  --ok: #4F6B55; --err: #A5452F;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --radius: 18px;
  --shadow: 0 30px 70px -45px rgba(55, 65, 66, .35);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--canvas); color: var(--ink); font: 400 16px/1.6 var(--sans); min-height: 100vh; }
body.is-busy { cursor: progress; }
a { color: inherit; }
em { font-style: italic; color: var(--brass-dark); }
[hidden] { display: none !important; }

/* ---------- Top bar (like the website's nav) ---------- */
.bar { background: rgba(55, 65, 66, .97); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(242, 241, 237, .1); }
.bar__in { max-width: 1200px; margin: 0 auto; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.brand img { display: block; height: 26px; width: auto; }
.brand__tag { font: 600 10px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--brass-light); padding-left: 16px; border-left: 1px solid rgba(242, 241, 237, .25); }
.bar__nav { display: flex; gap: 28px; }
.link-btn { background: none; border: 0; color: #E9E6DC; font: 600 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; padding: 10px 0; }
.link-btn:hover { color: var(--brass-light); }

/* ---------- Shared type ---------- */
.kicker { font: 600 11px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--brass-dark); }
.kicker--light { color: var(--brass-light); }
.fine { font-size: 13px; color: var(--meta); text-align: center; }
.muted { color: var(--meta); }

/* ---------- Sign in: photo hero ---------- */
.login-hero { position: relative; min-height: calc(100vh - 63px); display: grid; place-items: center; padding: 56px 24px; isolation: isolate;
  background: #1d2324 url("lake-house.jpg") center / cover no-repeat; }
.login-hero__shade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(20, 24, 25, .72) 0%, rgba(20, 24, 25, .35) 55%, rgba(20, 24, 25, .55) 100%); }
.login-hero__in { width: 100%; max-width: 1100px; display: grid; grid-template-columns: 1.1fr 440px; gap: 48px; align-items: center; }
.login-hero__line { font: italic 400 clamp(48px, 6vw, 88px)/1 var(--serif); color: #F6F4EE; margin-top: 18px; }
.login-hero__line em { color: #F6F4EE; }
.login { background: var(--card); border-radius: var(--radius); padding: 40px 36px; display: grid; gap: 18px; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .55); }
.login h1 { font: 500 44px/1.05 var(--serif); margin: 2px 0 6px; }

/* ---------- Requests hero (slate band, like the website's ink sections) ---------- */
.hero { background: var(--ink); color: var(--canvas); position: relative; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; background: url("lake-house.jpg") center 60% / cover no-repeat; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(55, 65, 66, .4), var(--ink)); }
.hero__in { max-width: 1200px; margin: 0 auto; padding: 64px 28px 56px; }
.title { font: 500 clamp(46px, 6vw, 76px)/1.02 var(--serif); margin-top: 14px; color: #F6F4EE; }
.title em { color: var(--brass-light); }
.hero__sub { margin-top: 16px; font-size: 17px; color: rgba(239, 237, 228, .8); }

/* Stats strip (like the one under the website's hero) */
.stats { background: var(--ink-deep); }
.stats__in { max-width: 1200px; margin: 0 auto; padding: 0 28px; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); }
.stats button { width: 100%; background: none; border: 0; border-left: 1px solid rgba(242, 241, 237, .14); color: rgba(239, 237, 228, .72); text-align: left; padding: 26px 24px; cursor: pointer; font: 400 14px/1.4 var(--sans); transition: background .3s var(--ease); }
.stats li:first-child button { border-left: 0; padding-left: 0; }
.stats button:hover, .stats button.is-active { color: #EFEDE4; }
.stats button.is-active strong { color: var(--brass-light); }
.stats strong { display: block; font: 500 42px/1 var(--serif); color: #EFEDE4; margin-bottom: 6px; }

/* ---------- Page ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 40px 28px 96px; }

/* Tabs */
.tabs { display: flex; gap: 4px; margin-bottom: 28px; border-bottom: 1px solid var(--line); overflow-x: auto; scroll-margin-top: 80px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 14px 18px; font: 500 15px/1 var(--sans); color: var(--meta); cursor: pointer; white-space: nowrap; }
.tabs button span { margin-left: 6px; font-size: 13px; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brass); }

/* ---------- Request cards (rounded, like the website's cards) ---------- */
.list { display: grid; gap: 20px; }
.empty { color: var(--meta); padding: 48px 0; font: italic 400 24px/1.3 var(--serif); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; position: relative; transition: border-color .3s var(--ease); }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ink); }
.card--scheduled::before { background: var(--brass); }
.card--done::before { background: var(--ok); }
.card--cancelled::before { background: #A9AFAD; }
.card:hover { border-color: rgba(169, 139, 93, .55); }
.card__head { width: 100%; display: flex; justify-content: space-between; gap: 18px; padding: 26px 30px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.card.is-open .card__head { border-bottom: 1px solid var(--line); }
.card__name { font: 500 28px/1.15 var(--serif); }
.card__svc { color: var(--brass-dark); font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; margin-top: 8px; }
.card__when { margin-top: 10px; font-size: 16px; }
.card__quote { margin-top: 2px; color: var(--meta); font-size: 15px; }
.card__side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.card__date { font-size: 13px; color: var(--meta); }
.badge { font: 600 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; padding: 9px 14px; border-radius: 999px; background: var(--ink); color: #EFEDE4; }
.badge--scheduled { background: var(--brass); color: var(--ink-deep); }
.badge--done { background: var(--ok); }
.badge--cancelled { background: #A9AFAD; }
.card__body { padding: 30px; display: grid; gap: 28px; }

h4 { font: 600 11px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--brass-dark); margin-bottom: 14px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.info dt { font: 500 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--meta); }
.info dd { font-size: 17px; margin-top: 4px; overflow-wrap: anywhere; }
.info dd a { text-decoration-color: var(--line); text-underline-offset: 4px; }
.notes { font: italic 400 22px/1.4 var(--serif); white-space: pre-line; }

.box { border: 1px solid var(--line); background: var(--canvas-warm); border-radius: 14px; padding: 22px 24px; display: grid; gap: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.actions { padding-top: 4px; }

/* ---------- Buttons and fields (same as the website) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 1px solid #BFB9AB; background: transparent; color: var(--ink); font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.btn:hover { border-color: var(--ink); }
.btn--dark { background: var(--ink); border-color: var(--ink); color: #F6F4EE; }
.btn--dark:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn--wide { width: 100%; }
.field { display: grid; gap: 6px; }
.field span { font: 500 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--meta); }
.field input, .input { min-height: 50px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: 400 16px var(--sans); color: var(--ink); }
.field input:focus, .input:focus { outline: 2px solid var(--brass); outline-offset: -1px; border-color: transparent; }
.field--grow { flex: 1 1 260px; }
.field--money { width: 160px; }
.check { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }
.error { color: var(--err); font-size: 15px; }
.ok { color: var(--ok); font-size: 15px; }

/* Activity */
.activity summary { cursor: pointer; font: 600 11px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--meta); }
.activity ul { list-style: none; margin-top: 12px; display: grid; gap: 6px; font-size: 14px; }
.activity time { display: inline-block; min-width: 140px; color: var(--meta); }

/* ---------- Footer (like the website's) ---------- */
.foot { background: var(--ink-deep); color: rgba(239, 237, 228, .7); }
.foot__in { max-width: 1200px; margin: 0 auto; padding: 40px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.foot__in img { height: 22px; width: auto; }
.foot__line { font: italic 400 24px/1 var(--serif); color: #EFEDE4; flex: 1; }
.foot__line em { color: var(--brass-light); }
.foot__meta { font-size: 13px; }
.foot__meta a { text-decoration: none; }
.foot__meta a:hover { color: var(--brass-light); }

/* ---------- Settings dialog ---------- */
.dialog { border: 0; border-radius: var(--radius); background: var(--card); padding: 34px; width: min(460px, calc(100vw - 32px)); margin: auto; color: var(--ink); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .5); }
.dialog::backdrop { background: rgba(43, 51, 52, .6); }
.dialog form { display: grid; gap: 16px; }
.dialog h2 { font: 500 34px/1.1 var(--serif); }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink-deep); color: #EFEDE4; padding: 14px 24px; border-radius: 999px; font-size: 15px; box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .4); z-index: 30; max-width: calc(100vw - 32px); }
.toast--error { background: var(--err); }

/* ---------- Customer quote page ---------- */
.quote-page { background: var(--canvas); }
.quote { max-width: 640px; margin: 0 auto; padding: 64px 24px 96px; }
.quote h1 { font: 500 clamp(40px, 6vw, 58px)/1.05 var(--serif); margin-top: 12px; }
.quote .lead { margin-top: 18px; font-size: 18px; }
.quote__card { margin-top: 30px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px; display: grid; gap: 22px; }
.quote__card dl { display: grid; gap: 14px; }
.quote__card dt { font: 500 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--meta); }
.quote__card dd { font-size: 18px; }
.quote__amount { font: 500 60px/1 var(--serif); color: var(--ink); border-top: 1px solid var(--line); padding-top: 24px; }
.quote__msg { white-space: pre-line; }
.quote__done { color: var(--ok); font-weight: 600; }
.quote .fine { text-align: left; }

/* ---------- Phones ---------- */
@media (max-width: 900px) {
  .login-hero__in { grid-template-columns: 1fr; gap: 28px; }
  .login-hero__line { font-size: 52px; }
}
@media (max-width: 700px) {
  .bar__in { padding: 14px 18px; }
  .brand img { height: 21px; }
  .brand__tag { display: none; }
  .bar__nav { gap: 18px; }
  .login-hero { padding: 36px 16px; align-items: start; }
  .login { padding: 30px 22px; }
  .hero__in { padding: 44px 18px 40px; }
  .stats__in { padding: 0 18px; }
  .stats button { padding: 20px 12px; font-size: 12px; }
  .stats strong { font-size: 32px; }
  .wrap { padding: 28px 16px 72px; }
  .grid { grid-template-columns: 1fr; }
  .card__head { padding: 22px 22px 20px 24px; flex-direction: column; }
  .card__side { flex-direction: row; align-items: center; }
  .card__name { font-size: 26px; }
  .card__body { padding: 22px; }
  .btn { padding: 0 16px; }
  .row > .btn { flex: 1 1 auto; }
  .foot__in { padding: 32px 18px; }
}

/* The serif's old-style figures make 0 and 1 look like "O" and "I": use regular numbers */
.stats strong, .quote__amount, .card__name, .title, .login h1 { font-variant-numeric: lining-nums; }

/* ---------- Settings: team members (main account only) ---------- */
.dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; }
.team { display: grid; gap: 14px; margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.team h2 { font: 500 34px/1.1 var(--serif); }
.team__list { list-style: none; display: grid; gap: 10px; }
.team__row { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.team__row strong { display: block; font-weight: 600; }
.team__row .muted { font-size: 14px; overflow-wrap: anywhere; }
.team__btns { grid-column: 1 / -1; display: flex; gap: 18px; }
.team__empty { color: var(--meta); font: italic 400 20px/1.3 var(--serif); }
.team__add { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.team__add .btn { grid-column: 1 / -1; }
.pill { font: 600 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; background: var(--canvas); color: var(--meta); white-space: nowrap; }
.pill--active { background: rgba(79, 107, 85, .14); color: var(--ok); }
.pill--invited { background: rgba(169, 139, 93, .18); color: var(--brass-dark); }
.link { background: none; border: 0; padding: 4px 0; font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
.link:hover { color: var(--brass-dark); }
.link--danger { color: var(--err); }
@media (max-width: 700px) { .team__add { grid-template-columns: 1fr; } }