/* Fassnacht Marketing Solutions — site styles */
:root {
  --font-display: 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif;
  --font-body: 'Satoshi', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.75rem);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
  --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  --ink: #15171a;
  --ink-2: #1e2125;
  --ink-3: #2a2e33;
  --paper: #f3f1ea;
  --paper-2: #e9e6dc;
  --paper-3: #dcd8cb;
  --text: #1a1c1f;
  --text-muted: #5c6066;
  --text-on-ink: #f3f1ea;
  --text-on-ink-muted: #a6aab0;
  --accent: #e2531d;
  --accent-deep: #c4440f;
  --line: rgba(21, 23, 26, 0.12);
  --line-on-ink: rgba(243, 241, 234, 0.14);

  --radius-sm: .25rem; --radius-md: .5rem; --radius-lg: .75rem;
  --container: 76rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: none; text-size-adjust: none; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.1; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase; }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.hidden-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.skip-link { position: absolute; top: -100%; left: var(--space-4); background: var(--accent); color: #fff; padding: var(--space-2) var(--space-4); z-index: 100; border-radius: var(--radius-sm); }
.skip-link:focus { top: var(--space-4); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 3rem; padding: 0 var(--space-6);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; letter-spacing: .01em;
  border-radius: var(--radius-sm); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--text-on-ink); border-color: var(--line-on-ink); }
.btn-ghost:hover { border-color: var(--text-on-ink); }
.text-link { display: inline-block; margin-top: var(--space-5); font-weight: 700; font-size: var(--text-sm); color: var(--accent-deep); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.text-link:hover { color: var(--accent); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(21, 23, 26, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--text-on-ink); border-bottom: 1px solid var(--line-on-ink);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 4.25rem; gap: var(--space-6); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand-mark {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs); letter-spacing: .08em;
  background: var(--accent); color: #fff; padding: .4rem .5rem; border-radius: var(--radius-sm); line-height: 1;
}
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); line-height: 1.05; }
.nav-list { list-style: none; display: flex; align-items: center; gap: var(--space-5); }
.nav-list a { font-size: var(--text-sm); font-weight: 500; text-decoration: none; color: var(--text-on-ink-muted); transition: color .15s ease; }
.nav-list a:hover { color: var(--text-on-ink); }
.nav-list .nav-cta { color: var(--text-on-ink); border: 1px solid var(--line-on-ink); padding: .5rem .9rem; border-radius: var(--radius-sm); font-weight: 700; }
.nav-list .nav-cta:hover { background: var(--accent); border-color: var(--accent); }
.nav-toggle { display: none; }

/* Hero */
.hero { background: var(--ink); color: var(--text-on-ink); padding-block: clamp(var(--space-16), 10vw, var(--space-32)) 0; position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line-on-ink) 1px, transparent 1px), linear-gradient(90deg, var(--line-on-ink) 1px, transparent 1px);
  background-size: 72px 72px; opacity: .35;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 85%);
}
.hero > * { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(var(--space-10), 6vw, var(--space-24)); align-items: end; }
.eyebrow { color: var(--accent); margin-bottom: var(--space-5); }
.hero h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); letter-spacing: -.02em; max-width: 15ch; }
.lede { margin-top: var(--space-6); font-size: var(--text-lg); line-height: 1.5; color: var(--text-on-ink-muted); max-width: 46ch; font-weight: 400; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-10); }

.hero-panel { background: var(--ink-2); border: 1px solid var(--line-on-ink); border-radius: var(--radius-md); padding: var(--space-6); }
.panel-title { color: var(--text-on-ink-muted); margin-bottom: var(--space-4); }
.stat-list { display: grid; gap: 0; }
.stat { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-top: 1px solid var(--line-on-ink); }
.stat dt { font-size: var(--text-xs); color: var(--text-on-ink-muted); letter-spacing: .02em; }
.stat dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.2; }
.stat:first-child dd { font-size: var(--text-xl); }
.stat:nth-child(2) dd { font-size: var(--text-xl); }
.stat:last-child dd { font-size: var(--text-base); font-family: var(--font-body); font-weight: 500; }
.stat:nth-child(4) dd { font-size: var(--text-base); }

.tool-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); padding-block: var(--space-8); margin-top: clamp(var(--space-12), 7vw, var(--space-20)); border-top: 1px solid var(--line-on-ink); color: var(--text-on-ink-muted); }
.tool-strip ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--text-sm); font-weight: 500; }

