/* Hallmark · macrostructure: Split Studio · genre: editorial · tone: human, precise
 * theme: studied-DNA (source: approved digital-dissolve art direction)
 * paper: oklch(96% .006 250) · ink: oklch(19% .008 250) · Anton + Switzer
 * nav: compact edge-aligned · footer: inline colophon · motion: none
 * pre-emit critique: P5 H5 E4 S5 R5 V4 */
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
p, h1, h2, h3, figure, dl, dd { margin: 0; }
p + p { margin-top: var(--space-md); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; font-style: normal; text-transform: uppercase; line-height: 1.06; letter-spacing: -.015em; min-width: 0; overflow-wrap: anywhere; }
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-section); }
h3 { font-size: var(--text-title); }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a, button, summary { -webkit-tap-highlight-color: var(--color-transparent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 5px; }
::selection { background: var(--color-ink); color: var(--color-paper); }
.site-shell { max-width: 1600px; margin-inline: auto; }
.skip-link { position: fixed; z-index: 10; left: 16px; top: -100px; padding: 12px 20px; background: var(--color-paper); }
.skip-link:focus { top: 12px; }
.site-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); padding: var(--space-lg) var(--gutter); border-bottom: var(--rule); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: 1.0625rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.brand img { width: 32px; height: 40px; }
.header-note { display: none; }
nav { display: flex; align-items: center; gap: var(--space-lg); margin-left: auto; }
nav a { display: inline-flex; gap: var(--space-sm); align-items: center; min-height: 44px; font-size: var(--text-small); white-space: nowrap; text-decoration: none; }
nav a:hover { text-decoration: underline; }
nav a:last-child { font-weight: 600; }
.hero { display: grid; grid-template-columns: minmax(0,1fr); padding: var(--space-2xl) var(--gutter) var(--space-3xl); gap: var(--space-2xl); align-items: center; }
.hero-lead { font-size: 1.125rem; margin-bottom: var(--space-md); }
.hero h1 { font-size: clamp(2.625rem, 10vw, 5rem); }
.hero-description { max-width: 46ch; margin-top: var(--space-xl); }
.hero-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
.hero-end > p { font-size: .8125rem; line-height: 1.4; }
.hero-portrait { min-width: 0; }
.hero-portrait img { width: 100%; aspect-ratio: 710 / 568; object-fit: contain; transform: scaleX(-1); }
.hero-portrait figcaption { font-size: .75rem; margin-top: var(--space-sm); text-align: right; }
.action { display: inline-flex; justify-content: space-between; align-items: center; gap: var(--space-xl); min-height: 52px; max-width: 100%; padding: 16px 20px; background: var(--color-accent); color: var(--color-on-accent); border: 0; border-radius: var(--radius); font-family: var(--font-body); font-size: .9375rem; line-height: 1.2; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.action span { font-size: 1.375rem; line-height: 1; }
.action:hover:not(:disabled) { text-decoration: underline; }
.action:active:not(:disabled) { text-decoration: underline; text-decoration-thickness: 2px; }
.action:disabled { opacity: .55; cursor: progress; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-lg); font-size: .9375rem; font-weight: 600; white-space: nowrap; }
.section { padding: var(--space-3xl) var(--gutter); }
.section-head { margin-bottom: var(--space-2xl); }
.section-head h2 { max-width: 16ch; }
.section-head > p { max-width: 49ch; margin-top: var(--space-lg); color: var(--color-muted); }
.intro { display: grid; gap: var(--space-xl); background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-3xl); }
.intro h2 { max-width: 16ch; }
.intro-copy { max-width: 51ch; color: var(--color-inverse-muted); }
.coverage { padding-top: var(--space-4xl); }
.offer-list { border-bottom: var(--rule); }
.offer { padding-block: var(--space-2xl); border-top: var(--rule); display: grid; gap: var(--space-xl); }
.offer h3 { max-width: 17ch; }
.offer-label { font-size: var(--text-small); font-weight: 600; margin-bottom: var(--space-lg); }
.offer-detail, .marketing-copy > p:not(.offer-label) { max-width: 52ch; }
.marketing-copy > p:not(.offer-label) { margin-top: var(--space-lg); }
.offer ul { list-style: none; padding: 0; margin: var(--space-xl) 0 0; }
.offer li { padding-block: 12px; border-top: var(--rule); font-size: .9375rem; }
.marketing-channels > div { padding-block: var(--space-lg); border-top: var(--rule); }
.marketing-channels > div:first-child { padding-top: 0; border: 0; }
.marketing-channels dt { font-size: 1.125rem; font-weight: 600; margin-bottom: var(--space-sm); }
.marketing-channels dd { color: var(--color-muted); max-width: 44ch; }
.marketing-measure { color: var(--color-muted); font-size: var(--text-small); max-width: 72ch; }
.section-note { color: var(--color-muted); max-width: 76ch; font-size: var(--text-small); margin-top: var(--space-xl); }
.marketing-context { max-width: 76ch; margin-top: var(--space-2xl); }
.marketing-context h3 { font: 600 1.125rem/1.5 var(--font-body); text-transform: none; letter-spacing: 0; margin-bottom: var(--space-sm); }
.marketing-context p { color: var(--color-muted); }
.outcome-promise { margin-top: var(--space-2xl); font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.2; text-transform: uppercase; }
.connection { background: var(--color-panel); }
.business-questions { display: grid; gap: var(--space-xl) var(--space-3xl); }
.business-questions > div { border-top: var(--rule); padding-top: var(--space-lg); }
.business-questions dt { font-size: 1.125rem; font-weight: 600; margin-bottom: var(--space-sm); }
.business-questions dd { max-width: 48ch; color: var(--color-muted); }
@media (min-width: 640px) {
  .business-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.journey { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl); counter-reset: journey; }
