/* Rooted Works Co. shared styles for inner pages. Matches the homepage: cream ground, brown ink, sage accent, Garamond type. */
:root{
  --bg:#F8F2EB; --band:#F1E8DE; --ink:#3E2F2A; --muted:#66564D; --line:#DDD0C4;
  --mono:#9C8B80; --sprig:#505D3D; --accent:#505D3D; --accent-ink:#F8F2EB; --card:#FFFCF8;
  --display:'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --body:'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --wrap:1080px; --read:700px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#211A17; --band:#2A211D; --ink:#F1E8DE; --muted:#C4B5A9; --line:#463A34;
  --mono:#BFB0A5; --sprig:#A7B48F; --accent:#A7B48F; --accent-ink:#1D1B14; --card:#2E2420; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#211A17; --band:#2A211D; --ink:#F1E8DE; --muted:#C4B5A9; --line:#463A34;
  --mono:#BFB0A5; --sprig:#A7B48F; --accent:#A7B48F; --accent-ink:#1D1B14; --card:#2E2420; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:19px; line-height:1.55}
img{max-width:100%; height:auto}
.wrap{max-width:var(--wrap); margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.read{max-width:var(--read)}
h1,h2,h3{font-family:var(--display); font-weight:500; line-height:1.1; text-wrap:balance; margin:0}
h1{font-size:clamp(40px, 6vw, 62px)}
h2{font-size:clamp(30px, 4.2vw, 44px)}
h3{font-size:25px}
p{margin:0}
a{color:var(--accent)}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.eyebrow{font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.lede{font-size:21px; color:var(--muted); max-width:62ch}
section{padding-block:72px}
section + section{border-top:1px solid var(--line)}
.stack{display:flex; flex-direction:column; gap:20px}
.band{background:var(--band)}

/* Brand */
.brand{display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--ink)}
.mono{position:relative; display:flex; align-items:baseline; font-family:var(--display); font-weight:400; font-size:50px; line-height:1; color:var(--mono)}
.mono .w{position:relative; font-size:.74em; margin-left:-.167em; top:-.07em}
.mono svg{position:absolute; left:-.11em; bottom:-.08em; width:.36em; height:.47em; stroke:var(--sprig)}
.word{display:flex; flex-direction:column}
.word .name{font-size:24px; font-weight:500; line-height:1; letter-spacing:.01em}
.word .tag{font-family:var(--display); font-style:italic; font-size:15px; color:var(--muted)}

header.site{position:sticky; top:env(safe-area-inset-top, 0px); z-index:5; background:var(--bg); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px; flex-wrap:wrap}
nav{display:flex; gap:22px; flex-wrap:wrap; font-size:17px}
nav a{color:var(--ink); text-decoration:none}
nav a:hover, nav a[aria-current="page"]{color:var(--accent)}
nav .cta{color:var(--accent); font-weight:500}

.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:4px; font-family:var(--body); font-size:18px; text-decoration:none; border:1px solid var(--accent); cursor:pointer}
.btn.primary{background:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--accent)}
.btns{display:flex; gap:14px; flex-wrap:wrap}
.crumb{font-size:16px; text-decoration:none; color:var(--muted)}
.crumb:hover{color:var(--accent)}
.more{text-decoration:none}

/* Hero with tally (industry pages) */
.hero{padding-block:56px 72px}
.hero .wrap{display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:56px; align-items:center}
.hero .stack{gap:22px}
.tally{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:26px 28px}
.tally h2{font-size:24px; margin-bottom:14px}
.tally ul{list-style:none; margin:0; padding:0}
.tally li{display:flex; justify-content:space-between; gap:12px; padding-block:9px; border-bottom:1px dotted var(--line); font-size:17px}
.tally li span:last-child{font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap}
.tally .total{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:14px; font-family:var(--display); font-size:24px}
.tally .total strong{font-weight:500; color:var(--accent); font-variant-numeric:tabular-nums}
.tally .yr{font-size:15px; color:var(--muted); text-align:right}
.tally .note{font-size:14px; color:var(--muted); margin-top:10px; font-style:italic}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin-top:36px}
.card{display:flex; flex-direction:column; gap:10px; padding:22px 24px; background:var(--card); border:1px solid var(--line); border-radius:6px}
.card p{font-size:17px; color:var(--muted)}
.card .tools{margin-top:auto; padding-top:6px; font-size:14px; color:var(--muted); font-style:italic}
.works{margin-top:32px; display:flex; gap:10px 16px; flex-wrap:wrap; align-items:baseline; font-size:16px; color:var(--muted)}
.works strong{font-weight:500; color:var(--ink); letter-spacing:.08em; text-transform:uppercase; font-size:13px}

/* Steps: a real sequence */
.steps{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:28px; margin-top:40px; padding:0; list-style:none; counter-reset:step}
.steps li{display:flex; flex-direction:column; gap:10px; border-top:2px solid var(--accent); padding-top:18px; counter-increment:step}
.steps li::before{content:counter(step); font-family:var(--display); font-size:20px; color:var(--accent)}
.steps p{font-size:17px; color:var(--muted)}
.control{margin-top:40px; border:1px solid var(--line); border-radius:6px; padding:24px 28px; background:var(--card); max-width:720px}
.control h3{margin-bottom:8px}

/* Proof */
.proof{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:56px; align-items:start}
.proof p + p{margin-top:16px}

