/* 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)}
.x0c49ccf:hover{background: #A87B3E; color: #221B14}
.xa180eb8:hover{color: #BB8A49}
.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 */
  /* One row: logo left, CTA + menu button right. The bar used to wrap onto a
     second line here, which is what the drawer replaces. */
  header [style*="padding: 20px 48px"] {
    flex-wrap: nowrap !important;
    gap: 14px !important;
    padding: 12px 18px !important;
  }
  header nav.hdr-desktop { display: none !important; }
  .hdr-mobile { display: flex !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"],
  [style*="minmax(300px"],
  [style*="minmax(260px"] { grid-template-columns: 1fr !important; }

  /* A grid collapsed to one column still honours `grid-column: span 2` on its
     children, and spanning past the only explicit track makes the grid create an
     implicit second one. That implicit track is auto-sized, so it takes as much
     width as its content wants and the 1fr track absorbs whatever is left — which
     is how the lead forms ended up with a full-width field next to a field about
     one character wide. Which field collapsed depended on source order, so it
     differed between the two forms and between rows of the same form.
     Every span in the shipped HTML is inside a grid that collapses here, so the
     span has to be dropped wherever the collapse applies. verify.js asserts both
     halves stay in step. */
  [style*="grid-column: span 2"] { grid-column: auto !important; }

  /* Design-export fixed pixel widths (see build/lib/responsive-fluid.js). The
     artboard captured an absolute width, and often a matching height, that is
     harmless while the element is narrower than its column and wrong once it is
     not. Freeing both lets the text wrap and take the height it needs. */
  .x-fluid { width: auto !important; max-width: 100% !important; height: auto !important; }

  /* Grid and flex children have an automatic minimum size: they refuse to shrink
     below their min-content width. In a wide column that never binds. In a narrow
     one the item stays at its min-content width and overflows the container that
     is supposed to hold it — a card wider than the grid that contains it, a button
     row wider than its panel. Releasing the floor lets the text wrap instead. */
  [style*="display: grid"] > *,
  [style*="display: flex"] > * { min-width: 0; }

  /* Email addresses, URLs and route codes have no break opportunity, so a long
     one sets a min-content width no container can satisfy at 320px. */
  p, li, dd, dt, td, th, h1, h2, h3, h4, h5, h6, a, span { overflow-wrap: break-word; }

  /* 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; }
  .hdr-cta { padding: 9px 14px !important; font-size: 13px !important; }
}

/* Narrow phones: logo + CTA + menu button have to share about 284px of content
   width at 320px, so both ends of the bar step down rather than overflow. */
@media (max-width: 400px) {
  header > div > a[href="/"], header > div > a[href="#top"] {
    letter-spacing: 0.12em !important; font-size: 12px !important; gap: 8px !important;
    min-width: 0; flex: 0 1 auto; overflow: hidden;
  }
  header > div > a[href="/"] span, header > div > a[href="#top"] span { font-size: 12px !important; letter-spacing: 0.12em !important; }
  .hdr-mobile { gap: 6px !important; }
  .hdr-cta { padding: 8px 11px !important; font-size: 12.5px !important; }
  .hdr-toggle { width: 34px !important; height: 34px !important; }
  /* Every authored multi-column value, not just the ones that survive the earlier
     stages. These selectors match the style attribute as written, so a grid the
     1100px rule rewrote to two columns still carries `repeat(4, 1fr)` in its
     attribute and would never match a `repeat(2, 1fr)` selector — which is how the
     About stat strip stayed two columns down to 320px. */
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: 1.2fr 1.2fr 0.7fr 0.9fr"] { grid-template-columns: 1fr !important; }
}

/* Anchor targets clear the sticky header.

   One rule rather than a scroll-margin on each target: `[id]` covers every
   in-page anchor on the site — the Jet Types category links, the quote form's
   #request, the numbered legal sections, #top — and every anchor added later,
   which a per-element value would not. scroll-margin-top only has an effect when
   the element is actually scrolled to, so applying it broadly costs nothing.

   The value is the header height plus breathing room, and it is declared once
   here so the two cannot drift; check-responsive.js measures the real header and
   asserts every target lands below it. */
:root { --hdr-h: 84px; --hdr-offset: calc(var(--hdr-h) + 16px); }
@media (max-width: 1000px) { :root { --hdr-h: 62px; } }
[id] { scroll-margin-top: var(--hdr-offset); }

/* The sticky header.

   The export wraps every page in a div carrying `overflow-x: hidden`. When one
   overflow axis is hidden and the other visible, the visible one computes to
   `auto` — so that wrapper is a scroll container, and `position: sticky` on the
   header sticks to the wrapper rather than the viewport. The page scrolls on the
   viewport, so the header rode away with the content despite being declared
   sticky.

   `overflow-x: clip` clips on that axis without creating a scroll container and
   without forcing the other axis, which is exactly what was wanted here. The
   header then sticks to the viewport with no change to its own declaration and no
   JavaScript. body keeps `hidden` as a backstop for browsers predating `clip`. */
[style*="overflow-x: hidden"] { overflow-x: clip !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%; }

/* ---------------------------------------------------------------- mobile header

   Drawer and Services accordion, built on <details>/<summary> so both work with
   JavaScript disabled (see build/lib/header.js). Hidden above the breakpoint;
   the desktop nav is untouched. */

.hdr-mobile {
  display: none; align-items: center; gap: 10px;
  /* Never squeezed: the CTA and menu button keep their size and the logo, which
     has slack, takes the compression instead. */
  flex: 0 0 auto;
}

.hdr-cta {
  background: #221B14; color: #F4EEE3; font-size: 14px; font-weight: 500;
  padding: 11px 18px; border-radius: 2px; white-space: nowrap;
}

.hdr-drawer { position: static; }
.hdr-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: #221B14; cursor: pointer; border-radius: 2px;
  list-style: none; -webkit-tap-highlight-color: transparent;
}
/* Both markers have to go: Safari uses the pseudo-element, everyone else
   honours `display` on the summary itself. */
