:root{
  --accent:#1f4d3a; --on-accent:#fff;
  /* every surface is tinted from --accent, so one colour sets the whole mood */
  --bg:color-mix(in srgb,var(--accent) 7%,#fff);
  --panel:color-mix(in srgb,var(--accent) 3%,#fff);
  --line:color-mix(in srgb,var(--accent) 20%,#fff);
  --ink:color-mix(in srgb,var(--accent) 14%,#111);
  --muted:color-mix(in srgb,var(--accent) 30%,#6a6a6a);
  --accent-text:var(--accent);
  --r:12px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-fixed]){
    --bg:color-mix(in srgb,var(--accent) 14%,#0d0d0d);
    --panel:color-mix(in srgb,var(--accent) 18%,#0d0d0d);
    --line:color-mix(in srgb,var(--accent) 30%,#0d0d0d);
    --ink:color-mix(in srgb,var(--accent) 12%,#f4f4f4);
    --muted:color-mix(in srgb,var(--accent) 25%,#a0a0a0);
    --accent-text:color-mix(in srgb,var(--accent) 45%,#fff);
  }
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font:16px/1.6 var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:560px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.2}
.eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.cover{aspect-ratio:3/1;background:var(--panel) center/cover;border-bottom:1px solid var(--line)}
.cover img{width:100%;height:100%;object-fit:cover}
.cover.contain{background:color-mix(in srgb,var(--accent) 6%,#fff);aspect-ratio:2/1;padding:14px 14px 44px}
.cover.contain img{object-fit:contain}
.head{margin-top:-52px;position:relative}
.photo{width:104px;height:104px;border-radius:50%;object-fit:cover;border:4px solid var(--bg);background:var(--panel)}
.head h1{font-size:1.9rem;margin-top:14px}
.badge{font:600 .65rem var(--sans);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--accent-text);color:var(--accent-text);padding:2px 7px;border-radius:99px;vertical-align:middle;margin-left:6px}
.role{margin-top:4px;font-weight:500}
.company{color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin-top:14px}
.tags li{font-size:.8rem;border:1px solid var(--line);padding:3px 11px;border-radius:99px;color:var(--muted)}
.tagline{margin-top:16px;padding-left:14px;border-left:2px solid var(--accent-text);font-family:var(--serif);font-style:italic;color:var(--muted)}

.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 14px;border:1px solid var(--ink);background:none;color:var(--ink);font:500 .95rem var(--sans);text-decoration:none;cursor:pointer;border-radius:var(--r);transition:background .15s,color .15s}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--bg)}
.btn.wide{grid-column:1/-1}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover,.btn.primary:focus-visible{filter:brightness(1.12);background:var(--accent);color:var(--on-accent)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}

section{padding:40px 0 0}
section h2{font-size:1.5rem;margin-top:6px}
section p{margin-top:12px;color:var(--ink)}
.rule{border:0;border-top:1px solid var(--line);margin:40px 0 0}
.social{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;padding:0;margin-top:12px}
.social a{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.social a:hover{text-decoration:underline;text-underline-offset:4px}
.social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.idrow{display:flex;align-items:flex-end;justify-content:space-between}
.bni{width:54px;height:auto;margin-bottom:4px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:26px;border:1px solid var(--line);background:var(--panel);border-radius:calc(var(--r) + 4px);overflow:hidden}
.stats div{padding:16px 8px;text-align:center}
.stats div+div{border-left:1px solid var(--line)}
.stats b{display:block;font:500 1.7rem var(--serif)}
.stats span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.services{list-style:none;padding:0;margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:20px 12px}
.services img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.services h3{font-size:1rem;margin-top:8px}
.services p{margin-top:4px;font-size:.82rem;line-height:1.45;color:var(--muted)}
.services li>span{font-size:.72rem;letter-spacing:.14em;color:var(--muted)}

.cta{margin-top:44px;padding:34px 16px 24px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--r) + 6px)}
.cta h2{text-wrap:balance;font-size:1.6rem;font-style:italic;font-weight:400;margin:0}
.cta p{color:var(--muted);max-width:32ch;margin:14px auto 0}
.cta .actions{margin-top:22px}
footer{padding:32px 0 88px;text-align:center;font-size:.8rem;color:var(--muted)}
.fab{position:fixed;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.fab svg{width:26px;height:26px;fill:#fff}
[hidden]{display:none!important}
@media (min-width:640px){.services{grid-template-columns:repeat(3,1fr)}.wrap{max-width:720px}.cover{aspect-ratio:4/1}.cover.contain{aspect-ratio:3/1}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}