/* Levity Charters — Bone & Brass design system
   Base reset carried over verbatim from the Claude Design export. */

html, body { margin: 0; padding: 0; background: #F4EEE3; }
body { -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #221B14; text-decoration: none; }
a:hover { color: #9C6B2E; }
::selection { background: #EAE0CA; }
[data-nav-services]:hover [data-nav-menu],
[data-nav-services]:focus-within [data-nav-menu] { opacity: 1 !important; visibility: visible !important; }

/* Keyboard focus, which the export never styled. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #9C6B2E;
  outline-offset: 2px;
}

/* Scroll-reveal is opt-in: elements are visible by default so the page reads
   correctly with JavaScript disabled or motion reduced. site.js adds
   [data-reveal-armed] only when it is safe to animate. */
[data-reveal] { opacity: 1; transform: none; }
[data-reveal-armed] [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 750ms ease, transform 750ms cubic-bezier(.2,.7,.3,1);
}
[data-reveal-armed] [data-reveal].is-revealed { opacity: 1; transform: none; }

/* FAQ accordion — native <details> so every answer is readable without JS. */
details.faq > summary { list-style: none; cursor: pointer; }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq .faq-chevron { transition: transform 260ms ease; }
details.faq[open] .faq-chevron { transform: rotate(180deg); }
details.faq .faq-vbar { transition: opacity 260ms ease; }
details.faq[open] .faq-vbar { opacity: 0; }

/* Estimate type-ahead listbox */
.ta-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: #F4EEE3; border: 1px solid #D8CBB3; border-radius: 2px;
  box-shadow: 0 14px 34px rgba(34,27,20,0.1); max-height: 280px; overflow-y: auto; padding: 4px 0; }
.ta-list[hidden] { display: none; }
.ta-option { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: 'Switzer', system-ui, sans-serif; font-size: 14.5px; color: #221B14; padding: 10px 16px; }
.ta-option:hover, .ta-option[aria-selected="true"] { background: #EAE0CA; }
.ta-option .code { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: #A2947C; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Motion is disabled wherever the reader asked for that — applied site-wide,
   including the homepage, which the export left uncovered. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Category filters only work with JavaScript, so they stay out of the document
   until it loads — a reader without JS sees every item rather than dead buttons. */
.tab-bar { display: none !important; }
.js .tab-bar { display: flex !important; }

/* ---------------------------------------------------------------------------
   Form controls.
   The Design export left inputs and selects at browser defaults on every page
   (15 of its 17 inputs carry no styling at all). These rules apply the existing
   Bone & Brass tokens to them — no new colours or type are introduced.
--------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"], select, textarea {
  font-family: 'Switzer', system-ui, sans-serif;
  font-size: 15px;
  color: #221B14;
  background: #F4EEE3;
  border: 1px solid #D8CBB3;
  border-radius: 2px;
  padding: 13px 14px;
  width: 100%;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  -webkit-appearance: none;
  appearance: none;
}
textarea { min-height: 120px; resize: vertical; }
select {
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%239C6B2E' stroke-width='1.3' stroke-linecap='round'><path d='M1.5 3.4L5 6.8l3.5-3.4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
input::placeholder, textarea::placeholder { color: #A2947C; }
input:hover, select:hover, textarea:hover { border-color: #C4B393; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #9C6B2E;
  box-shadow: 0 0 0 3px rgba(156,107,46,0.14);
}
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: #A03B28; }
input[type="checkbox"] { width: auto; accent-color: #9C6B2E; }
button[disabled] { cursor: not-allowed; }
/* Fields carried over from the estimate hand-off */
[data-prefilled] { background: #EFE7D8; }


/* --- animation keyframes hoisted from the Design pages --- */
@keyframes railSweep { 0% { left: -34% } 100% { left: 102% } }
.rail-sweep { animation: none !important; opacity: 0 }
@keyframes resultIn { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.result-in { animation: resultIn 620ms cubic-bezier(.2,.7,.3,1) both }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* --- hover / focus rules hoisted from style-* attributes --- */
.x576b869:hover{color: #221B14}
.x7149cf6:hover{background: #EAE0CA; color: #221B14}
.x5278dfc:hover{color: #F4EEE3; background: #2E251B; transform: translateY(-1px)}
.x5f596bf:hover{color: #F4EEE3; background: #2E251B; transform: translateY(-2px)}
.xe353c7d:hover{background: #EAE0CA; color: #221B14; transform: translateY(-2px)}
.x4a509b8:hover{background: #EFE7D8; transform: translateY(-3px)}
.xafb4f0a:hover{background: #2E251B; transform: translateY(-2px)}
.x22f5f26:hover{border-color: #9C6B2E}
.x8407e8b:hover{color: #9C6B2E}
.xe75bb37:hover{color: #221B14; transform: translateY(-4px)}
.x9832777:hover{color: #F4EEE3; background: #8A5D27; transform: translateY(-2px)}
.xd436e7e:hover{background: #F4EEE3; color: #221B14; transform: translateY(-2px)}
.x02664f7:hover{color: #9C6B2E; border-bottom-color: #9C6B2E}


/* ---------------------------------------------------------------------------
   Responsive layer.

   The Design export contains no width media queries at all — layouts are fixed
   multi-column grids with 48px gutters, so they overflow below roughly 1000px.
   Nothing here changes the design at the widths it actually specifies; these
   rules only take over below those widths, where the export was silent.
   Inline styles are used throughout the export, hence !important.
--------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  [style*="grid-template-columns: 1.2fr 1.2fr 0.7fr 0.9fr"],
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 1000px) {
  /* Page gutters */
  [style*="max-width: 1600px"] { padding-left: 24px !important; padding-right: 24px !important; }

  /* Header */
  header [style*="padding: 20px 48px"] {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 14px 20px !important;
  }
  header nav { gap: 18px !important; flex-wrap: wrap !important; row-gap: 10px !important; }

  /* Multi-column grids collapse to a single column */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: 1.55fr 1fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="minmax(340px"],
  [style*="minmax(370px"],
  [style*="minmax(320px"] { grid-template-columns: 1fr !important; }

  /* Process steps stack; the decorative trail is hidden since it can no longer
     line up with a single-column list. */
  [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: 1fr !important; gap: 28px !important; }
  [style*="height: 22px"][style*="margin-top: 56px"] { display: none !important; }

  /* Hero: the image panel needs its own height once it is no longer a column. */
  [style*="min-height: calc(100svh - 84px)"] { min-height: 0 !important; }
  [style*="border-left: 1px solid #D8CBB3"][style*="min-height: 0"] { min-height: 62vh !important; border-left: 0 !important; }
  [style*="padding: clamp(40px, 7vh, 92px) 72px"] { padding: 48px 24px 44px !important; }

  /* Panels that assume a tall column */
  [style*="min-height: 620px"] { min-height: 46vh !important; }

  /* Generous vertical rhythm gets tightened rather than removed */
  [style*="padding: 132px 48px 140px"] { padding-top: 72px !important; padding-bottom: 76px !important; }
  [style*="padding: 112px 48px 120px"],
  [style*="padding: 104px 48px 120px"] { padding-top: 64px !important; padding-bottom: 72px !important; }
  [style*="padding: 96px 48px 40px"] { padding-top: 56px !important; }

  /* Cards / CTA blocks with large inner padding */
  [style*="padding: 72px 56px"] { padding: 40px 24px !important; }
  [style*="padding: 52px 44px 56px"] { padding: 36px 24px 38px !important; }
}

@media (max-width: 620px) {
  [style*="max-width: 1600px"] { padding-left: 18px !important; padding-right: 18px !important; }
  header nav { gap: 14px !important; }
  /* Keep the primary CTA reachable without a horizontal scroll */
  header nav a[style*="padding: 12px 22px"] { padding: 10px 16px !important; }
  [style*="grid-template-columns: repeat(2, 1fr)"] { grid-template-columns: 1fr !important; }
}

/* Long/unbreakable strings (routes, emails, coordinates) must never force a
   horizontal scroll on the page body. */
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; }