/* The Pew Estate Digital — public site. Brass-on-stone: brass hardware on a stone estate. */
:root{
  --stone:#EAE8E2; --stone-2:#E1DFD6; --stone-3:#D3D0C4;
  --charcoal:#111110; --ink:#1D1D1B; --ink-dim:#5B5847; --ink-faint:#8B876F;
  --brass:#B99A5B; --brass-2:#8E7440; --brass-soft:#EEE2C4;
  --forest:#33422F; --forest-2:#22301F; --forest-soft:#DCE3D5;
  --good:#33422F;
  --line:#D3D0C6; --line-soft:#DEDCD3;
  --surface:#F4F3EE; --surface-raised:#FFFFFF;
  --shadow:0 1px 2px rgba(28,29,30,.04), 0 14px 32px -16px rgba(28,29,30,.20);
  --r-lg:20px; --r-md:12px; --r-sm:8px;
  --measure:66ch;
}
@media (prefers-color-scheme: dark){
  :root{
    --stone:#17181A; --stone-2:#1E2023; --stone-3:#282A2E;
    --charcoal:#F2F0E9; --ink:#E7E4D9; --ink-dim:#ABA795; --ink-faint:#75725F;
    --brass:#D8BC7E; --brass-2:#EAD6A3; --brass-soft:#3A331F;
    --forest:#8FAB86; --forest-2:#B0C7A6; --forest-soft:#25301F;
    --good:#8FAB86;
    --line:#2C2E32; --line-soft:#25272B;
    --surface:#101112; --surface-raised:#1A1B1D;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 18px 40px -18px rgba(0,0,0,.65);
  }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--surface); color:var(--ink);
  font:16px/1.65 "Public Sans",-apple-system,BlinkMacSystemFont,sans-serif; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Fraunces","Iowan Old Style",Georgia,serif; text-wrap:balance; color:var(--charcoal); margin:0}
p{margin:0 0 1rem; max-width:var(--measure)}
a{color:var(--brass-2)}
code,.mono,.price{font-family:"IBM Plex Mono",ui-monospace,monospace}
img{max-width:100%; display:block}
.muted{color:var(--ink-dim)}
.faint{color:var(--ink-faint)}
::selection{background:var(--brass-soft)}

/* ---- nav ---- */
.sitebar{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:1rem;
  padding:1rem clamp(1.2rem,4vw,3rem); background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid var(--line-soft)}
.sitebar .brand{display:flex; align-items:center; gap:.6rem; font-family:"Fraunces",serif; font-weight:600;
  font-size:1.02rem; color:var(--charcoal); text-decoration:none; white-space:nowrap}
.sitebar .brand em{font-style:normal; color:var(--brass-2)}
.plate{width:28px; height:28px; border-radius:7px; background:linear-gradient(155deg,var(--brass),var(--brass-2));
  color:var(--surface-raised); display:grid; place-items:center; font-family:"IBM Plex Mono",monospace;
  font-size:.65rem; font-weight:700; flex:none; box-shadow:var(--shadow)}
.sitebar nav{margin-left:auto; display:flex; align-items:center; gap:1.6rem}
.sitebar nav a{color:var(--ink-dim); text-decoration:none; font-size:.92rem; font-weight:500}
.sitebar nav a:hover, .sitebar nav a.on{color:var(--ink)}
.sitebar nav a.cta{background:var(--charcoal); color:var(--surface); padding:.55rem 1.1rem; border-radius:999px;
  font-weight:600; font-size:.86rem}
@media (prefers-color-scheme: dark){ .sitebar nav a.cta{color:var(--surface-raised)} }
.sitebar nav a.cta:hover{background:var(--brass-2)}
.navtoggle{display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:8px;
  width:38px; height:38px; align-items:center; justify-content:center; cursor:pointer}
.navtoggle span, .navtoggle span::before, .navtoggle span::after{content:"";display:block;width:16px;height:2px;
  background:var(--ink);border-radius:2px}
.navtoggle span::before{transform:translateY(-5px)}.navtoggle span::after{transform:translateY(3px)}
@media (max-width:760px){
  .sitebar nav{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start;
    gap:0; background:var(--surface-raised); border-bottom:1px solid var(--line-soft); padding:.5rem clamp(1.2rem,4vw,3rem) 1rem}
  .sitebar nav.open{display:flex}
  .sitebar nav a{padding:.7rem 0; width:100%}
  .sitebar nav a.cta{margin-top:.5rem; text-align:center}
  .navtoggle{display:flex}
}

