/* site.css: Nomad Fuel Sparks section compositions. Mobile first; breakpoints 768 and 1024. */

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.nav--solid { background: var(--bg); border-bottom-color: var(--line); }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand__mark { height: 28px; width: auto; }
.brand__word { height: 34px; width: auto; }
.nav__links { display: none; list-style: none; padding: 0; gap: clamp(1.25rem, 2.5vw, 2.5rem); font-size: .95rem; }
.nav__links a { text-decoration: none; color: var(--text-2); transition: color var(--dur) var(--ease-out); }
.nav__links a:hover { color: var(--text); }
.nav__cta { display: none; }
.nav__icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--text-2); }
.nav__icon .ico { width: 22px; height: 22px; }
@media (min-width: 768px) {
  .nav__links { display: flex; }
  .nav__right { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); }
  .nav__cta { display: inline-flex; min-height: 44px; padding: .7rem 1.4rem; }
  .nav__icon { display: none; }
}

/* ---------- Hero ---------- */
.hero { min-height: 100svh; padding-top: calc(var(--nav-h) + 2rem); padding-bottom: 3rem; display: flex; align-items: center; position: relative; overflow: clip; }
.hero__grid { display: grid; gap: 2.5rem; align-items: center; }
.hero h1 { font-size: clamp(3rem, 7.2vw, 6.75rem); line-height: .95; letter-spacing: -.035em; }
.hero__kicker { display: block; margin-bottom: 1.4rem; }
.hero__big { display: block; padding-bottom: .1em; }
.hero__big em { font-style: italic; font-weight: 700; padding-bottom: .12em; line-height: 1.1; display: inline-block; }
.hero__sub { margin-top: 1.75rem; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--text-2); max-width: 40ch; }
.hero__cta { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 1rem; }
.hero__cta .btn { width: 100%; }
.hero__art { justify-self: end; width: 86%; margin-right: -6%; }
.hero__art img { width: 100%; height: auto; }
#hero-sentinel { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; }
@media (min-width: 768px) {
  .hero__cta { flex-direction: row; flex-wrap: wrap; }
  .hero__cta .btn { width: auto; }
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 3rem; }
  .hero__art { width: 124%; margin-right: -14%; }
}

/* ---------- Statement ---------- */
.statement__grid { display: grid; gap: 3.5rem; }
.statement__lead { font-family: var(--font-display); font-stretch: 112%; font-weight: 550; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.2; letter-spacing: -.02em; max-width: 24ch; }
.statement__list { list-style: none; padding: 0; display: grid; gap: 0; }
.statement__list li { border-top: 1px solid var(--line); padding-block: 1.5rem; max-width: none; }
.statement__list h3 { font-size: 1.25rem; letter-spacing: -.015em; margin-bottom: .35rem; }
.statement__list p { color: var(--text-2); }
@media (min-width: 1024px) {
  .statement__grid { grid-template-columns: 7fr 5fr; gap: 6rem; align-items: start; }
}

/* ---------- Services ---------- */
.services__grid { display: grid; gap: 3rem; }
.services__intro .h2 { margin-bottom: 1.25rem; }
.services__intro p { color: var(--text-2); margin-bottom: 1.75rem; }
.services__intro .services__count { font-size: .9rem; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-bottom: .75rem; }
.svc-group { border-top: 1px solid var(--line); padding-block: 2rem; display: grid; gap: .75rem; }
.svc-group:last-child { border-bottom: 1px solid var(--line); }
.svc-group h3 { font-size: .8125rem; font-family: var(--font-body); font-stretch: 100%; font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
.svc-group ul { list-style: none; padding: 0; }
.svc-group li { max-width: none; }
.svc-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding-block: .55rem;
  text-decoration: none; color: var(--text-2);
  font-family: var(--font-display); font-stretch: 112%; font-weight: 500; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.25; letter-spacing: -.015em;
  transition: color var(--dur) var(--ease-out);
}
.svc-link .ico { width: 1.1rem; height: 1.1rem; opacity: .4; transition: transform .3s var(--ease-out), opacity .3s var(--ease-out); }
.svc-link:hover, .svc-link:focus-visible { color: var(--text); }
.svc-link:hover .ico, .svc-link:focus-visible .ico { opacity: 1; transform: translate(2px, -2px); }
@media (min-width: 768px) {
  .svc-group { grid-template-columns: 3fr 5fr; gap: 2rem; }
  .svc-group h3 { font-family: var(--font-display); font-stretch: 112%; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; color: var(--text); padding-top: .75rem; }
  .svc-link .ico { opacity: 0; transform: translateX(-8px); }
}
@media (min-width: 1024px) {
  .services__grid { grid-template-columns: 4fr 8fr; gap: 5rem; align-items: start; }
  .services__intro { position: sticky; top: calc(var(--nav-h) + 2rem); }
}

