/* Flowsmith. Light theme only. No inline styles anywhere (CSP). */

@font-face {
  font-family: 'Newsreader Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/assets/fonts/newsreader-latin-opsz-normal.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Newsreader Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(/assets/fonts/newsreader-latin-opsz-italic.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/assets/fonts/instrument-sans-latin-wght-normal.woff2) format('woff2-variations');
}

:root {
  color-scheme: light;
  --white: #ffffff;
  --mist: #eef2f1;
  --patina: #1e4d45;
  --patina-deep: #163a34;
  --brass: #a9832f;          /* rules, marks, fills only: 3.5:1 on white */
  --brass-text: #86661f;     /* brass when it has to be text: 4.7:1 on mist, 5:1 on white */
  --brass-light: #d9b866;    /* brass on patina */
  --ink: #1a1f1e;
  --stone: #5e6866;
  --rule: #d5dcda;

  --serif: 'Newsreader Variable', 'Iowan Old Style', Georgia, serif;
  --sans: 'Instrument Sans Variable', 'Segoe UI', system-ui, sans-serif;

  --wrap: 78rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --aside: 15rem;
  --gap: clamp(2rem, 5vw, 5rem);
  --band: clamp(4rem, 9vw, 8.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
main:focus { outline: none; }

a { color: var(--patina); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--patina-deep); text-decoration-color: var(--brass); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--patina);
  font-weight: 420;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.25rem); font-variation-settings: 'opsz' 72; letter-spacing: -0.02em; font-weight: 380; }
