:root {
  --paper: #EEF2EC; --paper-deep: #E1E8DF; --ink: #1B2A3A; --ink-soft: #4F5D6B;
  --rule: #A9C2AF; --sage: #5E7A66; --margin: #B8423A; --on-ink: #EEF2EC;
  --sans: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121B24; --paper-deep: #1A2531; --ink: #E3E9E2; --ink-soft: #A7B3AD;
    --rule: #34503F; --sage: #8FB09A; --margin: #D8675E; --on-ink: #121B24;
  }
}
:root[data-theme="dark"] {
  --paper: #121B24; --paper-deep: #1A2531; --ink: #E3E9E2; --ink-soft: #A7B3AD;
  --rule: #34503F; --sage: #8FB09A; --margin: #D8675E; --on-ink: #121B24;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 1.125rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--margin); outline-offset: 3px; }
[hidden] { display: none !important; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
h1, h2 { font-family: var(--sans); letter-spacing: -0.02em; }
h3 { font-family: var(--sans); font-weight: 700; font-size: 1.1rem; margin: 0 0 0.35rem; letter-spacing: -0.01em; }
.lede { max-width: 34em; color: var(--ink-soft); margin: 0 0 2rem; }

/* Header */
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 1.5rem; padding-bottom: 1.5rem;
}
.wordmark { font-family: var(--sans); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; text-decoration: none; }
nav { display: flex; align-items: center; gap: 1.5rem; font-family: var(--sans); font-weight: 500; font-size: 0.95rem; }
nav a { text-decoration: none; border-bottom: 2px solid transparent; padding: 0.2rem 0; }
nav a:hover, nav a[aria-current="page"] { border-bottom-color: var(--margin); }
nav .header-link { text-decoration: underline; text-underline-offset: 4px; border: none; }

/* Buttons */
.btn {
  display: inline-block; font-family: var(--sans); font-weight: 700; font-size: 1rem;
  background: var(--ink); color: var(--on-ink);
  padding: 0.95rem 1.5rem; border-radius: 3px; text-decoration: none;
  transition: background-color .15s ease;
}
.btn:hover { background: var(--margin); color: #fff; }

/* Hero */
.hero .wrap {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: center;
  padding-top: 3.5rem; padding-bottom: 5.5rem;
}
.hero h1 {
  font-family: var(--sans); font-weight: 800; font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 1.5rem;
}

/* Stack */
.stack { display: flex; flex-direction: column; gap: 0.5rem; }
.stack .layer {
  font-family: var(--sans); font-weight: 500; font-size: 0.98rem;
  border: 1.5px solid var(--ink); padding: 0.8rem 1.1rem; margin: 0 auto; background: var(--paper);
}
.stack .l1 { width: 64%; } .stack .l2 { width: 74%; } .stack .l3 { width: 84%; } .stack .l4 { width: 94%; }
.stack .base {
  width: 100%; margin-top: 0.35rem; background: var(--ink); color: var(--on-ink);
  border: none; border-left: 6px solid var(--margin); padding: 1.25rem 1.2rem;
}
.stack .base strong { display: block; font-weight: 800; font-size: 1.15rem; }
.stack .base span { font-weight: 400; font-size: 0.92rem; opacity: 0.85; }
.stack-caption { font-family: var(--sans); font-size: 0.88rem; color: var(--ink-soft); margin: 1rem 0 0; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .stack .layer:not(.base) { animation: settle .55s cubic-bezier(.2,.8,.2,1) both; }
  .stack .l1 { animation-delay: .60s; } .stack .l2 { animation-delay: .45s; }
  .stack .l3 { animation-delay: .30s; } .stack .l4 { animation-delay: .15s; }
  @keyframes settle { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
}

/* Sections */
section.block { padding: 5rem 0; }
section.tint { background: var(--paper-deep); }
.block h2, .cta h2 {
  font-family: var(--sans); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 1.25rem; max-width: 22em;
}
.prose { max-width: 38em; }
.prose p { margin: 0 0 1.1rem; }

/* People */
.people .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.5rem 4rem; align-items: start; }
.family-photo { grid-column: 1 / -1; margin: 0; }
.family-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 1165; border-radius: 3px; }

/* Services list */
.services {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink);
}
.services li { font-family: var(--sans); font-weight: 700; font-size: 1.05rem; padding: 1.1rem 1rem 1.1rem 0; border-bottom: 1px solid var(--rule); }
.services li small { display: block; font-weight: 400; font-size: 0.85rem; color: var(--ink-soft); }
.more-link { display: inline-block; margin-top: 1.5rem; font-family: var(--sans); font-weight: 700; text-underline-offset: 4px; }

