/* Marandari · base styles (starter). Replace once the brand identity is defined. */
:root{
  --paper:#f6f4ef;
  --ink:#1f2329;
  --muted:#8a8f99;
  --gold:#b08d57;
  --line:#e2ddd2;
  --navy:#1b2336;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:'Montserrat',Helvetica,Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }

.wrap{ max-width:760px; margin:0 auto; padding:0 28px; }

/* Hero */
.hero{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.wordmark{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300; font-size:clamp(46px,9vw,86px); letter-spacing:.12em;
  line-height:1; color:var(--ink);
}
.role{ margin-top:14px; font-size:11px; letter-spacing:.42em; font-weight:500; color:var(--gold); text-transform:uppercase; }
.lead{ margin-top:26px; max-width:30em; font-size:15px; color:#4a4e57; }
.divider{ width:54px; height:2px; background:var(--gold); margin:30px auto; }

/* Buttons / links */
.btn{
  display:inline-block; margin-top:6px; padding:13px 26px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:#fff; background:var(--ink); text-decoration:none; border-radius:2px;
  transition:background .2s ease;
}
.btn:hover{ background:var(--gold); }
.link-soft{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.link-soft:hover{ color:var(--gold); }

/* Footer */
.foot{ position:fixed; bottom:0; left:0; right:0; padding:18px 28px; display:flex; justify-content:space-between; font-size:9px; letter-spacing:.08em; color:var(--muted); }

/* Client area */
.portal{ min-height:100vh; padding:80px 0 120px; }
.eyebrow{ font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.portal h1{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:400; font-size:clamp(32px,6vw,52px); letter-spacing:.06em; margin-top:10px; }
.portal p.sub{ margin-top:12px; font-size:14px; color:#4a4e57; max-width:34em; }
.cards{ margin-top:40px; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.card{
  border:1px solid var(--line); background:#fff; padding:22px 22px 20px;
  text-decoration:none; color:inherit; display:block; transition:border-color .2s, transform .2s;
}
.card:hover{ border-color:var(--gold); transform:translateY(-2px); }
.card .pname{ font-family:'Cormorant Garamond',Georgia,serif; font-size:22px; color:var(--ink); }
.card .pmeta{ margin-top:6px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.card .status{ margin-top:14px; font-size:10px; letter-spacing:.1em; color:var(--gold); }

@media (max-width:560px){
  .foot{ position:static; justify-content:center; gap:14px; flex-wrap:wrap; text-align:center; }
}

/* ===================== Client dashboard ===================== */
.topbar{ position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:15px 28px; background:rgba(246,244,239,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.topbar .tb-brand{ font-family:'Cormorant Garamond',Georgia,serif; font-size:21px; letter-spacing:.1em; color:var(--ink); }
.topbar .tb-brand span{ color:var(--muted); font-family:'Montserrat',sans-serif; font-size:9px; letter-spacing:.24em; text-transform:uppercase; margin-left:10px; }
.topbar .tb-right{ display:flex; align-items:center; gap:18px; }
.topbar .tb-client{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.topbar a.logout{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.topbar a.logout:hover{ color:var(--ink); }
.topbar .tb-greet{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

.dash{ max-width:920px; margin:0 auto; padding:46px 28px 110px; }
.dash-head{ display:flex; align-items:center; gap:18px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.dash-head .crescent{ width:40px; height:40px; flex:none; color:var(--gold); }
.dash-head h1{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:400; font-size:clamp(34px,6vw,54px); letter-spacing:.04em; line-height:1; }
.dash-head .meta{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:9px; }

.section{ margin-top:46px; }
.section > h2{ font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--navy); font-weight:700; padding-bottom:12px; border-bottom:1px solid var(--line); margin:0; }
.section > .hint{ font-size:11px; color:var(--muted); margin-top:8px; }

.doc-grid,.del-grid{ margin-top:20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:16px; }
.doc-card,.file-card{ display:flex; gap:14px; align-items:flex-start; padding:20px; background:#fff; border:1px solid var(--line);
  text-decoration:none; color:inherit; transition:border-color .2s, transform .2s, box-shadow .2s; }
.doc-card:hover,.file-card:hover{ border-color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 24px rgba(31,35,41,.06); }
.doc-card .ic,.file-card .ic{ width:30px; height:38px; flex:none; color:var(--gold); }
.doc-card .t,.file-card .t{ font-size:14px; font-weight:600; color:var(--ink); }
.doc-card .d,.file-card .d{ font-size:11px; color:var(--muted); margin-top:3px; }
.doc-card .open{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-top:12px; font-weight:600; }

.conditions{ margin-top:20px; background:#fff; border:1px solid var(--line); padding:28px 30px; }
.terms2{ list-style:none; counter-reset:t; margin:0; padding:0; }
.terms2 li{ position:relative; padding-left:32px; margin-bottom:13px; font-size:12.5px; line-height:1.6; color:#4a4e57; counter-increment:t; }
.terms2 li:last-child{ margin-bottom:0; }
.terms2 li::before{ content:counter(t); position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%;
  background:var(--navy); color:#fff; font-size:9px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.terms2 b{ color:var(--ink); font-weight:600; }

.accept-box{ margin-top:18px; background:#faf7f1; border:1px solid #ead9be; padding:22px 24px; }
.accept-box .chk{ display:flex; gap:11px; align-items:flex-start; font-size:12.5px; color:#4a4e57; cursor:pointer; }
.accept-box .chk input{ margin-top:2px; width:17px; height:17px; flex:none; accent-color:var(--gold); cursor:pointer; }
.accept-box .row{ margin-top:16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.accept-box input[type=text]{ flex:1; min-width:200px; padding:12px 14px; border:1px solid var(--line); background:#fff; font:inherit; font-size:12.5px; color:var(--ink); }
.accept-box input[type=text]::placeholder{ color:#b7bcc4; }
.btn-accept{ padding:13px 26px; border:none; background:var(--ink); color:#fff; font:inherit; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; cursor:pointer; transition:background .2s; }
.btn-accept:hover:not(:disabled){ background:var(--gold); }
.btn-accept:disabled{ opacity:.35; cursor:not-allowed; }
.accept-as{ flex:1; min-width:180px; font-size:12.5px; color:var(--muted); }
.accept-as b{ color:var(--ink); font-weight:600; }

.accepted-chip{ margin-top:20px; display:flex; align-items:center; gap:12px; padding:15px 20px; background:#eef3ec; border:1px solid #cfe0c8; color:#3c5a36; font-size:12.5px; }
.accepted-chip svg{ width:20px; height:20px; flex:none; color:#5a8a4e; }
.accepted-chip b{ font-weight:600; }

.state{ margin-top:20px; padding:46px 28px; text-align:center; border:1px dashed var(--line); background:#fbfaf7; }
.state svg{ width:32px; height:32px; color:var(--muted); margin-bottom:14px; }
.state .l{ font-size:13px; color:#6a6f79; }
.state .s{ font-size:11px; color:var(--muted); margin-top:6px; }

/* Reference cards: pantone swatch + image */
.swatch-card{ background:#fff; border:1px solid var(--line); overflow:hidden; }
.swatch-card .sw{ height:104px; }
.swatch-card .sw-info{ padding:16px 18px; }
.swatch-card .sw-info .t{ font-size:13px; font-weight:600; color:var(--ink); letter-spacing:.04em; }
.swatch-card .sw-info .d{ font-size:11px; color:var(--muted); margin-top:3px; }
.img-card{ display:block; background:#fff; border:1px solid var(--line); overflow:hidden; text-decoration:none; color:inherit;
  transition:border-color .2s, transform .2s, box-shadow .2s; }
.img-card:hover{ border-color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 24px rgba(31,35,41,.06); }
.img-card img{ display:block; width:100%; height:160px; object-fit:cover; }
.img-card .cap{ padding:15px 18px; }
.img-card .cap .t{ font-size:13px; font-weight:600; color:var(--ink); }
.img-card .cap .d{ font-size:11px; color:var(--muted); margin-top:3px; }