/* ══════════════════════════════════════════════════════════════════════════
   Home page (index.html)
   ══════════════════════════════════════════════════════════════════════ */

/* Shared type and layout */
.section-title { margin: 0; font-size: clamp(28px, 3.6vw, 48px); letter-spacing: -0.03em; }
.copy { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-neutral-800); }
.lead { margin: 18px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--color-neutral-800); text-wrap: pretty; }
.lead-sub { margin: 14px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--color-neutral-700); text-wrap: pretty; }
.step-number { font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: 0.1em; color: var(--color-accent); }
.row-title { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.015em; }
.btn-lg { height: 48px; padding-inline: 20px; font-size: 14px; letter-spacing: 0.06em; }
.icon-sm { width: 16px; height: 16px; }

/* Column dividers are outward box-shadows, not border-rights, and every wrapping
   container below clips its own edge. A column therefore shows its divider only
   while it has a neighbour beside it: once the container wraps to a single column,
   the shadow falls outside the clip instead of drawing a stray line down the page
   edge. Nothing needs to know the breakpoint at which that happens. */
.section-split { display: flex; flex-wrap: wrap; align-items: stretch; overflow: clip; border-bottom: 2px solid var(--color-divider); }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); overflow: clip; }
.col-intro { min-width: 0; padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px); box-shadow: 2px 0 0 0 var(--color-divider); }
.col-stack { min-width: 0; display: flex; flex-direction: column; }
.list-row {
  padding: 22px clamp(20px, 3vw, 40px); border-bottom: 2px solid var(--color-divider);
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
}
.list-row:last-child { border-bottom: 0; flex: 1; }

/* Hero */
.hero-main {
  flex: 2 1 min(100%, 520px); min-width: 0;
  padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 56px); box-shadow: 2px 0 0 0 var(--color-divider);
}
.hero-tag { letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px; }
.hero-title {
  margin: 24px 0 0; max-width: 15ch; font-size: clamp(40px, 6.2vw, 84px);
  line-height: 0.94; letter-spacing: -0.035em; text-wrap: pretty;
}
.hero-lead {
  margin: 28px 0 0; max-width: 58ch; font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55; color: var(--color-neutral-800); text-wrap: pretty;
}
.hero-sub {
  margin: 16px 0 0; max-width: 58ch; font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55; color: var(--color-neutral-700); text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-actions .btn-secondary, .hero-actions .btn-secondary:hover { color: var(--color-text); }
.hero-facts { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; }
.fact { padding: 22px clamp(20px, 3vw, 32px); border-bottom: 2px solid var(--color-divider); }
.fact-title { margin-top: 8px; font-family: var(--font-heading); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.fact-text { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--color-neutral-700); }
.fact-grid { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 14px; line-height: 1.4; }
.fact-direct { padding: 22px clamp(20px, 3vw, 32px); flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }

/* Partnerships */
.partners-intro {
  flex: 1 1 300px; min-width: 0; padding: clamp(24px, 3vw, 36px) clamp(20px, 4vw, 56px);
  box-shadow: 2px 0 0 0 var(--color-divider); display: flex; flex-direction: column; justify-content: center;
}
.partners-title { margin: 12px 0 0; max-width: 24ch; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.025em; text-wrap: pretty; }
.partners-text { margin: 14px 0 0; max-width: 40ch; font-size: 15px; line-height: 1.55; color: var(--color-neutral-800); }
.partners-grid {
  flex: 2 1 min(100%, 560px); min-width: 0; overflow: clip;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.partner {
  min-width: 0; padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px);
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
}
.partner:first-child { box-shadow: 2px 0 0 0 var(--color-divider); }
.partner-icon { width: 22px; height: 22px; margin-top: 4px; color: var(--color-accent); }
.partner-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.partner-name { margin: 0; font-size: 19px; letter-spacing: -0.015em; }
.partner-tag { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.partner-text { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--color-neutral-800); }

/* Services */
.services-section, .ai-section, .why-section { border-bottom: 2px solid var(--color-divider); }
.section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px) 24px;
}
.section-intro { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.5; color: var(--color-neutral-700); text-wrap: pretty; }
/* Every card draws the line on its right and the line below itself, so the
   auto-fit grid is correct at any column count and no rule needs to know which
   card is first, last, or in the final row. Lines never overlap (the vertical
   stops 2px short of the card's own bottom line), so the translucent divider
   color never double-paints. The grid's outermost right/bottom lines are pushed
   past .services-section's clip, and the section's own border-bottom closes the
   block -- including under the empty cells of a partial last row. */