/* Sections */
.section { padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }
.section-head { max-width: 60ch; margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); }
.section h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); letter-spacing: -.015em; }
.section-intro { margin-top: var(--space-4); color: var(--text-muted); }

/* Services */
.services { background: var(--paper); }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.service { background: var(--paper); padding: clamp(var(--space-6), 3vw, var(--space-10)); display: flex; flex-direction: column; gap: var(--space-3); }
.service-feature { grid-column: span 2; background: var(--ink); color: var(--text-on-ink); }
.service-feature p { color: var(--text-on-ink-muted); }
.service-feature h3 { color: var(--text-on-ink); font-size: var(--text-xl); max-width: 18ch; }
.service-index { color: var(--accent); }
.service-wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr); grid-template-areas: "index title body" "index tags body"; column-gap: var(--space-8); align-items: start; background: var(--paper-2); }
.service-wide .service-index { grid-area: index; }
.service-wide h3 { grid-area: title; }
.service-wide p:not(.service-index) { grid-area: body; }
.service-wide .service-tags { grid-area: tags; margin-top: 0; }
.service h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.service p { color: var(--text-muted); font-size: var(--text-base); }
.service-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); }
.service-tags li { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .02em; padding: .3rem .55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-muted); }
.service-feature .service-tags li { border-color: var(--line-on-ink); color: var(--text-on-ink-muted); }

/* Mission */
.mission { background: var(--paper-2); padding-block: clamp(var(--space-12), 6vw, var(--space-20)); border-bottom: 1px solid var(--line); }
.mission-inner { }
.mission h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); letter-spacing: -.015em; max-width: 24ch; }
.mission p:not(.eyebrow) { margin-top: var(--space-6); color: var(--text-muted); max-width: 62ch; }
.hero-note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-on-ink-muted); max-width: 46ch; }
.stat:nth-child(3) dd, .stat:nth-child(4) dd { font-size: var(--text-base); }

/* Practice areas */
.practice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-bottom: var(--space-6); }
.practice { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: clamp(var(--space-6), 3vw, var(--space-10)); display: flex; flex-direction: column; gap: var(--space-3); }
.practice h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); letter-spacing: -.01em; }
.practice > p:not(.service-index) { color: var(--text-muted); }
.practice-feature { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }
.practice-feature > p:not(.service-index) { color: var(--text-on-ink-muted); }
.practice-list { list-style: none; display: grid; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.practice-feature .practice-list { border-top-color: var(--line-on-ink); }
.practice-list li { position: relative; padding-left: var(--space-5); font-size: var(--text-sm); font-weight: 500; }
.practice .text-link, .package .text-link { align-self: flex-start; }
.practice .text-link { margin-top: auto; }
.practice-feature .text-link { color: #ff9a6b; }
.practice-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: .5rem; height: 2px; background: var(--accent); }
.packages { margin-top: var(--space-10); padding-top: var(--space-10); border-top: 1px solid var(--line); }
.cap-head h3 { margin-top: var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); letter-spacing: -.01em; }
.package-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.package { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: clamp(var(--space-6), 3vw, var(--space-8)); display: flex; flex-direction: column; gap: var(--space-3); }
.package-free { border-color: var(--accent); box-shadow: inset 0 4px 0 var(--accent); }
.package-tag { color: var(--accent); }
.package h4 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); letter-spacing: -.01em; line-height: 1.1; }
.package p:not(.package-tag) { color: var(--text-muted); font-size: var(--text-sm); }
.package .btn { align-self: flex-start; margin-top: auto; }
.package .text-link { margin-top: auto; }
.optional { font-weight: 400; color: var(--text-muted); }