.hdr-toggle::-webkit-details-marker { display: none; }
.hdr-toggle::marker { content: ''; }
.hdr-toggle:focus-visible { outline: 2px solid #9C6B2E; outline-offset: 2px; }
.hdr-drawer > .hdr-toggle .hdr-close { display: none; }
.hdr-drawer[open] > .hdr-toggle .hdr-open { display: none; }
.hdr-drawer[open] > .hdr-toggle .hdr-close { display: flex; }

/* The panel hangs off the sticky <header>, which is the nearest positioned
   ancestor, so it spans the full width under the bar at any viewport. */
.hdr-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #F4EEE3; border-bottom: 1px solid #D8CBB3;
  box-shadow: 0 18px 34px rgba(34,27,20,0.10);
  /* Never taller than the space under the bar, and scrollable if the accordion
     makes it longer than that. --hdr-h is a hair above the real bar height, so
     the slack falls on the safe side. */
  max-height: calc(100svh - var(--hdr-h)); overflow-y: auto; overscroll-behavior: contain;
}
.hdr-panel { display: none; }
.hdr-drawer[open] > .hdr-panel { display: block; }
.hdr-nav { display: flex; flex-direction: column; padding: 6px 0 10px; }
.hdr-link, .hdr-accsum, .hdr-sublink {
  display: flex; align-items: center;
  padding: 15px 20px; font-size: 16px; color: #221B14;
  border-top: 1px solid #E6DCC8;
}
.hdr-nav > .hdr-link:first-child, .hdr-acc:first-child > .hdr-accsum { border-top: 0; }
.hdr-accsum {
  gap: 8px; cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.hdr-accsum::-webkit-details-marker { display: none; }
.hdr-accsum::marker { content: ''; }
.hdr-accsum:focus-visible { outline: 2px solid #9C6B2E; outline-offset: -2px; }
.hdr-accsum svg { transition: transform 160ms ease; }
.hdr-acc[open] > .hdr-accsum svg { transform: rotate(180deg); }
/* Setting `display` on a closed <details>'s content overrides the UA rule that
   hides it, so the panel has to be hidden explicitly and shown on [open].
   Doing it this way rather than relying on UA styles keeps it identical with
   JavaScript disabled. */
.hdr-accbody { display: none; flex-direction: column; background: #EFE7D8; }
.hdr-acc[open] > .hdr-accbody { display: flex; }
.hdr-sublink { padding-left: 36px; font-size: 15px; color: #6B6053; }

@media (prefers-reduced-motion: reduce) {
  .hdr-accsum svg { transition: none; }
}

/* ------------------------------------------------------------- /advisors

   The layout rules from the Design export's second <style> block. Its
   :focus-visible and prefers-reduced-motion rules are not repeated here — the
   site already carries both in base.css, and a second copy would be a parallel
   system. Its [data-desktop-nav] / [data-nav-toggle] / [data-mobile-open] rules
   are gone too: that was the export's own header, replaced by the shared header
   and the <details> drawer every other page uses. */

/* The hero frame holds four absolutely positioned slides, so it has no content
   to give it height. Below the breakpoint the aspect ratio provides it; above,
   the frame stretches to the text column beside it. Without this the frame
   collapses and the carousel controls end up over dead space. */
[data-hero-frame] { aspect-ratio: 3 / 2; }
/* Explicitly one column below the breakpoint. The export used
   `repeat(auto-fit, minmax(320px, 1fr))`, which forms two columns from about
   736px up — well before the 900px rule below intends to. With
   `align-items: stretch` the image frame then stretches tall and centre-crops
   the 3:2 sources into a portrait window, which is what iPad portrait showed at
   768 and 820. */
[data-hero-grid] { grid-template-columns: 1fr; }
[data-tab-label] { display: block; }

@media (min-width: 900px) {
  [data-hero-frame] { aspect-ratio: auto; height: 100%; min-height: 440px; }
  [data-hero-grid] { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

/* Five tabs across a phone: the numerals carry the meaning, the words do not fit. */
@media (max-width: 560px) {
  [data-tab-label] { display: none; }
}

/* Without JavaScript the five steps read as a stacked list — every word of the
   page is present, which is the site's rule. The tab strip, the progress bar and
   the prev/next buttons only mean anything once the script can switch panels, so
   they appear only alongside it. advisors.js hides the four inactive panels on
   load, so the enhanced view is unchanged. */
html:not(.js) [data-tablist],
html:not(.js) [data-progress],
html:not(.js) [data-step-prev],
html:not(.js) [data-step-next],
html:not(.js) [data-go],
html:not(.js) [data-carousel-toggle] { display: none !important; }

/* Stacked, the panels need separating from one another. */
html:not(.js) [data-panel] + [data-panel] { margin-top: 40px; padding-top: 32px; border-top: 1px solid #D9CCB4; }