main{display:block}

/* ---- generic section rhythm ---- */
.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(1.2rem,4vw,3rem)}
section{padding:clamp(3rem,7vw,6rem) 0}
section.tint{background:var(--stone)}
section.tint + section.tint{padding-top:0}
.kicker{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-2); font-weight:700; margin-bottom:.8rem}
.sectitle{font-size:clamp(1.6rem,3.2vw,2.3rem); margin-bottom:.9rem}
.lede{color:var(--ink-dim); font-size:1.08rem; max-width:60ch}

/* ---- hero ---- */
.hero{padding:clamp(4rem,10vw,7rem) 0 clamp(3rem,6vw,4.5rem)}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.6rem); line-height:1.06; max-width:16ch}
.hero .lede{font-size:1.18rem; margin-top:1.1rem}
.hero .actions{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.5rem; border-radius:999px;
  font-weight:600; font-size:.95rem; text-decoration:none; border:1px solid transparent; cursor:pointer; font-family:inherit}
.btn.primary{background:var(--charcoal); color:var(--surface)}
.btn.primary:hover{background:var(--brass-2)}
.btn.ghost{border-color:var(--line); color:var(--ink)}
.btn.ghost:hover{border-color:var(--brass)}
@media (prefers-color-scheme: dark){ .btn.primary{color:var(--surface-raised)} }

.factrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; margin-top:2.6rem}
.factrow div{background:var(--surface-raised); padding:1rem 1.2rem}
.factrow .l{font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); margin-bottom:.3rem}
.factrow .v{font-weight:600; font-size:.92rem}

/* ---- cards / grid ---- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:1.3rem}
@media (max-width:880px){ .grid3{grid-template-columns:1fr} .grid2{grid-template-columns:1fr} }

.card{background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.7rem;
  box-shadow:var(--shadow)}

/* ---- pricing tiers (shared with the framework doc's visual language) ---- */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.4rem}
@media (max-width:900px){ .tiers{grid-template-columns:1fr} }
.tier{background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.8rem 1.6rem 1.9rem; display:flex; flex-direction:column; box-shadow:var(--shadow); position:relative}
.tier.signature{border-color:var(--brass)}
.tier.signature::before{content:"Flagship"; position:absolute; top:-.65rem; right:1.3rem; background:var(--brass);
  color:var(--surface-raised); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  padding:.28rem .6rem; border-radius:999px}
.tier .tname{font-family:"Fraunces",serif; font-size:1.25rem; font-weight:600}
.tier .tfor{font-size:.86rem; color:var(--ink-faint); margin:.35rem 0 1.1rem; min-height:2.4em}
.tier .tprice{font-size:2.1rem; font-weight:600; font-variant-numeric:tabular-nums; line-height:1}
.tier .tprice sup{font-size:.55em; color:var(--ink-faint); font-weight:500}
.tier .tstart{font-size:.74rem; color:var(--ink-faint); margin:.4rem 0 1.2rem}
.tier ul{list-style:none; margin:0 0 1.3rem; padding:0; display:flex; flex-direction:column; gap:.6rem; flex:1}
.tier li{font-size:.9rem; color:var(--ink-dim); padding-left:1.35rem; position:relative}
.tier li::before{content:"✓"; position:absolute; left:0; color:var(--good); font-weight:700}
.tier .ttime{font-size:.78rem; color:var(--ink-faint); border-top:1px solid var(--line-soft); padding-top:1rem; margin-top:auto}
.tier .btn{margin-top:1.1rem; justify-content:center}

.allin{background:linear-gradient(155deg,var(--brass-soft),transparent 65%); border:1px solid var(--brass);
  border-radius:var(--r-md); padding:1.4rem 1.6rem; margin-top:1.8rem}
.allin .h{margin:0 0 .7rem; font-size:1rem; font-weight:700; color:var(--charcoal)}
.allin ul{margin:0; padding-left:1.2rem; columns:2; column-gap:2.2rem; font-size:.9rem; color:var(--ink-dim)}
.allin li{margin-bottom:.5rem; break-inside:avoid}
@media (max-width:640px){ .allin ul{columns:1} }

/* ---- care plans (forest, not brass — recurring/ongoing vs. the one-time build tiers) ---- */
.care{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1.6rem}
@media (max-width:700px){ .care{grid-template-columns:1fr} }
.care .card{border-top:3px solid var(--forest)}
.care .cname{font-weight:700; color:var(--forest); font-size:1.05rem}
.care .cprice{font-size:1.7rem; font-weight:600; font-variant-numeric:tabular-nums; margin:.35rem 0 1rem}
.care .cprice span{font-size:.6em; color:var(--ink-faint); font-weight:500}
.care ul{margin:0; padding-left:1.2rem; font-size:.9rem; color:var(--ink-dim); display:flex; flex-direction:column; gap:.5rem}