/* Social media */
.social { background: var(--ink); color: var(--text-on-ink); }
.social .section-intro { color: var(--text-on-ink-muted); }
.social .section-head { max-width: 64ch; margin-bottom: var(--space-10); }
.social .section-head h2 { max-width: 24ch; }
.social-check { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6) var(--space-10); align-items: end; padding: clamp(var(--space-6), 3vw, var(--space-8)); margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); background: var(--ink-2); border: 1px solid var(--line-on-ink); border-left: 4px solid var(--accent); border-radius: var(--radius-md); }
.social-check-title { grid-column: 1 / -1; color: var(--accent); }
.social-check-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-8); }
.social-check-list li { position: relative; padding-left: var(--space-6); font-size: var(--text-sm); color: var(--text-on-ink); }
.social-check-list li::before { content: "?"; position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-weight: 500; color: var(--accent); }
.social-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: start; }
.social-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-on-ink); border: 1px solid var(--line-on-ink); }
.social-item { background: var(--ink); padding: clamp(var(--space-5), 2.5vw, var(--space-8)); display: grid; gap: var(--space-2); }
.social-item h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.social-item p { color: var(--text-on-ink-muted); font-size: var(--text-sm); }
.social-panel { background: var(--ink-2); border: 1px solid var(--line-on-ink); border-radius: var(--radius-md); padding: var(--space-6); }
.platforms { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.platforms li { font-size: var(--text-sm); font-weight: 500; padding: .4rem .75rem; border: 1px solid var(--line-on-ink); border-radius: var(--radius-sm); }
.social-results-title, .social-follow-title { margin-top: var(--space-8); }
.social-panel .stat-list .stat dd { font-size: var(--text-base); font-family: var(--font-display); font-weight: 700; }
.social-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.social-links a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-4); border: 1px solid var(--line-on-ink); border-radius: var(--radius-sm); text-decoration: none; font-weight: 700; font-size: var(--text-sm); color: var(--text-on-ink); transition: border-color .15s ease, background-color .15s ease; }
.social-links a:hover { background: var(--accent); border-color: var(--accent); }

/* Case studies */
.work { background: var(--paper-2); }
.case-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.case { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: clamp(var(--space-6), 3vw, var(--space-10)); display: flex; flex-direction: column; gap: var(--space-4); }
.case-lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "meta meta" "title title" "body results" "link results"; column-gap: clamp(var(--space-8), 5vw, var(--space-16)); background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }
.case-lead .case-meta { grid-area: meta; }
.case-lead h3 { grid-area: title; font-size: var(--text-xl); max-width: 24ch; }
.case-lead > p { grid-area: body; color: var(--text-on-ink-muted); }
.case-lead .results { grid-area: results; }
.case-lead .text-link { grid-area: link; align-self: start; color: #ff9a6b; }
.case-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); color: var(--text-muted); }
.case-lead .case-meta { color: var(--text-on-ink-muted); }
.case-meta span:first-child { color: var(--accent); }
.case h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.case p { color: var(--text-muted); }
.results { display: grid; gap: 0; border-top: 1px solid var(--line-on-ink); }
.results div { padding-block: var(--space-4); border-bottom: 1px solid var(--line-on-ink); }
.results dt { font-size: var(--text-xs); color: var(--text-on-ink-muted); font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.results dd { margin: var(--space-1) 0 0; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.25; }

/* Approach */
.approach { background: var(--paper); }
.approach-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(var(--space-10), 6vw, var(--space-24)); align-items: start; }
.approach-copy p:not(.eyebrow) { margin-top: var(--space-5); color: var(--text-muted); }
.steps { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-2) var(--space-6); padding-block: var(--space-6); border-bottom: 1px solid var(--line); }
.step-num { color: var(--accent); padding-top: .35rem; }
.steps h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.steps p { grid-column: 2; color: var(--text-muted); }

/* About */
.about { background: var(--ink); color: var(--text-on-ink); }
.about-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(var(--space-10), 6vw, var(--space-24)); align-items: start; }
.about-card { background: var(--ink-2); border: 1px solid var(--line-on-ink); border-radius: var(--radius-md); padding: var(--space-8); order: 2; }
.about-copy { order: 1; }
.about-label { color: var(--accent); }
.about-name { margin-top: var(--space-3); font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.05; }
.about-role { color: var(--text-on-ink-muted); margin-top: var(--space-1); font-size: var(--text-sm); }
.about-facts { list-style: none; margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.about-facts li { padding-left: var(--space-5); position: relative; font-size: var(--text-sm); color: var(--text-on-ink-muted); }
.about-facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: .5rem; height: 2px; background: var(--accent); }
.about-card .text-link { color: #ff9a6b; }
.about-copy p:not(.eyebrow) { margin-top: var(--space-5); color: var(--text-on-ink-muted); max-width: 58ch; }
.about-copy h2 { max-width: 22ch; }
.about-industries-label { margin-top: var(--space-8); color: var(--text-on-ink-muted); }
.industries { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); max-width: 44rem; }
.industries li { font-size: var(--text-sm); font-weight: 500; padding: .45rem .8rem; border: 1px solid var(--line-on-ink); border-radius: var(--radius-sm); color: var(--text-on-ink); }