/* Proof */
.proof-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.finding {
  font-family: var(--sans); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.12; letter-spacing: -0.02em; margin: 0;
  padding-left: 1.25rem; border-left: 6px solid var(--margin);
}
.finding-sub { margin: 0.9rem 0 0; padding-left: calc(1.25rem + 6px); color: var(--ink-soft); max-width: 28em; }

.icon { width: 34px; height: 34px; color: var(--sage); flex: none; }
/* Inner page hero */
.page-hero .wrap { padding-top: 2.5rem; padding-bottom: 4rem; }
.page-hero h1 {
  font-weight: 800; font-size: clamp(2.2rem, 4.4vw, 3.5rem);
  line-height: 1.05; letter-spacing: -0.028em; margin: 0 0 1.25rem; max-width: 16em;
}
.page-hero .lede { margin: 0; }

/* Services page */
.svc-group { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; padding: 2.25rem 0; border-top: 2px solid var(--ink); }
.svc-group:first-child { padding-top: 0; border-top: none; }
.svc-group h2 { font-size: 1.4rem; margin: 0.2rem 0 0; }
.svc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2.5rem; }
.svc .icon { margin-bottom: 0.6rem; }
.svc p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; }

/* About page */
.about-hero { display: grid; grid-template-columns: 1fr 380px; gap: 3.5rem; align-items: center; }
.about-portrait { width: 100%; border-radius: 4px; }
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 4rem; }
.story-item h2 { font-size: 1.45rem; padding-top: 0.9rem; border-top: 2px solid var(--margin); }
.story-item p { margin: 0; }
.wide-photo { margin: 0 0 3rem; }
.wide-photo img { width: 100%; height: auto; aspect-ratio: 1400 / 1165; border-radius: 4px; }
.home-life { align-items: start; }


/* CTA */
.cta { background: var(--ink); color: var(--on-ink); padding: 5rem 0; }
.cta h2 { color: var(--on-ink); }
.cta .btn { background: var(--margin); color: #fff; }
.cta .btn:hover { background: var(--on-ink); color: var(--ink); }
.cta a:focus-visible { outline-color: var(--on-ink); }
.contact-line { font-family: var(--sans); font-size: 0.95rem; margin: 1.25rem 0 0; opacity: 0.85; }

footer { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); padding: 2rem 0; }
.footer-row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 960px) {
  .svc-group { grid-template-columns: 1fr; gap: 1.25rem; }
  .story, .about-hero { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-portrait { max-width: 380px; }
}
@media (max-width: 860px) {
  .hero .wrap, .people .wrap, .proof-pair { grid-template-columns: 1fr; gap: 3rem; }
  .hero .wrap { padding-top: 2rem; padding-bottom: 4rem; }
  .services { grid-template-columns: repeat(2, 1fr); }
  section.block { padding: 3.75rem 0; }
}
@media (max-width: 640px) {
  nav { gap: 1rem; font-size: 0.9rem; }
  nav .header-link { display: none; }
  .svc-list { grid-template-columns: 1fr; }
}

/* ---------- Supporting graphics ---------- */
:root { --mono: "Courier Prime", "Courier New", Courier, monospace; }
.label {
  font-family: var(--mono); font-size: 0.88rem; color: var(--sage);
  margin: 0 0 0.75rem; letter-spacing: 0.01em;
}
.divider {
  font-family: var(--mono); color: var(--sage); text-align: center;
  letter-spacing: 0.5em; font-size: 0.95rem; margin: -1.5rem 0 3rem;
  grid-column: 1 / -1;
}
/* Printer's crop marks at the corners of each section */
.block .wrap, .cta .wrap { position: relative; }
.block .wrap::before, .cta .wrap::before {
  content: ""; position: absolute; inset: -2.75rem 0.4rem; pointer-events: none;
  --m: var(--rule);
  background:
    linear-gradient(var(--m), var(--m)) top left / 14px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) top left / 1px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) top right / 14px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) top right / 1px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom left / 14px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom right / 1px 14px no-repeat;
}
.cta .wrap::before { --m: rgba(238, 242, 236, 0.25); }

