/* ────────────────────────────────────────────────────────────────────
   FAQ section ,  accordion with two-column layout
   ──────────────────────────────────────────────────────────────────── */
.faq {
  background: var(--paper);
  padding: 120px 0 140px;
  border-top: 1px solid var(--border2);
  font-family: system-ui;
}
.faq-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 80px;
  align-items: start;
}
@media (max-width: 880px) {
  .faq-inner { grid-template-columns: 1fr; gap: 36px; padding: 0 24px; }
  .faq { padding: 88px 0 100px; }
}

.faq-head .eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet);
  margin: 0 0 14px;
}
.faq-head h2 {
  font-family: Georgia, serif;
  font-size: clamp(38px, 4.2vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 20px;
}
.faq-head p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink2);
  margin: 0 0 14px;
  max-width: 320px;
}
.faq-head a {
  color: var(--violet);
  text-decoration: none;
  font-weight: 500;
  font-size: 14.5px;
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 56px;
}
.faq-head a:hover { text-decoration: underline; }

/* ── Accordion list ── */
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-top: 1px solid rgba(15,14,17,0.10);
  padding: 0;
}
.faq-item:last-child {
  border-bottom: 1px solid rgba(15,14,17,0.10);
}
.faq-q {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 4px;
  cursor: pointer;
  font-family: Georgia, serif;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q .toggle {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: background 160ms ease, transform 220ms ease;
}
.faq-q .toggle::before,
.faq-q .toggle::after {
  content: '';
  position: absolute;
  background: var(--ink2);
  border-radius: 1px;
  transition: transform 220ms ease, opacity 220ms ease;
}
.faq-q .toggle::before {
  width: 12px; height: 2px;
}
.faq-q .toggle::after {
  width: 2px; height: 12px;
}
.faq-item[open] .faq-q .toggle { background: var(--violet); }
.faq-item[open] .faq-q .toggle::before,
.faq-item[open] .faq-q .toggle::after {
  background: #fff;
}
.faq-item[open] .faq-q .toggle::after {
  transform: scaleY(0);
  opacity: 0;
}
.faq-q:hover .toggle { background: var(--paper3, #e8e4dc); }
.faq-item[open] .faq-q:hover .toggle { background: var(--violet); }

.faq-a {
  padding: 0 4px 22px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink2);
  max-width: 620px;
}
.faq-a p { margin: 0 0 10px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a strong { color: var(--ink); font-weight: 500; }

/* ────────────────────────────────────────────────────────────────────
   Endmark ,  antigravity-style giant wordmark footer
   ──────────────────────────────────────────────────────────────────── */
.endmark {
  position: relative;
  background: var(--paper);
  border-top: 1px solid var(--border2);
  padding: 80px 48px 0;
  font-family: system-ui;
  overflow: hidden;
}
@media (max-width: 880px) {
  .endmark { padding: 64px 24px 0; }
}

/* Top row ,  tagline left, nav columns center/right */
.endmark-top {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 60px;
  align-items: start;
  margin-bottom: 96px;
}
@media (max-width: 720px) {
  .endmark-top {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 64px;
  }
}

.endmark-tag {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
  font-family: Georgia, serif;
  font-style: italic;
}

.endmark-cols {
  display: flex;
  gap: 80px;
  justify-self: end;
}
@media (max-width: 720px) {
  .endmark-cols { gap: 48px; justify-self: start; }
}
.endmark-cols ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.endmark-cols a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color 120ms ease;
}
.endmark-cols--centered {
  justify-content: center;
  justify-self: center;
  margin: 0 auto 64px;
  width: 100%;
  max-width: 720px;
}

/* Giant wordmark */
.endmark-word {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(140px, 22vw, 320px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0;
  text-align: center;
  width: 100%;
  pointer-events: none;
  user-select: none;
  /* Pull up slightly so it overlaps with the bottom of the section padding */
  margin-bottom: -0.05em;
}

/* ────────────────────────────────────────────────────────────────────
   Final CTA banner ,  full-bleed mosaic block canvas as the footer base
   ──────────────────────────────────────────────────────────────────── */
/* The endmark section itself is the canvas. The CTA fills its top portion
   with the drifting mosaic-block field; nav + legal strip layer on top
   in normal flow underneath. */
.endmark {
  padding-top: 0;
  background: #faf9f6;
}
.endmark-cta {
  position: relative;
  width: 100%;
  height: clamp(520px, 72vh, 720px);
  overflow: hidden;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0 0 64px;
  max-width: none;
}
.endmark-cta .cta-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.endmark-cta .cta-canvas-fade {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(250,249,246,0.72) 0%,
    rgba(250,249,246,0.32) 38%,
    rgba(250,249,246,0.08) 64%,
    rgba(250,249,246,0.0)  82%);
}
.endmark-cta-inner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 32px;
}
.endmark-cta-inner h2 {
  font-family: Georgia, serif;
  font-size: clamp(44px, 5.5vw, 72px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 20px;
}
.endmark-cta-inner p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink2);
  margin: 0 auto 28px;
  max-width: 460px;
}
.endmark-cta-inner .btn-cta {
  font-size: 13px;
  padding: 11px 22px;
}

/* Thin legal strip beneath the wordmark */
.endmark-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 22px 0;
  margin-top: 0;
}
@media (max-width: 880px) {
  .endmark-strip {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
    justify-items: center;
  }
}
.endmark-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.endmark-brand .mosaic-mark { width: 18px; height: 18px; }
.endmark-brand > span {
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.endmark-strip-links {
  display: flex;
  /* wrap: at 360px the four links + gaps have ~3px of headroom; any font
     substitution or larger text setting would clip inside the overflow-
     hidden footer without this */
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: center;
}
.endmark-strip-links a {
  font-size: 13px;
  color: var(--ink2);
  text-decoration: none;
  transition: color 120ms ease;
  /* comfortable tap height on touch without changing visual rhythm */
  display: inline-block;
  padding: 6px 2px;
}
.endmark-strip-links a:hover { color: var(--violet); }
.endmark-copy {
  font-size: 12.5px;
  color: var(--ink3);
}