/* Contact */
.contact { background: var(--paper); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(var(--space-10), 6vw, var(--space-24)); align-items: start; }
.contact-copy p:not(.eyebrow) { margin-top: var(--space-5); color: var(--text-muted); }
.contact-direct { margin-top: var(--space-8); display: grid; gap: var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-6); }
.contact-direct p { display: flex; gap: var(--space-4); align-items: baseline; color: var(--text); }
.contact-direct .mono { color: var(--text-muted); min-width: 5rem; }
.contact-direct a { font-weight: 700; text-decoration: none; color: var(--accent-deep); }
.contact-direct a:hover { text-decoration: underline; }
.contact-form { display: grid; gap: var(--space-5); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: clamp(var(--space-6), 3vw, var(--space-10)); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 700; }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--text-base); color: var(--text);
  padding: .75rem .9rem; border: 1px solid rgba(21,23,26,.22); border-radius: var(--radius-sm); background: var(--paper);
  min-height: 3rem; width: 100%;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--accent-deep); }
.form-status { font-size: var(--text-sm); color: var(--text-muted); min-height: 1.5em; }
.form-status.is-success { color: #1d6b3a; font-weight: 700; }
.form-status.is-error { color: var(--accent-deep); font-weight: 700; }
.contact-form .btn { justify-self: start; }

/* Service pages */
.page-hero { background: var(--ink); color: var(--text-on-ink); padding-block: clamp(var(--space-16), 9vw, var(--space-24)); position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line-on-ink) 1px, transparent 1px), linear-gradient(90deg, var(--line-on-ink) 1px, transparent 1px); background-size: 72px 72px; opacity: .35; mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 85%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 85%); }
.page-hero > * { position: relative; z-index: 1; }
.crumbs { list-style: none; display: flex; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--text-on-ink-muted); margin-bottom: var(--space-6); }
.crumbs a { color: var(--text-on-ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--text-on-ink); }
.page-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); letter-spacing: -.02em; max-width: 20ch; }
.page-hero .lede { max-width: 60ch; }
.page-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(var(--space-10), 6vw, var(--space-20)); align-items: start; }
.page-main > * + * { margin-top: clamp(var(--space-10), 5vw, var(--space-16)); }
.page-main h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); letter-spacing: -.01em; margin-bottom: var(--space-5); }
.who-list { list-style: none; display: grid; gap: var(--space-3); }
.who-list li { position: relative; padding-left: var(--space-6); color: var(--text); }
.who-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: .75rem; height: 2px; background: var(--accent); }
.included { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.included li { background: var(--paper); padding: var(--space-5) var(--space-6); display: grid; gap: var(--space-1); }
.included strong { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); }
.included span { color: var(--text-muted); font-size: var(--text-sm); }
.proof { background: var(--ink); color: var(--text-on-ink); border-radius: var(--radius-md); padding: clamp(var(--space-6), 3vw, var(--space-8)); }
.proof h2 { color: var(--text-on-ink); }
.proof p { color: var(--text-on-ink-muted); }
.proof .text-link { color: #ff9a6b; }
.faq { list-style: none; border-top: 1px solid var(--line); }
.faq li { padding-block: var(--space-5); border-bottom: 1px solid var(--line); }
.faq h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); margin-bottom: var(--space-2); }
.faq p { color: var(--text-muted); }
.page-aside { position: sticky; top: 6rem; display: grid; gap: var(--space-6); }
.aside-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-4); }
.aside-card h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.aside-card p { color: var(--text-muted); font-size: var(--text-sm); }
.aside-card .btn { justify-self: start; }
.aside-links { list-style: none; display: grid; gap: var(--space-2); }
.aside-links a { display: block; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; font-weight: 700; font-size: var(--text-sm); }
.aside-links a:hover, .aside-links a[aria-current="page"] { border-color: var(--accent); color: var(--accent-deep); }
.page-cta { background: var(--paper-2); }
.page-cta .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.page-cta h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); max-width: 24ch; }