.fig { margin: 0; }
.fig-svg { display: block; width: 100%; height: auto; color: var(--ink); }
.fig figcaption {
  font-family: var(--mono); font-size: 0.84rem; color: var(--ink-soft);
  margin-top: 0.75rem; text-align: center;
}
.fig figcaption b { color: var(--ink); }
.hero .fig figcaption { margin-top: 1rem; }

/* People: ledger window sits beside the text */
.people .wrap { align-items: center; }
.window {
  font-family: var(--mono); font-size: 0.9rem;
  background: var(--paper); border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--rule);
}
.window-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  border-bottom: 1.5px solid var(--ink); padding: 0.4rem 0.6rem;
}
.window-tab { background: var(--ink); color: var(--on-ink); padding: 0.1rem 0.5rem; font-weight: 700; }
.window-status { color: var(--ink-soft); }
.lw { width: 100%; border-collapse: collapse; }
.lw th { text-align: left; font-weight: 700; padding: 0.55rem 0.7rem 0.35rem; border-bottom: 1px solid var(--ink); }
.lw td { padding: 0.5rem 0.7rem; border-bottom: 1px dashed var(--rule); vertical-align: top; }
.lw .num { text-align: right; white-space: nowrap; }
.lw .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lw .ok { color: var(--sage); font-weight: 700; width: 1.5rem; opacity: 0; transition: opacity .25s ease; }
.lw tr.done .ok { opacity: 1; }
.lw .note {
  display: block; font-size: 0.78rem; color: var(--margin); font-weight: 700;
  max-height: 0; overflow: hidden; transition: max-height .35s ease;
}
.lw s { text-decoration-color: var(--margin); text-decoration-thickness: 2px; }
.lw .new { display: block; color: var(--margin); font-weight: 700; max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.lw tr.fix s { text-decoration: none; }
.lw tr.fix.done s { text-decoration: line-through; text-decoration-color: var(--margin); text-decoration-thickness: 2px; }
.lw tr.fix.done .new, .lw tr.fix.done .note, .lw tr.dup.done .note { max-height: 2rem; }
.lw tr.dup.done .x { text-decoration: line-through; text-decoration-color: var(--margin); text-decoration-thickness: 2px; color: var(--ink-soft); }
.lw tfoot td { border-bottom: none; font-weight: 700; padding-top: 0.7rem; }
.lw .total { border-bottom: 3px double var(--ink); padding-bottom: 1px; }

/* Services header with figure */
.services-head { display: grid; grid-template-columns: 1fr 260px; gap: 2rem; align-items: end; }
.services-head h2 { margin-bottom: 0; }

/* Proof figures */
.proof-pair > div { display: flex; flex-direction: column; }
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; max-width: 420px; }
.tally { margin-top: 2rem; max-width: 340px; }
.tally .fig-svg { color: var(--ink); }

