/* The white stair-step title overlaps the dark space above the supplied
   landscape panel photograph; the complete seated panel remains visible. */
.faq.section {
  --faq-ink: #111;
  --faq-rule: #e8e8e8;
  display: block;
  width: 100%;
  max-width: none;
  padding: clamp(64px, 7vw, 112px) 0;
  margin-inline: 0;
  color: var(--faq-ink);
  background: var(--paper);
}
.faq .faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(36px, 5vw, 72px);
  width: calc(100% - 80px);
  max-width: 1440px;
  margin-inline: auto;
}
.faq .faq-intro {
  --faq-module: clamp(36px, 4.8vw, 76px);
  position: relative;
  isolation: isolate;
  min-width: 0;
}
.faq .faq-title-panel {
  position: absolute;
  z-index: 1;
  inset: 0 auto auto 0;
  width: calc(100% - var(--faq-module));
  min-height: calc(var(--faq-module) * 5);
  padding: var(--faq-module) calc(var(--faq-module) * 2) var(--faq-module) clamp(40px, 6vw, 96px);
  isolation: isolate;
}
.faq .faq-title-panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--paper);
  clip-path: polygon(0 0, calc(100% - var(--faq-module) * 2) 0, calc(100% - var(--faq-module) * 2) var(--faq-module), calc(100% - var(--faq-module)) var(--faq-module), calc(100% - var(--faq-module)) calc(var(--faq-module) * 2), 100% calc(var(--faq-module) * 2), 100% calc(var(--faq-module) * 3), calc(100% - var(--faq-module)) calc(var(--faq-module) * 3), calc(100% - var(--faq-module)) calc(var(--faq-module) * 4), calc(100% - var(--faq-module) * 2) calc(var(--faq-module) * 4), calc(100% - var(--faq-module) * 2) 100%, 0 100%);
  pointer-events: none;
}
.faq .faq-eyebrow {
  margin: 0 0 18px;
  color: var(--faq-ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
}
.faq .faq-intro h2,
.faq .faq-intro h2 > span {
  margin: 0;
  color: var(--faq-ink);
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.045em;
}
.faq .faq-intro h2 br { display: block; }
.faq .faq-photo {
  position: relative;
  width: 100%;
  aspect-ratio: auto;
  margin: 0;
  padding: calc(var(--faq-module) * 4) 0 0;
  overflow: hidden;
  background: #110802;
}
.faq .faq-photo img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  clip-path: none;
}
.faq .faq-photo::before,
.faq .faq-photo::after,
.faq .faq-motif,
.faq .faq-list::before { display: none; }
.faq .faq-list {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.faq .faq-item,
.faq .faq-item:first-child {
  max-width: none;
  margin: 0;
  border: 0;
  background: transparent;
}
.faq .faq-item[open] {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--faq-rule);
}
.faq .faq-item summary,
.faq .faq-item summary:hover,
.faq .faq-item[open] summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 60px;
  padding: 18px 24px;
  color: var(--faq-ink);
  background: transparent;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 400;
  line-height: 1.35;
  list-style: none;
  transform: none;
  transition: none;
}
.faq .faq-item summary::marker { content: ''; }
.faq .faq-item summary::-webkit-details-marker { display: none; }
.faq .faq-item summary > .faq-question-text {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: auto;
  background: none;
  color: inherit;
  font: inherit;
  transform: none;
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.faq .faq-question-text::before {
  content: '';
  position: absolute;
  left: -12px;
  top: calc(50% - 5px);
  width: 4px;
  height: 4px;
  background: var(--brand-coral, #e8483f);
  box-shadow: 4px 4px 0 var(--brand-teal, #00e5cc);
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.faq .faq-item summary > .pixel-plus {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--faq-ink);
  background: none;
  transform: none !important;
  transition: none !important;
}
/* Only the sentence moves; the native disclosure row and brand pixels stay put. */
.faq .pixel-glyph,
.faq .pixel-cell { transform: none !important; transition: none !important; }
.faq .faq-item summary.pixel-control:focus-visible:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { outline: 2px solid var(--offer-blue); outline-offset: -3px; }
.faq .faq-item .faq-answer {
  padding: 6px 64px 28px 24px;
  color: #444;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.faq .faq-answer p { margin: 0; }
.faq .faq-answer p + p { margin-top: 14px; }
.faq .faq-answer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover:hover) and (pointer:fine) {
  .faq .faq-item summary:hover > .faq-question-text { transform: translateX(7px) scale(1.025); }
  .faq .faq-item summary:hover .faq-question-text::before { opacity: 1; transform: translateX(0); }
}
@media (max-width:1100px) {
  .faq .faq-layout { width: calc(100% - 48px); gap: 32px; }
  .faq .faq-title-panel { padding-left: clamp(32px, 4.8vw, 56px); }
  .faq .faq-eyebrow { margin-bottom: 14px; font-size: 16px; }
  .faq .faq-item summary,
  .faq .faq-item summary:hover,
  .faq .faq-item[open] summary { padding-inline: 20px; gap: 20px; }
  .faq .faq-item .faq-answer { padding-inline: 20px 52px; font-size: 15px; }
}
@media (max-width:800px) {
  .faq.section { padding-block: 56px; }
  .faq .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faq .faq-intro { --faq-module: clamp(28px, 10vw, 68px); width: 100%; max-width: 680px; }
  .faq .faq-title-panel { padding-left: clamp(24px, 7vw, 52px); }
  .faq .faq-intro h2,
  .faq .faq-intro h2 > span { font-size: clamp(28px, 7.6vw, 48px); }
  .faq .faq-item summary,
  .faq .faq-item summary:hover,
  .faq .faq-item[open] summary { min-height: 64px; padding: 18px 20px; font-size: 17px; }
}
@media (max-width:480px) {
  .faq .faq-layout { width: calc(100% - 32px); gap: 24px; }
  .faq .faq-eyebrow { margin-bottom: 12px; font-size: 15px; }
  .faq .faq-item summary,
  .faq .faq-item summary:hover,
  .faq .faq-item[open] summary { padding-inline: 18px; gap: 18px; font-size: 16px; }
  .faq .faq-item .faq-answer { padding: 4px 18px 24px; font-size: 15px; }
}
@media (prefers-reduced-motion:reduce) {
  .faq .faq-item summary > .faq-question-text { transition: none; transform: none !important; }
  .faq .faq-question-text::before { transition: none; transform: none; }
}