/* Nav dropdown */
.has-menu { position: relative; display: flex; align-items: center; gap: .15rem; }
.menu-toggle { background: transparent; border: 0; color: var(--text-on-ink-muted); font: inherit; font-size: var(--text-xs); cursor: pointer; padding: .25rem .3rem; border-radius: var(--radius-sm); line-height: 1; }
.menu-toggle:hover { color: var(--text-on-ink); }
.sub-menu { list-style: none; position: absolute; top: calc(100% + .9rem); left: -.75rem; min-width: 14rem; background: var(--ink-2); border: 1px solid var(--line-on-ink); border-radius: var(--radius-md); padding: var(--space-2); display: none; z-index: 60; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
.sub-menu a { display: block; padding: .55rem .75rem; border-radius: var(--radius-sm); color: var(--text-on-ink); }
.sub-menu a:hover { background: rgba(255,255,255,.06); color: #ff9a6b; }
.has-menu:hover .sub-menu, .has-menu:focus-within .sub-menu, .has-menu.is-open .sub-menu { display: block; }

/* Contact booking card */
.book-card { margin-top: var(--space-8); background: var(--ink); color: var(--text-on-ink); border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-3); }
.book-card .mono { color: var(--accent); }
.book-card h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.book-card p:not(.mono) { color: var(--text-on-ink-muted); font-size: var(--text-sm); }
.book-card .btn { justify-self: start; }
.form-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }

/* Articles */
.post-list { list-style: none; display: grid; gap: var(--space-5); }
.post-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: clamp(var(--space-6), 3vw, var(--space-8)); display: grid; gap: var(--space-3); }
.post-meta { color: var(--text-muted); }
.post-card h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); letter-spacing: -.01em; }
.post-card h2 a { text-decoration: none; }
.post-card h2 a:hover { color: var(--accent-deep); }
.post-card p:not(.post-meta) { color: var(--text-muted); }
.article { max-width: 68ch; }
.article h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); letter-spacing: -.01em; margin-top: clamp(var(--space-10), 4vw, var(--space-12)); margin-bottom: var(--space-4); }
.article p { margin-top: var(--space-4); font-size: var(--text-base); line-height: 1.7; }
.article ul, .article ol { margin-top: var(--space-4); padding-left: 1.4rem; display: grid; gap: var(--space-2); line-height: 1.6; }
.article a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article a:hover { color: var(--accent); }
.article .byline { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--line); color: var(--text-muted); font-size: var(--text-sm); }
.article .byline .mono { color: var(--accent); margin-right: var(--space-2); }

/* Checklist */
.checklist { list-style: none; display: grid; gap: var(--space-4); counter-reset: none; }
.checklist li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); display: grid; gap: var(--space-2); }
.check-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
.check-head .mono { color: var(--accent); }
.check-head h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.check-box { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 700; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.check-box input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); margin: 0; }
.checklist p { color: var(--text-muted); font-size: var(--text-sm); }
.check-fix { padding-top: var(--space-2); border-top: 1px dashed var(--line); }
.check-fix .mono { color: var(--accent); margin-right: var(--space-2); }
@media print { .site-header, .site-footer, .page-aside, .hero-actions, .proof { display: none !important; } .page-hero { background: #fff; color: #000; padding: 0; } .page-hero::after { display: none; } .page-grid { grid-template-columns: 1fr; } .checklist li { break-inside: avoid; } }

/* Thank you */
.thanks { min-height: 60vh; display: grid; align-items: center; }
.next-steps { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line-on-ink); margin-top: var(--space-8); max-width: 60ch; }
.next-steps li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--line-on-ink); color: var(--text-on-ink-muted); line-height: 1.55; }
.next-steps .mono { color: var(--accent); padding-top: .3rem; }

