/* ==========================================================================
   Fire Rebuild page: mobile treatment
   Loads last on fire-rebuild.html, after fire-rebuild.css and
   fire-rebuild-refresh.css, so it wins without needing !important on
   everything.

   Two problems this solves:

   1. The scroll-scrub hero is desktop-only (the gate script in the page head
      only sets html.hero-scroll-on at >=768px). Below that the markup fell
      back to a short poster hero with no motion at all. Here the same
      fire-build video the desktop scrub is cut from plays full-screen, the
      way the homepage hero does.

   2. The page was authored as four tabs and is now unwrapped into one
      continuous document, so on a phone it reads as ~4,000 words of
      undifferentiated body copy: a 3-column table, 3-up card grids, and
      48px section rhythm all squeezed into 375px. Everything below restacks
      to one column, tightens the type scale, and gives each block enough
      separation to be scannable.
   ========================================================================== */

/* Desktop keeps the full lead sentence; the short variant is mobile-only. */
.fr-hero3__lead-short { display: none; }

@media screen and (max-width: 767px) {

  /* ---- Hero: full-screen autoplaying video ------------------------------
     dvh not vh: on iOS Safari 100vh excludes the URL bar, so a 100vh hero
     runs past the visible area. Matches the homepage treatment in
     mobile-conversion.css.
     --------------------------------------------------------------------- */
  .fr-hero3 {
    min-height: calc(100vh - 70px);
    min-height: calc(100dvh - 70px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
  }

  .fr-hero3__bg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* The desktop scrim is a left-to-right wash built for copy pinned left.
     Mobile copy is centred over the whole frame, so go bottom-weighted:
     the video stays readable up top, the text sits on solid dark. */
  .fr-hero3__scrim {
    background: linear-gradient(
      to bottom,
      rgba(15, 30, 48, 0.55) 0%,
      rgba(15, 30, 48, 0.32) 32%,
      rgba(15, 30, 48, 0.72) 68%,
      rgba(15, 30, 48, 0.92) 100%
    );
  }

  .fr-hero3__inner {
    padding: 90px 22px 58px;
  }

  .fr-hero3__eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.24em;
    margin-bottom: 12px;
  }

  .fr-hero3 h1 {
    font-size: 1.85rem;
    line-height: 1.14;
    margin-bottom: 14px;
    max-width: 18ch;
  }

  /* The desktop lead is a 42-word paragraph. At 375px that is nine lines
     over the video and pushes the CTAs off the fold. The markup carries a
     short mobile variant; the full version still runs on desktop and is
     restated in the first body section either way. */
  .fr-hero3__lead {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 22px;
    max-width: 34ch;
  }

  .fr-hero3__lead-full { display: none; }
  .fr-hero3__lead-short { display: inline; }

  /* Side by side, not two stacked full-width blocks. */
  .fr-hero3__ctas {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .fr-hero3__btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 8px;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  /* Scroll indicator: the element is in the markup but hero-scroll-build.css
     hides it outside html.hero-scroll-on, which is desktop-only. */
  .hero-scroll__hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 3;
    pointer-events: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
  }

  /* "Scroll to build" describes the desktop frame-by-frame scrub. On mobile
     the video just autoplays, so the shorter label is the honest one. */
  .hero-scroll__hint-desktop { display: none; }
  .hero-scroll__hint-mobile { display: inline; }

  .hero-scroll__hint i {
    width: 9px;
    height: 9px;
    border-right: 2px solid rgba(201, 159, 98, 0.95);
    border-bottom: 2px solid rgba(201, 159, 98, 0.95);
    transform: rotate(45deg);
    animation: fr-hint 1.8s ease-in-out infinite;
  }

  @keyframes fr-hint {
    0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.9; }
    50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 0.4; }
  }

  body.fr-scrolled .hero-scroll__hint {
    opacity: 0;
    transition: opacity 300ms ease;
  }

  /* ---- Map section ------------------------------------------------------ */
  .fr-mapsec {
    padding: 40px 0 44px;
  }

  .fr-mapsec__inner {
    padding: 0 20px;
  }

  .fr-mapsec__head {
    margin-bottom: 22px;
  }

  .fr-mapsec__head h2 {
    font-size: 1.4rem;
    line-height: 1.2;
    margin: 10px 0;
  }

  .fr-mapsec__head p {
    font-size: 0.94rem;
    line-height: 1.55;
  }

  .fr-mapsec__map {
    height: 320px;
    border-radius: 6px;
  }

  .fr-mapsec__cap {
    font-size: 11.5px;
    line-height: 1.5;
    margin-top: 12px;
  }

  /* ---- Photo band ------------------------------------------------------- */
  .fr-photoband {
    padding: 40px 20px;
  }

  .fr-photoband__head {
    margin-bottom: 22px;
  }

  .fr-photoband__head h2 {
    font-size: 1.4rem;
    line-height: 1.2;
  }

  .fr-photoband__head p {
    font-size: 0.94rem;
  }

  /* One tall portrait image reads better than three stacked landscapes; the
     other two become a side-by-side pair so the band stays under a screen. */
  .fr-photoband__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .fr-photoband__grid img {
    height: 190px;
    border-radius: 4px;
  }

  .fr-photoband__grid img:first-child {
    grid-column: 1 / -1;
    height: 260px;
  }

  /* ---- Body sections: rhythm and type ----------------------------------- */
  /* The unwrapped tab panels are the bulk of the page. Give each one a clear
     top edge and consistent gutters. */
  .fire-rebuild-tabs-section .about-content .tab-content {
    padding-top: 8px;
    padding-bottom: 0;
    margin-top: 0;
  }

  .fire-rebuild-tabs-section .about-content .tab-content + .tab-content {
    margin-top: 0;
    border-top: 8px solid #f1f4f8;
  }

  /* No horizontal scroll anywhere on this page. An older shared fix made this
     panel `overflow-x: auto` to let a 480px-min table be swiped; the table is
     cards now, so the panel must never scroll sideways again. Belt and braces
     in case another shared stylesheet reintroduces it. */
  .fr-tab-panel {
    padding: 36px 20px 40px;
    overflow-x: visible !important;
    max-width: 100%;
  }

  .fr-tab-panel::after {
    content: none !important;
  }

  .fr-compare-table {
    min-width: 0 !important;
  }

  .fr-tab-panel h2 {
    font-size: 1.5rem;
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
  }

  .fr-tab-panel .fr-lead {
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 24px;
  }

  .fr-tab-panel p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 16px;
  }

  .fr-section-heading {
    font-size: 1.1rem;
    line-height: 1.25;
    margin: 36px 0 14px;
    padding-bottom: 8px;
  }

  .fr-divider {
    margin: 32px 0;
  }

  .fr-two-col,
  .fr-two-col--wide {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* ---- Lists ------------------------------------------------------------
     fire-rebuild.css makes each li a flex row so the dot can sit beside the
     text, but that also makes the leading <strong> its own flex item: the
     bold label got a narrow column of its own and the rest of the sentence
     ragged out beside it. Back to normal text flow with the dot drawn as an
     absolutely positioned marker, so the label and its sentence read as one
     paragraph.
     --------------------------------------------------------------------- */
  .fr-req-list li {
    display: block;
    position: relative;
    padding: 10px 0 10px 18px;
    font-size: 0.92rem;
    line-height: 1.6;
  }

  .fr-req-list li::before {
    position: absolute;
    left: 0;
    top: 18px;
    margin-top: 0;
  }

  .fr-req-list li strong {
    /* Own line: at this width a bold label plus its sentence on one run is
       harder to scan than a label sitting above what it describes. */
    display: block;
    margin-bottom: 2px;
  }

  /* ---- Path cards ------------------------------------------------------- */
  .fr-paths {
    gap: 14px;
  }

  .fr-path-card {
    flex-direction: column;
    gap: 12px;
    padding: 20px 18px;
    border-radius: 8px;
  }

  .fr-path-card__num {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }

  .fr-path-card__body h3 {
    font-size: 1.08rem;
    margin: 0 0 10px;
  }

  /* ---- Timeline --------------------------------------------------------- */
  /* The badge is an inline-flex pill with a fixed 20px icon; at 375px the
     text wrapped awkwardly around it. Full width, icon pinned top-left. */
  .fr-timeline-badge {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 24px;
    border-radius: 6px;
  }

  .fr-timeline-badge span {
    font-size: 0.86rem;
    line-height: 1.45;
  }

  .fr-steps li {
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 16px;
  }

  .fr-steps li::before {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
  }

  .fr-steps li strong {
    font-size: 0.95rem;
    margin-bottom: 5px;
  }

  .fr-steps li span {
    font-size: 0.9rem;
    line-height: 1.62;
  }

  /* ---- Comparison table -> stacked cards --------------------------------
     Three columns of prose at 375px gave ~90px per column and shredded every
     cell into six-line towers. Each row becomes a card: the dimension is the
     card heading, the two options are labeled rows underneath (labels come
     from data-label in the markup, since the <thead> is hidden).
     --------------------------------------------------------------------- */
  .fr-compare-table {
    display: block;
    border-collapse: separate;
    box-shadow: none;
    margin: 20px 0;
    font-size: 0.9rem;
  }

  .fr-compare-table thead {
    /* Visually hidden, still read by screen readers and kept out of layout.
       A <thead> keeps its intrinsic table width even when clipped, so park it
       off-canvas as well rather than trusting clip alone to contain it. */
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .fr-compare-table tbody,
  .fr-compare-table tr,
  .fr-compare-table td {
    display: block;
    width: 100%;
  }

  .fr-compare-table tbody tr {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  }

  .fr-compare-table tbody tr:nth-child(even) {
    background: #fff;
  }

  .fr-compare-table tbody tr:last-child {
    margin-bottom: 0;
  }

  /* First cell is the row heading. */
  .fr-compare-table td:first-child {
    background: var(--primary-color, #1c3f60);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 11px 16px;
  }

  .fr-compare-table td:not(:first-child) {
    padding: 12px 16px 14px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #4a5568;
  }

  .fr-compare-table td:not(:first-child) + td {
    border-top: 1px solid #eef1f5;
  }

  .fr-compare-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #b5894e;
    margin-bottom: 5px;
  }

  /* ---- Info cards ------------------------------------------------------- */
  .fr-cards {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 24px 0;
  }

  /* The icon block sat alone on its own row above the title and wasted a
     third of each card. Pair it with the heading instead and let the body
     copy run full width underneath.

     Grid, not flex: the card's three children are siblings, so a plain flex
     row would put icon, title, and paragraph in three columns and shred the
     text. This puts the icon in column 1 row 1, the title beside it, and the
     paragraph across both columns on row 2. */
  .fr-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    padding: 16px 16px 18px;
  }

  .fr-card__icon {
    width: 32px;
    height: 32px;
    margin-bottom: 0;
    flex-shrink: 0;
    grid-column: 1;
    grid-row: 1;
  }

  .fr-card__icon svg {
    width: 16px;
    height: 16px;
  }

  .fr-card h3 {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.95rem;
    line-height: 1.25;
    margin: 0;
  }

  .fr-card p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .fr-card p {
    font-size: 0.88rem;
    line-height: 1.55;
  }

  /* ---- Cost ranges ------------------------------------------------------ */
  .fr-cost-ranges {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 24px 0;
  }

  /* Left-aligned rows rather than three tall centred blocks, so the three
     price points can be compared at a glance instead of scrolled through. */
  .fr-cost-range {
    text-align: left;
    padding: 18px 18px 20px;
  }

  .fr-cost-range__label {
    font-size: 0.72rem;
    margin-bottom: 6px;
  }

  .fr-cost-range__amount {
    font-size: 1.45rem;
    margin-bottom: 6px;
  }

  .fr-cost-range__note {
    font-size: 0.82rem;
    line-height: 1.45;
  }

  /* ---- Jurisdiction + partner cards ------------------------------------- */
  .fr-jurisdiction,
  .fr-partners {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 24px 0;
  }

  .fr-jurisdiction-card,
  .fr-partner-card {
    padding: 20px 18px;
  }

  .fr-jurisdiction-card h4 {
    font-size: 0.98rem;
    line-height: 1.3;
  }

  .fr-jurisdiction-card ul li,
  .fr-partner-card p {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .fr-partner-card h3 {
    font-size: 1.05rem;
  }

  /* ---- Partner CTA ------------------------------------------------------ */
  .fr-partner-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 24px 20px;
    margin-top: 28px;
  }

  .fr-partner-cta__text h3 {
    font-size: 1.1rem;
  }

  .fr-partner-cta__text p {
    font-size: 0.9rem;
  }

  .fr-partner-cta__btn {
    text-align: center;
    padding: 15px 20px;
  }

  /* ---- Accordions -------------------------------------------------------
     Headers are the main navigation device on a page this long, so give them
     a real tap target and keep the plus icon from being crushed by a
     three-line label.
     --------------------------------------------------------------------- */
  .accordion-item {
    border-radius: 8px;
    margin-bottom: 10px;
  }

  .accordion-header {
    padding: 16px 16px;
    font-size: 0.94rem;
    line-height: 1.35;
    gap: 12px;
    min-height: 56px;
    align-items: center;
  }

  .accordion-icon {
    width: 20px;
    height: 20px;
  }

  /* The plus glyph is <path d="M5 0v10M0 5h10"> with fill="currentColor" and
     no stroke, so it draws nothing and the control reads as an empty ring.
     Stroke it. Accordions are the main way through this page on a phone, so
     the open/close affordance has to be visible. */
  .accordion-icon svg {
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    fill: none;
    overflow: visible;
  }

  .accordion-body {
    padding: 0 16px 18px;
    font-size: 0.92rem;
    line-height: 1.68;
  }

  .accordion-body p {
    font-size: 0.92rem;
    line-height: 1.68;
  }

  /* Nested content inside accordion bodies loses its own outer padding, so
     it doesn't double up on the body's gutter. */
  .accordion-body .fr-cards,
  .accordion-body .fr-cost-ranges,
  .accordion-body .fr-two-col {
    margin: 16px 0 0;
  }

  /* ---- FAQ -------------------------------------------------------------- */
  .fire-rebuild-faq {
    padding: 44px 0;
  }

  .fire-rebuild-faq__inner {
    padding: 0 20px;
  }

  .fire-rebuild-faq__inner h2 {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 24px;
  }

  .fire-rebuild-faq__inner .section-label {
    font-size: 0.7rem;
    margin-bottom: 10px;
  }

  /* ---- Bottom CTA ------------------------------------------------------- */
  .fire-rebuild-cta {
    padding: 48px 20px 56px;
  }

  .fire-rebuild-cta__inner h2 {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .fire-rebuild-cta__inner p {
    font-size: 0.95rem;
    line-height: 1.65;
  }

  .fire-rebuild-cta__btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .fire-rebuild-cta__btns a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 15px 18px;
    font-size: 0.85rem;
  }
}

/* Narrow phones: pull the hero copy in one more step so the H1 stays at
   three lines and the two CTAs stay on one row. */
@media screen and (max-width: 390px) {
  .fr-hero3 h1 { font-size: 1.65rem; }
  .fr-hero3__lead { font-size: 0.9rem; -webkit-line-clamp: 3; }
  .fr-hero3__btn { font-size: 0.66rem; padding: 13px 6px; letter-spacing: 0.03em; }
  .fr-tab-panel { padding: 32px 16px 36px; }
  .fire-rebuild-faq__inner,
  .fr-mapsec__inner { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll__hint i { animation: none; }
}