/* Joe Lemmer Consulting */
:root { --accent: #0B5F5E; --ink: #14202B; --paper: #F7F6F2; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); font-family: Inter, system-ui, sans-serif; color: var(--ink); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: #0B5F5E; } a:hover { color: #083F3E; }
img { max-width: 100%; display: block; }
.headshot { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid #D6D2C6; background: #E4E1D8; }
input:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Component styles */
.s1 { border-bottom: 1px solid #E2DFD6; background: #F7F6F2; }
.s2 { max-width: 1200px; margin: 0 auto; padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.s3 { text-decoration: none; color: #14202B; display: flex; align-items: baseline; gap: 10px; }
.s4 { font-family: Newsreader, Georgia, serif; font-size: 26px; font-weight: 500; letter-spacing: -0.01em; }
.s5 { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #5A6570; }
.s6 { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; font-size: 15px; }
.s7 { color: #3A4651; text-decoration: none; padding: 10px 0; }
.s8 { background: #14202B; color: #F7F6F2; text-decoration: none; padding: 11px 20px; border-radius: 2px; font-weight: 500; }
.s9 { max-width: 1200px; margin: 0 auto; padding: 96px 24px 80px; display: flex; flex-wrap: wrap; gap: 64px; align-items: center; }
.s10 { flex: 999 1 520px; min-width: 0; }
.s11 { margin: 0 0 28px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.s12 { margin: 0 0 28px; font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: clamp(42px, 6vw, 72px); line-height: 1.04; letter-spacing: -0.02em; color: #14202B; }
.s13 { font-style: italic; }
.s14 { margin: 0 0 40px; font-size: 19px; line-height: 1.65; color: #3A4651; max-width: 560px; }
.s15 { display: flex; flex-wrap: wrap; gap: 14px; }
.s16 { background: var(--accent); color: #FFFFFF; text-decoration: none; padding: 15px 28px; border-radius: 2px; font-weight: 500; font-size: 16px; }
.s17 { color: #14202B; text-decoration: none; padding: 14px 27px; border: 1px solid #14202B; border-radius: 2px; font-weight: 500; font-size: 16px; }
.s18 { flex: 1 1 340px; min-width: 0; max-width: 440px; }
.s19 { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; font-size: 13px; color: #5A6570; }
.s20 { border-top: 1px solid #E2DFD6; border-bottom: 1px solid #E2DFD6; }
.s21 { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; }
.s22 { flex: 1 1 220px; padding: 36px 24px 36px 0; }
.s23 { font-family: Newsreader, Georgia, serif; font-size: 52px; line-height: 1; color: #14202B; }
.s24 { margin-top: 10px; font-size: 14px; color: #5A6570; }
.s25 { flex: 1 1 220px; padding: 36px 0; }
.s26 { max-width: 1200px; margin: 0 auto; padding: 48px 24px; display: flex; flex-wrap: wrap; gap: 20px 56px; align-items: center; }
.s27 { font-family: Newsreader, Georgia, serif; font-size: 24px; color: #3A4651; }
.s28 { background: #FFFFFF; border-top: 1px solid #E2DFD6; border-bottom: 1px solid #E2DFD6; }
.s29 { max-width: 1200px; margin: 0 auto; padding: 112px 24px; }
.s30 { display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-end; justify-content: space-between; margin-bottom: 64px; }
.s31 { flex: 1 1 520px; min-width: 0; }
.s32 { margin: 0 0 20px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.s33 { margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: clamp(34px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.015em; }
.s34 { flex: 1 1 360px; margin: 0; color: #3A4651; font-size: 17px; max-width: 460px; }
.s35 { display: flex; flex-wrap: wrap; border-top: 1px solid #14202B; }
.s36 { flex: 1 1 300px; padding: 40px 40px 8px 0; min-width: 0; }
.s37 { font-family: Newsreader, Georgia, serif; font-size: 18px; color: var(--accent); margin-bottom: 20px; }
.s38 { margin: 0 0 14px; font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: 26px; line-height: 1.2; }
.s39 { margin: 0; color: #3A4651; }
.s40 { flex: 1 1 300px; padding: 40px 0 8px 0; min-width: 0; }
.s41 { background: #14202B; color: #F2F0EA; }
.s42 { max-width: 1000px; margin: 0 auto; padding: 120px 24px; text-align: center; }
.s43 { margin: 0 0 40px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: #8FD3CC; font-weight: 600; }
.s44 { margin: 0; }
.s45 { margin: 0 0 36px; font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: clamp(30px, 4vw, 46px); line-height: 1.25; letter-spacing: -0.01em; }
.s46 { font-size: 15px; color: #B9C0C7; }
.s47 { max-width: 1200px; margin: 0 auto; padding: 0 24px 112px; display: flex; flex-wrap: wrap; gap: 24px; }
.s48 { flex: 1 1 400px; margin: 0; padding: 40px; border: 1px solid #2E3B47; min-width: 0; }
.s49 { margin: 0 0 24px; font-family: Newsreader, Georgia, serif; font-size: 24px; line-height: 1.4; }
.s50 { font-size: 14px; color: #B9C0C7; }
.s51 { display: flex; flex-wrap: wrap; gap: 48px 80px; }
.s52 { flex: 1 1 320px; min-width: 0; }
.s53 { margin: 0 0 20px; font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: clamp(34px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.015em; }
.s54 { margin: 0; color: #3A4651; font-size: 17px; }
.s55 { flex: 999 1 560px; min-width: 0; display: flex; flex-wrap: wrap; gap: 40px; }
.s56 { flex: 1 1 240px; min-width: 0; }
.s57 { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #14202B; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.s58 { margin: 0; padding: 0; list-style: none; color: #3A4651; font-size: 15px; line-height: 2.1; }
.s59 { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.s60 { background: #FFFFFF; border-top: 1px solid #E2DFD6; }
.s61 { max-width: 1200px; margin: 0 auto; padding: 112px 24px; display: flex; flex-wrap: wrap; gap: 56px 80px; }
.s62 { flex: 1 1 360px; min-width: 0; }
.s63 { margin: 0 0 40px; color: #3A4651; font-size: 17px; }
.s64 { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.s65 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #5A6570; margin-bottom: 4px; }
.s66 { margin: 0; font-size: 18px; }
.s67 { color: #14202B; }
.s68 { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.s69 { display: flex; flex-wrap: wrap; gap: 22px; }
.s70 { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; }
.s71 { font-size: 14px; font-weight: 500; }
.s72 { font: inherit; padding: 14px 16px; border: 1px solid #C9C5BA; border-radius: 2px; background: #F7F6F2; color: #14202B; }
.s73 { display: flex; flex-direction: column; gap: 8px; }
.s74 { color: #5A6570; font-weight: 400; }
.s75 { font: inherit; padding: 14px 16px; border: 1px solid #C9C5BA; border-radius: 2px; background: #F7F6F2; color: #14202B; resize: vertical; }
.s76 { font: inherit; font-weight: 500; background: #14202B; color: #F7F6F2; border: 0; border-radius: 2px; padding: 15px 32px; cursor: pointer; min-height: 48px; }
.s76:disabled { opacity: 0.6; cursor: wait; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0; font-size: 15px; }
.form-status:empty { display: none; }
.form-status[data-state="success"] { color: #1F6B4F; }
.form-status[data-state="error"] { color: #A3352B; }
.s77 { background: #14202B; color: #B9C0C7; }
.s78 { max-width: 1200px; margin: 0 auto; padding: 40px 24px; display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; align-items: center; font-size: 14px; }
.s79 { font-family: Newsreader, Georgia, serif; font-size: 20px; color: #F2F0EA; }

/* Phones */
@media (max-width: 640px) {
  .s2 { padding: 16px 24px; gap: 12px 24px; }
  .s6 { gap: 4px 22px; }
  .s9 { padding: 56px 24px 48px; gap: 40px; }
  .s16, .s17 { flex: 1 1 100%; text-align: center; }
  .s18 { max-width: 320px; }
  .s21 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .s22, .s25 { padding: 24px 0; }
  .s23 { font-size: 40px; }
  .s26 { padding: 32px 24px; gap: 10px 28px; }
  .s29 { padding: 64px 24px; }
  .s36, .s40 { padding: 28px 0 4px; }
  .s42 { padding: 72px 24px 48px; }
  .s47 { padding: 0 24px 72px; gap: 16px; }
  .s48 { padding: 28px 24px; }
  .s51 { gap: 40px; }
  .s61 { padding: 64px 24px; gap: 40px; }
  .s78 { padding: 32px 24px; }
}