/* ==========================================================================
   Creatio Construction: General FAQ page styles
   Loaded only by faq.html, after style.css. Every class here starts with
   "faq-" (or sits under .page-faq), so no other page is affected. The shared
   .faq / .faq__item classes in style.css are not used on this page.
   The look is "field manual": a black manual cover with a brass measuring
   scale along its lower edge, then a stone desk where each category is a
   punched divider sheet with a black section tab, a margin rule and
   numbered clauses (01.01, 01.02 ...). The section index sits beside the
   sheets like a stack of binder tabs, and the closing call to action is a
   lined field note of what to send us.

   CONTENTS
   01  Page tokens and helpers
   02  Hero: cover, breadcrumb, title, direct line card and facts
   03  Manual layout and section index
   04  Question search and empty state
   05  Divider sheets and questions
   06  Call to action and field note
   07  Footer band
   08  Motion preferences
   09  Responsive
   ========================================================================== */


/* 01 PAGE TOKENS AND HELPERS ================================================ */
.page-faq {
  --faq-black: #08090a;
  --faq-ink: #111214;
  --faq-panel: #16171a;
  --faq-line: rgba(255, 255, 255, .12);
  --faq-stone: #ece5d8;
  --faq-paper: #fbf9f4;
  --faq-rule: rgba(40, 32, 18, .14);
  --faq-rule-strong: rgba(40, 32, 18, .3);
  --faq-brass: #c4a874;
  --faq-brass-hi: #e2cd9d;
  --faq-brass-text: #6f5830; /* darker brass for small text and focus rings on light surfaces */
  --faq-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --faq-ease: cubic-bezier(.2, .7, .2, 1);
  --faq-sticky: 88px;
  background: var(--faq-stone);
}
.page-faq [hidden] { display: none !important; }
.faq-mono { font-family: var(--faq-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.faq-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.faq-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 22px; color: rgba(255, 255, 255, .62); }
.faq-kicker b { padding: 4px 9px; border: 1px solid var(--faq-brass); border-radius: 2px; color: var(--faq-brass-hi); font-weight: 600; }


/* 02 HERO =================================================================== */
.faq-hero {
  position: relative;
  padding: 18px 0 clamp(72px, 8vw, 112px);
  overflow: hidden;
  color: rgba(255, 255, 255, .76);
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(196, 168, 116, .12), rgba(196, 168, 116, 0) 70%),
    var(--faq-black);
}
/* the brass measuring scale: millimetre, centimetre and decimetre ticks */
.faq-scale {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  border-bottom: 1px solid rgba(196, 168, 116, .55);
  background:
    repeating-linear-gradient(90deg, rgba(196, 168, 116, .55) 0 1px, transparent 1px 200px) left bottom / 100% 24px no-repeat,
    repeating-linear-gradient(90deg, rgba(196, 168, 116, .45) 0 1px, transparent 1px 40px) left bottom / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, rgba(196, 168, 116, .28) 0 1px, transparent 1px 8px) left bottom / 100% 7px no-repeat;
}

.faq-crumbs ol { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.faq-crumbs li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .62); font-size: .85rem; }
.faq-crumbs li + li::before { content: "/"; color: var(--faq-brass); }
.faq-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .8); text-decoration: none; }
.faq-crumbs a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--faq-brass); text-underline-offset: 4px; }
.faq-crumbs [aria-current] { color: var(--white); }

.faq-hero__grid { display: grid; gap: 40px; }
.faq-hero__title {
  max-width: 22ch; margin: 0 0 24px;
  color: var(--white); font-size: clamp(2.05rem, 4.4vw, 3.9rem); line-height: 1.08; letter-spacing: -.03em;
}
.faq-hero__pre {
  display: block; margin-bottom: 16px;
  color: var(--faq-brass); font: 500 clamp(.78rem, 1vw, .9rem) / 1.4 var(--faq-mono); letter-spacing: .16em; text-transform: uppercase;
}
/* "in Los Cabos" carries a brass dimension line with end ticks */
.faq-hero__place {
  position: relative; display: inline-block; padding-bottom: .16em; color: var(--faq-brass-hi);
  background:
    linear-gradient(var(--faq-brass), var(--faq-brass)) left bottom / 100% 2px no-repeat,
    linear-gradient(var(--faq-brass), var(--faq-brass)) left bottom / 2px 14px no-repeat,
    linear-gradient(var(--faq-brass), var(--faq-brass)) right bottom / 2px 14px no-repeat;
}
.faq-hero__lead { max-width: 60ch; margin: 0 0 32px; font-size: var(--fs-lead); line-height: 1.6; }
.faq-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.faq-hero__jump {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  color: var(--white); font: 500 .95rem var(--font-head); text-decoration: none;
  border-bottom: 1px solid rgba(196, 168, 116, .6);
}
.faq-hero__jump .icon { color: var(--faq-brass); transition: transform .25s var(--faq-ease); }
.faq-hero__jump:hover .icon { transform: translateY(3px); }

