/* ============================================================
       VARIABLES
    ============================================================ */
    :root {
      --teal:        #1A5F6B;
      --teal-dark:   #155460;
      --maroon:      #8B1A1A;
      --maroon-dark: #751616;
      --near-black:  #0D0D0D;
      --charcoal:    #1C1C1C;
      --mid-gray:    #6B6B6B;
      --warm-white:  #F7F5F2;
      --white:       #FFFFFF;
      --display:     'Oswald', sans-serif;
      --body:        'Inter', sans-serif;
      --max:         1200px;
    }

    /* ============================================================
       BRICK BACKGROUNDS
       Light: actual illustrated brick PNGs from WP media library.
       Desktop: wide 16:9 format. Mobile: 9:16 portrait format.
       Content panels float on top with fading white edges.
    ============================================================ */
    .brick-light {
      background-color: #F5F4F1;
      background-image: url('https://arrow.localseoservices.org/wp-content/uploads/2026/06/arrow_masonry_desktop_original_style_no_overlap_cleaned.png');
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
    }

    /* Dark brick: near-black with subtle white-outline bricks */
    .brick-dark {
      background-color: var(--near-black);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='88'%3E%3Crect x='3' y='3' width='111' height='36' rx='2' fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.1'/%3E%3Crect x='120' y='3' width='117' height='36' rx='2' fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.1'/%3E%3Crect x='3' y='45' width='57' height='36' rx='2' fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.1'/%3E%3Crect x='66' y='45' width='111' height='36' rx='2' fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.1'/%3E%3Crect x='183' y='45' width='54' height='36' rx='2' fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.1'/%3E%3C/svg%3E");
      background-size: 240px 88px;
    }

    /* ============================================================
       RESET + BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--body); font-size: 17px; line-height: 1.65; color: var(--near-black); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }

    /* Content max-width wrapper */
    .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 28px;
    }

    /* ============================================================
       TYPE
    ============================================================ */
    h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; }
    h1 { font-size: clamp(38px, 4.5vw, 62px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
    h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: 0.02em; }
    h3 { font-size: clamp(18px, 2vw, 24px); font-weight: 600; }

    .eyebrow {
      font-family: var(--body);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--teal);
    }
    /* Teal is the accent color. Maroon reserved for primary CTA only. */

    .tagline {
      font-family: var(--display);
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .tag-maroon { color: var(--maroon); }
    .tag-teal   { color: var(--teal); }

    /* ============================================================
       BUTTONS
    ============================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--body);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 14px 28px;
      border-radius: 2px;
      border: 2px solid transparent;
      cursor: pointer;
      transition: background .2s, border-color .2s, color .2s;
      white-space: nowrap;
    }
    .btn-teal   { background: var(--teal);   color: var(--white); border-color: var(--teal);   }
    .btn-teal:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
    .btn-maroon { background: var(--maroon); color: var(--white); border-color: var(--maroon); }
    .btn-maroon:hover { background: var(--maroon-dark); border-color: var(--maroon-dark); }
    .btn-outline-dark  { background: transparent; color: var(--near-black); border-color: var(--near-black); }
    .btn-outline-dark:hover { background: rgba(0,0,0,0.06); }
    .btn-ghost-white  { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
    .btn-ghost-white:hover { border-color: var(--white); background: rgba(255,255,255,0.07); }
    .btn-white { background: var(--white); color: var(--teal); border-color: var(--white); }
    .btn-white:hover { background: rgba(255,255,255,0.9); }

    /* ============================================================
       NAV
    ============================================================ */
    .site-nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 9001;
      background: rgba(255,255,255,0.97);
      border-bottom: 1px solid rgba(0,0,0,0.08);
      backdrop-filter: blur(10px);
    }
    .nav-inner {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 28px;
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .nav-logo { display: block; flex-shrink: 0; }
    .nav-logo img, .nav-logo svg { height: 44px; width: auto; display: block; }
    .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
    .nav-links a {
      font-family: var(--body);
      font-size: 14px;
      font-weight: 500;
      color: #444;
      transition: color .2s;
    }
    .nav-links a:hover { color: var(--near-black); }
    .nav-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
    .nav-phone {
      font-size: 15px;
      font-weight: 600;
      color: var(--near-black);
    }
    .nav-cta { padding: 9px 18px; font-size: 13px; }

    /* Hamburger — visible by default, hidden on desktop via min-width query */
    .hamburger {
      display: flex; flex-direction: column; gap: 6px;
      cursor: pointer; background: none; border: none; padding: 14px 12px;
    }
    .hamburger span { display: block; width: 26px; height: 2px; background: var(--near-black); transition: transform .3s, opacity .3s; }
    @media (min-width: 769px) {
      .hamburger { display: none; }
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .mobile-overlay {
      display: none; position: fixed; inset: 0;
      background: var(--white); z-index: 9000;
      flex-direction: column; align-items: center; justify-content: center;
      gap: 32px; padding: 88px 24px 100px;
      overflow-y: auto;
    }
    .mobile-overlay.open { display: flex; }
    .mobile-overlay ul { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 28px; }
    .mobile-overlay ul a {
      font-family: var(--display);
      font-size: 28px; font-weight: 700;
      text-transform: uppercase; color: var(--near-black); letter-spacing: 0.04em;
    }
    .mobile-overlay ul a:hover { color: var(--teal); }
    .mobile-overlay .mob-phone { font-size: 22px; font-weight: 600; color: var(--teal); }
    .mobile-overlay .btn { width: 100%; max-width: 280px; justify-content: center; text-align: center; }

    /* ============================================================
       HERO — split layout, Lovable-inspired
       Left: headline + CTAs on light brick background
       Right: real masonry photo
    ============================================================ */
    .hero {
      padding-top: 68px; /* nav offset */
      position: relative;
    }
    .hero-inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 480px;
      min-height: 480px;
      align-items: stretch;
    }
    /* White fade at bottom of hero — matches reference design */
    .hero::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 140px;
      background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.85) 60%, #ffffff 100%);
      pointer-events: none;
      z-index: 5;
    }

    .hero-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 56px 48px 56px 28px;
      position: relative;
    }
    /* Fading white veil centered on hero text, brick shows at edges */
    .hero-left::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 90% 85% at 55% 50%, rgba(255,255,255,0.92) 35%, rgba(255,255,255,0.55) 65%, rgba(255,255,255,0) 100%);
      pointer-events: none;
      z-index: 0;
    }
    .hero-left > * { position: relative; z-index: 1; }

    .hero-left .eyebrow { margin-bottom: 18px; }

    .hero-left h1 {
      color: var(--near-black);
      margin-bottom: 22px;
    }

    .hero-sub {
      font-size: 17px;
      color: #555;
      line-height: 1.7;
      margin-bottom: 16px;
      max-width: 480px;
    }

    .hero-tag { margin-bottom: 36px; }

    .hero-btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 44px;
    }

    .hero-trust {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      padding-top: 28px;
      border-top: 1px solid rgba(0,0,0,0.1);
    }

    .hero-trust-item {
      font-size: 12px;
      font-weight: 500;
      color: #888;
      letter-spacing: 0.02em;
      padding-right: 18px;
      margin-right: 18px;
      border-right: 1px solid rgba(0,0,0,0.12);
    }
    .hero-trust-item:last-child { border-right: none; margin-right: 0; padding-right: 0; }

    /* Right photo panel */
    .hero-photo {
      position: relative;
      overflow: hidden;
    }
    .hero-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .hero-photo-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(247,245,242,0.25), transparent 40%);
    }
    .hero-photo-badge {
      position: absolute;
      bottom: 28px;
      left: 28px;
      background: var(--near-black);
      color: var(--white);
      padding: 12px 18px;
      font-family: var(--display);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      border-left: 4px solid var(--teal);
      border-radius: 0;
      z-index: 10; /* above the hero::after fade */
    }

    /* ============================================================
       LOCATION PAGE HERO
    ============================================================ */
    .loc-hero {
      padding-top: 68px;
      overflow: hidden;
    }
    .loc-hero-inner {
      max-width: var(--max);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 48px;
      padding: 64px 28px 56px;
    }
    .loc-hero-content {
      flex: 1;
      background: rgba(255,255,255,0.96);
      border-radius: 2px;
      padding: 44px 48px;
      box-shadow: 0 0 60px 48px rgba(255,255,255,0.96);
    }
    .loc-hero-content h1 {
      margin-bottom: 16px;
      font-size: clamp(28px, 3.5vw, 50px);
    }
    .loc-intro {
      font-size: 16px;
      color: var(--mid-gray);
      line-height: 1.72;
      margin-bottom: 28px;
      max-width: 560px;
    }
    .loc-btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .loc-hero-badge {
      background: var(--teal);
      color: var(--white);
      border-radius: 2px;
      padding: 32px 36px;
      text-align: center;
      flex-shrink: 0;
      min-width: 160px;
      text-decoration: none;
      transition: background .2s;
      display: block;
    }
    .loc-hero-badge:hover { background: var(--teal-dark); }
    .loc-badge-num {
      font-family: var(--display);
      font-size: 56px;
      font-weight: 700;
      line-height: 1;
      margin-bottom: 8px;
    }
    .loc-badge-label {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.04em;
      opacity: 0.85;
      line-height: 1.4;
      margin-bottom: 12px;
    }
    .loc-badge-cta {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      opacity: 0.65;
      margin-top: 4px;
    }

    /* ============================================================
       STAT BAR
    ============================================================ */
    .stat-bar {
      background: var(--near-black);
      padding: 24px 28px;
    }
    .stat-bar-inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
    }
    .stat-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 0 32px;
      border-right: 1px solid rgba(255,255,255,0.1);
    }
    .stat-item:first-child { padding-left: 0; }
    .stat-item:last-child  { border-right: none; }
    .stat-icon {
      width: 28px; height: 28px;
      max-width: 28px; max-height: 28px;
      color: var(--teal);
      flex-shrink: 0;
    }
    .stat-icon svg { width: 28px; height: 28px; display: block; }
    .stat-title {
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 3px;
    }
    .stat-label {
      font-size: 12px;
      color: rgba(255,255,255,0.6);
      line-height: 1.3;
    }

    /* ============================================================
       TRIGGERS — light brick background, white panel
    ============================================================ */
    .section-triggers {
      padding: 72px 28px;
      overflow: hidden;
    }
    .triggers-panel {
      max-width: var(--max);
      margin: 0 auto;
      background: rgba(255,255,255,0.98);
      border-radius: 2px;
      padding: 56px 52px;
      box-shadow: 0 0 80px 64px rgba(255,255,255,0.98);
    }
    .triggers-panel h2 { margin-bottom: 44px; }
    .trigger-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }
    .trigger-card { }
    .trigger-icon {
      width: 24px; height: 24px;
      max-width: 24px; max-height: 24px;
      color: var(--teal);
      margin-bottom: 14px;
    }
    .trigger-icon svg { width: 24px; height: 24px; display: block; }
    .trigger-card h3 { font-size: 17px; margin-bottom: 10px; border-top: 3px solid var(--teal); padding-top: 14px; }
    .trigger-card p  { font-size: 14px; color: var(--mid-gray); line-height: 1.65; }

    /* ============================================================
       SERVICES — dark brick, white cards
    ============================================================ */
    .section-services {
      padding: 72px 28px;
    }
    .services-inner {
      max-width: var(--max);
      margin: 0 auto;
    }
    .services-inner .eyebrow { color: rgba(255,255,255,0.45); margin-bottom: 8px; }
    .services-inner h2 { color: var(--white); margin-bottom: 48px; }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 14px;
    }
    .services-row2 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      max-width: calc(75% - 10px);
    }
    .svc-card {
      background: var(--white);
      border-left: 4px solid var(--teal);
      border-radius: 2px;
      padding: 22px 20px;
      transition: transform .2s;
    }
    .svc-card:hover { transform: translateY(-2px); }
    .svc-card h3   { font-size: 16px; margin-bottom: 8px; }
    .svc-card p    { font-size: 13px; color: var(--mid-gray); line-height: 1.55; margin-bottom: 14px; }
    .svc-link      { font-size: 12px; font-weight: 600; color: var(--teal); letter-spacing: 0.04em; text-transform: uppercase; }
    .svc-link:hover { color: var(--teal-dark); }

    .addon-row {
      margin-top: 28px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.08);
      font-size: 14px;
      color: rgba(255,255,255,0.42);
    }
    .addon-row strong { color: rgba(255,255,255,0.62); font-weight: 500; }
    .addon-row a { color: rgba(255,255,255,0.5); border-bottom: 1px solid rgba(255,255,255,0.18); }
    .addon-row a:hover { color: var(--white); }

    /* ============================================================
       WHY ARROW — light brick, white panel
    ============================================================ */
    .section-why { padding: 72px 28px; overflow: hidden; }
    .why-panel {
      max-width: var(--max);
      margin: 0 auto;
      background: rgba(255,255,255,0.98);
      border-radius: 2px;
      padding: 56px 52px;
      box-shadow: 0 0 80px 64px rgba(255,255,255,0.98);
    }
    .why-panel h2 { margin-bottom: 52px; }
    .pillars {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
    }
    .pillar {
      padding-right: 44px;
      border-right: 1px solid rgba(0,0,0,0.08);
    }
    .pillar:last-child { padding-right: 0; border-right: none; }
    .pillar:not(:first-child) { padding-left: 44px; }
    .pillar-n {
      font-family: var(--display);
      font-size: 52px;
      font-weight: 700;
      color: rgba(26,95,107,0.1);
      line-height: 1;
      margin-bottom: 14px;
    }
    .pillar h3 { font-size: 19px; margin-bottom: 14px; line-height: 1.3; }
    .pillar p  { font-size: 15px; color: var(--mid-gray); line-height: 1.72; }

    /* ============================================================
       SERVICE AREA — dark brick
    ============================================================ */
    .section-area { padding: 72px 28px; }
    .area-inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: start;
    }
    .area-left .tagline { display: block; margin-bottom: 18px; }
    .area-left h2 { color: var(--white); margin-bottom: 18px; }
    .area-left p  { color: rgba(255,255,255,0.6); font-size: 17px; line-height: 1.72; margin-bottom: 32px; }
    .loc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px 20px;
    }
    .loc { font-size: 14px; font-weight: 500; color: var(--teal); }

    /* ============================================================
       TRUST — white panel on light brick
    ============================================================ */
    .section-trust { padding: 56px 28px; overflow: hidden; }
    .trust-panel {
      max-width: var(--max);
      margin: 0 auto;
      background: rgba(255,255,255,0.98);
      border-radius: 2px;
      padding: 44px 52px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      box-shadow: 0 0 80px 64px rgba(255,255,255,0.98);
    }
    .t-item {
      text-align: center;
      padding: 0 28px;
      border-right: 1px solid rgba(0,0,0,0.08);
    }
    .t-item:last-child { border-right: none; }
    .t-num   { font-family: var(--display); font-size: clamp(36px,4vw,52px); font-weight: 700; color: var(--teal); line-height: 1; margin-bottom: 10px; }
    .t-label { font-size: 13px; font-weight: 500; color: var(--mid-gray); line-height: 1.4; }

    /* ============================================================
       REVIEWS — dark brick
    ============================================================ */
    .section-reviews { padding: 72px 28px; }
    .rev-inner { max-width: var(--max); margin: 0 auto; }
    .rev-head  { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 44px; gap: 24px; }
    .rev-head h2 { color: var(--white); }
    .rev-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .rev-card  {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 2px;
      padding: 26px 22px;
    }
    .rev-stars { color: #C8991A; font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; }
    .rev-text  { font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.7; font-style: italic; margin-bottom: 18px; }
    .rev-meta  { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.36); letter-spacing: 0.05em; text-transform: uppercase; }
    .rev-cta   { text-align: center; margin-top: 40px; }

    /* ============================================================
       FINAL CTA — solid teal
    ============================================================ */
    .section-cta {
      background: var(--teal);
      padding: 80px 28px;
      text-align: center;
    }
    .section-cta h2 { color: var(--white); font-size: clamp(28px,4vw,46px); margin-bottom: 14px; }
    .section-cta p  { color: rgba(255,255,255,0.8); font-size: 18px; max-width: 520px; margin: 0 auto 40px; }
    .cta-btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

    /* ============================================================
       FOOTER — dark brick
    ============================================================ */
    .site-footer { padding: 64px 28px 32px; }
    .footer-inner { max-width: var(--max); margin: 0 auto; }
    .footer-top {
      display: grid;
      grid-template-columns: 220px 1fr 1fr 1fr;
      gap: 48px;
      padding-bottom: 48px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      margin-bottom: 28px;
    }
    .f-brand svg { height: 36px; width: auto; margin-bottom: 14px; }
    .f-tag { margin-bottom: 16px; }
    .f-desc { font-size: 13px; color: rgba(255,255,255,0.35); line-height: 1.65; }
    .f-col h4 {
      font-family: var(--display);
      font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
      color: rgba(255,255,255,0.8); margin-bottom: 18px;
    }
    .f-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
    .f-col li a { font-size: 14px; color: rgba(255,255,255,0.42); transition: color .2s; }
    .f-col li a:hover { color: var(--white); }
    .ct-item { margin-bottom: 10px; }
    .ct-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.28); }
    .ct-val   { font-size: 14px; color: rgba(255,255,255,0.52); }
    .ct-val a { color: rgba(255,255,255,0.52); transition: color .2s; }
    .ct-val a:hover { color: var(--white); }
    .footer-bot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
    .f-copy, .f-legal { font-size: 12px; color: rgba(255,255,255,0.24); }

    /* ============================================================
       SCROLL REVEAL
    ============================================================ */
    .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
    .reveal.in { opacity: 1; transform: none; }
    .d1 { transition-delay: .1s; }
    .d2 { transition-delay: .2s; }
    .d3 { transition-delay: .3s; }
    .d4 { transition-delay: .4s; }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 1024px) {
      .hero-inner { grid-template-columns: 1fr; min-height: auto; }
      .hero-left { padding: 60px 28px; max-width: 100%; }
      .hero-photo { min-height: 400px; }
      /* Location hero */
      .loc-hero-inner { flex-direction: column; gap: 28px; padding: 48px 28px 40px; }
      .loc-hero-content { padding: 36px 32px; }
      .loc-hero-badge { min-width: auto; width: 100%; display: flex; align-items: center; gap: 24px; padding: 24px 32px; }
      .loc-badge-num { font-size: 44px; }
      .stat-bar-inner { grid-template-columns: repeat(2,1fr); gap: 16px; }
      .stat-item { border-right: none; padding: 8px 0; }
      .trigger-grid { grid-template-columns: repeat(2,1fr); }
      .services-grid { grid-template-columns: repeat(2,1fr); }
      .services-row2 { grid-template-columns: repeat(2,1fr); max-width: 100%; }
      .pillars { grid-template-columns: 1fr; }
      .pillar { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.08); padding: 0 0 32px; }
      .pillar:last-child { border-bottom: none; padding-bottom: 0; }
      .pillar:not(:first-child) { padding-left: 0; padding-top: 32px; }
      .area-inner { grid-template-columns: 1fr; gap: 40px; }
      .trust-panel { grid-template-columns: repeat(2,1fr); gap: 24px; }
      .t-item { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 24px; }
      .t-item:nth-child(2n), .t-item:last-child { border-bottom: none; }
      .rev-grid { grid-template-columns: 1fr; }
      .footer-top { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 768px) {
      body { padding-bottom: 72px; } /* clearance for sticky CTA bar */
      .brick-light {
        background-image: url('https://arrow.localseoservices.org/wp-content/uploads/2026/06/arrow_masonry_comic_background_mobile_9x16.png');
        background-size: cover;
        background-position: center;
      }
      /* Nav: hide desktop elements */
      .nav-links, .nav-phone, .nav-cta, .nav-right { display: none !important; }
      /* Hamburger: force visible with large tap target */
      .hamburger {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 14px 12px !important;
        cursor: pointer;
        background: none;
        border: none;
      }
      .hamburger span {
        display: block !important;
        width: 26px;
        height: 2px;
        background: #0D0D0D !important;
      }
      /* Mobile nav logo */
      .nav-logo img, .nav-logo svg { height: 44px; width: auto; }
      /* Hero: single column, photo hidden on mobile for clean layout */
      .hero-photo { display: none; }
      .hero { grid-template-columns: 1fr; }
      .hero-left {
        padding: 40px 20px 60px;
        max-width: 100%;
        margin: 0;
      }
      /* Hide inline hero buttons on mobile — sticky bar handles CTAs */
      .hero-btns { display: none; }
      /* Location page: no CTA buttons above fold on mobile */
      .loc-btns { display: none; }
      .loc-hero-inner { padding: 32px 20px 28px; gap: 20px; flex-direction: column; }
      .loc-hero-content { padding: 28px 24px; }
      /* Hide badge on mobile — anchor link in content area serves this */
      .loc-hero-badge { display: none; }
      .triggers-panel, .why-panel { padding: 36px 24px; }
      .trust-panel { grid-template-columns: 1fr; padding: 32px 28px; }
      .trigger-grid { grid-template-columns: 1fr; }
      .services-grid, .services-row2 { grid-template-columns: 1fr; }
      .rev-head { flex-direction: column; align-items: flex-start; }
      .footer-top { grid-template-columns: 1fr; }
      .footer-bot { flex-direction: column; text-align: center; }
      /* Stat bar: 2-column grid on mobile */
      .stat-bar-inner { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
      .stat-item { padding: 0; border-right: none; }
    }

    /* ============================================================
       STICKY MOBILE CTA BAR
       Uses standalone scta-* classes. Flexbox (not grid) so
       min-width: 0 on each button prevents text from forcing
       its column wider than 50%.
    ============================================================ */
    @media (min-width: 769px) {
      .sticky-cta { display: none; }
    }

    @media (max-width: 768px) {
      .sticky-cta {
        display: flex;
        flex-direction: row;
        gap: 8px;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: #fff;
        border-top: 1px solid rgba(0,0,0,0.10);
        padding: 10px 12px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        z-index: 8999;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.10);
        box-sizing: border-box;
      }
      .scta-estimate,
      .scta-call {
        flex: 1;
        min-width: 0;
        box-sizing: border-box;
        padding: 13px 8px;
        font-family: var(--body);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-align: center;
        text-decoration: none;
        border-radius: 2px;
        border: 2px solid transparent;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
      }
      .scta-estimate {
        background: transparent;
        color: #0D0D0D;
        border-color: #0D0D0D;
      }
      .scta-call {
        background: #8B1A1A;
        color: #fff;
        border-color: #8B1A1A;
      }
    }
    /* ============================================================
       LOCATION PAGE (page-location.php)
    ============================================================ */

    /* Hero — brick-light bg, content panel with fade */
    .loc-hero { padding-top: 68px; }
    .loc-hero-inner {
      max-width: 860px;
      margin: 0 auto;
      padding: 56px 28px 48px;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }
    .loc-hero-content {
      background: rgba(255,255,255,0.96);
      padding: 44px 48px;
      box-shadow: 0 0 80px 64px rgba(255,255,255,0.96);
      border-radius: 2px;
    }
    .loc-eyebrow {
      font-family: var(--body);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 10px;
    }
    .loc-title {
      font-size: clamp(26px, 3.5vw, 48px);
      margin-bottom: 16px;
      text-transform: uppercase;
    }
    .loc-intro {
      font-size: 16px;
      color: var(--mid-gray);
      line-height: 1.72;
      margin-bottom: 0;
    }
    .loc-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

    /* Trust pills — 2-column grid */
    .loc-trust-pills {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .loc-pill {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: rgba(255,255,255,0.92);
      padding: 14px 16px;
      border-radius: 2px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    }
    .loc-pill svg { flex-shrink: 0; color: var(--teal); margin-top: 2px; }
    .loc-pill div { display: flex; flex-direction: column; }
    .loc-pill strong {
      font-family: var(--display);
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--near-black);
      line-height: 1.3;
    }
    .loc-pill span { font-size: 12px; color: var(--mid-gray); line-height: 1.4; margin-top: 2px; }

    /* Services section */
    .loc-services { padding: 80px 0; }
    .loc-services-inner {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 28px;
    }
    .loc-services-inner .section-eyebrow {
      font-size: 12px; font-weight: 600; letter-spacing: 0.13em;
      text-transform: uppercase; color: var(--teal); margin-bottom: 8px;
    }
    .loc-services-inner h2 { margin-bottom: 36px; }
    .loc-svc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .loc-svc-card {
      background: var(--white);
      border-left: 4px solid var(--teal);
      border-radius: 2px;
      padding: 24px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    }
    .loc-svc-card h3 { font-size: 18px; margin-bottom: 10px; }
    .loc-svc-card h3 a { color: var(--near-black); }
    .loc-svc-card p { font-size: 14px; color: var(--mid-gray); line-height: 1.6; margin-bottom: 14px; }
    .loc-learn { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }

    /* Why Arrow */
    .loc-why { padding: 80px 0; }
    .loc-why-inner { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
    .loc-why-inner h2 { color: var(--white); margin-bottom: 48px; }
    .loc-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
    .loc-why-item h3 { color: var(--white); margin-bottom: 12px; font-size: 20px; }
    .loc-why-item p { color: rgba(255,255,255,0.75); font-size: 15px; line-height: 1.7; }

    /* Nearby cities */
    .loc-nearby { padding: 60px 0; }
    .loc-nearby-inner { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
    .loc-nearby-inner h2 { margin-bottom: 24px; }
    .loc-nearby-grid { display: flex; flex-wrap: wrap; gap: 10px; }
    .loc-nearby-link {
      font-size: 14px; font-weight: 600; color: var(--teal);
      padding: 8px 16px; border: 1px solid var(--teal); border-radius: 2px;
      transition: background .2s, color .2s;
    }
    .loc-nearby-link:hover { background: var(--teal); color: var(--white); }

    /* Final CTA */
    .loc-cta { padding: 80px 0; }
    .loc-cta-inner { max-width: var(--max); margin: 0 auto; padding: 0 28px; text-align: center; }
    .loc-cta-inner h2 { color: var(--white); margin-bottom: 16px; }
    .loc-cta-inner p { color: rgba(255,255,255,0.85); font-size: 17px; max-width: 560px; margin: 0 auto 32px; }
    .loc-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

    /* ---- MOBILE ---- */
    @media (max-width: 768px) {
      .loc-hero-inner { padding: 28px 16px 24px; gap: 14px; }
      .loc-hero-content {
        padding: 24px 20px;
        box-shadow: 0 0 48px 36px rgba(255,255,255,0.97);
      }
      .loc-trust-pills { grid-template-columns: 1fr 1fr; gap: 8px; }
      .loc-pill { padding: 10px 12px; gap: 8px; }
      .loc-pill strong { font-size: 11px; }
      .loc-pill span { font-size: 11px; }
      .loc-svc-grid { grid-template-columns: 1fr; }
      .loc-services { padding: 44px 0; }
      .loc-why { padding: 44px 0; }
      .loc-why-grid { grid-template-columns: 1fr; gap: 28px; }
      .loc-why-inner h2 { margin-bottom: 28px; }
      .loc-nearby { padding: 36px 0; }
      .loc-cta { padding: 44px 0; }
      .loc-cta-btns { flex-direction: column; align-items: center; }
    }

    /* ============================================================
       LOCATION PAGE V2 — corrected section rhythm
       Hero: brick-light (floating white panel)
       Services: brick-dark (white cards on dark bg)
       Why Arrow: brick-light (floating white panel)
       Nearby: brick-dark (teal links on dark bg)
       CTA: section-cta (reuses homepage teal class)
    ============================================================ */

    /* Trust bar inside hero content panel */
    .loc-trust-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 20px;
      margin-top: 20px;
      padding-top: 18px;
      border-top: 1px solid rgba(0,0,0,0.08);
    }
    .loc-trust-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      color: var(--mid-gray);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .loc-trust-item svg { color: var(--teal); flex-shrink: 0; }

    /* Services on dark background */
    .loc-services { padding: 72px 0; }
    .loc-svc-eyebrow {
      font-family: var(--body);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      margin-bottom: 8px;
    }
    .loc-svc-h2 { color: var(--white); margin-bottom: 44px; }
    .loc-addon-row {
      margin-top: 28px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.08);
      font-size: 14px;
      color: rgba(255,255,255,0.42);
    }
    .loc-addon-row a {
      color: rgba(255,255,255,0.6);
      border-bottom: 1px solid rgba(255,255,255,0.18);
      transition: color .2s;
    }
    .loc-addon-row a:hover { color: var(--white); }

    /* Why Arrow on light background — floating white panel */
    .loc-why { padding: 72px 28px; overflow: hidden; }
    .loc-why-panel {
      max-width: var(--max);
      margin: 0 auto;
      background: rgba(255,255,255,0.98);
      border-radius: 2px;
      padding: 56px 52px;
      box-shadow: 0 0 80px 64px rgba(255,255,255,0.98);
    }
    .loc-why-panel h2 { color: var(--near-black); margin-bottom: 48px; }
    .loc-why-item h3 { color: var(--near-black); margin-bottom: 12px; font-size: 20px; }
    .loc-why-item p { color: var(--mid-gray); font-size: 15px; line-height: 1.72; }
    .loc-pillar-n {
      display: block;
      font-family: var(--display);
      font-size: 48px;
      font-weight: 700;
      color: rgba(26,95,107,0.10);
      line-height: 1;
      margin-bottom: 12px;
    }

    /* Nearby on dark background */
    .loc-nearby { padding: 60px 28px; }
    .loc-nearby-h2 { color: var(--white); margin-bottom: 24px; }

    /* Mobile overrides */
    @media (max-width: 768px) {
      .loc-trust-bar { gap: 10px 14px; }
      .loc-trust-item { font-size: 10px; }
      .loc-services { padding: 48px 0; }
      .loc-why { padding: 48px 20px; }
      .loc-why-panel {
        padding: 32px 24px;
        box-shadow: 0 0 48px 36px rgba(255,255,255,0.98);
      }
      .loc-why-panel h2 { margin-bottom: 28px; }
      .loc-why-grid { grid-template-columns: 1fr; gap: 28px; }
      .loc-nearby { padding: 40px 20px; }
    }

    /* ============================================================
       MOBILE CTA SUPPRESSION — hero buttons hidden on all pages.
       Sticky bar at bottom handles calls/estimates on mobile.
       This must come last in the cascade to override any
       location-block or section-block flex resets above.
    ============================================================ */
    @media (max-width: 768px) {
      .loc-btns  { display: none !important; }
      .hero-btns { display: none !important; }
    }

    /* ============================================================
       MOBILE BRICK VISIBILITY — tighten the white fade on all
       floating panels so more brick shows around the edges.
       Wide spreads (80-120px) used on desktop look good at 1200px
       wide but eat the entire mobile viewport.
    ============================================================ */
    @media (max-width: 768px) {
      /* Homepage hero panel */
      .hero-left {
        box-shadow: 0 0 18px 6px rgba(255,255,255,0.95) !important;
      }
      /* Location hero panel */
      .loc-hero-content {
        box-shadow: 0 0 14px 4px rgba(255,255,255,0.96) !important;
      }
      /* More top breathing room in loc hero so brick shows above panel */
      .loc-hero-inner {
        padding-top: 48px !important;
        padding-bottom: 40px !important;
      }
      /* Homepage triggers and why-arrow panels */
      .triggers-panel,
      .why-panel {
        box-shadow: 0 0 18px 6px rgba(255,255,255,0.98) !important;
        padding: 32px 24px !important;
      }
      /* Location why-arrow panel */
      .loc-why-panel {
        box-shadow: 0 0 18px 6px rgba(255,255,255,0.98) !important;
        padding: 32px 24px !important;
      }
    }