/* Norvale Advocates: a traditional law-firm look. Ivory paper, navy ink, brass details, serif type, square corners. */
:root{
  --paper:#f6f1e7;--paper-2:#efe8da;--sheet:#fffdf8;
  --ink:#14213d;--ink-2:#3d4a63;--ink-3:#7a8296;
  --rule:#d8cfbd;--rule-2:#c3b79f;
  --brass:#9a7b3f;--brass-2:#b8955a;--claret:#7b2d36;
  --ok:#2f6b4f;
  --serif:'Cormorant Garamond','Iowan Old Style',Georgia,'Times New Roman',serif;
  --sans:'Source Sans 3','Segoe UI',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--ink)}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* demonstration notice */
.notice{background:var(--ink);color:#e9e2d2;font-size:13.5px;letter-spacing:.01em}
.notice .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px}
.notice strong{color:#fff;font-weight:600}
.notice a{color:var(--brass-2);text-decoration:none;font-weight:600;white-space:nowrap}
.notice em{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid #4a5674;padding:2px 7px;margin-right:10px;color:#cfc5ad}

/* masthead */
.mast{background:var(--paper);border-bottom:1px solid var(--rule)}
.mast .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:96px}
.mast .left,.mast .right{display:flex;gap:28px;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.mast .right{justify-content:flex-end}
.mast nav a{text-decoration:none;color:var(--ink-2)}
.mast nav a:hover{color:var(--ink)}
.crest{text-align:center;text-decoration:none;color:var(--ink)}
.crest .name{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.crest .est{display:block;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass);margin-top:6px}
.ruled{height:5px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:3px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1px solid var(--ink);transition:background .2s,color .2s}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#0b1529}
.btn-plain{color:var(--ink)}
.btn-plain:hover{background:var(--ink);color:var(--paper)}

/* opening */
.opening{padding:72px 0 80px}
.opening .wrap{display:grid;grid-template-columns:1fr 470px;gap:64px;align-items:start}
.overline{font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);display:flex;align-items:center;gap:14px}
.overline::after{content:'';flex:0 0 56px;height:1px;background:var(--brass)}
.opening h1{font-family:var(--serif);font-weight:500;font-size:clamp(44px,5.6vw,76px);line-height:1.02;letter-spacing:-.01em;margin:22px 0 26px}
.opening h1 i{color:var(--claret)}
.opening .lead{font-size:19px;color:var(--ink-2);max-width:560px;font-family:var(--serif);font-size:23px;line-height:1.45}
.opening .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.ledger{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;border-top:1px solid var(--rule)}
.ledger div{padding:18px 18px 0 0}
.ledger div+div{padding-left:18px;border-left:1px solid var(--rule)}
.ledger b{display:block;font-family:var(--serif);font-size:34px;font-weight:600;line-height:1}
.ledger span{font-size:13.5px;color:var(--ink-3)}

/* enquiry desk */
.desk{background:var(--sheet);border:1px solid var(--rule-2);box-shadow:8px 8px 0 var(--paper-2);display:flex;flex-direction:column;height:640px;max-height:82vh}
.desk-head{padding:18px 22px 14px;border-bottom:3px double var(--rule-2)}
.desk-head .t{font-family:var(--serif);font-size:24px;font-weight:600}
.desk-head .s{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ink-3);letter-spacing:.04em;margin-top:2px}
.desk-head .s b{color:var(--ok);font-weight:600}
.log{flex:1;overflow-y:auto;padding:6px 22px 14px}
.entry{padding:14px 0;border-bottom:1px solid var(--paper-2);animation:fade .3s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.entry .who{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);display:flex;justify-content:space-between}
.entry.firm .who{color:var(--brass)}
.entry .body{margin-top:4px;font-size:15.5px;white-space:pre-wrap;word-wrap:break-word}
.entry.client .body{font-family:var(--serif);font-size:19px;font-style:italic;color:var(--ink-2)}
.entry.confirmed{border-left:3px solid var(--ok);padding-left:12px}
.choices{display:flex;flex-direction:column;gap:6px;padding:4px 0 10px}
.choices button,.choices a{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;padding:10px 14px;border:1px solid var(--rule-2);background:var(--sheet);font-size:15px;color:var(--ink);text-decoration:none;transition:background .15s,border-color .15s}
.choices button::after,.choices a::after{content:'→';color:var(--brass)}
.choices button:hover,.choices a:hover{background:var(--paper);border-color:var(--ink)}
.choices .strong{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.choices .strong::after{color:var(--brass-2)}
.choices .strong:hover{background:#0b1529}
.pending{padding:14px 0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.pending span{animation:dots 1.2s infinite}
@keyframes dots{0%,100%{opacity:.25}50%{opacity:1}}
.compose{display:flex;border-top:1px solid var(--rule-2)}
.compose input{flex:1;border:0;background:var(--sheet);padding:0 22px;height:58px;font:inherit;font-size:16px;color:var(--ink)}
.compose input:focus{outline:none;background:#fff}
.compose button{padding:0 22px;background:var(--ink);color:var(--paper);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.compose button:disabled{opacity:.55;cursor:default}
.desk-foot{font-size:12px;color:var(--ink-3);padding:9px 22px;border-top:1px solid var(--paper-2);background:var(--paper)}

/* sections */
.section{padding:88px 0;border-top:1px solid var(--rule)}
.section h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px,3.8vw,50px);line-height:1.08;margin-top:14px}
.section .intro{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;margin-bottom:44px}
.section .intro p{color:var(--ink-2);font-size:17.5px}
.practice{border-top:2px solid var(--ink)}
.practice li{list-style:none;display:grid;grid-template-columns:70px 1.2fr 1.6fr 160px;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule)}
.practice .no{font-family:var(--serif);font-size:22px;color:var(--brass)}
.practice h3{font-family:var(--serif);font-size:27px;font-weight:600;line-height:1.15}
.practice p{color:var(--ink-2);font-size:15.5px}
.practice .fee{text-align:right;font-size:14px;color:var(--ink-3)}
.practice .fee b{display:block;font-family:var(--serif);font-size:24px;color:var(--ink);font-weight:600}
.counsel{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.counsel div{padding:26px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:grid;grid-template-columns:58px 1fr;gap:16px;align-items:center}
.mono{width:58px;height:58px;border:1px solid var(--brass);display:grid;place-items:center;font-family:var(--serif);font-size:22px;color:var(--brass);letter-spacing:.06em}
.counsel b{font-family:var(--serif);font-size:22px;font-weight:600;display:block;line-height:1.2}
.counsel span{font-size:14px;color:var(--ink-3)}
.process{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.process div{padding:24px 24px 0 0}
.process div+div{padding-left:24px;border-left:1px solid var(--rule)}
.process .n{font-family:var(--serif);font-size:15px;letter-spacing:.2em;color:var(--brass);text-transform:uppercase}
.process h3{font-family:var(--serif);font-size:25px;font-weight:600;margin-top:8px;line-height:1.15}
.process p{color:var(--ink-2);font-size:15px;margin-top:8px}
.backoffice{margin-top:48px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:28px 30px;background:var(--ink);color:#e9e2d2}
.backoffice b{font-family:var(--serif);font-size:26px;font-weight:500;color:#fff;display:block}
.backoffice p{font-size:15px;max-width:640px}
.backoffice .btn{border-color:var(--brass-2);color:var(--brass-2)}
.backoffice .btn:hover{background:var(--brass-2);color:var(--ink)}
.colophon{padding:34px 0;border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink-3)}
.colophon .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* intake form */
.paper{max-width:760px;margin:56px auto 80px;background:var(--sheet);border:1px solid var(--rule-2);box-shadow:8px 8px 0 var(--paper-2);padding:48px 52px}
.paper h1{font-family:var(--serif);font-weight:500;font-size:44px;line-height:1.05;margin-top:10px}
.paper .meta{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:28px 0 34px;border-top:2px solid var(--ink)}
.paper .meta div{padding:12px 0;border-bottom:1px solid var(--rule)}
.paper .meta div:nth-child(odd){padding-right:16px}
.paper .meta div:nth-child(even){padding-left:16px;border-left:1px solid var(--rule)}
.paper .meta span{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.paper .meta b{font-family:var(--serif);font-size:20px;font-weight:600}
.flag{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--claret);padding:2px 8px;vertical-align:3px;margin-left:8px}
fieldset{border:0;margin-top:26px}
legend,.lbl{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:600;margin-bottom:8px;display:block}
.paper input[type=text],.paper input[type=date],.paper select,.paper textarea{width:100%;border:0;border-bottom:1px solid var(--ink-3);background:transparent;font:inherit;font-size:18px;padding:8px 2px;color:var(--ink);font-family:var(--serif)}
.paper textarea{min-height:96px;resize:vertical;border:1px solid var(--rule-2);padding:10px 12px}
.paper input:focus,.paper select:focus,.paper textarea:focus{outline:none;border-color:var(--brass)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:26px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.checks label{display:flex;gap:10px;align-items:center;font-size:16px;cursor:pointer}
.checks input{width:17px;height:17px;accent-color:var(--ink)}
.sign{margin-top:34px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:22px;border-top:3px double var(--rule-2)}
.sign small{color:var(--ink-3);font-size:13px;max-width:380px}
.done{text-align:center;padding:18px 0}
.done .seal{width:84px;height:84px;margin:0 auto 18px;border:2px solid var(--ok);border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:15px;letter-spacing:.14em;color:var(--ok);text-transform:uppercase}
.done h2{font-family:var(--serif);font-weight:500;font-size:36px}
.done p{color:var(--ink-2);margin-top:8px}
.done .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.err{color:var(--claret);font-size:14px;margin-top:14px}

/* firm dashboard: dense, tabular */
.board{padding:34px 0 72px}
.board-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;padding-bottom:18px;border-bottom:2px solid var(--ink)}
.board-head h1{font-family:var(--serif);font-weight:500;font-size:40px;line-height:1}
.board-head p{color:var(--ink-2);margin-top:6px}
.key{display:flex;gap:18px;font-size:13px;color:var(--ink-3);flex-wrap:wrap}
.key span{display:inline-flex;gap:7px;align-items:center}
.sw{width:12px;height:12px;border:1px solid var(--rule-2);background:var(--sheet);display:inline-block}
.sw.you{background:#f3e3bd;border-color:var(--brass)}
.sw.pri{background:var(--claret);border-color:var(--claret)}
.figures{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--rule)}
.figures div{padding:18px 18px 18px 0}
.figures div+div{padding-left:18px;border-left:1px solid var(--rule)}
.figures span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.figures b{display:block;font-family:var(--serif);font-size:38px;font-weight:600;line-height:1.1}
.figures small{font-size:13px;color:var(--ink-3)}
.board h2{font-family:var(--serif);font-weight:600;font-size:24px;margin:34px 0 4px}
.board .sub{font-size:14px;color:var(--ink-3);margin-bottom:12px}
table.tab{width:100%;border-collapse:collapse;background:var(--sheet);border:1px solid var(--rule-2);font-size:14.5px}
.tab th{text-align:left;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:10px 12px;border-bottom:2px solid var(--ink);background:var(--paper)}
.tab td{padding:11px 12px;border-bottom:1px solid var(--paper-2);vertical-align:top}
.tab tr.you td{background:#fbf3df}
.tab tr.you td:first-child{box-shadow:inset 3px 0 0 var(--brass)}
.tab .nm{font-family:var(--serif);font-size:18px;font-weight:600}
.tab .muted{color:var(--ink-3);font-size:13px}
.tag{display:inline-block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border:1px solid var(--rule-2);color:var(--ink-2);white-space:nowrap}
.tag.pri{background:var(--claret);border-color:var(--claret);color:#fff}
.tag.ok{border-color:var(--ok);color:var(--ok)}
.tag.wait{border-color:var(--brass);color:var(--brass)}
.tag.you{background:var(--brass);border-color:var(--brass);color:#fff}
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--rule-2);background:var(--sheet)}
.stage{border-right:1px solid var(--rule)}
.stage:last-child{border-right:0}
.stage h3{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px;border-bottom:2px solid var(--ink);background:var(--paper);display:flex;justify-content:space-between}
.stage ul{list-style:none;padding:6px 0;min-height:120px}
.stage li{padding:8px 12px;border-bottom:1px solid var(--paper-2);font-size:14px}
.stage li b{font-family:var(--serif);font-size:17px;font-weight:600}
.stage li.you{background:#fbf3df;box-shadow:inset 3px 0 0 var(--brass)}
.split{display:grid;grid-template-columns:1.3fr 1fr;gap:28px}
.transcript{background:var(--sheet);border:1px solid var(--rule-2);max-height:430px;overflow-y:auto;padding:4px 18px}
.transcript .entry .body{font-size:14.5px}
.transcript .entry.client .body{font-size:17px}
.transcript .entry.system .who{color:var(--ok)}
.empty{padding:18px;border:1px dashed var(--rule-2);color:var(--ink-3);font-size:14.5px;text-align:center;background:var(--sheet)}

@media (max-width:1040px){
  .opening .wrap{grid-template-columns:1fr}
  .desk{height:600px}
  .mast .wrap{grid-template-columns:1fr auto}
  .mast .left{display:none}
  .practice li{grid-template-columns:50px 1fr 140px}
  .practice li p{grid-column:2/3}
  .counsel{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr}
  .process div:nth-child(3){padding-left:0;border-left:0}
  .split{grid-template-columns:1fr}
  .stages{grid-template-columns:1fr 1fr}
  .stage:nth-child(2){border-right:0}
}
@media (max-width:680px){
  .wrap{padding:0 18px}
  .mast .wrap{height:76px;grid-template-columns:1fr}
  .mast .right{display:none}
  .crest{text-align:left}
  .crest .name{font-size:23px}
  .opening{padding:44px 0 56px}
  .opening .lead{font-size:20px}
  .ledger{grid-template-columns:1fr 1fr 1fr}
  .ledger b{font-size:26px}
  .section .intro{grid-template-columns:1fr;gap:16px}
  .practice li{grid-template-columns:1fr;gap:6px}
  .practice li p{grid-column:auto}
  .practice .fee{text-align:left}
  .counsel,.process{grid-template-columns:1fr}
  .process div,.process div+div{padding:20px 0;border-left:0;border-bottom:1px solid var(--rule)}
  .desk{height:560px;box-shadow:5px 5px 0 var(--paper-2)}
  .paper{padding:30px 22px;margin:28px 0 56px}
  .row2,.checks{grid-template-columns:1fr}
  .figures{grid-template-columns:1fr 1fr}
  .figures div:nth-child(3){padding-left:0;border-left:0}
  .stages{grid-template-columns:1fr}
  .stage{border-right:0;border-bottom:1px solid var(--rule)}
  .tab{font-size:13.5px}
  .tab .hide-sm{display:none}
  .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.intro-note{color:var(--ink-2);font-size:15.5px;margin-bottom:6px}
.serif-val{display:block;font-family:var(--serif);font-size:19px;font-weight:600;padding:8px 2px;border-bottom:1px solid var(--rule)}
@media (max-width:680px){table.tab{table-layout:fixed}.tab th,.tab td{padding:9px 7px;overflow-wrap:anywhere}.tab .tag{white-space:normal}.tab .nm{font-size:16px}}