/* direct line card, pinned like a note inside the cover */
.faq-line {
  position: relative; align-self: start;
  padding: 34px 24px 22px;
  background: var(--faq-panel); border: 1px solid var(--faq-line); border-radius: 4px;
}
.faq-line__tag {
  position: absolute; top: -1px; left: 24px; margin: 0; padding: 5px 10px;
  background: var(--faq-brass); color: var(--faq-black); font-size: .68rem; font-weight: 700; border-radius: 0 0 3px 3px;
}
.faq-line__title { margin: 0 0 10px; color: var(--white); font-size: 1.2rem; line-height: 1.35; letter-spacing: -.01em; }
.faq-line > p:not(.faq-line__tag) { margin: 0 0 16px; font-size: .95rem; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.faq-line__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--faq-line); }
.faq-line__list li { border-bottom: 1px solid var(--faq-line); }
.faq-line__list a {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 2px;
  color: var(--white); font-weight: 700; text-decoration: none; overflow-wrap: anywhere;
}
.faq-line__list .icon { flex: none; color: var(--faq-brass); }
.faq-line__list a:hover span { text-decoration: underline; text-decoration-color: var(--faq-brass); text-underline-offset: 4px; }

/* facts strip */
.faq-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  margin: 48px 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--faq-line);
}
.faq-facts li { display: grid; align-content: start; gap: 6px; padding: 18px 16px 0 0; }
.faq-facts__k { color: rgba(255, 255, 255, .55); font-size: .68rem; }
.faq-facts__v { color: var(--white); font: 600 clamp(1.6rem, 2.6vw, 2.2rem) / 1 var(--font-head); }
.faq-facts__v--text { font-size: 1rem; line-height: 1.4; font-weight: 500; }


/* 03 MANUAL LAYOUT AND SECTION INDEX ======================================== */
.faq-manual { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 120px); }
.faq-manual__grid { display: grid; gap: 36px; }
.faq-manual__body { min-width: 0; }

