/* Technology Guild — Source Serif 4 display, Geist body. Self-hosted OFL fonts. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --paper: #F3F0E8; --paper-2: #EAE6DB; --paper-3: #E4DFD2;
  --ink: #20251F; --ink-2: #343A32; --moss: #4B604B; --sage: #8A9E87; --mist: #DCE2D7;
  --rule: rgba(32, 37, 31, .24); --dim: #5A6057; --bad: #9E3B26; --dim-on-dark: #B9BFB4;
  --serif: "Source Serif 4", "Iowan Old Style", "Charter", "Sitka Text", Georgia, serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 20px;
  color-scheme: light;
}
@media (min-width: 400px) { :root { --gutter: 24px; } }
@media (min-width: 768px) { :root { --gutter: 40px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

* { box-sizing: border-box; }
html { overscroll-behavior: none; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior: none; margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
svg { display: block; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 12px; top: 12px; z-index: 50; padding: 12px 16px; background: var(--ink); color: var(--paper); }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.fine { font-size: 14px; color: var(--dim); }
.label { font-size: 15px; color: var(--dim); }
.lede { margin-top: 18px; font-size: clamp(18px, 4.6vw, 22px); line-height: 1.45; font-weight: 300; max-width: 38ch; }

/* Logo lockup: the G mark beside the wordmark. The form is fixed; colours
   follow the ground (ink C + moss hook on light, paper C + sage hook on ink). */
.lockup { display: inline-flex; align-items: center; gap: .3em; color: var(--ink); }
.mark { flex: none; width: auto; height: 1.18em; }
.mark-c { fill: var(--mark-c, currentColor); }
.mark-hook { fill: var(--mark-hook, var(--moss)); }
.wm { display: inline-grid; justify-items: center; line-height: 1; color: inherit; }
.wm-top { font: 600 .25em/1 var(--sans); letter-spacing: .34em; margin: 0 0 .1em .34em; text-transform: uppercase; }
.wm-main { font: 700 1em/.86 var(--serif); letter-spacing: -.03em; }
.lk-nav, .lk-foot { font-size: 28px; }
.home { display: inline-flex; align-items: center; min-height: 44px; }

/* The call to action: text with a moss rule under text and arrow, 44px tall */
.cta { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 0 6px; border: 0; background: none; font: 400 17px/1.3 var(--sans); color: var(--ink); cursor: pointer; }
.cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--moss); transition: height .2s ease; }
.cta:hover::after { height: 3px; }
.cta .arrow, .go .arrow { width: 20px; height: 11px; flex: none; transition: transform .2s ease; }
.cta:hover .arrow { transform: translateX(4px); }

/* Header: wordmark, then navigation on its own row on narrow screens */
.mast-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 24px; padding-top: 14px; }
.mast nav { width: 100%; }
.mast nav ul { display: flex; gap: 26px; }
.mast nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.mast nav a:hover { text-decoration: underline; text-decoration-color: var(--rule); }
.mast nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--moss); }
@media (min-width: 600px) {
  .mast-in { flex-wrap: nowrap; padding-top: 22px; }
  .mast nav { width: auto; }
  .mast nav ul { gap: 30px; }
  .lk-nav, .lk-foot { font-size: 32px; }
}

/* Hero */
.hero { display: grid; gap: 28px; padding-top: 32px; padding-bottom: 40px; }
.hero h1 { font-size: clamp(34px, 9.6vw, 64px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.br-wide { display: none; }
.hero-cta { margin-top: 22px; }
.hero-art { display: none; margin: 0; }
.comp { width: 100%; height: auto; }
@media (min-width: 700px) {
  .hero { grid-template-columns: minmax(0, 1fr) 170px; gap: 40px; align-items: start; padding-top: 60px; padding-bottom: 56px; }
  .hero h1 { font-size: clamp(38px, 5.6vw, 56px); }
  .hero-art { display: block; margin-top: 8px; }
}
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr) 250px; gap: 56px; padding-top: 76px; padding-bottom: 68px; }
  .hero h1 { font-size: clamp(42px, 4.1vw, 59px); line-height: 1.02; text-wrap: wrap; }
  .br-wide { display: inline; }
}