/* ---- addons table ---- */
.tblwrap{overflow-x:auto; margin-top:1.6rem}
table.svc{width:100%; border-collapse:collapse; font-size:.92rem}
table.svc th{text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint);
  padding:.6rem .9rem; border-bottom:1px solid var(--line)}
table.svc td{padding:.85rem .9rem; border-bottom:1px solid var(--line-soft); color:var(--ink-dim); vertical-align:top}
table.svc tr td:first-child{color:var(--ink); font-weight:600}
table.svc .p{font-family:"IBM Plex Mono",monospace; color:var(--charcoal); white-space:nowrap}

/* ---- work / portfolio ---- */
.workcard{background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.8rem;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.7rem}
.workcard .wtag{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--forest)}
.workcard h3{font-size:1.3rem}
.workcard ul{margin:.4rem 0 0; padding-left:1.1rem; font-size:.87rem; color:var(--ink-dim)}
.workcard li{margin-bottom:.35rem}

/* ---- quote ---- */
.quote{border-left:3px solid var(--brass); padding-left:1.3rem; font-family:"Fraunces",serif; font-size:1.25rem;
  color:var(--charcoal); font-weight:500; max-width:52ch; margin:0}
.quote cite{display:block; font-family:"Public Sans",sans-serif; font-style:normal; font-size:.82rem;
  color:var(--ink-faint); margin-top:.8rem}

/* ---- callouts ---- */
.callout{background:var(--surface-raised); border:1px solid var(--line); border-left:3px solid var(--brass);
  border-radius:var(--r-sm); padding:1rem 1.2rem; margin:1.4rem 0; font-size:.92rem; color:var(--ink-dim)}
.callout b{color:var(--ink)}

/* ---- forms ---- */
form.stack{display:flex; flex-direction:column; gap:1.1rem; max-width:640px}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media (max-width:600px){ .frow{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:.4rem}
.field label{font-size:.78rem; font-weight:600; color:var(--ink-dim)}
.field .hint{font-size:.78rem; color:var(--ink-faint); font-weight:400}
input,select,textarea{background:var(--surface-raised); border:1px solid var(--line); color:var(--ink);
  padding:.75rem .9rem; border-radius:var(--r-sm); font:inherit; font-size:.96rem; width:100%}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-soft)}
textarea{min-height:110px; resize:vertical}
.checks{display:flex; flex-wrap:wrap; gap:.6rem}
.chk{display:flex; align-items:center; gap:.5rem; border:1px solid var(--line); border-radius:999px;
  padding:.45rem .9rem; font-size:.86rem; color:var(--ink-dim); cursor:pointer; background:var(--surface-raised)}
.chk input{width:auto; accent-color:var(--brass)}
.hp{position:absolute; left:-9999px}
#formmsg{margin-top:1rem; padding:.85rem 1rem; border-radius:var(--r-sm); background:var(--surface-raised);
  border:1px solid var(--line); font-size:.92rem; display:none}

/* ---- footer ---- */
.sitefoot{border-top:1px solid var(--line-soft); padding:3rem clamp(1.2rem,4vw,3rem) 2rem; background:var(--stone)}
.sitefoot .cols{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.4rem}
@media (max-width:700px){ .sitefoot .cols{grid-template-columns:1fr; gap:1.6rem} }
.sitefoot .brand{display:flex; align-items:center; gap:.55rem; font-family:"Fraunces",serif; font-weight:600; margin-bottom:.7rem}
.sitefoot .brand em{font-style:normal; color:var(--brass-2)}
.sitefoot p{font-size:.85rem}
.sitefoot .h{font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); margin-bottom:.7rem; font-weight:700}
.sitefoot a{display:block; color:var(--ink-dim); text-decoration:none; font-size:.88rem; margin-bottom:.5rem}
.sitefoot a:hover{color:var(--brass-2)}
.sitefoot .legal{max-width:1180px; margin:2rem auto 0; padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--ink-faint)}

.taglist{display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0}
.taglist span{font-family:"IBM Plex Mono",monospace; font-size:.74rem; background:var(--stone-2); color:var(--ink-dim);
  padding:.3rem .7rem; border-radius:999px; border:1px solid var(--line)}