/* Kinship Builders LLC
   Brand: Vivid Orange #FE5301, Dark Gray #3D3F3E, White #FFFFFF.
   Headlines: League Spartan. Body: Inter.

   Contrast note: Vivid Orange on white is about 3.2:1. It passes for large text
   (18.66px bold or 24px), buttons, and graphics, but not for small body text.
   So orange is never used for small text here. Small text is Dark Gray, and links
   are Dark Gray with an orange underline. */

:root {
  --orange: #FE5301;
  --gray: #3D3F3E;
  --white: #FFFFFF;

  /* Neutral tints of the brand gray, used for surfaces, borders, and muted text */
  --gray-50: #F6F6F5;
  --gray-100: #ECEDEC;
  --gray-300: #C9CBCA;
  --gray-input: #767978;   /* 4.3:1 on white, for input borders */
  --gray-muted: #5A5D5C;   /* 6.9:1 on white, for secondary text */
  --error: #B42318;        /* 6.5:1 on white */

  --font-head: "League Spartan", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --radius: 6px;
  --container: 1120px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--gray);
  background: var(--white);
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  color: var(--gray);
}
h1 { font-size: clamp(2.5rem, 6.4vw, 4.25rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }

p { margin: 0 0 1em; }
.lead { font-size: clamp(1.125rem, 2vw, 1.3125rem); line-height: 1.6; max-width: 40rem; }
.muted { color: var(--gray-muted); }
.small { font-size: 0.9375rem; }

a { color: var(--gray); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 4px; }

:focus-visible { outline: 3px solid var(--gray); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .site-footer.on-dark :focus-visible { outline-color: var(--white); }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--gray); color: var(--white); padding: 0.75rem 1rem; border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* Buttons. Labels are 19px bold so white on orange meets the large-text contrast ratio. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 52px; padding: 0.5rem 1.6rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; line-height: 1.1;
  text-decoration: none; text-align: center;
  border: 3px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--orange); color: var(--white); border-color: var(--orange); }
.btn-primary:hover { background: var(--gray); border-color: var(--gray); color: var(--white); text-decoration: none; }
.btn-secondary { background: var(--white); color: var(--gray); border-color: var(--gray); }
.btn-secondary:hover { background: var(--gray); color: var(--white); text-decoration: none; }
.btn-sm { min-height: 44px; padding: 0.35rem 1.1rem; }
.on-dark .btn-primary:hover { background: var(--white); border-color: var(--white); color: var(--gray); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 1.75rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--gray-100); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; padding: 0.25rem 0; }
.brand img { height: 38px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 1.75rem; }
.site-nav ul { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.site-nav a:not(.btn) {
  font-weight: 600; font-size: 1rem; text-decoration: none; padding: 0.5rem 0;
  border-bottom: 3px solid transparent;
}
.site-nav a:not(.btn):hover { border-bottom-color: var(--gray-300); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--orange); }

.nav-toggle {
  display: none; min-height: 44px; padding: 0.35rem 1rem; background: var(--white); color: var(--gray);
  border: 2px solid var(--gray); border-radius: var(--radius); font: 600 1rem var(--font-body); cursor: pointer;
}

@media (max-width: 880px) {
  .js .nav-toggle { display: inline-flex; align-items: center; }
  .site-nav { flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem 1rem; }
  .site-nav ul { flex-wrap: wrap; gap: 0.25rem 1rem; }
  .js .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 1rem;
    background: var(--white); border-bottom: 1px solid var(--gray-100);
    padding: 1rem var(--gutter) 1.5rem; box-shadow: 0 12px 24px rgba(61,63,62,.12);
  }
  .js .site-nav.is-open { display: flex; }
  .js .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .js .site-nav li a:not(.btn) { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--gray-100); }
  .js .site-nav li a[aria-current="page"] { border-bottom: 3px solid var(--orange); }
}