h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); font-variation-settings: 'opsz' 48; }
h3 { font-size: 1.4rem; font-variation-settings: 'opsz' 24; font-weight: 480; }
p, ul, ol, dl { margin: 0 0 1.1em; }
p, li, dd { max-width: 68ch; }
strong { font-weight: 600; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--patina); color: var(--white); padding: 0.6rem 1rem;
}
.skip:focus { top: 1rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* The editorial grid: a wide margin column that carries section markers, and a
   reading column that never exceeds about 70 characters. */
.split { display: grid; gap: 1.25rem var(--gap); }
@media (min-width: 60rem) {
  .split { grid-template-columns: var(--aside) minmax(0, 44rem); }
}

/* Header */
.site-header { border-bottom: 1px solid var(--rule); background: var(--white); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 0.75rem 2rem; padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.brand { display: inline-flex; text-decoration: none; }
.logo { width: 9.5rem; height: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.6rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: inline-block; padding: 0.35rem 0; color: var(--ink); text-decoration: none;
  font-size: 0.97rem; font-weight: 500; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--patina); border-bottom-color: var(--brass); }
.site-nav a[aria-current='page'] { color: var(--patina); border-bottom-color: var(--patina); }
.nav-contact a { color: var(--patina); }
@media (max-width: 40rem) {
  .header-inner { padding-top: 0.9rem; padding-bottom: 0.6rem; }
  .site-nav { width: 100%; }
  .site-nav ul { gap: 0 1.15rem; }
  .site-nav a { font-size: 0.94rem; }
}

/* Hero */
.hero { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.hero .aside p { color: var(--stone); font-size: 0.95rem; margin: 0.6rem 0 0; max-width: 14rem; }
.hero .aside p::before {
  content: ''; display: block; width: 2.5rem; height: 2px; background: var(--brass); margin-bottom: 0.9rem;
}
.hero h1 { font-size: clamp(2.6rem, 6vw, 5.25rem); max-width: 17ch; margin-bottom: 0.5em; }
@media (min-width: 60rem) { .hero h1 { margin-left: calc(var(--aside) + var(--gap)); max-width: 15ch; } }
@media (min-width: 75rem) { .hero h1 { margin-left: 0; max-width: 22ch; } }
.hero .standfirst { margin-bottom: 0; }
.hero .actions { margin-top: 1.4rem; }
.hero-figure { margin: clamp(0.5rem, 2vw, 1.5rem) auto clamp(2.5rem, 5vw, 4rem); padding: 0 var(--gutter); max-width: var(--wrap); }
.hero .split { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.forge-art { width: 100%; height: auto; overflow: visible; }
.hero-caption {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.9rem;
  color: var(--stone); font-size: 0.88rem;
}
.hero-caption span:last-child { text-align: right; }

/* Illustration resting state = the resolved process. */
.strand { stroke: var(--stone); stroke-width: 1.4; opacity: 0.32; stroke-linecap: round; }
.flow { stroke: var(--patina); stroke-width: 4; stroke-linecap: round; }
.mark { fill: var(--white); stroke: var(--brass); stroke-width: 2.5; }
.forge-halo { fill: var(--brass); opacity: 0.16; }
.forge-core { fill: var(--brass); }

/* The one motion on the site: tangle draws, gathers at the forge, leaves as three flows. */
@media (prefers-reduced-motion: no-preference) {
  .strand { stroke-dasharray: 1; animation: draw 1.5s cubic-bezier(.45,0,.25,1) both, settle 0.9s ease 2.1s both; }
  .s2 { animation-delay: 0.12s, 2.1s; }
  .s3 { animation-delay: 0.24s, 2.1s; }
  .s4 { animation-delay: 0.36s, 2.1s; }
  .s5 { animation-delay: 0.48s, 2.1s; }
  .s6 { animation-delay: 0.6s, 2.1s; }
  .forge-core { transform-origin: 640px 200px; animation: strike 0.7s cubic-bezier(.3,1.6,.5,1) 1.95s both; }
  .forge-halo { transform-origin: 640px 200px; animation: glow 1.1s ease-out 2s both; }
  .flow { stroke-dasharray: 1; animation: draw 1.1s cubic-bezier(.3,0,.2,1) 2.35s both; }
  .f1 { animation-delay: 2.45s; }
  .f3 { animation-delay: 2.55s; }
  .mark { animation: appear 0.4s ease 3.3s both; }
  .m2 { animation-delay: 3.4s; }
  .m3 { animation-delay: 3.5s; }
}
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes settle { from { opacity: 0.85; } to { opacity: 0.32; } }
@keyframes strike { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes glow { 0% { transform: scale(0.2); opacity: 0; } 40% { opacity: 0.4; } 100% { transform: scale(1); opacity: 0.16; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

/* Page head (inner pages) */
.page-head { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem); }
.page-head h1 { max-width: 18ch; }
.standfirst {
  font-family: var(--serif); font-variation-settings: 'opsz' 20; font-size: clamp(1.25rem, 2vw, 1.45rem);
  line-height: 1.55; color: var(--ink); max-width: 40em;
}
.page-head .aside p { color: var(--stone); font-size: 0.95rem; margin-top: 0.5rem; }

/* Bands */
.band { padding: var(--band) 0; border-top: 1px solid var(--rule); }
.band-tint { background: var(--mist); border-top-color: var(--mist); }
.band-tint + .band, .band + .band-tint { border-top-color: transparent; }
.aside-heading {
  font-size: 1.45rem; font-variation-settings: 'opsz' 28; line-height: 1.2; margin: 0;
  padding-top: 0.9rem; border-top: 2px solid var(--brass);
}
.aside-note { color: var(--stone); font-size: 0.93rem; margin: 0.75rem 0 0; }
@media (min-width: 60rem) {
  .band .aside { position: relative; }
}
.main > :last-child { margin-bottom: 0; }
.lead {
  font-family: var(--serif); font-variation-settings: 'opsz' 20; font-size: 1.3rem; line-height: 1.55;
}
.serif { font-family: var(--serif); font-variation-settings: 'opsz' 16; font-size: 1.15rem; line-height: 1.7; }

/* Editorial lists: services on the home page, principles, deliverables. */
.ledger { list-style: none; padding: 0; margin: 0 0 1.5rem; border-top: 1px solid var(--rule); }
.ledger > li { padding: 1.5rem 0 1.6rem; border-bottom: 1px solid var(--rule); max-width: none; }
.ledger h3 { margin: 0 0 0.35rem; }
.ledger h3 a { text-decoration: none; }
.ledger h3 a:hover { text-decoration: underline; text-decoration-color: var(--brass); }
.ledger p { margin: 0; color: var(--ink); }
.ledger .tools { color: var(--stone); font-size: 0.92rem; margin-top: 0.5rem; }
@media (min-width: 48rem) {
  .ledger.two > li { display: grid; grid-template-columns: 15rem 1fr; gap: 2rem; align-items: baseline; }
  .ledger.two h3 { font-size: 1.3rem; }
}

.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 1.6rem; margin-bottom: 0.6rem; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 0.72em; width: 0.8rem; height: 2px; background: var(--brass);
}

/* Questions leaders ask (home) */
.questions { margin: 0; }
.questions dt {
  font-family: var(--serif); font-variation-settings: 'opsz' 28; font-size: 1.45rem; color: var(--patina);
  line-height: 1.25; margin-top: 2.2rem;
}
.questions dt:first-child { margin-top: 0; }
.questions dd { margin: 0.55rem 0 0; }

/* Pull quotes */
.pull { margin: 2.75rem 0; padding: 0 0 0 1.5rem; border-left: 3px solid var(--brass); }
.pull blockquote { margin: 0; }
.pull p {
  font-family: var(--serif); font-style: italic; font-variation-settings: 'opsz' 48;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.3; color: var(--patina); margin: 0; max-width: 30ch;
}
.pull figcaption { margin-top: 0.8rem; color: var(--stone); font-size: 0.93rem; }
.pull-wide { padding: clamp(3rem, 6vw, 5rem) 0; }
.pull-wide .pull { margin: 0; }
.pull-wide .pull p { max-width: 24ch; font-size: clamp(1.75rem, 3.6vw, 2.75rem); }

/* Approach stages */
.stages { list-style: none; padding: 0; margin: 0; counter-reset: stage; }
.stage-num {
  display: block; font-family: var(--serif); font-variation-settings: 'opsz' 72; font-weight: 300;
  font-size: 3.25rem; line-height: 1; color: var(--brass-text); margin-bottom: 0.4rem;
}
.stage-line { display: flex; flex-wrap: wrap; gap: 0.5rem 0; list-style: none; padding: 0; margin: 2rem 0 0; }
.stage-line li { display: flex; align-items: center; font-family: var(--serif); font-size: 1.15rem; color: var(--patina); }
.stage-line li + li::before {
  content: ''; width: 2rem; height: 2px; background: var(--brass); margin: 0 0.75rem; display: inline-block;
}
.stage-line a { text-decoration: none; }
.stage-line a:hover { text-decoration: underline; }
.deliver { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.deliver h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 0.4rem; letter-spacing: 0; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; margin-top: 1.75rem; }
.btn {
  display: inline-block; padding: 0.85rem 1.4rem; font-family: var(--sans); font-weight: 600; font-size: 1rem;
  text-decoration: none; border-radius: 2px; line-height: 1.2;
}
.btn-primary { background: var(--patina); color: var(--white); }
.btn-primary:hover { background: var(--patina-deep); color: var(--white); box-shadow: inset 0 -3px 0 var(--brass-light); }
.btn-quiet { padding-left: 0; padding-right: 0; color: var(--patina); text-decoration: underline; text-underline-offset: 0.25em; }
.btn-quiet:hover { text-decoration-color: var(--brass); }

/* Contact */
.address { font-family: var(--serif); font-variation-settings: 'opsz' 36; font-size: clamp(1.5rem, 3.2vw, 2.2rem); margin: 0 0 1rem; }
.address a { text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.steps { padding-left: 1.4rem; }
.steps li { margin-bottom: 0.9rem; padding-left: 0.3rem; }
.steps li::marker { font-family: var(--serif); color: var(--brass-text); font-weight: 600; }

/* Footer */
.site-footer { background: var(--patina); color: #dfe8e5; padding: 4rem 0 2rem; font-size: 0.95rem; }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--white); text-decoration-color: var(--brass-light); }
.site-footer :focus-visible { outline-color: var(--brass-light); }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .footer-grid { grid-template-columns: 2fr 1fr 1.2fr; gap: 4rem; } }
.footer-logo { display: inline-flex; margin-bottom: 1rem; }
.footer-logo .logo { width: 9.5rem; }
.site-footer .logo path, .site-footer .logo text { stroke: var(--white); }
.site-footer .logo text { fill: var(--white); stroke: none; }
.site-footer .logo circle { fill: var(--brass-light); }
.footer-brand p { max-width: 34rem; }
.footer-heading { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; color: var(--white); letter-spacing: 0; margin: 0 0 0.8rem; }
.footer-col ul, .footer-legal ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.5rem; }
.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.88rem;
}
.footer-legal p { margin: 0; }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

/* 404 */
.not-found .standfirst { margin-bottom: 1.5rem; }

/* Briefing questions: room to breathe between answers. */
.faq-q { font-size: 1.35rem; margin-bottom: 0.5rem; }
.main * + .faq-q { margin-top: 2.4rem; }
@media (max-width: 59.99rem) { .page-head .aside { order: 2; } }