/* ---------- Areas ---------- */
.areas-wrap .h2 { margin-bottom: 3rem; }
.areas { list-style: none; padding: 0; }
.areas li {
  display: inline; max-width: none;
  font-family: var(--font-display); font-stretch: 115%; font-weight: 600; letter-spacing: -.025em;
  font-size: clamp(1.6rem, 4.2vw, 3.5rem); line-height: 1.2;
}
.areas li::after { content: "/"; margin-inline: .35em; color: var(--text-muted); font-style: italic; font-weight: 400; }
.areas li:last-child::after { content: none; }
.areas__city { font-family: var(--font-body); font-stretch: 100%; font-weight: 400; font-size: .8125rem; letter-spacing: 0; color: var(--text-muted); vertical-align: super; margin-left: .35em; white-space: nowrap; }
.areas-note { margin-top: 3rem; color: var(--text-2); }
.areas-note a { color: var(--text); }

/* ---------- FAQ ---------- */
.faq__inner { max-width: 760px; }
.faq .h2 { margin-bottom: 2.5rem; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 64px; padding-block: 1.1rem;
  font-family: var(--font-display); font-stretch: 112%; font-weight: 550; font-size: clamp(1.1rem, 1.5vw, 1.3rem); letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; font-weight: 300; line-height: 1; transition: transform .3s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--text-2); padding-bottom: 1.5rem; }

/* ---------- Contact ---------- */
.contact { border-top: 1px solid var(--line); }
.contact__grid { display: grid; gap: 3.5rem; }
.contact h2 { margin-bottom: 2rem; max-width: 14ch; }
.contact__cta { display: flex; flex-direction: column; gap: 1rem; }
.contact__cta .btn { width: 100%; }
.contact dl { display: grid; gap: 1.5rem; }
.contact dl > div { border-top: 1px solid var(--line); padding-top: 1rem; display: grid; gap: .25rem; }
.contact dt { font-size: .8125rem; color: var(--text-muted); }
.contact dd { font-family: var(--font-display); font-stretch: 112%; font-weight: 500; font-size: 1.25rem; letter-spacing: -.01em; }
.contact dd a { text-decoration: none; }
.contact dd a:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .contact__cta { flex-direction: row; flex-wrap: wrap; }
  .contact__cta .btn { width: auto; }
}
@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: 7fr 5fr; gap: 6rem; align-items: start; }
}

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: 3.5rem 2.5rem; font-size: .95rem; color: var(--text-muted); }
.footer__grid { display: grid; gap: 2rem; }
.footer__logo { width: 200px; height: auto; }
.footer p { color: var(--text-2); max-width: 44ch; margin-top: 1.25rem; }
.footer__links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.footer__links a { text-decoration: none; color: var(--text-2); }
.footer__links a:hover { color: var(--text); }
.footer__copy { margin-top: 2.5rem; font-size: .85rem; }
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1fr auto; align-items: end; }
}

/* ---------- Mobile sticky bar ---------- */
.sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-nav); display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%); transition: transform .35s var(--ease-out);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta a { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 56px; font-weight: 600; text-decoration: none; }
.sticky-cta a:first-child { border-right: 1px solid var(--line); }
.sticky-cta a:last-child { background: var(--accent); color: var(--accent-contrast); }
@media (max-width: 767px) { body { padding-bottom: 64px; } }
@media (min-width: 768px) { .sticky-cta { display: none; } }