/* Sections */
.section { padding-block: clamp(3rem, 8vw, 5.5rem); }
.section-tint { background: var(--gray-50); }
.section-head { max-width: 44rem; margin-bottom: 2.25rem; }
.rule { width: 72px; height: 6px; background: var(--orange); border: 0; margin: 0 0 1.5rem; border-radius: 2px; }

/* Hero */
.hero { padding-block: clamp(2.5rem, 7vw, 5rem); border-bottom: 6px solid var(--orange); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { margin-bottom: 0.45em; }
.hero-logo { justify-self: center; width: 100%; max-width: 440px; }
@media (max-width: 800px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-logo { max-width: 300px; justify-self: start; order: -1; }
}

.page-head { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem); border-bottom: 6px solid var(--orange); }
.page-head h1 { font-size: clamp(2.25rem, 5.4vw, 3.5rem); margin-bottom: 0.4em; }
.page-head .lead { margin-bottom: 0; }

/* Cards */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid-2, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid var(--gray-300); border-top: 6px solid var(--orange);
  border-radius: var(--radius); padding: 1.5rem;
}
.card h3 { margin-bottom: 0.4em; }
.card p:last-child { margin-bottom: 0; }
.card-icon { width: 44px; height: 44px; margin-bottom: 1rem; color: var(--orange); }
.card-icon svg { width: 100%; height: 100%; display: block; }
.card-link { font-weight: 600; }

/* License status notes (text comes from js/site-config.js) */
.license-note { border-left: 6px solid var(--orange); background: var(--gray-50); padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; max-width: 46rem; }
.license-note:empty { display: none; }
.license-note p { margin: 0; }

/* Call to action band */
.cta-band { background: var(--gray); color: var(--white); padding-block: clamp(2.5rem, 6vw, 4rem); }
.cta-band h2 { color: var(--white); margin-bottom: 0.4em; }
.cta-band p { max-width: 38rem; }
.cta-band a:not(.btn) { color: var(--white); }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; }
.cta-inner > div { flex: 1 1 26rem; }
.cta-band .btn-row { margin-top: 0; }

.h-sm { font-size: clamp(1.5rem, 3vw, 1.75rem); }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 0.75rem 0 0.75rem 3.25rem; border-bottom: 1px solid var(--gray-300); }
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0.5rem; width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; line-height: 1;
  color: var(--white); background: var(--gray); border-radius: 50%;
}

/* Two-column text */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }

/* Services detail */
.jump-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; padding: 0; margin: 1.25rem 0 0; font-weight: 600; }
.service { scroll-margin-top: calc(var(--header-h) + 1rem); }
.service .split { align-items: start; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { position: relative; padding: 0.5rem 0 0.5rem 1.75rem; border-bottom: 1px solid var(--gray-100); }
.check-list li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 0.7rem; height: 0.7rem; background: var(--orange); border-radius: 1px; }
.check-list li:last-child { border-bottom: 0; }

/* People */
.person h3 { margin-bottom: 0.25em; }
.person .role { font-weight: 600; margin-bottom: 0.75rem; }
.contact-lines { list-style: none; margin: 0; padding: 0; }
.contact-lines li { padding: 0.15rem 0; overflow-wrap: anywhere; }
.contact-lines strong { font-weight: 600; }

/* Gallery empty state */
.empty-state { border: 3px dashed var(--gray-300); border-radius: var(--radius); padding: clamp(2rem, 6vw, 4rem) 1.5rem; text-align: center; background: var(--gray-50); }
.empty-state svg { width: 64px; height: 64px; color: var(--gray-muted); margin: 0 auto 1rem; }
.empty-state h2 { margin-bottom: 0.4em; }
.empty-state p { max-width: 32rem; margin-inline: auto; }
.empty-state .btn-row { justify-content: center; }

/* Prose (privacy) */
.prose { max-width: 44rem; }
.prose h2 { font-size: 1.75rem; margin-top: 2.25rem; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.4rem; }