/* CTA figure */
.cta-grid { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; align-items: center; }
.fig-dark .fig-svg { color: var(--on-ink); opacity: 0.9; }
.fig-dark figcaption, .fig-dark figcaption b { color: var(--on-ink); opacity: 0.85; }

@media (max-width: 860px) {
  .services-head, .cta-grid { grid-template-columns: 1fr; }
  .services-head .fig-small { max-width: 240px; }
  .fig-dark { max-width: 300px; }
  .divider { margin-top: -0.5rem; }
}
.before-after { max-width: 480px; }
.before-after figcaption { font-size: 0.78rem; }

/* Fig. 1 slabs settle into place once, top slab last */
@media (prefers-reduced-motion: no-preference) {
  .slab:not(.base) { animation: settle .55s cubic-bezier(.2,.8,.2,1) both; }
  .slab.s4 { animation-delay: .15s; } .slab.s3 { animation-delay: .30s; }
  .slab.s2 { animation-delay: .45s; } .slab.s1 { animation-delay: .60s; }
}
.hero .fig { width: 100%; max-width: 500px; justify-self: end; }

/* Narrow screens: text stays left for easy reading; illustrations center */
@media (max-width: 860px) {
  .hero .fig { justify-self: center; }
  .services-head .fig-small, .tally, .fig-dark, .before-after, .about-portrait, .window {
    margin-left: auto; margin-right: auto;
  }
  .window { max-width: 460px; }
  .proof-pair > div { align-items: stretch; }
  .tally { width: 100%; }
}
.lw tr.fix.done .new, .lw tr.fix.done .note, .lw tr.dup.done .note { max-height: 3.5rem; }
@media (max-width: 480px) {
  .window { font-size: 0.8rem; }
  .lw th, .lw td { padding-left: 0.45rem; padding-right: 0.45rem; }
}

/* Logo: the white artwork is used as a stencil, so it takes the page's ink color in light and dark mode */
.logo { display: block; position: relative; width: 136px; aspect-ratio: 1500 / 607; flex: none; }
.logo span {
  position: absolute; left: 0; width: 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.logo-main { top: 0; height: 81.55%; background: var(--ink); }
.logo-sub { bottom: 0; height: 18.45%; background: var(--ink-soft); }
a.logo:hover .logo-main { background: var(--margin); }
.logo-small { width: 84px; }
.footer-brand { display: inline-flex; align-items: center; gap: 1rem; }
@media (max-width: 640px) { .site-header .logo { width: 108px; } }
.footer-row { align-items: center; }
.tally { max-width: 220px; }
.entity-line { font-family: var(--sans); font-weight: 500; color: var(--ink-soft); margin: 1.5rem 0 0; }
.entity-list { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .entity-list { grid-template-columns: repeat(2, 1fr); } }
.tally { max-width: 270px; } .tally .fig-svg { max-width: 220px; margin: 0 auto; }

/* Photo plates: natural color, framed like the drawings */
.plate {
  position: relative; margin: 0;
  padding: 8px; border: 1.5px solid var(--ink); background: var(--paper);
}
.plate img { display: block; width: 100%; height: auto; border-radius: 0; filter: saturate(0.85); }
.plate::before {
  content: ""; position: absolute; inset: -18px; pointer-events: none; --m: var(--rule);
  background:
    linear-gradient(var(--m), var(--m)) top left / 12px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) top left / 1px 12px no-repeat,
    linear-gradient(var(--m), var(--m)) top right / 12px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) top right / 1px 12px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom left / 12px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom left / 1px 12px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom right / 12px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom right / 1px 12px no-repeat;
}
.plate figcaption {
  font-family: var(--mono); font-size: 0.84rem; color: var(--ink-soft);
  padding: 0.7rem 0.1rem 0.1rem; border-top: 1px solid var(--rule); margin-top: 8px;
}
.plate figcaption b { color: var(--ink); }
.family-photo.plate img { aspect-ratio: auto; border-radius: 0; }
.about-portrait.plate { width: 100%; }
.home-life { display: grid; grid-template-columns: 1fr 1.15fr; gap: 4rem; align-items: center; }
@media (max-width: 960px) {
  .home-life { grid-template-columns: 1fr; gap: 2.5rem; }
  .plate::before { inset: -12px; }
}
@media (max-width: 640px) {
  .family-photo.plate img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 55%; }
}
.people-label { grid-column: 1 / -1; margin-bottom: -0.5rem; }
.people-head { grid-column: 1 / -1; margin-bottom: -0.5rem; }
.people-head h2 { font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.08; max-width: 18em; margin-bottom: 0; }
.people-intro { font-size: 1.25rem; line-height: 1.55; }
.proof-wide {
  display: grid; grid-template-columns: 1fr 260px; gap: 3rem; align-items: center;
  margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--rule);
}
.proof-wide .finding { max-width: 18em; }
@media (max-width: 860px) {
  .proof-wide { grid-template-columns: 1fr; gap: 2rem; }
  .tape { max-width: 240px; margin: 0 auto; width: 100%; }
}
.about-hero { grid-template-columns: 1fr 1.15fr; }
@media (max-width: 960px) { .about-hero { grid-template-columns: 1fr; } .about-portrait { max-width: none; } }