.services-section { overflow: clip; }
.services-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  border-top: 2px solid var(--color-divider);
  margin-right: -2px; margin-bottom: -2px;
}
.service {
  position: relative; min-width: 0; padding: 28px clamp(20px, 3vw, 36px) 36px;
  box-shadow: inset 0 -2px 0 0 var(--color-divider);
}
.service::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 2px; width: 2px;
  background: var(--color-divider); pointer-events: none;
}
.service-meta { display: flex; align-items: center; justify-content: space-between; }
.service-icon { width: 20px; height: 20px; color: var(--color-neutral-600); }
.service-title { margin: 20px 0 10px; font-size: 22px; letter-spacing: -0.02em; }

/* AI */
.ai-title { margin-top: 12px; max-width: 16ch; text-wrap: pretty; }
.ai-icon { width: 20px; height: 20px; margin-top: 3px; color: var(--color-accent); }

/* Why Us */
.why-title { max-width: 18ch; text-wrap: pretty; }
.why-sub { margin-bottom: 32px; }
.grayscale{filter:grayscale(1) contrast(1.08)}
.why-photo { height: clamp(240px, 32vw, 420px); }
.why-photo img { width: 100%; height: 100%; object-fit: cover; }
.why-section .step-number { padding-top: 4px; }

/* FAQ */
.faq-section {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px) clamp(32px, 5vw, 64px);
  border-bottom: 2px solid var(--color-divider);
}
.faq-title { margin-bottom: 28px; }
.faq-list { border-top: 2px solid var(--color-divider); }
.faq-item { border-bottom: 2px solid var(--color-divider); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.faq-summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 20px 0;
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -0.015em;
}
.faq-toggle { color: var(--color-accent); line-height: 1; }
.faq-toggle { font-size: 0 !important; }
.faq-toggle::after { content: "+"; font-size: 22px; line-height: 1; }
details[open] .faq-toggle::after { content: "\2212"; }
.faq-summary:hover { color: var(--color-accent); }
.faq-answer { margin: 0; padding: 0 0 22px; max-width: 72ch; font-size: 16px; line-height: 1.6; color: var(--color-neutral-800); }

/* Contact */
.contact-section {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  overflow: clip; border-bottom: 2px solid var(--color-divider);
}
.contact-lead { margin: 18px 0 0; max-width: 44ch; font-size: 16px; line-height: 1.55; color: var(--color-neutral-800); }
.contact-rule { margin: 32px 0; }
.contact-methods { display: flex; flex-direction: column; gap: 18px; }
.contact-phone { font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.025em; }
.contact-email {
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(18px, 2vw, 26px);
  letter-spacing: -0.025em; word-break: break-word;
}
.contact-questions {
  min-width: 0; padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px);
}
.contact-questions-title { margin: 10px 0 0; max-width: 20ch; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.025em; text-wrap: pretty; }
.contact-questions-list { margin-top: 22px; }
.contact-questions-list .list-row { padding: 22px 0; }
.contact-questions .step-number { padding-top: 4px; }
.contact-questions-close { margin: 22px 0 0; font-size: 15px; line-height: 1.55; color: var(--color-neutral-800); }

/* Call-to-action band */
.btn-inverse { background: #f3f2f2; color: #ae1800; border-color: #f3f2f2; }
.btn-inverse:hover { background: #eae7e7; color: #ae1800; }
.btn-outline-inverse { background: transparent; color: #f3f2f2; border-color: #f3f2f2; }
.btn-outline-inverse:hover { background: var(--color-accent-600); color: #f3f2f2; }
.cta-band { background: var(--color-accent); color: #f3f2f2; padding: clamp(40px, 7vw, 96px) clamp(20px, 4vw, 56px); }
.cta-eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; }
.cta-title {
  margin: 20px 0 0; max-width: 22ch; font-size: clamp(34px, 6vw, 80px);
  line-height: 0.96; letter-spacing: -0.035em; text-wrap: pretty;
}
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }