:root {
        color-scheme: dark;
        --black: #050505;
        --panel: #101010;
        --panel-2: #161616;
        --yellow: #ffd400;
        --amber: #ff9f16;
        --ready-green: #35e06f;
        --text: #f7f7f7;
        --muted: #b9b9b9;
        --line: rgba(255, 255, 255, 0.14);
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        overflow-x: hidden;
        background:
          linear-gradient(90deg, rgba(5, 5, 5, 0.9), rgba(5, 5, 5, 0.54) 45%, rgba(5, 5, 5, 0.82)),
          linear-gradient(to bottom, rgba(5, 5, 5, 0.42), rgba(5, 5, 5, 0.7) 54%, rgba(5, 5, 5, 0.92)),
          linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
          radial-gradient(circle at 50% 32%, rgba(255, 157, 24, 0.18), transparent 22rem),
          radial-gradient(circle at 50% 66%, rgba(255, 216, 61, 0.1), transparent 26rem),
          url("assets/firebitt-background.png") center / cover fixed,
          #050505;
        background-size: auto, auto, 58px 58px, 58px 58px, auto, auto, cover, auto;
        color: var(--text);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      body::before {
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
          radial-gradient(ellipse at 50% 88%, rgba(255, 159, 24, 0.18), transparent 26rem),
          repeating-linear-gradient(168deg, rgba(255, 216, 61, 0.06) 0 3px, transparent 3px 18px),
          linear-gradient(115deg, transparent 0 44%, rgba(255, 216, 61, 0.12) 44.2% 44.4%, transparent 44.7%),
          linear-gradient(115deg, transparent 0 57%, rgba(255, 77, 16, 0.1) 57.2% 57.35%, transparent 57.65%);
        content: "";
        mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
      }

      body::after {
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
          radial-gradient(circle at center, transparent 0 32%, rgba(0, 0, 0, 0.38) 70%),
          linear-gradient(to bottom, rgba(255, 255, 255, 0.05), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.46));
        content: "";
      }

      img {
        display: block;
        max-width: 100%;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      p,
      h1,
      h2,
      h3 {
        margin: 0;
      }

      .site-header {
        position: sticky;
        top: 0;
        z-index: 20;
        overflow: visible;
        border-bottom: 1px solid var(--line);
        background:
          radial-gradient(circle at 22% 48%, rgba(255, 159, 22, 0.11), transparent 18rem),
          linear-gradient(90deg, #000 0%, #040403 42%, #050505 100%);
        backdrop-filter: blur(18px);
        box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.42);
      }

      .nav {
        display: flex;
        position: relative;
        width: 100%;
        min-height: clamp(220px, 22vw, 360px);
        margin: 0 auto;
        align-items: center;
        justify-content: flex-end;
        gap: 1rem;
        padding: 1rem;
      }

      .brand {
        display: flex;
        position: absolute;
        inset: 0;
        z-index: 22;
        overflow: hidden;
        align-items: center;
        justify-content: center;
        font-weight: 950;
        isolation: isolate;
        text-transform: uppercase;
      }

      .brand::before {
        position: absolute;
        inset: -14%;
        z-index: -1;
        background:
          linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.28) 26%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.92)),
          radial-gradient(ellipse at 50% 42%, rgba(255, 212, 0, 0.14), transparent 58%),
          url("firebitt-header-logo.png") center / cover no-repeat,
          #000;
        filter: blur(30px) saturate(1.04);
        opacity: 0.66;
        transform: scale(1.12);
        content: "";
      }

      .brand::after {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
          radial-gradient(ellipse at 50% 42%, transparent 0 28%, rgba(0, 0, 0, 0.24) 58%, rgba(0, 0, 0, 0.56) 100%),
          linear-gradient(90deg, rgba(0, 0, 0, 0.82), transparent 34%, transparent 66%, rgba(0, 0, 0, 0.84)),
          linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 16%, rgba(0, 0, 0, 0.08) 62%, rgba(0, 0, 0, 0.62));
        content: "";
      }

      .brand img {
        width: auto;
        height: 100%;
        aspect-ratio: 1672 / 941;
        max-height: none;
        max-width: 100%;
        object-fit: contain;
        object-position: center;
        filter:
          drop-shadow(0 1rem 1.2rem rgba(0, 0, 0, 0.7))
          drop-shadow(0 0 0.8rem rgba(255, 212, 0, 0.14))
          drop-shadow(0 -0.08rem 0 rgba(255, 255, 255, 0.12));
        mix-blend-mode: lighten;
        opacity: 0.9;
        transform: perspective(760px) rotateX(3deg) translateZ(0);
        mask-image:
          linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.18) 8%, #000 24%, #000 76%, rgba(0, 0, 0, 0.18) 92%, transparent 100%),
          linear-gradient(180deg, transparent 0, #000 14%, #000 78%, rgba(0, 0, 0, 0.68) 90%, transparent 100%);
        mask-composite: intersect;
        -webkit-mask-image:
          linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.18) 8%, #000 24%, #000 76%, rgba(0, 0, 0, 0.18) 92%, transparent 100%),
          linear-gradient(180deg, transparent 0, #000 14%, #000 78%, rgba(0, 0, 0, 0.68) 90%, transparent 100%);
        -webkit-mask-composite: source-in;
      }

      .brand span {
        font-size: clamp(1rem, 2vw, 1.35rem);
        letter-spacing: 0;
      }

      .nav-links {
        position: absolute;
        top: calc(100% + 0.65rem);
        right: 0;
        z-index: 30;
        display: none;
        overflow: hidden;
        width: min(100%, 340px);
        border: 1px solid rgba(255, 212, 0, 0.46);
        border-top: 4px solid var(--yellow);
        background:
          linear-gradient(180deg, rgba(18, 18, 16, 0.98), rgba(5, 5, 5, 0.98)),
          #050505;
        color: var(--text);
        box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.58), 0 0 1.2rem rgba(255, 212, 0, 0.14);
        text-transform: uppercase;
      }

      .nav-links.is-open {
        display: grid;
      }

      .nav-links a {
        display: block;
        padding: 1rem 1.15rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--text);
        font-size: 0.9rem;
        font-weight: 950;
        letter-spacing: 0;
      }

      .nav-links a:last-child {
        border-bottom: 0;
      }

      .nav-links a:hover {
        background: rgba(255, 212, 0, 0.12);
        color: var(--yellow);
      }

      .phone-link {
        color: #080808;
      }

      .menu-toggle {
        display: inline-flex;
        position: relative;
        z-index: 31;
        width: 3.15rem;
        height: 3.15rem;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 2px solid #050505;
        background: var(--yellow);
        color: #050505;
        box-shadow: 0 0 0 1px rgba(255, 212, 0, 0.35), 0 0 1.5rem rgba(255, 212, 0, 0.2);
        cursor: pointer;
        appearance: none;
      }

      .menu-toggle span {
        display: grid;
        width: 1.55rem;
        gap: 0.32rem;
      }

      .menu-toggle span::before,
      .menu-toggle span::after,
      .menu-toggle i {
        display: block;
        width: 100%;
        height: 3px;
        background: currentColor;
        content: "";
      }

      .menu-toggle i {
        font-style: normal;
      }

      .hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
      }

      .hero::before {
        position: absolute;
        inset: 0;
        z-index: -2;
        background:
          linear-gradient(90deg, rgba(5, 5, 5, 0.9), rgba(5, 5, 5, 0.54) 45%, rgba(5, 5, 5, 0.82)),
          linear-gradient(to bottom, rgba(5, 5, 5, 0.42), rgba(5, 5, 5, 0.7) 54%, rgba(5, 5, 5, 0.92)),
          linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
          radial-gradient(circle at 50% 32%, rgba(255, 157, 24, 0.18), transparent 22rem),
          radial-gradient(circle at 50% 66%, rgba(255, 216, 61, 0.1), transparent 26rem),
          url("assets/firebitt-background.png") center / cover;
        background-size: auto, auto, 58px 58px, 58px 58px, auto, auto, cover;
        content: "";
      }

      .hero::after {
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
          linear-gradient(90deg, rgba(5, 5, 5, 0.78) 0%, rgba(5, 5, 5, 0.48) 46%, rgba(5, 5, 5, 0.18) 100%),
          linear-gradient(to bottom, rgba(5, 5, 5, 0.1), rgba(5, 5, 5, 0.72));
        content: "";
      }

      .hero-inner {
        display: grid;
        width: min(1180px, calc(100% - 2rem));
        min-width: 0;
        min-height: calc(100vh - clamp(220px, 22vw, 360px));
        margin: 0 auto;
        align-content: center;
        gap: 1.5rem;
        padding: 4.5rem 0;
      }

      .eyebrow {
        display: inline-flex;
        width: fit-content;
        max-width: 100%;
        align-items: center;
        gap: 0.65rem;
        color: var(--yellow);
        font-size: 0.76rem;
        font-weight: 950;
        text-transform: uppercase;
      }

      .eyebrow::before {
        flex: 0 0 auto;
        width: 2.3rem;
        height: 3px;
        background: var(--yellow);
        content: "";
      }

      .descriptor {
        max-width: min(92vw, 760px);
        color: var(--text);
        font-size: clamp(0.9rem, 2.2vw, 1.4rem);
        font-style: italic;
        font-weight: 950;
        letter-spacing: 0;
        line-height: 1.2;
        text-transform: uppercase;
        text-shadow: 0 0.08em 0 #000, 0 0 1.2rem rgba(255, 216, 61, 0.18);
      }

      .contact-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
        width: min(100%, 560px);
        margin-top: -0.2rem;
      }

      .contact-row a {
        flex: 1 1 13rem;
        min-width: min(100%, 13rem);
        padding: 0.72rem 0.9rem;
        border: 1px solid rgba(255, 216, 61, 0.72);
        background: rgba(5, 5, 5, 0.72);
        color: var(--gold);
        font-size: 0.78rem;
        font-weight: 950;
        letter-spacing: 0;
        text-decoration: none;
        text-transform: uppercase;
      }

      .local-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        max-width: min(92vw, 360px);
        padding: 0.55rem 0.8rem;
        border: 1px solid rgba(255, 216, 61, 0.24);
        background: rgba(5, 5, 5, 0.58);
        box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.28);
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 0;
        line-height: 1.25;
        text-transform: uppercase;
        backdrop-filter: blur(10px);
      }

      .local-badge img {
        width: 3.2rem;
        height: 3.2rem;
        border-radius: 0.35rem;
        object-fit: cover;
        mix-blend-mode: screen;
        opacity: 0.82;
      }

      h1 {
        max-width: 920px;
        min-width: 0;
        font-family: "Arial Black", "Aptos Black", "Inter", system-ui, sans-serif;
        font-size: clamp(3.2rem, 7.6vw, 7.2rem);
        font-weight: 950;
        letter-spacing: 0;
        line-height: 0.92;
        text-transform: uppercase;
        word-spacing: 0.08em;
      }

      .hero-local-badge {
        display: inline-flex;
        width: fit-content;
        max-width: min(100%, 360px);
        align-items: center;
        gap: 0.7rem;
        padding: 0.55rem 0.78rem;
        border: 1px solid rgba(255, 212, 0, 0.22);
        background: rgba(5, 5, 5, 0.58);
        box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.28);
        color: rgba(255, 255, 255, 0.86);
        font-size: 0.72rem;
        font-weight: 900;
        line-height: 1.25;
        text-transform: uppercase;
        backdrop-filter: blur(10px);
      }

      .hero-local-badge img {
        width: 3.2rem;
        height: 3.2rem;
        border-radius: 0.35rem;
        object-fit: cover;
        mix-blend-mode: screen;
        opacity: 0.82;
      }

      .hero-copy {
        max-width: min(660px, 100%);
        min-width: 0;
        color: #e4e4e4;
        font-size: clamp(1rem, 1.8vw, 1.22rem);
        line-height: 1.7;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.8rem;
        margin-top: 0.5rem;
      }

      .button {
        display: inline-flex;
        min-height: 3.2rem;
        align-items: center;
        justify-content: center;
        padding: 0.85rem 1.15rem;
        border: 1px solid var(--yellow);
        background: var(--yellow);
        color: #080808;
        font-size: 0.82rem;
        font-weight: 950;
        text-align: center;
        text-transform: uppercase;
      }

      .button.secondary {
        background: rgba(5, 5, 5, 0.58);
        color: var(--text);
      }

      .stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        background: rgba(5, 5, 5, 0.78);
      }

      .stat {
        padding: 1.55rem;
        border-right: 1px solid var(--line);
      }

      .stat:last-child {
        border-right: 0;
      }

      .stat strong {
        display: block;
        color: var(--yellow);
        font-size: clamp(1.6rem, 4vw, 3rem);
        font-weight: 950;
        line-height: 1;
      }

      .stat span {
        display: block;
        margin-top: 0.45rem;
        color: var(--muted);
        font-size: 0.8rem;
        font-weight: 850;
        text-transform: uppercase;
      }

      section {
        padding: clamp(4rem, 8vw, 7rem) 0;
      }

      .wrap {
        width: min(1180px, calc(100% - 2rem));
        margin: 0 auto;
      }

      .section-head {
        display: grid;
        max-width: 760px;
        gap: 1rem;
        margin-bottom: 2rem;
      }

      h2 {
        font-family: "Arial Black", "Aptos Black", "Inter", system-ui, sans-serif;
        font-size: clamp(2.15rem, 5vw, 4.4rem);
        font-weight: 950;
        letter-spacing: 0;
        line-height: 0.92;
        text-transform: uppercase;
      }

      h3 {
        font-size: 1.28rem;
        font-weight: 950;
        text-transform: uppercase;
      }

      .section-head p,
      .copy p,
      .card p {
        color: var(--muted);
        line-height: 1.72;
      }

      .service-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        border: 1px solid var(--line);
        background: var(--line);
      }

      .card {
        display: grid;
        min-height: 250px;
        align-content: space-between;
        gap: 1.5rem;
        padding: 1.35rem;
        background:
          linear-gradient(145deg, rgba(255, 212, 0, 0.09), transparent 44%),
          var(--panel);
      }

      .card .num {
        color: var(--yellow);
        font-size: 0.82rem;
        font-weight: 950;
      }

      .split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: clamp(2rem, 6vw, 5rem);
        align-items: center;
      }

      .media {
        position: relative;
        overflow: hidden;
        border: 1px solid var(--line);
        background: #111;
      }

      .media::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 10px;
        background: repeating-linear-gradient(135deg, var(--yellow) 0 22px, #050505 22px 38px);
        content: "";
      }

      .media img {
        width: 100%;
        height: 100%;
        min-height: 420px;
        object-fit: cover;
      }

      .copy {
        display: grid;
        gap: 1.25rem;
      }

      .list {
        display: grid;
        gap: 0.8rem;
        padding: 0;
        margin: 0;
        list-style: none;
      }

      .list li {
        display: grid;
        grid-template-columns: 1.05rem 1fr;
        gap: 0.75rem;
        color: #e7e7e7;
        line-height: 1.58;
      }

      .list li::before {
        width: 0.68rem;
        height: 0.68rem;
        margin-top: 0.42rem;
        background: var(--yellow);
        clip-path: polygon(14% 48%, 38% 72%, 86% 18%, 100% 32%, 38% 96%, 0 58%);
        content: "";
      }

      .gallery {
        display: grid;
        grid-template-columns: 1.25fr 0.75fr 0.75fr;
        grid-auto-rows: 240px;
        gap: 1rem;
      }

      .gallery figure {
        position: relative;
        overflow: hidden;
        margin: 0;
        border: 1px solid var(--line);
        background: #111;
      }

      .gallery figure:first-child {
        grid-row: span 2;
      }

      .gallery img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(0.92) contrast(1.05);
      }

      .gallery figcaption {
        position: absolute;
        right: 0.9rem;
        bottom: 0.9rem;
        left: 0.9rem;
        padding: 0.85rem;
        border-left: 4px solid var(--yellow);
        background: rgba(5, 5, 5, 0.78);
        color: var(--text);
        font-size: 0.82rem;
        font-weight: 850;
        text-transform: uppercase;
      }

      .contact {
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        background:
          linear-gradient(135deg, rgba(255, 212, 0, 0.12), transparent 35%),
          rgba(14, 14, 14, 0.92);
      }

      .contact-panel {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 2rem;
        align-items: center;
      }

      .contact-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.8rem;
      }

      footer {
        padding: 2rem 0;
        color: var(--muted);
        font-size: 0.84rem;
      }

      .footer-inner {
        display: flex;
        width: min(1180px, calc(100% - 2rem));
        margin: 0 auto;
        justify-content: space-between;
        gap: 1rem;
      }

      .yellow {
        color: var(--yellow);
      }

      .chat-widget {
        position: fixed;
        right: 1.15rem;
        bottom: 1.15rem;
        z-index: 60;
        display: grid;
        justify-items: end;
        gap: 0.8rem;
      }

      .chat-panel {
        display: none;
        overflow: hidden;
        width: min(92vw, 390px);
        border: 1px solid rgba(255, 212, 0, 0.38);
        border-top: 4px solid var(--yellow);
        background:
          linear-gradient(180deg, rgba(18, 18, 16, 0.98), rgba(5, 5, 5, 0.98)),
          #050505;
        box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.58), 0 0 1.4rem rgba(255, 212, 0, 0.12);
      }

      .chat-panel.is-open {
        display: grid;
      }

      .chat-panel.is-open + .chat-launcher {
        display: none;
      }

      .chat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .chat-title {
        display: grid;
        gap: 0.16rem;
      }

      .chat-title strong {
        font-size: 0.88rem;
        font-weight: 950;
        text-transform: uppercase;
      }

      .chat-title span {
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 800;
      }

      .chat-status {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        color: var(--ready-green);
        font-size: 0.68rem;
        font-weight: 950;
        text-transform: uppercase;
      }

      .chat-status::before {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: var(--ready-green);
        box-shadow: 0 0 1rem rgba(53, 224, 111, 0.72);
        content: "";
      }

      .chat-messages {
        display: grid;
        max-height: 330px;
        gap: 0.7rem;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 1rem;
      }

      .chat-message {
        max-width: 88%;
        padding: 0.78rem 0.85rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.06);
        color: var(--text);
        font-size: 0.86rem;
        line-height: 1.42;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .chat-message.bot {
        border-left: 3px solid var(--yellow);
      }

      .chat-message.user {
        justify-self: end;
        border-color: rgba(255, 212, 0, 0.3);
        background: rgba(255, 212, 0, 0.14);
      }

      .chat-message a {
        color: var(--yellow);
        font-weight: 900;
        overflow-wrap: anywhere;
        text-decoration: underline;
        text-underline-offset: 0.18rem;
        word-break: break-word;
      }

      .chat-suggestions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        padding: 0 1rem 1rem;
      }

      .chat-chip,
      .chat-send,
      .chat-launcher,
      .chat-close {
        border: 1px solid rgba(255, 212, 0, 0.42);
        background: rgba(255, 212, 0, 0.1);
        color: var(--text);
        cursor: pointer;
        font: inherit;
        font-weight: 900;
      }

      .chat-chip {
        padding: 0.52rem 0.65rem;
        font-size: 0.72rem;
        text-transform: uppercase;
      }

      .chat-chip:hover,
      .chat-close:hover {
        background: rgba(255, 212, 0, 0.18);
        color: var(--yellow);
      }

      .chat-form {
        display: flex;
        gap: 0.55rem;
        padding: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.03);
      }

      .chat-input {
        min-width: 0;
        flex: 1;
        padding: 0.82rem 0.85rem;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(0, 0, 0, 0.44);
        color: var(--text);
        font: inherit;
      }

      .chat-input:focus {
        border-color: rgba(255, 212, 0, 0.72);
        outline: none;
      }

      .chat-send,
      .chat-launcher {
        background: var(--yellow);
        color: #050505;
        text-transform: uppercase;
      }

      .chat-send {
        padding: 0 0.9rem;
      }

      .chat-close {
        width: 2.2rem;
        height: 2.2rem;
        flex: 0 0 auto;
        color: var(--yellow);
      }

      .chat-launcher {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.9rem 1rem;
        box-shadow: 0 0 0 1px rgba(255, 212, 0, 0.26), 0 0 1.8rem rgba(255, 212, 0, 0.18);
      }

      .chat-launcher::before {
        width: 0.72rem;
        height: 0.72rem;
        border-radius: 50%;
        background: #050505;
        box-shadow: inset 0 0 0 3px rgba(255, 212, 0, 0.68);
        content: "";
      }

      @media (max-width: 900px) {
        .nav {
          min-height: 190px;
          padding: 0.85rem;
          align-items: center;
          flex-direction: row;
          flex-wrap: wrap;
        }

        .nav-links {
          position: relative;
          order: 3;
          z-index: 30;
          flex: 1 0 100%;
          width: 100%;
          margin: 0.35rem 0 0;
        }

        .hero-inner {
          min-height: auto;
          padding: 4rem 0 3.5rem;
        }

        .stats,
        .service-grid,
        .split,
        .contact-panel {
          grid-template-columns: 1fr;
        }

        .stat {
          border-right: 0;
          border-bottom: 1px solid var(--line);
        }

        .stat:last-child {
          border-bottom: 0;
        }

        .gallery {
          grid-template-columns: 1fr 1fr;
          grid-auto-rows: 220px;
        }

        .gallery figure:first-child {
          grid-column: 1 / -1;
          grid-row: auto;
        }

        .media img {
          min-height: 310px;
        }
      }

      @media (max-width: 560px) {
        .brand img {
          width: auto;
          height: 100%;
          max-width: 100%;
          max-height: none;
        }

        .nav {
          min-height: 132px;
        }

        .brand span {
          display: none;
        }

        .menu-toggle {
          width: 3rem;
          height: 3rem;
          margin-left: auto;
        }

        .nav-links {
          grid-template-columns: 1fr;
          gap: 0;
        }

        .phone-link {
          width: 100%;
          text-align: left;
        }

        h1 {
          font-size: clamp(2.85rem, 14vw, 4rem);
          line-height: 0.96;
          word-spacing: 0.04em;
        }

        .eyebrow {
          align-items: flex-start;
          width: 100%;
          flex-wrap: wrap;
          font-size: 0.68rem;
          line-height: 1.35;
        }

        .hero-inner > * {
          max-width: min(100%, 340px);
        }

        .hero-copy {
          font-size: 0.96rem;
        }

        .hero-local-badge {
          max-width: min(100%, 340px);
        }

        .hero-actions,
        .contact-actions,
        .footer-inner {
          flex-direction: column;
          align-items: stretch;
        }

        .button {
          width: 100%;
        }

        .gallery {
          grid-template-columns: 1fr;
          grid-auto-rows: 260px;
        }

        .chat-widget {
          right: 0.8rem;
          bottom: 0.8rem;
          left: 0.8rem;
          justify-items: end;
        }

        .chat-panel {
          width: 100%;
          max-height: calc(100vh - 1.6rem);
        }

        .chat-messages {
          max-height: 260px;
        }

        .chat-message {
          max-width: 92%;
        }

        .chat-suggestions {
          display: grid;
          grid-template-columns: 1fr 1fr;
        }

        .chat-chip {
          min-width: 0;
          padding: 0.58rem 0.45rem;
          font-size: 0.66rem;
          white-space: normal;
        }

        .chat-form {
          grid-template-columns: 1fr auto;
          display: grid;
        }

        .chat-send {
          min-width: 4.4rem;
        }

        .chat-launcher {
          justify-self: end;
          justify-content: center;
          max-width: 8rem;
          padding: 0.58rem 0.68rem;
          font-size: 0.72rem;
          line-height: 1;
          white-space: nowrap;
        }

        .chat-launcher::before {
          width: 0.56rem;
          height: 0.56rem;
          box-shadow: inset 0 0 0 2px rgba(255, 212, 0, 0.68);
        }
      }