/* Services page groups with figures */
.svc-group { grid-template-columns: 280px 1fr; gap: 3rem; padding: 3rem 0; align-items: start; }
.svc-side h2 { margin-bottom: 1.5rem; }
.svc-fig { max-width: 210px; }
.svc-list { align-self: center; }
.svc h3 { margin-top: 0; }
.fig-buildings { width: 100%; max-width: 360px; }
.services-head { grid-template-columns: 1fr auto; }

/* About page */
.timeline { margin: 0 0 3.5rem; }
.timeline .fig-svg { max-width: 860px; margin: 0 auto; }
.entry { margin: 1rem 0 -0.4rem; color: var(--margin); }
.story-item h2 { border-top: none; padding-top: 0.2rem; }
.story-item { border-top: 2px solid var(--margin); }
.home-life .label { margin-bottom: 0.75rem; }
.home-life { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .svc-fig { margin: 0 auto 0.5rem; }
  .fig-buildings { margin: 0 auto; }
  .timeline { overflow-x: auto; }
  .timeline .fig-svg { min-width: 560px; }
}
.svc-fig { max-width: 250px; }
@media (max-width: 960px) {
  .svc-group { grid-template-columns: 1fr; gap: 1.5rem; }
  .svc-side { text-align: left; }
}
@media (max-width: 860px) {
  .services-head { grid-template-columns: 1fr; }
}
footer a { white-space: nowrap; }

