/*
 * Local improvements layered after the original exported stylesheet.
 * Keeping these rules separate makes future updates safer.
 */

/* At narrow desktop widths, reserve room for the fixed navigation bar. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .l-g-2-col-hero {
    padding-top: 90px;
  }
}

.copyright-wrap {
  gap: 12px;
}

/*
 * On a 375x812 viewport the hero ROC badge pushed the hero image down to 774px,
 * leaving only 38px of a 400px image on screen. The dedicated "Arizona ROC
 * Credential" section further down the page carries the same information, so
 * the badge is hidden on phones only. Desktop and tablet are unchanged.
 */
@media screen and (max-width: 767px) {
  .hero-wrap.split > aside.box.light-border {
    display: none;
  }
}

/*
 * Phone-only hero spacing. Reviewed on a real device and approved 2026-07-31.
 *
 * Goal: start the headline higher and get more of the hero image on screen.
 *
 * Measured at 375x812 before any change: navbar to H1 21px, H1 to H2 16px,
 * H2 to body 16px, body to button 31px, button to image 46px. Image top 689px,
 * 123px visible.
 *
 * Tightening the inner gaps alone did almost nothing, because .l-g-2-col-hero
 * is a fixed 1100px grid with align-items:center. Shrinking the text column
 * simply left more centred dead space - the H1 moved 1px and the gap under the
 * button grew from 46px to 62px. So the height and centring have to be
 * addressed too:
 *
 *   height:auto      - let the hero be as tall as its content instead of 1100px
 *   align-items:start - stack both rows from the top of their tracks
 *
 * The 80px top margin on .hero-wrap is what clears the fixed navbar and is
 * left alone.
 *
 * Scoped to max-width:479px, NOT 767px. .hero-wrap.split only carries that
 * 80px navbar clearance below 480px; from 480px to 767px it is zero, and the
 * original layout relied on align-items:center to keep the headline clear of
 * the fixed navbar. Applying align-items:start up to 767px slid the H1 to 8px,
 * underneath the 70px navbar. Every common phone portrait width (320, 360, 375,
 * 390, 412, 414, 428) is below 479px, so this scope covers the real cases and
 * leaves 480px and above exactly as it was.
 */
@media screen and (max-width: 479px) {
  .l-g-2-col-hero {
    height: auto;
    align-items: start;
  }

  /*
   * height:auto matters as much as min-height here. Webflow sets
   * .hero-split{height:1100px} below 768px. Overriding only min-height left the
   * container at 1100px while its content shrank to 997px, parking 103px of
   * dead white space between the hero image and the review section - which is
   * exactly what showed up in review on a real phone.
   */
  .hero-split {
    height: auto;
    min-height: 0;
    justify-content: flex-start;
  }

  .hero-wrap.split {
    padding-top: 8px;
    padding-bottom: 10px;
  }

  .hero-wrap.split > .heading.h1 {
    margin-bottom: 10px;
  }

  .hero-wrap.split > .heading.hero {
    margin-bottom: 10px;
  }

  .hero-wrap.split > .cta-wrapper {
    margin-top: 14px;
  }
}

/*
 * Horizontal overflow on very narrow phones - a pre-existing bug, present on
 * production before any of this work.
 *
 * At a 320px viewport the page scrolled sideways to 347px. Cause: the FAQ and
 * feature cards sit in .l-g-3-col, whose grid track resolved to 330.9px inside
 * a 273px container, because the exported column definition has a minmax()
 * floor wider than the space available. Each .box inherited 331px and pushed
 * past the viewport edge.
 *
 * minmax(0, 1fr) lets the single column shrink to the container instead.
 * Scoped to 479px and below, so wider layouts keep the exported column rules.
 */