/* FAQ */
.faq{margin-top:28px; border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; padding-block:18px; font-family:var(--display); font-size:24px; font-weight:500}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--accent); font-size:26px; line-height:1}
details[open] summary::after{content:"\2212"}
details p{padding-bottom:20px; color:var(--muted); max-width:68ch}

/* Other industries */
.others{display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:20px; font-size:19px}

/* About */
.about{display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:56px; align-items:start}
.story p + p{margin-top:18px}
.story h2{margin-block:40px 16px}
.story .sign{font-family:var(--display); font-style:italic; font-size:26px}
.figure{position:sticky; top:110px; margin:0}
.figure img{display:block; width:100%; border-radius:6px}
.figure figcaption{margin-top:10px; font-size:15px; color:var(--muted)}
.support{margin-top:28px; padding:18px 22px; border:1px solid var(--line); border-radius:6px; background:var(--card); font-size:17px; color:var(--muted)}

/* Blog index */
.posts{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; margin-top:36px}
.post{display:flex; flex-direction:column; gap:12px; padding:26px 28px; background:var(--card); border:1px solid var(--line); border-radius:6px; color:var(--ink); text-decoration:none}
.post:hover{border-color:var(--accent)}
.post h2{font-size:28px}
.post p{font-size:17px; color:var(--muted)}
.post .meta, .meta{font-size:15px; color:var(--muted)}
.post .more{margin-top:auto; color:var(--accent); font-size:16px}

/* Article */
.article{padding-block:48px 72px}
.article header{display:flex; flex-direction:column; gap:16px; margin-bottom:36px}
.article-body{font-size:20px; line-height:1.65}
.article-body > * + *{margin-top:20px}
.article-body h2{font-size:clamp(28px, 3.6vw, 36px); margin-top:44px}
.article-body ul, .article-body ol{padding-left:1.2em}
.article-body li + li{margin-top:8px}
.article-body blockquote{margin:28px 0; padding:4px 0 4px 22px; border-left:2px solid var(--accent); font-family:var(--display); font-style:italic; font-size:26px; line-height:1.35}
.stat-callout{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:18px; align-items:center; padding:22px 24px; background:var(--card); border:1px solid var(--line); border-radius:6px; margin-block:28px}
.stat-num{font-family:var(--display); font-size:52px; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums}
.stat-text{font-size:17px; color:var(--muted)}
.stat-source{display:block; margin-top:6px; font-size:14px; font-style:italic}
.flow-diagram{padding:22px 24px; background:var(--card); border:1px solid var(--line); border-radius:6px; margin-block:28px; overflow-x:auto}
.flow-title{font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.flow-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-block:8px; border-bottom:1px dotted var(--line); font-size:17px}
.flow-row:last-child{border-bottom:0}
.flow-box{padding:6px 12px; border:1px solid var(--line); border-radius:4px; background:var(--bg)}
.flow-box.manual{border-color:var(--accent)}
.flow-arrow{color:var(--accent)}
.flow-label{font-size:15px; color:var(--muted); font-style:italic}
.report-preview{padding:22px 24px; background:var(--card); border:1px solid var(--line); border-radius:6px; margin-block:28px; font-size:17px}
.rp-header{font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.rp-row + .rp-row{margin-top:12px}
.rp-label{font-weight:500; color:var(--ink)}
.finding-card{padding:20px 24px; background:var(--card); border:1px solid var(--line); border-radius:6px; margin-block:24px}
.finding-label{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.finding-headline{font-family:var(--display); font-size:26px; line-height:1.2; margin-block:6px}
.finding-detail{font-size:17px; color:var(--muted)}
.article-cta{margin-top:48px; padding:30px 32px; background:var(--band); border-radius:6px; display:flex; flex-direction:column; gap:14px; align-items:flex-start}

/* Contact */
.contact .wrap{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:56px}
form{display:grid; gap:16px}
.row{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px}
label{display:flex; flex-direction:column; gap:6px; font-size:16px; color:var(--muted)}
input, select, textarea{font:inherit; font-size:18px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:4px; padding:12px 14px; min-height:48px}
textarea{min-height:130px; resize:vertical}
.status{font-size:17px; min-height:1.5em}
.status.ok{color:var(--accent)}
.email{font-family:var(--display); font-size:24px; user-select:all}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

footer{border-top:1px solid var(--line); padding-block:32px; font-size:16px; color:var(--muted)}
footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
footer .brand .mono{font-size:38px}
footer .brand .word .name{font-size:19px}
footer .brand .word .tag{font-size:13px}
footer nav{font-size:16px}

@media (max-width: 900px){
  .steps{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .cards{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 860px){
  .hero .wrap, .proof, .about, .contact .wrap{grid-template-columns:minmax(0, 1fr); gap:36px}
  .posts{grid-template-columns:minmax(0, 1fr)}
  .figure{position:static; max-width:420px}
  section{padding-block:56px}
}
@media (max-width: 560px){
  header.site{position:static}
  body{font-size:18px}
  .cards, .steps, .row{grid-template-columns:minmax(0, 1fr)}
  .mono{font-size:42px}
  .word .name{font-size:20px}
  nav{gap:16px; font-size:16px}
  .stat-callout{grid-template-columns:minmax(0, 1fr)}
  .article-body{font-size:19px}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}