/* Sound familiar? */
.familiar h2 { margin-bottom: 0.75rem; }
.familiar-intro { font-size: 1.2rem; margin-bottom: 2.5rem; }
.familiar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.familiar-card {
  background: var(--paper); border: 1.5px solid var(--ink); padding: 1.5rem 1.5rem 1.75rem;
  box-shadow: 6px 6px 0 var(--rule);
}
.familiar-card .fig { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--rule); }
.familiar-card .fig-svg { max-height: 140px; }
.familiar-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.familiar-card p { margin: 0; color: var(--ink-soft); }
.home-services { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 960px) { .familiar-grid { grid-template-columns: 1fr; max-width: 520px; } .familiar-card .fig-svg { max-width: 220px; margin: 0 auto; } }
@media (max-width: 860px) { .home-services { grid-template-columns: repeat(2, 1fr); } }
.familiar-card { text-align: center; } .familiar-card p { margin: 0 auto; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.contact-card {
  display: block; text-decoration: none; background: var(--paper);
  border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--rule);
  padding: 2rem 2rem 2.25rem; transition: transform .15s ease, box-shadow .15s ease;
}
.contact-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--margin); }
.contact-card .label { display: block; margin-bottom: 0.9rem; }
.contact-value {
  display: block; font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.15; overflow-wrap: anywhere;
  padding-bottom: 0.9rem; margin-bottom: 1rem; border-bottom: 3px double var(--ink);
}
.contact-note { display: block; color: var(--ink-soft); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* Logo shine in the accent color */
.logo-shine { top: 0; height: 81.55%; background: var(--margin); }
a.logo:hover .logo-main { background: var(--ink); }

/* Contact tab: outlined in orange, filled when hovered or current */
nav a.nav-contact {
  border: 1.5px solid var(--margin); border-radius: 3px; padding: 0.35rem 0.8rem;
  color: var(--ink); transition: background-color .15s ease, color .15s ease;
}
nav a.nav-contact:hover, nav a.nav-contact[aria-current="page"] {
  background: var(--margin); color: #fff; border-color: var(--margin);
}

/* Secondary buttons: outlined, with an arrow that nudges on hover */
.more-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 1.5rem; padding: 0.7rem 1.1rem;
  font-family: var(--sans); font-weight: 700; font-size: 0.98rem;
  text-decoration: none; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 3px;
  transition: background-color .15s ease, color .15s ease;
}
.more-link span { transition: transform .15s ease; }
.more-link:hover { background: var(--ink); color: var(--paper); }
.more-link:hover span { transform: translateX(3px); }
.people .prose .more-link { margin-bottom: 0.5rem; }
.familiar-card h3 { margin-bottom: 0; }
.familiar-card .fig { margin-bottom: 1rem; }