.journey li { counter-increment: journey; position: relative; padding-top: var(--space-xl); border-top: 1px solid var(--color-ink); }
.journey li::before { content: counter(journey, decimal-leading-zero); display: block; font-size: var(--text-small); margin-bottom: var(--space-lg); }
.journey h3 { font-family: var(--font-body); font-size: 1.1875rem; line-height: 1.3; font-weight: 600; text-transform: none; letter-spacing: 0; max-width: 21ch; }
.journey p { font-size: .9375rem; margin-top: var(--space-md); max-width: 38ch; color: var(--color-muted); }
.work { padding-block: var(--space-4xl); }
.work-grid { display: grid; gap: var(--space-3xl); }
.case { display: grid; gap: var(--space-xl); align-items: center; }
.case-image { display: block; }
.case-image img { width: 100%; aspect-ratio: 1.6; object-fit: contain; }
.case-client { font-size: var(--text-small); margin-bottom: var(--space-lg); }
.case-copy h3 { max-width: 18ch; margin-bottom: var(--space-lg); }
.case-copy > p:not(.case-client) { max-width: 50ch; color: var(--color-muted); }
.case-tender { padding-top: var(--space-2xl); border-top: var(--rule); }
.tender-visual { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2xl); min-height: 360px; padding: var(--space-xl); background: var(--color-ink); color: var(--color-paper); }
.workflow-caption { color: var(--color-inverse-muted); font-size: .75rem; }
.workflow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: var(--space-md); align-items: center; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.5rem, 2.6vw, 2.5rem); }
.workflow b { font-family: var(--font-body); font-weight: 400; font-size: 1.25rem; }
.workflow b:nth-child(4) { grid-column: 1 / -1; transform: rotate(90deg); justify-self: center; }
.tender-visual > p:last-child { font-size: var(--text-small); }
.pricing { padding-top: var(--space-3xl); border-top: var(--rule); }
.engagement-list { display: grid; gap: var(--space-2xl); }
.engagement { border-top: 1px solid var(--color-ink); padding-top: var(--space-xl); }
.engagement h3 { font-family: var(--font-body); font-size: 1.1875rem; text-transform: none; font-weight: 600; letter-spacing: 0; }
.engagement .amount { font-family: var(--font-display); font-size: clamp(2.75rem, 5vw, 5rem); line-height: 1; letter-spacing: -.02em; margin: var(--space-xl) 0 var(--space-lg); }
.amount span { display: block; font-family: var(--font-body); font-size: var(--text-small); letter-spacing: 0; line-height: 1.5; margin-top: var(--space-md); }
.support-label { font-size: 1.5rem; line-height: 1.35; max-width: 24ch; margin-block: var(--space-xl) var(--space-lg); }
.engagement > p:last-child { color: var(--color-muted); max-width: 49ch; }
.pricing-end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: var(--space-lg); border-top: var(--rule); margin-top: var(--space-2xl); padding-top: var(--space-xl); }
.pricing-end p { color: var(--color-muted); font-size: var(--text-small); max-width: 58ch; }
.pricing-end .text-link { margin: 0; }
.about { display: grid; gap: var(--space-2xl); align-items: center; padding-block: var(--space-4xl); background: var(--color-portrait-backdrop); isolation: isolate; }
.portrait { max-width: 480px; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; transform: none; }
.about .portrait img { mix-blend-mode: darken; }
.portrait p { margin-top: var(--space-md); font-size: var(--text-small); }
.about-copy h2 { max-width: 17ch; margin-bottom: var(--space-xl); }
.about-copy p { max-width: 51ch; }
.faq { padding-block: var(--space-4xl); display: grid; gap: var(--space-2xl); }
.faq h2 { max-width: 11ch; }
.faq-list details { border-top: var(--rule); }
.faq-list details:last-child { border-bottom: var(--rule); }
.faq-list summary { list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); cursor: pointer; font-weight: 500; font-size: 1rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.faq-list summary span { flex: 0 0 auto; font-size: 1.25rem; line-height: 1; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details > p, .faq-answer { padding: 0 var(--space-xl) var(--space-lg) 0; color: var(--color-muted); font-size: .9375rem; max-width: 64ch; }
.faq-answer ul { padding-left: 1.25em; margin-block: var(--space-lg); }
.faq-answer li + li { margin-top: var(--space-md); }
.faq-answer strong { color: var(--color-ink); font-weight: 600; }
.contact { background: var(--color-ink); color: var(--color-paper); --color-focus: var(--color-paper); --color-accent: var(--color-paper); --color-on-accent: var(--color-ink); padding-block: var(--space-4xl); }
.contact-intro { font-size: var(--text-small); margin-bottom: var(--space-lg); }
.contact h2 { font-size: clamp(3.25rem, 7.4vw, 7.5rem); }
.contact-live { display: grid; gap: var(--space-2xl); margin-top: var(--space-2xl); }
.contact-side { max-width: 45ch; color: var(--color-inverse-muted); }
.contact-alt { padding-top: var(--space-xl); font-size: var(--text-small); }
.contact-alt a { display: inline-flex; min-height: 44px; align-items: center; white-space: nowrap; color: var(--color-paper); }
.cpanel { min-width: 0; }
.field { margin-bottom: var(--space-lg); }
.field label { display: block; font-size: var(--text-small); margin-bottom: var(--space-sm); }
.field input, .field textarea { display: block; width: 100%; min-height: 52px; padding: 12px 14px; color: var(--color-paper); background: var(--color-field); border: 1px solid var(--color-inverse-muted); border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; }
.field textarea { min-height: 152px; resize: vertical; }
.field-hint { font-size: .8125rem; color: var(--color-inverse-muted); margin-top: var(--space-sm); max-width: 62ch; }
.hp { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.form-promise { font-size: .8125rem; color: var(--color-inverse-muted); margin: 0; }
.form-status { width: 100%; font-size: var(--text-small); margin: 0; }
.form-status:empty { display: none; }
.form-status.err { color: var(--color-error); }
.form-done { padding-block: var(--space-xl); border-top: var(--rule-inverse); }
.form-done h3 { margin-bottom: var(--space-lg); }
.footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); padding: var(--space-xl) var(--gutter); font-size: .8125rem; }
.footer-brand { flex: 0 0 46px; margin-right: var(--space-md); }
.footer-brand img { width: 46px; height: 80px; }
.footer p { flex: 1 1 210px; }
.footer > a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
@media (min-width: 640px) {
  .engagement-list { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-2xl); }
  .journey { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-xl); }
  .contact-alt a { font-size: 1rem; }
}
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: var(--space-2xl); min-height: min(760px, calc(100svh - 96px)); padding-block: var(--space-3xl); }
  .hero h1 { font-size: var(--text-display); }
  .section { padding-block: var(--space-4xl); }
  .section-head { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: var(--space-3xl); align-items: end; margin-bottom: var(--space-3xl); }
  .section-head > p { margin: 0; max-width: 43ch; }
  .intro { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: var(--space-3xl); padding-block: var(--space-3xl); }
  .intro-copy { padding-top: var(--space-xs); }
  .coverage { padding-top: var(--space-5xl); padding-bottom: var(--space-3xl); }
  .offer { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: var(--space-xl) var(--space-3xl); padding-block: var(--space-3xl); }
  .marketing-copy > p:not(.offer-label) { max-width: 44ch; }
  .marketing-measure { grid-column: 2; }
  .connection { padding-block: var(--space-3xl); }
  .work { padding-block: var(--space-5xl); }
  .work-grid { gap: var(--space-4xl); }
  .case { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: var(--space-3xl); }
  .case:nth-child(2) { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); }
  .case:nth-child(2) .case-image { grid-column: 2; grid-row: 1; }
  .case:nth-child(2) .case-copy { grid-column: 1; grid-row: 1; }
  .case h3 { font-size: clamp(2rem, 3vw, 3rem); }
  .case-tender { padding-top: var(--space-3xl); }
  .tender-visual { min-height: 380px; padding: var(--space-2xl); }
  .engagement-list { gap: var(--space-3xl); }
  .about { grid-template-columns: minmax(0,.8fr) minmax(0,1.1fr); gap: var(--space-5xl); }
  .faq { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: var(--space-3xl); }
  .contact { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); column-gap: var(--space-3xl); }
  .contact-intro { grid-column: 1; }
  .contact h2 { grid-column: 1; }
  .contact-live { display: contents; }
  .contact-side { grid-column: 1; margin-top: var(--space-xl); }
  .cpanel { grid-column: 2; grid-row: 1 / 4; align-self: start; }
}
@media (min-width: 1200px) {
  .header-note { display: block; margin: 0 auto 0 var(--space-2xl); font-size: .8125rem; color: var(--color-muted); }
}
@media (max-width: 479px) {
  .site-header { gap: var(--space-sm); padding-block: var(--space-md); }
  .brand { flex: 1 0 100%; }
  nav { width: 100%; margin: 0; justify-content: space-between; gap: var(--space-md); }
  .hero { padding-top: var(--space-xl); }
  .hero-end > p br { display: none; }
  .tender-visual { padding: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }