/* Shared firm styling for the home, websites and bookkeeping pages.
   Editorial advisory look: Newsreader (serif) for headlines, Public Sans for text, IBM Plex Mono for data.
   Ivory paper, deep green-black, one muted gold. Flat surfaces, hairline rules, square corners; no shadows or blur.
   The same palette lives at the top of site.css so the portals and apps match. */
:root{
  --paper:#f7f5f0; --surface:#fffdf9; --ink:#101a16; --ink-2:#36443d; --muted:#5d6a63; --line:#ddd8cc; --rule:#c9c3b3;
  --deep:#0b1814; --deep-2:#12231e; --deep-fg:#f3eee2; --deep-muted:#a9b9af;
  --brass:#8a6a1f; --on-brass:#ffffff; --brass-soft:#efe6cf; --brass-ink:#6f5212; --gold:#cfae6c;
  --cta:#0b1814; --on-cta:#f7f5f0;
  --ok:#276b43; --ok-soft:#dcefe3; --warn:#835a00; --warn-soft:#f6ecd0;
  --f-serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --f-display:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --signal:#4fd6a0;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-brand:"Newsreader","Iowan Old Style",Georgia,serif;
  --wrap:1200px; --r:2px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0d1512; --surface:#141e1a; --ink:#e9e4d6; --ink-2:#c3cbc4; --muted:#9aa8a0; --line:#27332d; --rule:#2c3a33;
  --deep:#070e0b; --deep-2:#0d1814; --deep-fg:#f3eee2; --deep-muted:#9db0a5;
  --brass:#cfae6c; --on-brass:#0b1814; --brass-soft:#2f2713; --brass-ink:#e2c88e;
  --cta:#e9e4d6; --on-cta:#0b1814;
  --ok:#6cc290; --ok-soft:#173326; --warn:#e2b54d; --warn-soft:#352a12; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0d1512; --surface:#141e1a; --ink:#e9e4d6; --ink-2:#c3cbc4; --muted:#9aa8a0; --line:#27332d; --rule:#2c3a33;
  --deep:#070e0b; --deep-2:#0d1814; --deep-fg:#f3eee2; --deep-muted:#9db0a5;
  --brass:#cfae6c; --on-brass:#0b1814; --brass-soft:#2f2713; --brass-ink:#e2c88e;
  --cta:#e9e4d6; --on-cta:#0b1814;
  --ok:#6cc290; --ok-soft:#173326; --warn:#e2b54d; --warn-soft:#352a12; color-scheme:dark}

*{box-sizing:border-box}
[id]{scroll-margin-top:92px}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"kern","liga"}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:32px}
@media (max-width:640px){.wrap{padding-inline:20px}}
h1,h2,h3{font-family:var(--f-serif);text-wrap:balance;margin:0;font-weight:400;line-height:1.08;letter-spacing:-.018em;font-variant-numeric:lining-nums}
h1{font-size:clamp(2.6rem,5.6vw,4.7rem);line-height:1.03;letter-spacing:-.025em;font-weight:400}
h2{font-size:clamp(1.95rem,3.3vw,2.85rem)}
h3{font-size:1.28rem;font-weight:500;letter-spacing:-.008em;line-height:1.2}
h1 em,h2 em{font-style:italic;font-weight:400}
p{margin:0}
.lede{font-size:1.2rem;color:var(--ink-2);max-width:58ch;line-height:1.62}
.eyebrow{display:inline-flex;align-items:center;gap:14px;font:600 .72rem/1.4 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--brass-ink)}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 .76rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;padding:18px 30px;border-radius:0;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .25s,border-color .25s,color .25s}
.btn-primary{background:var(--cta);color:var(--on-cta);border-color:var(--cta)}
.btn-primary:hover{background:var(--brass-ink);border-color:var(--brass-ink);color:#fff}
.btn-ghost{border-color:color-mix(in srgb,var(--ink) 38%,transparent);background:transparent;color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn-sm{padding:13px 20px;font-size:.7rem}

/* header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);border-bottom:1px solid var(--line);transition:box-shadow .3s,border-color .3s}
header.site.scrolled{border-bottom-color:var(--rule)}
header.site .wrap{display:flex;align-items:center;gap:28px;padding-block:20px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.seal{display:block;width:3px;height:30px;background:var(--brass);border-radius:0;font-size:0;color:transparent;overflow:hidden;box-shadow:none;flex:none}
.brand-name{font-family:var(--f-serif);font-weight:500;font-size:1.55rem;line-height:1;letter-spacing:-.012em}
nav.main{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
nav.main a{text-decoration:none;font-size:.88rem;font-weight:500;letter-spacing:.01em;padding:8px 12px;border-radius:0;color:var(--ink-2);transition:color .2s}
nav.main a:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--brass)}
@media (max-width:380px){.brand-name{font-size:1.25rem}}

/* sections */
section.band{padding-block:112px}
@media (max-width:760px){section.band{padding-block:72px}}
.band.alt{background:var(--surface);border-block:1px solid var(--line)}
.sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:56px;max-width:760px}
.sec-head .lede{margin-top:2px}

/* contact strip */
.contact{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.contact-lines{display:flex;flex-wrap:wrap;gap:20px 56px}
.contact-lines div{display:flex;flex-direction:column;gap:4px}
.contact-lines small{font:600 .68rem/1.2 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.contact-lines b{font-family:var(--f-serif);font-weight:400;font-size:1.6rem;letter-spacing:-.01em}
.contact-lines a{text-decoration:none}
.contact-lines a:hover{text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:6px}

.legal{border-top:1px solid color-mix(in srgb,var(--deep-fg) 14%,transparent);margin-top:44px;padding-top:20px;font-size:.78rem;display:flex;flex-direction:column;gap:8px;max-width:90ch}

/* dark hero shared by home, websites and bookkeeping */
.firm-hero{background:var(--deep);color:var(--deep-fg);border-bottom:1px solid var(--brass);position:relative;overflow:hidden;--brass:#cfae6c;--brass-ink:#e2c88e;--on-brass:#0b1814;--cta:#f3eee2;--on-cta:#0b1814;--ink:#f3eee2;--paper:#0b1814}
.firm-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(100% - 1px),color-mix(in srgb,var(--deep-fg) 7%,transparent) 0) 0 0/calc(100%/6) 100%;pointer-events:none}
.firm-hero .wrap{padding-block:112px 0;position:relative}
.firm-hero h1{color:var(--deep-fg);max-width:17ch}
.firm-hero h1 em{color:var(--gold)}
.firm-hero .lede{color:var(--deep-muted);margin-top:28px}
.firm-hero .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.firm-hero .btn-primary:hover{background:var(--gold);border-color:var(--gold);color:#0b1814}
.firm-hero .btn-ghost{background:transparent;color:var(--deep-fg);border-color:color-mix(in srgb,var(--deep-fg) 36%,transparent)}
.firm-hero .btn-ghost:hover{border-color:var(--deep-fg);background:var(--deep-fg);color:var(--deep)}
.firm-hero .strip{margin-top:88px;border-top:1px solid color-mix(in srgb,var(--deep-fg) 16%,transparent);display:flex;flex-wrap:wrap;background:none}
.firm-hero .strip span{padding:22px 32px 24px 0;margin-right:32px;font:600 .68rem/1.4 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--deep-muted);border-right:1px solid color-mix(in srgb,var(--deep-fg) 16%,transparent)}
.firm-hero .strip span:last-child{border-right:0}
@media (max-width:760px){.firm-hero .wrap{padding-top:64px}.firm-hero .strip{margin-top:56px}.firm-hero .strip span{border-right:0;padding:12px 20px 4px 0;margin-right:0;width:50%}}

/* motion: the page is fully readable if this never runs (html.motion is set in <head> only for visitors who allow motion) */
html.motion{scroll-behavior:smooth}
html.motion [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.2,.6,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.6,.2,1) var(--d,0ms)}
html.motion [data-reveal].in{opacity:1;transform:none}

/* Short check-mark list under a hero (the bookkeeping page uses it) */
.chips{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:30px;font-size:.9rem;color:var(--ink-2)}
.chips span::before{content:"";display:inline-block;width:14px;height:1px;background:var(--brass);margin-right:10px;vertical-align:.3em}

/* Breadcrumb trail at the top of the landing heroes */
.crumbs{font:500 .72rem/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px;opacity:.9}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--brass)}

/* software section on the homepage */
.soft-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:8px;border-top:1px solid var(--ink)}
@media(max-width:760px){.soft-grid{grid-template-columns:1fr}}
.soft-card{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:44px 48px 48px 0;display:flex;flex-direction:column;gap:14px}
.soft-card+.soft-card{padding-left:48px;border-left:1px solid var(--line)}
@media(max-width:760px){.soft-card,.soft-card+.soft-card{padding:36px 0;border-left:0}}
.soft-card h3{margin:0;font-size:1.9rem;font-weight:400;letter-spacing:-.015em}
.soft-card p{margin:0;color:var(--ink-2)}
.soft-tag{font:600 .68rem/1.3 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--brass-ink)}
.soft-list{margin:6px 0 10px;padding:0;list-style:none;color:var(--ink-2)}
.soft-list li{margin:0;padding:10px 0 10px 26px;position:relative;border-top:1px solid var(--line);font-size:.95rem}
.soft-list li::before{content:"";position:absolute;left:0;top:1.35em;width:14px;height:1px;background:var(--brass)}
.soft-card .btn{align-self:flex-start;margin-top:auto}
.soft-note{margin:28px 0 0;color:var(--muted);font-size:.86rem}

/* long buttons wrap on phones */
@media (max-width:560px){.btn{white-space:normal;max-width:100%;text-align:center;line-height:1.3}}