/* ---- Audit fixes ---- */
/* Small orange text uses a deeper shade so it stays readable */
html[data-pal="harbor"] { --accent-text: #A93A0D; }
html[data-pal="harbor"] .tone-cta { --accent-text: #FF8A5B; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"])[data-pal="harbor"] { --accent-text: #FF7A45; } }
html[data-theme="dark"][data-pal="harbor"] { --accent-text: #FF7A45; }
.lw .note, .lw .new, .entry { color: var(--accent-text, var(--margin)); }
html[data-pal="harbor"] .tone-d { --sage: #944012; }

/* Dark text on orange buttons for contrast */
.btn:hover, .cta .btn, nav a.nav-contact:hover, nav a.nav-contact[aria-current="page"] { color: #0E1A2B; }
.cta .btn:hover { color: var(--ink); }

/* Screen-reader-only headings */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Scrollable timeline shows focus */
.timeline:focus-visible { outline: 3px solid var(--margin); outline-offset: 4px; }

/* Very narrow phones (320px) */
@media (max-width: 380px) {
  .site-header .logo { width: 88px; }
  nav { gap: 0.6rem; font-size: 0.82rem; }
  nav a.nav-contact { padding: 0.3rem 0.55rem; }
  .wrap { padding: 0 1.1rem; }
}

/* 700 is now loaded alongside 400 and 600, so emphasis uses the real bold
   cut. 600 was too close to the 400 body text to read as emphasis at all. */
.prose strong { font-weight: 700; }

/* --- Proof figures --- */
/* Widths are explicit rather than max-width: these are flex-column children,
   and the auto side margins that centre them also make them shrink-to-fit, so
   a max-width alone never binds and the drawing keeps its intrinsic size. */
/* Fig. 2A / 2B: 80% of the previous 480px, centred under the copy instead of
   hanging off the left edge of the column. */
.before-after {
  width: min(384px, 100%); max-width: none;
  margin-left: auto; margin-right: auto;
}
/* Fig. 3: 1.5x the previous 220px drawing, also centred. The box stays wider
   than the drawing so the caption has room, at the same ratio as before. */
.tally {
  width: min(405px, 100%); max-width: none;
  margin-left: auto; margin-right: auto;
}
.tally .fig-svg { max-width: 330px; }

/* Fig. 2A / 2B captions: small enough that both sit on one line at the
   reduced figure width, so the pair stays level. */
.before-after figcaption { font-size: 0.7rem; }

/* "What we handle": the services fill the left two thirds and Fig. 5 sits in
   the right third, rather than the figure being wedged beside the heading
   while the list ran the full width underneath. */
.handle-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 3.5rem; align-items: center;
}
.handle-main .home-services { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) {
  .handle-grid { grid-template-columns: 1fr; gap: 2rem; }
  .handle-fig { max-width: 240px; margin: 0 auto; }
}

/* Fig. 3 sits next to the much taller Fig. 2A/2B pair. Both columns are grid
   items and stretch to the same height, so the figure can claim the space left
   under its own copy and centre the drawing inside it, lining its middle up
   with the middle of Fig. 2 instead of its top edge. */
@media (min-width: 861px) {
  .tally { flex: 1; display: flex; flex-direction: column; justify-content: center; }
}

.logo-main { -webkit-mask-image: url(/assets/img/logo_main.png); mask-image: url(/assets/img/logo_main.png); }
.logo-shine { -webkit-mask-image: url(/assets/img/logo_shine.png); mask-image: url(/assets/img/logo_shine.png); }
.logo-sub { -webkit-mask-image: url(/assets/img/logo_sub.png); mask-image: url(/assets/img/logo_sub.png); }
html[data-pal="harbor"] .tone-a { --paper-deep: #EAE6DC; --ink: #14233A; --ink-soft: #4A5A70; --rule: #CFC8B8; --sage: #2E62B8; --margin: #EF5B25; --on-ink: #F6F4EF; --paper: #F6F4EF; }
html[data-pal="harbor"] .tone-b { --paper-deep: #B5D1EE; --ink: #14233A; --ink-soft: #3D5573; --rule: #93B6DC; --sage: #2456A8; --margin: #E4501B; --on-ink: #CDE2F6; --paper: #CDE2F6; }
html[data-pal="harbor"] .tone-c { --paper-deep: #EEF1F5; --ink: #14233A; --ink-soft: #4A5A70; --rule: #D5DCE5; --sage: #2E62B8; --margin: #EF5B25; --on-ink: #FFFFFF; --paper: #FFFFFF; }
html[data-pal="harbor"] .tone-d { --paper-deep: #F6D0B6; --ink: #14233A; --ink-soft: #5C4A3E; --rule: #EBB894; --sage: #B24A17; --margin: #E4501B; --on-ink: #FCE3D2; --paper: #FCE3D2; }
html[data-pal="harbor"] .tone-cta { --paper-deep: #14233A; --ink: #14233A; --ink-soft: #C9D3E0; --rule: #3A4A62; --sage: #8FB6EA; --margin: #F26430; --on-ink: #F6F4EF; --paper: #14233A; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"])[data-pal="harbor"] .tone-a { --paper-deep: #16223A; --ink: #E8EEF6; --ink-soft: #A5B3C6; --rule: #2A3A55; --sage: #8CB8EE; --margin: #FF7A45; --on-ink: #0E1726; --paper: #0E1726; }
  html:not([data-theme="light"])[data-pal="harbor"] .tone-b { --paper-deep: #1E4170; --ink: #EAF2FC; --ink-soft: #B4C8E2; --rule: #3A5C88; --sage: #8CB8EE; --margin: #FF7A45; --on-ink: #173559; --paper: #173559; }
  html:not([data-theme="light"])[data-pal="harbor"] .tone-c { --paper-deep: #1A2840; --ink: #E8EEF6; --ink-soft: #A5B3C6; --rule: #2C3C58; --sage: #8CB8EE; --margin: #FF7A45; --on-ink: #121D2E; --paper: #121D2E; }
  html:not([data-theme="light"])[data-pal="harbor"] .tone-d { --paper-deep: #482D1E; --ink: #F6E9E0; --ink-soft: #D9C2B2; --rule: #6B4631; --sage: #F2A57A; --margin: #FF7A45; --on-ink: #3A2418; --paper: #3A2418; }
  html:not([data-theme="light"])[data-pal="harbor"] .tone-cta { --paper-deep: #070E1A; --ink: #070E1A; --ink-soft: #A5B3C6; --rule: #24324A; --sage: #8CB8EE; --margin: #FF7A45; --on-ink: #E8EEF6; --paper: #070E1A; }
}
html[data-theme="dark"][data-pal="harbor"] .tone-a { --paper-deep: #16223A; --ink: #E8EEF6; --ink-soft: #A5B3C6; --rule: #2A3A55; --sage: #8CB8EE; --margin: #FF7A45; --on-ink: #0E1726; --paper: #0E1726; }
html[data-theme="dark"][data-pal="harbor"] .tone-b { --paper-deep: #1E4170; --ink: #EAF2FC; --ink-soft: #B4C8E2; --rule: #3A5C88; --sage: #8CB8EE; --margin: #FF7A45; --on-ink: #173559; --paper: #173559; }
html[data-theme="dark"][data-pal="harbor"] .tone-c { --paper-deep: #1A2840; --ink: #E8EEF6; --ink-soft: #A5B3C6; --rule: #2C3C58; --sage: #8CB8EE; --margin: #FF7A45; --on-ink: #121D2E; --paper: #121D2E; }
html[data-theme="dark"][data-pal="harbor"] .tone-d { --paper-deep: #482D1E; --ink: #F6E9E0; --ink-soft: #D9C2B2; --rule: #6B4631; --sage: #F2A57A; --margin: #FF7A45; --on-ink: #3A2418; --paper: #3A2418; }
html[data-theme="dark"][data-pal="harbor"] .tone-cta { --paper-deep: #070E1A; --ink: #070E1A; --ink-soft: #A5B3C6; --rule: #24324A; --sage: #8CB8EE; --margin: #FF7A45; --on-ink: #E8EEF6; --paper: #070E1A; }
html[data-pal]:not([data-pal="sage"]) :is(.tone-a, .tone-b, .tone-c, .tone-d) { background: var(--paper); color: var(--ink); }
html[data-pal]:not([data-pal="sage"]) body { background: #0000; }
html[data-pal]:not([data-pal="sage"]) .tone-cta { background: var(--ink); color: var(--on-ink); }
html[data-pal]:not([data-pal="sage"]) .tone-b .window, html[data-pal]:not([data-pal="sage"]) .tone-b .plate { background: var(--paper); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 3.5rem; align-items: start; }
.faq-side p { margin: 0; }
.faq-list { border-top: 2px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 0; font-family: var(--sans); font-weight: 700; font-size: 1.08rem; line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 3px solid var(--margin); outline-offset: 2px; }
.faq-mark {
  flex: none; width: 22px; height: 22px; border: 1.5px solid var(--ink); position: relative;
  font-family: var(--mono);
}
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink);
  width: 10px; height: 1.5px; transform: translate(-50%, -50%);
}
.faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s ease; }
.faq-item[open] .faq-mark { background: var(--ink); }
.faq-item[open] .faq-mark::before { background: var(--paper); }
.faq-item[open] .faq-mark::after { transform: translate(-50%, -50%) rotate(0deg); background: var(--paper); }
.faq-item p { margin: 0 0 1.25rem; max-width: 40em; color: var(--ink-soft); }
.faq-item p a { color: var(--ink); font-weight: 600; }
.faq-fig { max-width: 230px; margin-top: 2rem; }
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .faq-fig { margin: 1.5rem auto 0; }
}

/* Contact details */
.contact-line a { white-space: nowrap; }
.footer-meta { display: block; margin-top: 0.3rem; }