/* Footer */
.site-footer { background: var(--ink); color: var(--text-on-ink-muted); border-top: 1px solid var(--line-on-ink); padding-block: var(--space-8); font-size: var(--text-sm); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.site-footer a { color: var(--text-on-ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.back-top { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase; }

/* Responsive */
@media (max-width: 64rem) {
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .hero-panel { max-width: 32rem; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .approach-grid, .about-grid, .contact-grid, .social-grid, .page-grid { grid-template-columns: 1fr; }
  .page-aside { position: static; }
  .practice-grid { grid-template-columns: 1fr; }
  .package-grid { grid-template-columns: 1fr; }
  .social-panel { max-width: 32rem; }
  .about-card { order: 2; max-width: 36rem; }
}
@media (max-width: 48rem) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: transparent; border: 1px solid var(--line-on-ink); color: var(--text-on-ink);
    font: inherit; font-size: var(--text-sm); font-weight: 700; padding: .5rem .8rem; border-radius: var(--radius-sm); min-height: 2.75rem; cursor: pointer;
  }
  .nav-toggle-bar { width: 1.1rem; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
  .nav-list {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ink); border-bottom: 1px solid var(--line-on-ink);
    flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) var(--gutter) var(--space-4);
  }
  .nav-list.is-open { display: flex; }
  .nav-list li a { display: block; padding: var(--space-3) 0; font-size: var(--text-base); }
  .has-menu { display: block; }
  .menu-toggle { display: none; }
  .sub-menu { display: block; position: static; background: transparent; border: 0; box-shadow: none; padding: 0 0 var(--space-2) var(--space-4); min-width: 0; }
  .sub-menu a { padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--text-on-ink-muted); }
  .check-head { grid-template-columns: auto minmax(0, 1fr); }
  .check-head .check-box { grid-column: 2; justify-self: start; }
  .next-steps li { grid-template-columns: 1fr; gap: var(--space-1); }
  .nav-list .nav-cta { margin-top: var(--space-3); text-align: center; }
  .hero h1 { font-size: var(--text-2xl); }
  .service-grid { grid-template-columns: 1fr; }
  .service-feature { grid-column: auto; }
  .service-wide { grid-template-columns: 1fr; grid-template-areas: "index" "title" "body" "tags"; }
  .case-list { grid-template-columns: 1fr; }
  .social-services, .social-check-list { grid-template-columns: 1fr; }
  .social-check { grid-template-columns: 1fr; align-items: start; }
  .case-lead { grid-template-columns: 1fr; grid-template-areas: "meta" "title" "body" "results" "link"; }
  .steps li { grid-template-columns: 1fr; }
  .steps p { grid-column: 1; }
  .field-row { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Case studies */
.draft-banner { background: #fff3b0; color: #4a3b00; padding: .6rem var(--space-6); font-size: var(--text-sm); text-align: center; }
.draft-banner .mono { color: #8a6d00; margin-right: var(--space-2); }
.snapshot { margin-top: var(--space-10); display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-4); border-top: 1px solid var(--line-on-ink); padding-top: var(--space-6); max-width: 60rem; }
.snapshot dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.snapshot dd { margin: 0; margin-top: var(--space-2); color: var(--text-on-ink); line-height: 1.45; }
.case-fig { margin: var(--space-6) 0 0; }
.case-fig img { width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--line); display: block; }
.case-fig figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.img-slot { display: grid; place-content: center; justify-self: start; width: 100%; max-width: 32rem; text-align: center; gap: var(--space-2); background: repeating-linear-gradient(45deg, #e9e6dd 0 12px, #efece4 12px 24px); border: 1px dashed #b8b3a6; border-radius: var(--radius-md); color: var(--text-muted); padding: var(--space-6); max-height: 28rem; }
.img-slot .mono { color: var(--accent); }
.confirm { margin-top: var(--space-4); background: #fff3b0; color: #4a3b00; border-left: 3px solid #e3b600; padding: var(--space-3) var(--space-4); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--text-sm); }
.confirm .mono { color: #8a6d00; margin-right: var(--space-2); }
.case p + p { margin-top: var(--space-4); }
.case .did { list-style: none; counter-reset: did; display: grid; gap: 0; border-top: 1px solid var(--line); }
.case .did li { counter-increment: did; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-1) var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--line); }
.case .did li::before { content: counter(did, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); grid-row: span 2; padding-top: .35rem; }
.case .did h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.case .did p { grid-column: 2; color: var(--text-muted); }
.results-table { width: 100%; border-collapse: collapse; }
.results-table th, .results-table td { text-align: left; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.results-table th { font-weight: 500; color: var(--text-muted); width: 55%; padding-right: var(--space-4); }
.results-table td { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--text); }
.means { background: var(--ink); color: var(--text-on-ink); border-radius: var(--radius-md); padding: clamp(var(--space-8), 4vw, var(--space-10)); }
.means h2 { color: var(--text-on-ink); }
.means p { color: var(--text-on-ink-muted); margin-bottom: var(--space-6); }

/* Email template gallery */
.tpl-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--space-6); }
.tpl-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.tpl-frame { background: #e9e6dd; height: 28rem; overflow: hidden; position: relative; }
.tpl-frame iframe { width: 200%; height: 200%; border: 0; transform: scale(.5); transform-origin: 0 0; pointer-events: none; }
.tpl-body { padding: var(--space-5) var(--space-6); display: grid; gap: var(--space-2); }
.tpl-body p:not(.post-meta) { color: var(--text-muted); font-size: var(--text-sm); }
.tpl-links a { color: var(--accent-deep); font-weight: 700; }