.faq-index__title { margin: 0 0 12px; color: var(--faq-brass-text); font-weight: 700; }
.faq-index__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.faq-index__list a {
  position: relative;
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 52px; padding: 8px 14px;
  background: var(--faq-paper); color: var(--faq-ink);
  border: 1px solid var(--faq-rule); border-left: 4px solid var(--faq-ink); border-radius: 2px 4px 4px 2px;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.faq-index__n { color: var(--faq-brass-text); font-weight: 700; letter-spacing: .06em; }
.faq-index__name { font: 500 .95rem / 1.3 var(--font-head); }
.faq-index__c { min-width: 26px; padding: 3px 6px; text-align: center; color: var(--faq-ink); background: var(--faq-stone); border-radius: 2px; font-size: .7rem; letter-spacing: .04em; }
.faq-index__list a:hover { background: var(--white); border-color: var(--faq-rule-strong); border-left-color: var(--faq-brass-text); }
.faq-index__list a.is-current { background: var(--faq-ink); color: var(--white); border-color: var(--faq-ink); border-left-color: var(--faq-brass); }
.faq-index__list a.is-current .faq-index__n { color: var(--faq-brass); }
.faq-index__list a.is-current .faq-index__c { background: rgba(255, 255, 255, .12); color: var(--white); }
.faq-index__list a.is-empty { opacity: .45; }


/* 04 QUESTION SEARCH AND EMPTY STATE ======================================== */
.faq-search {
  margin-bottom: 40px; padding: 20px 20px 14px;
  background: var(--faq-ink); color: rgba(255, 255, 255, .75); border-radius: 4px;
}
.faq-search__label { display: block; margin-bottom: 12px; color: var(--white); font: 600 1rem var(--font-head); }
.faq-search__field {
  position: relative; display: flex; align-items: center;
  background: var(--white); border: 2px solid transparent; border-radius: 3px;
}
.faq-search__field:focus-within { border-color: var(--faq-brass); box-shadow: 0 0 0 3px rgba(196, 168, 116, .35); }
.faq-search__icon { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--faq-brass-text); pointer-events: none; }
.faq-search__input {
  flex: 1; min-width: 0; height: 54px; padding: 0 12px 0 46px;
  border: 0; background: transparent; color: var(--faq-ink);
  font: 400 1rem var(--font-body);
  -webkit-appearance: none; appearance: none;
}
.faq-search__input::placeholder { color: #6b6f77; }
.faq-search__input:focus { outline: none; }
.faq-search__input::-webkit-search-cancel-button { display: none; }
.faq-search__clear {
  flex: none; min-width: 64px; min-height: 44px; margin-right: 5px; padding: 0 12px;
  border: 1px solid var(--faq-rule-strong); border-radius: 2px; background: var(--faq-paper);
  color: var(--faq-ink); font: 600 .82rem var(--font-head); cursor: pointer;
}
.faq-search__clear:hover { background: var(--faq-stone); }
.faq-search__clear:focus-visible { outline: 2px solid var(--faq-brass-text); outline-offset: 2px; }
.faq-search__status { min-height: 1.4em; margin: 10px 0 0; font-size: .9rem; color: rgba(255, 255, 255, .72); }
.faq-search__status b { color: var(--faq-brass-hi); }

.faq-empty { margin-bottom: 18px; padding: 22px 24px; background: var(--faq-paper); border: 1px dashed var(--faq-rule-strong); border-radius: 4px; }
.faq-empty__title { margin: 0 0 6px; color: var(--faq-ink); font: 600 1.05rem var(--font-head); }
.faq-empty p:last-child { margin: 0; }
.faq-empty a { color: var(--faq-ink); font-weight: 700; text-decoration-color: var(--faq-brass-text); text-underline-offset: 3px; overflow-wrap: anywhere; }


/* 05 DIVIDER SHEETS AND QUESTIONS =========================================== */
.faq-sheet {
  position: relative;
  margin-top: 54px; padding: 26px 18px 18px;
  background: var(--faq-paper);
  border: 1px solid var(--faq-rule); border-radius: 0 6px 6px 6px;
  box-shadow: 0 18px 40px -32px rgba(40, 32, 18, .45);
  scroll-margin-top: 44px;
}
/* the black section tab standing above each sheet */
.faq-sheet__tab {
  position: absolute; top: -34px; left: -1px; display: flex; align-items: center; gap: 8px;
  height: 34px; margin: 0; padding: 0 16px;
  background: var(--faq-ink); color: rgba(255, 255, 255, .66); border-radius: 6px 6px 0 0;
  font-size: .7rem;
}
.faq-sheet__tab b { color: var(--faq-brass); font-size: .82rem; letter-spacing: .08em; }
.faq-sheet__head {
  display: grid; gap: 8px;
  padding-bottom: 18px; margin-bottom: 4px;
  border-bottom: 2px solid var(--faq-ink);
}
.faq-sheet__title { margin: 0; color: var(--faq-ink); font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.15; letter-spacing: -.025em; }
.faq-sheet__intro { margin: 0; max-width: 62ch; color: var(--gray-700); }
.faq-sheet__count { margin: 2px 0 0; color: var(--faq-brass-text); font-weight: 700; }

.faq-q { border-bottom: 1px solid var(--faq-rule); }
.faq-q:last-child { border-bottom: 0; }
.faq-q summary {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 32px; align-items: start; gap: 10px;
  min-height: 60px; padding: 18px 0;
  cursor: pointer; list-style: none;
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::marker { content: ""; }
.faq-q summary:focus-visible { outline: 2px solid var(--faq-brass-text); outline-offset: 3px; border-radius: 2px; }
.faq-q__num { padding-top: 4px; color: var(--faq-brass-text); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.faq-q__text { margin: 0; color: var(--faq-ink); font: 500 1.04rem / 1.45 var(--font-head); overflow-wrap: break-word; transition: color .2s; }
/* plus mark that turns into a minus */
.faq-q__mark {
  position: relative; width: 32px; height: 32px;
  border: 1px solid var(--faq-rule-strong); border-radius: 2px; background: var(--white);
  transition: background-color .25s, border-color .25s;
}
.faq-q__mark::before,
.faq-q__mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  background: var(--faq-ink); transition: transform .25s var(--faq-ease), background-color .25s;
}
.faq-q__mark::after { transform: rotate(90deg); }
.faq-q summary:hover .faq-q__text { color: var(--faq-brass-text); }
.faq-q summary:hover .faq-q__mark { border-color: var(--faq-ink); }
.faq-q[open] > summary .faq-q__mark { background: var(--faq-ink); border-color: var(--faq-ink); }
.faq-q[open] > summary .faq-q__mark::before,
.faq-q[open] > summary .faq-q__mark::after { background: var(--faq-brass); }
.faq-q[open] > summary .faq-q__mark::after { transform: rotate(0deg); }
.faq-q[open] > summary .faq-q__text { color: var(--black); }

.faq-q__a { padding: 0 0 22px; }
.faq-q[open] .faq-q__a { animation: faq-open .3s var(--faq-ease); }
.faq-q__a p { margin: 0; padding-left: 16px; border-left: 2px solid var(--faq-brass); color: var(--gray-700); line-height: 1.7; }
.faq-q__a a { color: var(--faq-ink); font-weight: 700; text-decoration-color: var(--faq-brass-text); text-underline-offset: 3px; }
.faq-q__a a:hover { color: var(--faq-brass-text); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.faq-sheet__back {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px;
  color: var(--faq-brass-text); font: 700 .72rem var(--faq-mono); letter-spacing: .12em; text-transform: uppercase;
  text-underline-offset: 4px;
}


/* 06 CALL TO ACTION AND FIELD NOTE ========================================== */
.faq-cta { background: var(--faq-black); color: rgba(255, 255, 255, .74); }
.faq-cta__grid { display: grid; gap: 40px; }
.faq-cta__title { max-width: 18ch; margin: 0 0 20px; color: var(--white); font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.035em; }
.faq-cta__text { max-width: 54ch; margin: 0 0 30px; font-size: var(--fs-lead); line-height: 1.6; }
.faq-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.faq-note {
  position: relative; align-self: start;
  padding: 30px 22px 20px;
  background-color: var(--faq-paper);
  background-image: repeating-linear-gradient(180deg, transparent 0 39px, rgba(40, 32, 18, .1) 39px 40px);
  background-position: 0 22px;
  color: var(--faq-ink); border-radius: 3px;
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8);
}
.faq-note::before { content: ""; position: absolute; top: 0; bottom: 0; left: 44px; width: 1px; background: rgba(196, 168, 116, .7); }
.faq-note__title { position: relative; margin: 0 0 14px 34px; color: var(--faq-brass-text); font-weight: 700; }
.faq-note__list { position: relative; margin: 0 0 18px; padding: 0; list-style: none; }
.faq-note__list li { display: flex; align-items: center; gap: 16px; min-height: 40px; font-weight: 700; line-height: 1.35; }
.faq-note__list li::before { content: ""; flex: none; width: 14px; height: 14px; border: 1.5px solid var(--faq-brass-text); border-radius: 2px; background: var(--white); }
.faq-note__lines { position: relative; display: grid; gap: 4px; padding-top: 12px; border-top: 2px solid var(--faq-ink); }
.faq-note__lines a {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  color: var(--faq-ink); font-weight: 700; text-decoration: none; overflow-wrap: anywhere;
}
.faq-note__lines .icon { flex: none; color: var(--faq-brass-text); }
.faq-note__lines a:hover { text-decoration: underline; text-decoration-color: var(--faq-brass-text); text-underline-offset: 4px; }
.faq-note__lines a:focus-visible { outline-color: var(--faq-brass-text); }


/* 07 FOOTER BAND ============================================================ */
.faq-explore { padding-top: 44px; padding-bottom: 8px; }
.faq-explore__title { margin-bottom: 20px; }
.faq-explore__list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: 12px; overflow: hidden; }
.faq-explore__list a { display: grid; align-content: start; gap: 4px; min-height: 44px; height: 100%; padding: 16px 18px; background: var(--black); text-decoration: none; }
.faq-explore__list strong { color: var(--white); font: 600 .98rem var(--font-head); }
.faq-explore__list span { font-size: .88rem; line-height: 1.45; color: rgba(255, 255, 255, .6); }
.faq-explore__list a:hover { background: #151619; }
.faq-explore__list a:hover strong { color: var(--accent); }


/* 08 MOTION PREFERENCES ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .faq-q[open] .faq-q__a { animation: none; }
  .faq-q__mark, .faq-q__mark::before, .faq-q__mark::after,
  .faq-q__text, .faq-index__list a, .faq-hero__jump .icon { transition: none; }
  .faq-hero__jump:hover .icon { transform: none; }
}


/* 09 RESPONSIVE ============================================================= */
@media (max-width: 479px) {
  .faq-q summary { grid-template-columns: minmax(0, 1fr) 32px; }
  .faq-q__num { grid-column: 1 / -1; padding-top: 0; margin-bottom: -4px; }
  .faq-sheet__tab { left: 12px; }
  .faq-sheet { border-radius: 6px; }
}
@media (min-width: 480px) {
  .faq-index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-sheet { padding: 30px 26px 20px; }
  .faq-q__a { padding-left: 52px; padding-right: 42px; }
}
@media (min-width: 768px) {
  .faq-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .faq-facts li { padding-right: 24px; }
  .faq-facts li + li { padding-left: 24px; border-left: 1px solid var(--faq-line); }
  /* punched holes and a brass margin rule down the left edge of each sheet */
  .faq-sheet { padding: 36px 40px 24px 84px; }
  .faq-sheet::before {
    content: ""; position: absolute; top: 34px; bottom: 34px; left: 22px; width: 20px;
    background: radial-gradient(circle at 10px 10px, var(--faq-stone) 0 6px, var(--faq-rule-strong) 6.5px 7.5px, transparent 8px) 0 0 / 20px 128px repeat-y;
  }
  .faq-sheet::after { content: ""; position: absolute; top: 0; bottom: 0; left: 60px; width: 1px; background: rgba(196, 168, 116, .55); }
  .faq-search { padding: 24px 26px 16px; }
  .faq-explore__list { grid-template-columns: repeat(2, 1fr); }
  .page-faq .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .faq-hero__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); align-items: end; gap: 64px; }
  .faq-manual__grid { grid-template-columns: 270px minmax(0, 1fr); gap: 48px; align-items: start; }
  .faq-index { position: sticky; top: var(--faq-sticky); max-height: calc(100vh - var(--faq-sticky) - 16px); overflow-y: auto; padding: 2px 2px 8px 0; }
  .faq-index__list { grid-template-columns: 1fr; }
  /* binder tabs: the current one sticks out towards the sheets */
  .faq-index__list a { margin-right: 10px; }
  .faq-index__list a.is-current { margin-right: 0; }
  .faq-search { display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: center; column-gap: 48px; padding: 22px 28px 12px; }
  .faq-search__label { margin: 0; font-size: 1.1rem; }
  .faq-search__status { grid-column: 2; }
  .faq-empty { margin-top: 54px; }
  .faq-sheet__back { display: none; }
  .faq-cta__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 72px; }
  .faq-note { padding: 36px 32px 24px; }
  .faq-note::before { left: 54px; }
  .faq-note__title { margin-left: 44px; }
  .faq-explore__list { grid-template-columns: repeat(4, 1fr); }
  .page-faq .footer__grid { grid-template-columns: 1.5fr 1.4fr 1fr 1fr; }
}
@media (min-width: 1440px) {
  .faq-manual__grid { grid-template-columns: 300px minmax(0, 1fr); gap: 64px; }
  .faq-search { grid-template-columns: 300px minmax(0, 1fr); column-gap: 64px; }
  .faq-sheet { padding: 40px 56px 28px 96px; }
  .faq-sheet::before { left: 26px; }
  .faq-sheet::after { left: 70px; }
}