/* Quote form */
.form-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } }

.quote-form { display: grid; gap: 1.25rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.field label, .field .label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.field .req { font-weight: 400; color: var(--gray-muted); font-size: 0.9375rem; }
.field .hint { display: block; font-size: 0.9375rem; color: var(--gray-muted); margin: -0.15rem 0 0.4rem; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="date"],
.field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0.65rem 0.85rem;
  font: 400 1rem/1.4 var(--font-body); color: var(--gray); background: var(--white);
  border: 2px solid var(--gray-input); border-radius: var(--radius);
}
.field textarea { min-height: 9rem; resize: vertical; }
/* Keep focused fields clear of the sticky header */
.field input, .field select, .field textarea, .form-notice, .form-success { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gray); outline: 3px solid var(--orange); outline-offset: 1px; }
.field input[type="file"] { width: 100%; padding: 0.6rem; border: 2px dashed var(--gray-input); border-radius: var(--radius); background: var(--gray-50); font: 400 0.9375rem var(--font-body); }
.field.has-error input, .field.has-error select, .field.has-error textarea, .field.has-error input[type="file"] { border-color: var(--error); }
.error-msg { display: none; margin: 0.35rem 0 0; color: var(--error); font-weight: 600; font-size: 0.9375rem; }
.error-msg::before { content: "Error: "; }
.field.has-error .error-msg { display: block; }

/* Honeypot: off-screen, not display:none, so simple bots still fill it in */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-notice { padding: 1rem 1.25rem; border-radius: var(--radius); border: 2px solid var(--gray); background: var(--gray-50); }
.form-notice[hidden] { display: none; }
.form-notice.is-error { border-color: var(--error); }
.form-notice.is-error strong { color: var(--error); }
.form-success { border-left: 8px solid var(--orange); border-radius: var(--radius); background: var(--gray-50); padding: 2rem; }
.form-success h2 { font-size: 2rem; margin-bottom: 0.3em; }
.form-success[hidden] { display: none; }
.file-list { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.9375rem; }
.file-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--gray-100); }
.file-list li span { overflow-wrap: anywhere; }
.file-remove {
  flex: none; min-height: 40px; padding: 0.25rem 0.9rem;
  font: 600 0.9375rem var(--font-body); color: var(--gray); background: var(--white);
  border: 2px solid var(--gray); border-radius: var(--radius); cursor: pointer;
}
.file-remove:hover { background: var(--gray); color: var(--white); }
.form-fineprint { font-size: 0.9375rem; color: var(--gray-muted); margin: 0; }

.side-card { border: 1px solid var(--gray-300); border-top: 6px solid var(--orange); border-radius: var(--radius); padding: 1.5rem; background: var(--white); }
.side-card + .side-card { margin-top: 1.25rem; }
.side-card h2 { font-size: 1.5rem; margin-bottom: 0.6em; }
.side-card h3 { font-size: 1.25rem; margin: 0 0 0.25em; }
.side-card .contact-lines + h3 { margin-top: 1.25rem; }

/* Footer */
.site-footer { border-top: 6px solid var(--gray); background: var(--white); padding-block: 3rem 2rem; font-size: 0.9375rem; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem 3rem; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { width: 240px; margin-bottom: 1rem; }
.site-footer h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; margin: 0 0 0.6rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 0.2rem 0; overflow-wrap: anywhere; }
.footer-gap { margin-top: 0.75rem; }
.footer-license { margin: 0.75rem 0 0; font-weight: 600; }
.footer-license:empty { display: none; }
.footer-base { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--gray-100); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; color: var(--gray-muted); }
.footer-base p { margin: 0; }

.not-found { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.not-found img { width: 200px; margin: 0 auto 2rem; }
.not-found .lead { margin-inline: auto; }
.not-found ul { display: inline-block; text-align: left; }
.not-found .btn-row { justify-content: center; }