/* Homepage layouts, using the site's existing type and color system. */
section[id], article[id] { scroll-margin-top: 7rem; }
a:focus-visible { outline: 2px solid var(--rust); outline-offset: 5px; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 200; padding: .75rem 1rem; background: var(--white); color: var(--rust); }
.skip-link:focus { top: 1rem; }
.hero { padding: 10rem 0 5rem; }
.hero-layout { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
.hero h1 { font-size: clamp(2.8rem, 4.8vw, 4rem); max-width: 650px; }
.hero-eyebrow { font-size: .68rem; margin-bottom: 1.75rem; }
.hero-eyebrow::before { flex: none; }
.hero-sub { max-width: 590px; margin-bottom: 2rem; }
.hero-ctas { gap: 1.25rem; }
.hero-ctas .btn-primary { padding-inline: 1.5rem; }
.hero-audience { margin-top: 1.75rem; font-size: .8rem; color: var(--text-light); }
.company-strip { position: relative; z-index: 1; padding: .5rem 0 4rem; background: var(--white); }
.company-title { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; font-family: 'JetBrains Mono', monospace; font-size: .66rem; font-weight: 500; letter-spacing: .08em; line-height: 1.6; text-transform: uppercase; text-align: center; color: var(--text-light); }
.company-title::before, .company-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.company-grid { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 1.5rem 2rem; padding: 0; margin: 0; }
.company-grid li { min-width: 0; }
.company-grid a { min-height: 86px; position: relative; display: flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; }
.company-logo { display: block; width: var(--logo-width, 132px); max-width: 100%; height: var(--logo-height, 36px); object-fit: contain; filter: var(--logo-color-filter, brightness(1)) grayscale(1); opacity: .7; mix-blend-mode: multiply; transition: filter .22s ease, opacity .22s ease; }
.company-logo--quickbooks { --logo-width: 142px; --logo-height: 37px; }
.company-logo--kit { --logo-width: 62px; --logo-height: 29px; }
.company-logo--container { --logo-width: 138px; }
.company-logo--simplero { --logo-width: 126px; }
.company-logo--cofactr { --logo-width: 128px; --logo-height: 32px; }
.company-logo--selle { --logo-width: 136px; --logo-height: 32px; }
.company-logo--kx3 { --logo-width: 78px; --logo-height: 42px; --logo-color-filter: brightness(0); }
.company-logo--warrantyhub { --logo-width: 145px; }
.company-logo--warrantyhub img { display: block; width: 100%; height: 100%; object-fit: contain; filter: url("#company-logo-light"); }
.company-logo--stibnite { --logo-width: 135px; --logo-height: 38px; }
.company-note { position: absolute; top: calc(50% + 25px); font-size: .65rem; color: var(--text-light); line-height: 1.4; }
.company-queri { display: inline-flex; align-items: center; gap: .45rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -.06em; line-height: 1; filter: grayscale(1); opacity: .7; mix-blend-mode: multiply; transition: filter .22s ease, opacity .22s ease; }
.company-queri img { width: 26px; height: 26px; border-radius: 5px; }
.company-grid a:focus-visible { outline: none; }
.company-grid a:focus-visible::after { content: ''; position: absolute; bottom: 0; width: 40px; height: 2px; background: var(--rust); }
.company-grid a:focus-visible .company-logo, .company-grid a:focus-visible .company-queri { filter: var(--logo-color-filter, brightness(1)); opacity: 1; mix-blend-mode: normal; }
@media (hover: hover) and (pointer: fine) {
  .company-grid a:hover .company-logo, .company-grid a:hover .company-queri { filter: var(--logo-color-filter, brightness(1)); opacity: 1; mix-blend-mode: normal; }
}
.result-preview { padding: 2rem 0 2rem 2rem; border-left: 1px solid var(--border); }
.small-label { font-family: 'JetBrains Mono', monospace; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rust); }
.result-preview > .small-label { margin-bottom: .5rem; }
.preview-result { display: block; padding: 1.5rem 0; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.preview-result:last-child { border: 0; padding-bottom: 0; }
.preview-client { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--text-light); }
.preview-arrow { color: var(--rust); transition: transform .2s ease; }
.preview-result:hover .preview-arrow { transform: translate(2px, -2px); }
.preview-number { display: block; margin: .35rem 0; font-family: 'Cormorant Garamond', serif; font-size: clamp(2.6rem, 4.8vw, 3.8rem); line-height: 1.15; color: var(--rust); font-weight: 400; white-space: nowrap; }
.preview-caption { display: block; font-size: .85rem; line-height: 1.65; color: var(--text-light); }
.client-work { padding: 6rem 0; background: var(--cream); position: relative; z-index: 1; }
.section-header h2 em, .bio-content h2 em, .final-cta h2 em { color: var(--rust); font-style: italic; }
.client-work .section-header { margin-bottom: 3rem; }
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.case-study { display: flex; flex-direction: column; padding: 2.5rem; border: 1px solid var(--border); background: var(--white); }
.case-study h3 { margin: .8rem 0 1rem; font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 500; line-height: 1.2; }
.case-description { font-size: .95rem; color: var(--text-light); line-height: 1.75; min-height: 6.7em; }
.case-metric { padding: 1.75rem 0; margin-top: 1rem; border-bottom: 1px solid var(--border); }
.case-number { display: block; font-family: 'Cormorant Garamond', serif; color: var(--rust); font-size: clamp(2.5rem, 4.7vw, 3.75rem); line-height: 1.15; font-weight: 400; }
.case-metric p { margin-top: .5rem; font-size: .85rem; color: var(--text-light); }
.case-detail { margin-top: 1.5rem; font-size: .85rem; line-height: 1.7; color: var(--text-light); }
.case-detail strong { display: block; color: var(--text); font-size: 1rem; font-weight: 600; }
.case-note { font-size: .75rem; color: var(--text-light); margin-top: 1rem; line-height: 1.65; }
.case-study .card-link { margin-top: auto; padding-top: 1.75rem; }
.service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-card { padding: 2rem; }
.service-card .small-label { margin-bottom: 1.5rem; }
.service-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; font-weight: 500; line-height: 1.2; }
.service-card p { flex: none; }
.service-includes { list-style: none; margin: 1.5rem 0 0; padding: 0; font-size: .8rem; color: var(--text-light); }
.service-includes li { padding: .65rem 0; border-top: 1px solid var(--border); }
.service-card .card-link { margin-top: auto; padding-top: 1.75rem; }
.ai-adoption { padding: 6rem 0; background: var(--near-black); color: var(--cream); position: relative; z-index: 1; overflow: hidden; }
.ai-adoption .section-header { align-items: start; margin-bottom: 2rem; }
.ai-adoption .section-header h2 em { color: var(--gold); }
.ai-adoption .section-header p { color: rgba(242, 237, 231, .8); }
.ai-intro p + p { margin-top: 1rem; }
.ai-examples-label { margin-top: 3rem; color: var(--gold); }
.adoption-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: 1.5rem; }
.adoption-area { padding-top: 1.5rem; border-top: 1px solid rgba(242, 237, 231, .25); }
.adoption-area h3 { margin-bottom: .75rem; font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 500; }
.adoption-area p { font-size: .88rem; color: rgba(242, 237, 231, .8); line-height: 1.75; }
.ai-next { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(242, 237, 231, .25); display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.ai-next p { font-size: .9rem; max-width: 580px; color: rgba(242, 237, 231, .8); }
.ai-adoption .card-link { margin-top: 0; color: var(--gold); border-color: var(--gold); flex: none; }
.ai-adoption a:focus-visible { outline-color: var(--gold); }
.process { background: var(--white); }
.process-steps { margin-top: 0; gap: 2.5rem; }
.step { padding-top: 1.5rem; border-top: 1px solid var(--border); }
.process-note { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: .85rem; line-height: 1.8; color: var(--text-light); max-width: 800px; }
.process-note strong { font-weight: 600; color: var(--text); }
.background { background: var(--cream); }
.bio-content h2 { margin-bottom: 1.5rem; }
.bio-content p { font-size: 1rem; }
.career-markers { margin-top: 2rem; }
.final-cta { background: var(--white); padding: 7rem 0; }
.final-cta p { max-width: 580px; margin-bottom: 2rem; }
.final-note, .footer-left, .footer-links a, .marker-label, .bio-photo-caption { color: var(--text-light); }

@media (max-width: 1000px) {
  .company-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 2rem; }
  .hero-layout { gap: 2.5rem; }
  .hero-ctas { align-items: flex-start; }
  .hero-ctas .btn-secondary { margin-block: .75rem; }
  .service-card { padding: 1.5rem; }
  .adoption-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: 680px; }
  .hero-sub { max-width: 600px; }
  .result-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 2rem; padding: 1.5rem 0 0; border-left: 0; border-top: 1px solid var(--border); }
  .result-preview > .small-label { grid-column: 1 / -1; }
  .preview-result { border: 0; padding: .75rem 0 0; }
  .preview-number { font-size: 3.4rem; }
  .case-study { padding: 2rem; }
  .service-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card { padding: 2.5rem; }
  .service-card .small-label { margin-bottom: 1rem; }
  .service-card .card-link { margin-top: 0; }
}
@media (max-width: 600px) {
  .company-strip { padding: .5rem 0 3rem; }
  .company-title { gap: .75rem; font-size: .58rem; margin-bottom: 1.5rem; }
  .company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 2rem; }
  .company-grid a { min-height: 80px; }
  .hero { padding: 8rem 0 3rem; }
  .container { padding-inline: 1.5rem; }
  .hero-eyebrow { font-size: .6rem; letter-spacing: .06em; gap: .75rem; }
  .hero-eyebrow::before { width: 25px; }
  .hero h1 { font-size: clamp(2.8rem, 9vw, 3.4rem); margin-bottom: 1.5rem; }
  .hero-sub { font-size: 1rem; }
  .hero-ctas { gap: .75rem 1.25rem; }
  .hero-ctas .btn-primary { font-size: .68rem; padding: 1rem 1.25rem; }
  .hero-audience { font-size: .75rem; }
  .result-preview { gap: .5rem 1rem; }
  .preview-number { font-size: clamp(2.1rem, 7.5vw, 3rem); }
  .preview-caption { font-size: .75rem; }
  .client-work, .services, .ai-adoption, .process, .background { padding: 4rem 0; }
  .section-header { margin-bottom: 2.5rem; }
  .case-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .case-study, .service-card { padding: 1.75rem; }
  .case-description { min-height: 0; }
  .case-number { font-size: 3rem; }
  .adoption-grid { gap: 1.5rem; }
  .ai-next { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .process-steps { gap: 2rem; }
  .career-markers { gap: 1.5rem; }
  .final-cta { padding: 5rem 0; }
  .final-cta .btn-primary { padding: 1.1rem 1.5rem; font-size: .68rem; }
  .footer-links { gap: 1rem 1.5rem; }
}
@media (max-width: 380px) {
  .case-study, .service-card { padding: 1.25rem; }
  .adoption-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero h1, .hero-sub, .hero-ctas, .hero-eyebrow { opacity: 1; }
}