/* Expertise rows (home): number and arrow share the top line on mobile */
.rows { border-top: 1px solid var(--rule); }
.rows li { border-bottom: 1px solid var(--rule); }
.rows a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n go" "t t" "d d"; gap: 6px 16px; padding: 18px 0 22px; }
.rows .n { grid-area: n; font-size: 14px; color: var(--moss); align-self: center; }
.rows .go { grid-area: go; align-self: center; }
.rows .t { grid-area: t; font: 400 clamp(23px, 6.2vw, 30px)/1.15 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.rows .d { grid-area: d; font-size: 16px; color: var(--ink-2); max-width: 52ch; }
.rows a:hover .go .arrow { transform: translateX(4px); }
.rows a:hover .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
@media (min-width: 900px) {
  .rows a { grid-template-columns: 64px minmax(0, 1.05fr) minmax(0, 1fr) 40px; grid-template-areas: "n t d go"; gap: 0; align-items: center; padding: 26px 0; }
  .rows .t { font-size: 28px; padding-right: 32px; }
  .rows .d { border-left: 1px solid var(--rule); padding: 6px 0 6px 40px; }
  .rows .go { justify-self: end; }
}
.areas { padding-bottom: 64px; }
.industry { margin-top: 32px; font: 400 clamp(21px, 5.4vw, 30px)/1.28 var(--serif); letter-spacing: -0.015em; max-width: 34ch; }

/* Industries (home) */
.industries { padding-bottom: 64px; scroll-margin-top: 16px; }
.industries h2 { font-size: clamp(30px, 8vw, 44px); line-height: 1.05; }
.inds { margin-top: 22px; display: grid; }
.inds li { display: grid; gap: 6px; align-content: start; padding: 18px 0 20px; border-top: 1px solid var(--rule); }
.inds h3 { font: 400 clamp(22px, 5.6vw, 26px)/1.2 var(--serif); letter-spacing: -0.015em; }
.inds p { font-size: 16px; color: var(--ink-2); max-width: 44ch; }
@media (min-width: 768px) { .inds { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 1100px) { .inds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Colour bands: full-width grounds that carry a whole section */
.band { padding: 60px 0 52px; }
.band-moss { background: var(--moss); color: var(--paper); }
.band-moss :focus-visible { outline-color: var(--paper); }

/* Approach (a moss band) */
.approach h2 { font-size: clamp(30px, 8vw, 44px); line-height: 1.05; }
.steps { margin-top: 22px; display: grid; }
.steps li { display: grid; gap: 6px; padding: 18px 0 20px; border-top: 1px solid rgba(243, 240, 232, .32); }
.steps .n { font-size: 14px; color: var(--mist); }
.steps h3 { font: 400 clamp(22px, 5.6vw, 26px)/1.2 var(--serif); letter-spacing: -0.015em; }
.steps p { font-size: 16px; color: var(--mist); max-width: 40ch; }
@media (min-width: 768px) {
  .band { padding: 84px 0 76px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
  .steps li { border-top: 1px solid var(--paper); padding-top: 20px; }
}

/* Contact */
.contact { display: grid; gap: 28px; padding-top: 72px; padding-bottom: 64px; scroll-margin-top: 16px; }
.contact-head h2 { font-size: clamp(32px, 8.4vw, 56px); line-height: 1.04; letter-spacing: -0.03em; }
.form { display: grid; gap: 22px; width: 100%; min-width: 0; max-width: 620px; }
.field { display: grid; min-width: 0; gap: 2px; }
.field label { font-size: 15px; color: var(--ink-2); }
.opt { color: var(--dim); }
.field input, .field textarea { width: 100%; min-height: 44px; padding: 8px 0 10px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; font: 400 18px/1.4 var(--sans); color: var(--ink); overscroll-behavior: none; -webkit-appearance: none; appearance: none; }
.field textarea { resize: vertical; min-height: 112px; }
.field input:focus, .field textarea:focus { border-bottom: 2px solid var(--ink); padding-bottom: 9px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--moss); outline-offset: 4px; }
.field.err input, .field.err textarea { border-bottom: 2px solid var(--bad); padding-bottom: 9px; }
.field .msg { font-size: 14px; color: var(--bad); }
.field .msg:empty { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.send:disabled { opacity: .55; cursor: progress; }
.form-status { min-height: 22px; font-size: 15px; }
.form-status.bad { color: var(--bad); }
.sent { display: grid; gap: 8px; }
.sent-head { font: 700 30px/1.1 var(--serif); letter-spacing: -0.02em; }
.contact-aside { display: grid; gap: 2px; align-content: start; }
.addr { font-size: 18px; overflow-wrap: anywhere; }
.addr a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 5px; }
.addr a:hover { text-decoration-color: var(--ink); }
.contact-aside .fine { margin-top: 12px; max-width: 36ch; }
@media (min-width: 900px) {
  .contact { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 80px; row-gap: 36px; }
  .contact-head { grid-column: 1 / -1; }
}

/* Expertise page */
.page-head { padding-top: 36px; padding-bottom: 28px; }
.page-head h1 { font-size: clamp(42px, 12vw, 96px); line-height: 1; letter-spacing: -0.035em; }
.page-head .lede { max-width: 52ch; }
.expertise { padding-bottom: 64px; }
.xp { display: grid; gap: 8px; padding: 24px 0 28px; border-top: 1px solid var(--rule); scroll-margin-top: 16px; }
.xp .n { font-size: 14px; color: var(--moss); }
.xp h2 { font: 400 clamp(25px, 6.6vw, 36px)/1.12 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.xp-main p { margin-top: 8px; font-size: 16px; color: var(--ink-2); max-width: 52ch; }
.xp-list { margin-top: 6px; }
.xp-list li { position: relative; padding: 5px 0 5px 18px; font-size: 16px; color: var(--ink-2); }
.xp-list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 1px; background: var(--moss); }
.expertise .industry { padding-top: 28px; border-top: 1px solid var(--rule); margin-top: 0; }
.expertise .fine { margin-top: 18px; }
@media (min-width: 900px) {
  .page-head { padding-top: 64px; padding-bottom: 40px; }
  .xp { grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 40px; padding: 34px 0; }
  .xp .n { padding-top: 12px; }
  .xp-list { margin-top: 0; border-left: 1px solid var(--rule); padding: 4px 0 4px 40px; align-self: start; }
}

/* Notices */
.notice { padding-bottom: 80px; }

/* Privacy notice: readable prose; links on their own lines (44px targets) */
.page-head .updated { margin-top: 14px; }
.prose { padding-bottom: 72px; }
.prose h2 { margin-top: 34px; font: 400 clamp(22px, 5.6vw, 26px)/1.2 var(--serif); letter-spacing: -0.015em; }
.prose p, .prose li { max-width: 64ch; font-size: 16px; color: var(--ink-2); }
.prose p { margin-top: 10px; }
.prose ul { margin-top: 10px; }
.prose li { position: relative; padding: 4px 0 4px 18px; }
.prose li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 1px; background: var(--moss); }
.prose .addr { margin-top: 6px; font-size: 16px; }
.pn a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 5px; }
.pn a:hover { text-decoration-color: var(--ink); }

/* Footer: an ink band with the reversed lockup */
.foot { background: var(--ink); color: var(--paper); --mark-hook: var(--sage); }
.foot :focus-visible { outline-color: var(--paper); }
.foot .lockup, .foot .cta { color: var(--paper); }
.foot .cta::after { background: var(--sage); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 28px; }
.foot-fine { display: flex; flex-wrap: wrap; column-gap: 24px; padding-top: 6px; padding-bottom: 24px; font-size: 14px; color: var(--dim-on-dark); }
.foot-fine p, .foot-fine a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-fine a:hover { color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Inquiry survey: paper tiles, moss selection, ochre detail. */
.field-help { font-size:13px; line-height:1.5; color:var(--dim); margin-top:6px; }
.field input::placeholder,.field textarea::placeholder { color:var(--dim); opacity:1; font-size:15px; }
.intake-survey { display:grid; gap:28px; border-top:1px solid var(--rule); padding-top:26px; }
.intake-heading h3 { font:500 27px/1.2 var(--serif); letter-spacing:-.02em; }
.intake-heading p { font-size:13px; line-height:1.5; color:var(--dim); margin-top:8px; }
.choice-field { display:block; min-width:0; min-inline-size:0; width:100%; border:0; padding:0; margin:0; }
.choice-field legend { font:400 15px/1.4 var(--sans); color:var(--ink-2); padding:0; margin-bottom:12px; }
.choice-options { display:grid; gap:10px; }
.timing-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
.budget-options { grid-template-columns:repeat(4,minmax(0,1fr)); }
.choice { position:relative; display:block; cursor:pointer; min-width:0; }
.choice input { position:absolute; width:1px; height:1px; min-height:0; margin:0; padding:0; opacity:0; border:0; }
.choice-face { position:relative; display:flex; flex-direction:column; gap:7px; min-height:114px; padding:15px; border:1px solid var(--rule); border-radius:7px; background:var(--paper); transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,transform 160ms ease; }
.choice-face b { font:500 23px/1.15 var(--serif); color:var(--ink); }
.choice-face small { font:400 12px/1.4 var(--sans); color:var(--dim); }
.choice-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:3px; }
.choice-number { font:400 11px/1 var(--sans); color:var(--moss); }
.choice-check { opacity:0; color:var(--accent); font:600 15px/1 var(--sans); transition:opacity 140ms ease; }
.choice input:checked + .choice-face { background:var(--dark); border-color:var(--dark); }
.choice input:checked + .choice-face b { color:var(--on-dark); }
.choice input:checked + .choice-face small,.choice input:checked + .choice-face .choice-number { color:var(--dim-on-dark); }
.choice input:checked + .choice-face .choice-check { opacity:1; }
.choice input:focus-visible + .choice-face { outline:2px solid var(--moss); outline-offset:4px; }
.choice:active .choice-face { transform:translateY(1px); }
.budget-face { min-height:100px; align-items:center; justify-content:center; padding:18px 7px 12px; text-align:center; }
.budget-face b { font-size:29px; }
.budget-face .choice-check { position:absolute; right:9px; top:9px; font-size:12px; }
.open-timing { display:inline-flex !important; align-items:center; gap:8px; min-height:44px; margin-top:4px; font-size:13px !important; color:var(--dim) !important; cursor:pointer; }
.open-timing input { appearance:auto; -webkit-appearance:auto; accent-color:var(--moss); width:15px; height:15px; min-height:0; padding:0; margin:0; border:0; }
.timing-detail[hidden],.intake-recap[hidden] { display:none; }
.intake-recap { border-left:2px solid var(--accent); padding:10px 14px; font-size:13px; color:var(--ink-2); line-height:1.5; background:var(--mist); }
@media(hover:hover) and (pointer:fine) { .choice:hover .choice-face { border-color:var(--moss); transform:translateY(-2px); } .choice:hover input:checked + .choice-face { border-color:var(--accent); } }
@media(max-width:420px) { .budget-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .choice-face { padding:13px; } .choice-face b { font-size:21px; } .budget-face b { font-size:28px; } }
@media(prefers-reduced-motion:reduce) { .choice-face,.choice-check { transition:none; } .choice:hover .choice-face,.choice:active .choice-face { transform:none; } }


/* Visible, aligned selectors; immediate feedback without hiding context. */
.compact-form { gap: 18px; }
.contact-basics { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.3fr); gap: 20px; }
.contact-basics .field { min-width: 0; }
.compact-form .field label, .compact-form .choice-field legend { font-size: 14px; }
.compact-form .choice-field legend { margin: 0; }
.chip-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.chip { position: relative; display: block; cursor: pointer; margin: 0; min-width: 0; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; border: 0; }
.chip span { display: flex; align-items: center; justify-content: flex-start; gap: 9px; height: 100%; min-height: 56px; padding: 10px 13px; text-align: left; border: 1px solid #B9C3B3; border-radius: 6px; background: #E8ECE2; color: var(--dark,#1D3121); font: 400 14px/1.35 var(--sans); transition: transform 120ms cubic-bezier(.2,.7,.3,1); }
.chip span::before { content: "+"; width: 12px; flex: 0 0 12px; text-align: center; color: var(--moss); }
.chip input:checked + span { background: var(--dark,#1D3121); color: var(--paper); border-color: var(--dark,#1D3121); box-shadow: 0 2px 5px #1D31211A; }
.chip input:checked + span::before { content: "✓"; color: #D7C18D; }
.chip input:focus-visible + span { outline: 2px solid var(--moss); outline-offset: 3px; }
.chip:active span { transform: scale(.96); }
.focus-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.focus-options .chip span { min-height: 80px; }
.contact-context { display: grid; gap: 18px; border-top: 1px solid var(--rule); padding-top: 18px; }
.context-invite { color: var(--ink); font-size: 14px; }
.context-invite span { display: block; color: var(--dim); font-size: 12px; margin-top: 3px; }
.context-selectors { display: grid; gap: 17px; }
/* Keep the native legend outside the choice grid. Safari lays out fieldset
   contents through an anonymous box, so a grid on fieldset can squeeze the
   entire button group into its first column. */
.context-selectors .choice-field { display: block; }
.context-selectors .choice-field legend { float: none; width: auto; max-width: 100%; padding: 0; margin-bottom: 6px; }
.context-selectors .chip-options { width: 100%; min-width: 0; margin-top: 0; }
.context-selectors .choice-field .msg { display: block; }
.context-selectors .choice-field .msg:empty { display: none; }
.context-selectors .chip span { min-height: 56px; padding: 10px 13px; font-size: 14px; }
.compact-form .timing-options, .compact-form .budget-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.compact-form .field textarea { min-height: 44px; font-size: 16px; }
.compact-form .form-status:empty { display: none; }
.org-suggestion { margin: 0; }
.org-suggestion button { padding: 9px 15px; border: 1px solid var(--moss); border-radius: 6px; background: var(--mist); color: var(--ink); font: 400 13px/1.4 var(--sans); cursor: pointer; max-width: 100%; overflow-wrap: anywhere; margin-right: 8px; }
button { border-radius: 6px; }
.compact-form .send { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 48px; padding: 12px 24px; border: 1px solid var(--dark); border-radius: 6px; background: var(--dark); color: var(--paper); font: 400 16px/1.4 var(--sans); transition: transform 120ms cubic-bezier(.2,.7,.3,1); }
.compact-form .send:active, .org-suggestion button:active { transform: scale(.97); }
.compact-form .intake-recap { font-size: 12px; padding: 8px 12px; border-radius: 6px; }
@media(hover:hover) and (pointer:fine) { .chip:hover span { background: #DCE4D4; border-color: var(--moss); } .chip:hover input:checked + span { background: #304D34; } .compact-form .send:hover { background: #304D34; } }
@media(max-width:540px) { .context-selectors .choice-field { display: block; } .context-selectors .choice-field legend { float: none; width: auto; padding: 0; margin-bottom: 8px; }  }
@media(prefers-reduced-motion:reduce) { .chip span,.compact-form .send { transition: none; } .chip:active span,.compact-form .send:active,.org-suggestion button:active { transform: none; } }

.compact-form .send::after { display: none; }
.quick-send { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.quick-send .field-help { font-size: 12px; }

/* Compact decision tree: every decision stays visible on a mobile screen. */
.chip span, .context-selectors .chip span { min-height: 36px; padding: 6px 9px; gap: 6px; font-size: 13px; line-height: 1.25; }
.chip span::before { width: 8px; flex-basis: 8px; font-size: 10px; }
.focus-options .chip span { min-height: 44px; }
.chip-options { gap: 5px; }
.contact-context { gap: 10px; padding-top: 10px; }
.context-selectors { gap: 10px; }
.context-selectors .choice-field legend { padding-top: 0; }
.contact-extras { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
.contact-extras .field { min-width: 0; align-content: start; }
.compact-form .send { min-height: 38px; padding: 8px 16px; gap: 12px; font-size: 14px; }
.compact-form .send .arrow { width: 15px; height: 9px; }
.intake-recap.sr { margin: 0; padding: 0; border: 0; }
@media(max-width:540px) {
  .contact { gap: 10px; padding-top: 28px; padding-bottom: 28px; scroll-margin-top: 8px; }
  .contact-head .kick { display: none; }
  .contact-head h2 { font-size: 29px; line-height: 1.1; }
  .contact-head .lede { margin-top: 5px; font-size: 13px; line-height: 1.35; }
  .compact-form { gap: 8px; }
  .contact-basics, .contact-extras { gap: 12px; }
  .compact-form .field label, .compact-form .choice-field legend { font-size: 12px; line-height: 1.25; }
  .compact-form .field input, .compact-form .field textarea { min-height: 30px; height: 30px; padding: 3px 0; font-size: 16px; line-height: 1.3; }
  .compact-form .field textarea { resize: vertical; }
  .chip-options { gap: 0 5px; margin-top: 3px; }
  .chip { padding-block: 3px; }
  .chip span, .context-selectors .chip span { min-height: 32px; padding: 5px 7px; gap: 5px; font-size: 12px; line-height: 1.2; }
  .focus-options .chip span { min-height: 40px; }
  .chip span::before { width: 7px; flex-basis: 7px; font-size: 9px; }
  .contact-context { border: 0; padding: 0; gap: 6px; }
  .context-selectors { gap: 6px; }
  .context-selectors .choice-field legend { margin-bottom: 0; padding: 0; }
  .context-selectors .chip-options { margin-top: 3px; }
  .constraint-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .constraint-options .chip span { font-size: 11px; }
  .compact-form .send { min-height: 36px; padding: 7px 15px; font-size: 14px; }
  .compact-form .field .opt { font-size: 10px; }
  .org-suggestion button { padding: 5px 8px; font-size: 11px; }
  .org-suggestion .field-help, #org-confirmed { font-size: 10px; }
}

.choice-wide, .choice-short { font: inherit; }
.choice-short, .budget-key { display: none; }
@media(max-width:540px) {
 .contact { padding-top: 16px; gap: 8px; }
 .compact-form { gap: 4px; }
 .choice-wide { display: none; }
 .choice-short { display: inline; }
 .compact-form .timing-options, .compact-form .budget-options { grid-template-columns: repeat(4,minmax(0,1fr)); }
 .timing-options .chip span, .budget-options .chip span { padding-inline: 4px; justify-content: center; gap: 3px; font-size: 11px; }
 .budget-key { display: inline; font: 400 10px var(--sans); color: var(--dim); margin-left: 8px; }
 .contact-extras .field:has(#f-org) { position: relative; }
 .org-suggestion { position: absolute; bottom: 2px; left: 0; max-width: 100%; }
 .org-suggestion .field-help { display: none; }
 .org-suggestion button { display: block; max-width: 100%; padding: 4px 6px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.selection-hint { font: 400 10px var(--sans); color: var(--dim); margin-left: 5px; }
.inquiry-brief[hidden] { display: none; }
.brief-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brief-heading button { padding: 3px 6px; border: 1px solid var(--rule); background: var(--mist); font: 400 11px var(--sans); cursor: pointer; }
.inquiry-brief textarea { padding: 7px 9px; border: 1px solid var(--rule); border-radius: 6px; background: #E8ECE2; font-size: 13px; }
@media(max-width:540px) {
 .chip { padding-block: 2px; }
 .chip span, .context-selectors .chip span { min-height: 28px; padding-block: 4px; }
 .focus-options .chip span { min-height: 36px; }


 .brief-heading button { font-size: 10px; padding: 2px 5px; }
}
@media(max-width:540px) {
 .context-selectors { gap: 4px; }
 .contact-context { gap: 4px; }
 .contact-head h2 { font-size: 27px; }
}

/* A readable brief grows with its content; the surrounding inputs stay compact. */
.contact-extras { align-items: start; }
.compact-form .contact-extras textarea { height: 44px; min-height: 44px; }
.contact-extras .field:has(#f-org) { position: relative; }
.org-suggestion { position: absolute; top: 26px; bottom: auto; left: 0; right: 0; max-width: 100%; }
.org-suggestion button { display: block; padding: 5px 9px; margin: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-suggestion .field-help { display: none; }
.compact-form .inquiry-brief { gap: 6px; }
.compact-form .inquiry-brief textarea,
.compact-form .inquiry-brief textarea:focus { height: auto; min-height: 128px; padding: 12px 14px; border: 1px solid #B9C3B3; border-radius: 6px; font: 400 16px/1.5 var(--sans); overflow-y: hidden; resize: vertical; }
@media(max-width:540px) {
 .compact-form .contact-extras textarea { height: 30px; min-height: 30px; }
 .org-suggestion { top: 18px; bottom: auto; }
 .org-suggestion button { padding: 3px 6px; font-size: 11px; }
 .compact-form .inquiry-brief { gap: 4px; }
 .compact-form .inquiry-brief textarea,
 .compact-form .inquiry-brief textarea:focus { min-height: 112px; padding: 10px 12px; line-height: 1.45; }
}

/* Brand identity (brand/identity.json): route keystone/03-gibbs-bold, palette moss-ochre. Generated by build.mjs. */
:root {
  --paper: #F3F0E8;
  --paper-2: #EAE6DB;
  --paper-3: #E4DFD2;
  --ink: #20251F;
  --ink-2: #343A33;
  --dim: #5A6057;
  --rule: #D2CDC2;
  --moss: #4B604B;
  --sage: #8A9E87;
  --mist: #DCE2D7;
  --dim-on-dark: #B8C1B5;
  --accent: #AA7F35;
  --dark: #1D3121;
  --on-dark: #F3F0E8;
}
.foot { background: var(--dark); color: var(--on-dark); }
.foot :focus-visible { outline-color: var(--on-dark); }
.foot .lockup, .foot .cta, .foot-fine a:hover { color: var(--on-dark); }
/* Route logo: colours for the mark's classes, then the lockup and its wordmark. */
.lk { --logo-fg: var(--moss); --logo-acc: var(--accent); --logo-bg: var(--paper); }
.foot .lk { --logo-fg: var(--on-dark); --logo-acc: var(--accent); --logo-bg: var(--dark); }
.lk .fg { fill: var(--logo-fg); }
.lk .acc { fill: var(--logo-acc); }
.lk .bg { fill: var(--logo-bg); }
.lk .fg-s { fill: none; stroke: var(--logo-fg); }
.lk .acc-s { fill: none; stroke: var(--logo-acc); }
.lk .bg-s { fill: none; stroke: var(--logo-bg); }
.lk-row { --h: 44px; --fs: 13.2px; --wf: var(--serif); --ww: 500; --tt: uppercase; --ls: 0.08em; --sg: 0; --g: 0.06; display: inline-flex; align-items: center; color: var(--logo-fg); white-space: nowrap; gap: calc(var(--h) * var(--g)); }
.lk-m { flex: none; width: var(--h); height: var(--h); }
.lk-w { position: relative; font-family: var(--wf); font-weight: var(--ww); text-transform: var(--tt); line-height: 1; text-box: trim-both cap alphabetic; }
.lk-l { display: block; font-size: calc(var(--fs) * var(--sc, 1)); letter-spacing: var(--ls); margin-right: calc(var(--ls) * -1); }
.lk-l + .lk-l { margin-top: calc(var(--fs) * var(--sg)); }