@media screen and (max-width: 479px) {
  .w-layout-grid.l-g-3-col {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Centre the reviews and gallery labels. Both bars are flex containers using
 * space-between, so justify-content is what actually moves the label.
 */
.rev-powerbar,
.ow-powerbar {
  justify-content: center;
  text-align: center;
}

/*
 * Each review card's author is now an h2 so screen readers can jump between
 * cards. h2 rather than h3 because the cards sit directly beneath the page h1
 * with no intervening section heading. Reset the inherited heading margins so
 * the cards lay out exactly as before.
 */
h2.rev-author {
  margin: 0;
}


/*
 * Pill link in the "Areas We Serve" section. Now used only by the closing
 * "Ask us" link - the three city cards this was written for were replaced by
 * linked entries in the city list itself.
 *
 * index.html resets anchors with `a { text-decoration:inherit; color:inherit }`
 * in a <head> style block, so an unclassed link inside body copy renders
 * identically to the text around it. These links carry their own class and
 * beat that reset on specificity. Scoped to .area-link, so no existing link on
 * any page changes.
 */
.area-link {
  display: inline-block;
  margin-top: 4px;
  padding: 11px 18px;
  border: 1px solid var(--primary--100, #483721);
  border-radius: 999px;
  color: var(--primary--100, #483721);
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
}

.area-link:hover,
.area-link:focus-visible {
  background-color: var(--primary--100, #483721);
  color: var(--neutral--10, #fff);
}

/*
 * The "Ask us" link sits on the section's own dark brown background rather
 * than on a white card, so it needs the inverted palette.
 */
.area-link--light {
  border-color: var(--primary--10, #ffdfb5);
  color: var(--primary--10, #ffdfb5);
}

.area-link--light:hover,
.area-link--light:focus-visible {
  background-color: var(--primary--10, #ffdfb5);
  color: var(--primary--100, #483721);
}

/*
 * The three cities that have pages of their own are links inside the city
 * list. They need to read as links against the plain text around them, and the
 * <head> anchor reset strips both colour and underline, so both are restored
 * here. White against the list's cream is the second signal after the
 * underline, so the affordance does not rest on colour alone.
 */
.area-list a {
  color: var(--neutral--10, #fff);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;

  /*
   * Hit area only. These were 200px-tall cards before and are now 25px of
   * text, which is thin for a thumb. Vertical padding on an inline box widens
   * the hit target without changing the line box, so the list does not reflow
   * and no horizontal padding is added that would push the comma off the word.
   */
  padding: 5px 0;
}

.area-list a:hover,
.area-list a:focus-visible {
  color: var(--primary--10, #ffdfb5);
  text-decoration-thickness: 2px;
}

/*
 * The city list. Cities without a page of their own stay deliberately plain
 * text: only the three that have real pages get a link affordance, so nothing
 * on the page looks clickable without being clickable. Promoting a city later
 * means wrapping its <li> in an anchor and nothing else.
 *
 * inline-block plus nowrap keeps two-word names such as "Litchfield Park" and
 * "Apache Junction" whole; the line breaks between cities instead of inside
 * one. The separator is a comma rather than a bullet so it reads naturally
 * when a screen reader speaks the list.
 */
.areas-rest {
  max-width: 760px;
  margin: 40px auto 0;
  text-align: center;
}

.area-list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  color: var(--primary--10, #ffdfb5);
  font-size: 17px;
  line-height: 1.9;
}

.area-list li {
  display: inline-block;
  white-space: nowrap;
}

.area-list li:after {
  content: ",";
  margin-right: 8px;
}

.area-list li:last-child:after {
  content: "";
  margin-right: 0;
}

.areas-rest-note {
  margin: 0;
}

/*
 * Icons: inline SVG sprite instead of Font Awesome webfonts.
 *
 * The export pulled four Font Awesome families - fa-light-300, fa-solid-900,
 * fa-sharp-solid-900 and fa-brands-400 - totalling 1,094 KB, to draw twelve
 * glyphs. The sprite near the top of each page carries the same twelve in about
 * 4 KB. Five were already drawn in this repo and are copied unchanged, so they
 * are pixel-identical to what shipped before:
 *   si-star, si-facebook, si-google  <- reviews.html  #rev-i-*
 *   si-check, si-credential          <- city pages    #cp-i-check, #cp-i-badge
 *
 * The markup keeps its original .fa classes on purpose. All the exported sizing,
 * colour and layout rules (.fa.xs min-width, .fa.bg-primary, flex behaviour)
 * still apply, and because they set font-size, an SVG sized in em picks up the
 * right dimensions with no size map to maintain.
 *
 * The font-family reset below is what actually stops the download. A webfont is
 * only fetched when something renders in it, so the glyph elements must not
 * merely be empty - no rule may still name a Font Awesome family for an element
 * that exists on the page. Every .fa variant in the export is listed here.
 * Removing one of these is what silently brings a 300 KB font back.
 */
.fa,
.fa.line,
.fa.sharp,
.fa.solid,
.fa.brands,
.icon-phone-wrap {
  font-family: inherit;
}

.si {
  width: 1em;
  height: 1em;
  display: block;
  flex: none;
  overflow: visible;
}

/*
 * .icon-phone-wrap paints its glyph with `background-clip: text` plus a
 * transparent text fill, which has no effect on an SVG child, so the colour has
 * to be set explicitly.
 *
 * It must be WHITE. The wrapper's background-color is var(--neutral--10), and
 * clipping that background to the text is what painted the glyph white on the
 * blue call button. Reading `color: var(--black-9)` off the same rule and
 * applying it here gives a black icon on a blue button - that property was
 * never the visible colour, it was the fallback underneath a transparent fill.
 */
.icon-phone-wrap .si {
  color: var(--neutral--10, #fff);
  margin: auto;
  /*
   * The shared `.si` sizing of 1em comes from the wrapper's 1.05rem font-size,
   * which drew this one at ~17px inside a 64px button - much smaller than the
   * glyph the webfont painted there. Sized in em so it still tracks the
   * wrapper's font-size.
   */
  width: 1.6em;
  height: 1.6em;
}

/*
 * .si is display:block, so `text-align: center` on the wrapper no longer
 * centres it. The Font Awesome glyph it replaced was inline text, which
 * text-align did centre - so wherever the container centres its contents, the
 * icon has to be re-centred explicitly or it sits hard against the left edge.
 * On the homepage that left the two section-title icons 315px off centre.
 *
 * This is scoped rather than applied to .si globally on purpose: most icons on
 * the site sit in left-aligned wrappers - .fa.xl on the review quote, .fa.xs on
 * the services checklist and the review stars - and margin-inline:auto would
 * push all of those off their text.
 */
.section-title.center .fa .si,
.feature-block.centered .fa .si,
.arrow-up .fa .si {
  margin-inline: auto;
}

/* The sprite itself is a definitions block and must never occupy layout. */
.si-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/*
 * Card reveal on scroll, using CSS scroll-driven animations.
 *
 * No JavaScript, no Intersection Observer, no library. The animation is driven
 * by the element's own position in the scrollport, so it runs on the compositor
 * and cannot jank the main thread.
 *
 * Two guardrails, both deliberate:
 *
 * 1. The hidden state lives INSIDE @supports. This is the whole point. The
 *    exported Webflow interactions put `style="opacity:0"` in the markup and
 *    relied on 489 KB of JavaScript to undo it - if that never ran, the content
 *    never appeared. Here, a browser without scroll-timeline support simply
 *    never sees the rule and renders the cards normally. Content is never
 *    hidden by something that might not run.
 *
 * 2. prefers-reduced-motion is honoured, matching the existing convention in
 *    city-pages.css.
 *
 * Elements already on screen at load sit past the end of animation-range, so
 * they render at the final keyframe rather than flashing.
 *
 * .rev-card and .ow-card are deliberately NOT in this list. Both galleries
 * already run their own progressive disclosure - reviews.html renders 9 of its
 * 54 cards and our-work.html 8 of its 29, the rest sitting at zero height until
 * their own controls reveal them. Driving opacity from scroll position on
 * elements another system is already showing and hiding invites a fight between
 * the two, for a purely cosmetic gain. If those galleries are ever reworked,
 * they can be added here.
 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .box.light-border,
    .areas-rest,
    .feature-block.centered {
      animation: si-reveal linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 25%;
    }
  }
}

@keyframes si-reveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/*
 * ---------------------------------------------------------------------------
 * Navigation, after dropping jQuery and the Webflow bundles
 * ---------------------------------------------------------------------------
 *
 * Webflow opened the mobile menu by generating a `.w-nav-overlay` element,
 * moving the menu into it and writing inline styles. js/nav.js does not move
 * the menu, so its open state is described here instead. Everything else -
 * colours, link sizing, the dropdown panel - still comes from the exported
 * stylesheet, because nav.js keeps Webflow's `.w--open` class.
 *
 * The export collapses the navbar at 991px (data-collapse="medium"), so these
 * rules use the same breakpoint.
 */
@media screen and (max-width: 991px) {
  /*
   * Beats `.w-nav[data-collapse=medium] .w-nav-menu { display: none }` (0,3,0)
   * from the export, which is what hid the menu when Webflow was not there to
   * override it inline.
   *
   * The panel is hidden with visibility rather than display so it can be
   * transitioned, and so it stays out of the tab order and the accessibility
   * tree while closed.
   *
   * The offset parent is .navigation-container, which the export gives
   * `position: relative` below 991px. Measured, `left/right: 0` against it lands
   * flush with the viewport edges, so the panel is full-bleed the way the
   * generated overlay was.
   */
  .menu-right.w-nav .nav-menu.w-nav-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--neutral--10, #fff);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }

  .menu-right.w-nav.nav-open .nav-menu.w-nav-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
  }

  /*
   * Webflow tagged each child of the open menu with .w--nav-link-open /
   * .w--nav-dropdown-open to lay them out as full-width rows. Stacking them
   * here does the same job without needing a class written onto every child.
   *
   * The links and the dropdown are named individually rather than with `> *`,
   * because the menu also contains .footer-phone-color.menu, which the export
   * sets to `display: none`. A blanket `> * { display: block }` outranks that
   * and puts a second phone number in the panel, under the one already in the
   * navbar. Leaving it alone keeps the menu as it shipped.
   */
  .menu-right.w-nav .nav-menu.w-nav-menu > .w-nav-link,
  .menu-right.w-nav .nav-menu.w-nav-menu > .w-dropdown {
    display: block;
    width: 100%;
  }

  /*
   * .w-dropdown sets `text-align: left`, which beat the panel's centring and
   * left "Our Services" hard against the left edge while every other row was
   * centred.
   */
  .menu-right.w-nav .nav-menu.w-nav-menu .w-dropdown,
  .menu-right.w-nav .nav-menu.w-nav-menu .w-dropdown-toggle {
    text-align: center;
  }

  /*
   * The dropdown panel belongs in the flow on mobile, not floated over it.
   * Its -20px left margin exists to align the floating desktop panel with the
   * nav link above it, and only pushes it off-centre once it is in the flow.
   */
  .menu-right.w-nav .nav-menu.w-nav-menu .dropdown-wrap.w-dropdown-list {
    position: static;
    margin-left: 0;
  }
}

@media screen and (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .menu-right.w-nav .nav-menu.w-nav-menu,
  .menu-right.w-nav.nav-open .nav-menu.w-nav-menu {
    transition: none;
    transform: none;
  }
}

/*
 * The services dropdown shipped with `style="opacity:0"` on both of its links,
 * cleared by an IX2 fade when the panel opened. That inline style is gone from
 * the markup now - without the bundle it would have left the dropdown opening
 * empty - so the fade is described here instead, and costs nothing if it never
 * runs.
 */
@media (prefers-reduced-motion: no-preference) {
  .dropdown-wrap.w-dropdown-list.w--open .nav-link-wrap {
    animation: si-fade-in 0.2s ease both;
  }

  .dropdown-wrap.w-dropdown-list.w--open .nav-link-wrap:nth-child(2) {
    animation-delay: 0.05s;
  }
}

@keyframes si-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}