:root {
      --yellow-bg: #FEF6DC;
      --yellow: #F3C316;
      --yellow-deep: #D9A80A;
      --white: #FFFFFF;
      --black: #181510;
      --steel: #5B5750;
      --steel-line: #E7DEB8;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--yellow-bg);
      color: var(--black);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }

    h1,
    h2,
    h3,
    .wordmark {
      font-family: 'Oswald', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.01em;
    }

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

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

    .wrap {
      max-width: 1080px;
      margin: 0 auto;
      padding: 0 28px;
    }

    /* focus visibility */
    a:focus-visible,
    button:focus-visible {
      outline: 3px solid var(--black);
      outline-offset: 2px;
    }

    /* ---------- hazard strip motif ---------- */
    /* Ribbed steel bar separator — CSS only. */
    .hazard-strip {
      position: relative;
      height: 18px;
      overflow: hidden;
      border-top: 1px solid #626971;
      border-bottom: 1px solid #24282c;
      border-radius: 2px;
      background: linear-gradient(180deg,
          #30353b 0%, #69727a 16%, #b0b8bd 35%,
          #7f8991 49%, #525b63 54%, #353d45 80%, #20262c 100%);
      box-shadow: inset 0 1px 1px #ffffff40,
        inset 0 -2px 3px #00000055, 0 2px 3px #00000020;
    }

    .hazard-strip::before,
    .hazard-strip::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 50%;
      pointer-events: none;
    }

    .hazard-strip::before {
      top: 0;
      background: repeating-linear-gradient(65deg,
          transparent 0 14px, #171d2370 14px 16px,
          #d8dfe5b3 16px 18px, #66717a 18px 20px,
          transparent 20px 32px);
      border-bottom: 1px solid #d1d8dd66;
    }

    .hazard-strip::after {
      bottom: 0;
      background: repeating-linear-gradient(-65deg,
          transparent 0 14px, #151b217d 14px 16px,
          #a7b1ba80 16px 18px, #424c55 18px 20px,
          transparent 20px 32px);
    }

    /* ---------- header ---------- */
    header {
      background: var(--black);
      color: var(--white);
      position: sticky;
      top: 0;
      z-index: 50;
    }

    .nav-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 28px;
      gap: 20px;
    }

    .wordmark {
      font-size: 26px;
      font-weight: 700;
      color: var(--yellow);
      letter-spacing: 0.03em;
      white-space: nowrap;
    }

    .wordmark span {
      color: var(--white);
    }

    nav {
      display: flex;
      gap: 28px;
      font-size: 14.5px;
      font-weight: 500;
      letter-spacing: 0.02em;
    }

    nav a {
      opacity: 0.85;
      padding: 6px 0;
      border-bottom: 2px solid transparent;
      transition: border-color .15s ease, opacity .15s ease;
    }

    nav a:hover {
      opacity: 1;
      border-color: var(--yellow);
    }

    .nav-call {
      background: var(--yellow);
      color: var(--black);
      font-weight: 600;
      font-size: 14px;
      padding: 10px 16px;
      border-radius: 2px;
      white-space: nowrap;
    }

    .nav-toggle {
      display: none;
    }

    @media (max-width:760px) {
      nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--black);
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
      }

      nav.open {
        max-height: 320px;
      }

      nav a {
        padding: 14px 28px;
        border-bottom: 1px solid #2a2620;
        width: 100%;
      }

      .nav-call {
        display: none;
      }

      .nav-toggle {
        display: block;
        background: none;
        border: 1px solid var(--yellow);
        color: var(--yellow);
        font-size: 13px;
        padding: 8px 12px;
        border-radius: 2px;
        cursor: pointer;
      }
    }

    /* ---------- hero ---------- */
    .hero {
      padding: 76px 0 56px;
    }

    .hero .wrap {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 48px;
      align-items: center;
    }

    .hero-eyebrow {
      font-size: 14px;
      font-weight: 600;
      color: var(--steel);
      margin-bottom: 14px;
    }

    .hero h1 {
      font-size: clamp(38px, 5.4vw, 60px);
      line-height: 1.05;
      font-weight: 700;
    }

    .hero p {
      margin-top: 22px;
      font-size: 17px;
      max-width: 46ch;
      color: #2c2820;
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      margin-top: 32px;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 24px;
      font-size: 14.5px;
      font-weight: 600;
      border-radius: 2px;
      border: 2px solid var(--black);
      cursor: pointer;
    }

    .btn-solid {
      background: var(--black);
      color: var(--white);
    }

    .btn-solid:hover {
      background: #2c2820;
    }

    .btn-outline {
      background: transparent;
      color: var(--black);
    }

    .btn-outline:hover {
      background: var(--black);
      color: var(--white);
    }

    .hero-panel {
      background: var(--black);
      color: var(--white);
      padding: 32px;
      position: relative;
    }

    .hero-panel::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 6px;
      background: var(--yellow);
    }

    .hero-panel svg {
      width: 44px;
      height: 44px;
      margin-bottom: 18px;
    }

    .hero-panel h2 {
      font-size: 15px;
      letter-spacing: 0.06em;
      color: var(--yellow);
      margin-bottom: 10px;
    }

    .hero-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      margin-top: 22px;
      padding-top: 22px;
      border-top: 1px solid #3a3630;
    }

    .hero-stats div b {
      display: block;
      font-family: 'Oswald', sans-serif;
      font-size: 26px;
      color: var(--yellow);
    }

    .hero-stats div span {
      font-size: 12.5px;
      color: #c9c4b8;
    }

    @media (max-width:760px) {
      .hero .wrap {
        grid-template-columns: 1fr;
      }
    }

    /* ---------- section shared ---------- */
    section {
      padding: 74px 0;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 24px;
      margin-bottom: 40px;
      flex-wrap: wrap;
    }

    .section-head h2 {
      font-size: clamp(28px, 3.6vw, 38px);
      font-weight: 600;
    }

    .section-head p {
      max-width: 38ch;
      color: var(--steel);
      font-size: 15px;
    }

    .section-num {
      font-family: 'Oswald', sans-serif;
      font-size: 14px;
      color: var(--yellow-deep);
      font-weight: 600;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
    }

    /* ---------- about ---------- */
    .about {
      background: var(--white);
    }

    .about .wrap {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 56px;
    }

    .about p {
      color: #3a362c;
      font-size: 15.5px;
      margin-top: 16px;
      max-width: 56ch;
    }

    .about-list {
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .about-list li {
      list-style: none;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 15px;
    }

    .about-list svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      margin-top: 2px;
      color: var(--yellow-deep);
    }

    .spec-card {
      border: 1px solid #e6e1d0;
      background: var(--yellow-bg);
    }

    .spec-row {
      display: flex;
      justify-content: space-between;
      padding: 18px 22px;
      border-bottom: 1px solid #e6e1d0;
      font-size: 14.5px;
    }

    .spec-row:last-child {
      border-bottom: none;
    }

    .spec-row span:first-child {
      color: var(--steel);
    }

    .spec-row span:last-child {
      font-weight: 600;
      text-align: right;
    }

    /* ---------- services ---------- */
    .services {
      background: var(--yellow-bg);
    }

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

    .service-card {
      background: var(--white);
      padding: 30px 26px;
    }

    .service-card svg {
      width: 30px;
      height: 30px;
      color: var(--black);
      margin-bottom: 16px;
    }

    .service-card h3 {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 8px;
      text-transform: none;
    }

    .service-card p {
      font-size: 14px;
      color: var(--steel);
    }

    @media (max-width:760px) {
      .about .wrap {
        grid-template-columns: 1fr;
      }

      .service-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width:900px) and (min-width:761px) {
      .service-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ---------- materials ---------- */
    .materials {
      background: var(--black);
      color: var(--white);
    }

    .materials .section-head p {
      color: #b9b4a6;
    }

    .materials .section-head h2 {
      color: var(--white);
    }

    .materials .section-num {
      color: var(--yellow);
    }

    .mat-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);  
    }

    .mat-item {
      border: 1px solid #424d56;    
      padding: 22px 20px;
      font-size: 14.5px;
    }

    .mat-item b {
      display: block;
      font-family: 'Oswald', sans-serif;
      color: var(--yellow);
      font-size: 15px;
      margin-bottom: 6px;
      font-weight: 500;
    }

    @media (max-width:760px) {
      .mat-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ---------- location ---------- */
    .location {
      background: var(--white);
    }

    .location .wrap {
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 0;
      border: 1px solid var(--black);
    }

    .loc-info {
      background: var(--black);
      color: var(--white);
      padding: 44px 40px;
    }

    .loc-info h2 {
      font-size: 26px;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .loc-info .section-num {
      margin-bottom: 8px;
    }

    .loc-block {
      margin-top: 26px;
    }

    .loc-block h3 {
      font-size: 12.5px;
      letter-spacing: 0.08em;
      color: var(--yellow);
      text-transform: uppercase;
      margin-bottom: 8px;
      font-family: 'Oswald', sans-serif;
      font-weight: 500;
    }

    .loc-block p {
      font-size: 15px;
      color: #e7e2d3;
    }

    .loc-block a.phone {
      display: block;
      font-size: 17px;
      font-weight: 600;
      color: var(--white);
      margin-top: 4px;
    }

    .loc-block a.phone:hover {
      color: var(--yellow);
    }

    .loc-actions {
      margin-top: 32px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .loc-actions .btn-solid {
      background: var(--yellow);
      color: var(--black);
      border-color: var(--yellow);
    }

    .loc-actions .btn-solid:hover {
      background: #e0b512;
    }

    .loc-actions .btn-outline {
      border-color: #5a564c;
      color: var(--white);
    }

    .loc-actions .btn-outline:hover {
      background: var(--white);
      color: var(--black);
      border-color: var(--white);
    }

    .map-wrap {
      position: relative;
      min-height: 340px;
    }

    .map-wrap iframe {
      width: 100%;
      height: 100%;
      min-height: 340px;
      border: 0;
      display: block;
      filter: grayscale(0.15) contrast(1.03);
    }

    @media (max-width:760px) {
      .location .wrap {
        grid-template-columns: 1fr;
      }

      .map-wrap {
        min-height: 280px;
      }
    }

    /* ---------- footer ---------- */
    footer {
      background: var(--black);
      color: #a7a294;
      padding: 30px 0;
      font-size: 13.5px;
    }

    footer .wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    footer .wordmark {
      font-size: 16px;
    }

    footer .foot-phones {
      color: #e7e2d3;
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      * {
        transition: none !important;
      }
    }

    /* Accessible navigation and stable small-screen layout. */
    [id] {
      scroll-margin-top: 96px;
    }

    .store-address {
      font-style: normal;
      font-size: 15px;
      color: #e7e2d3;
      line-height: 1.8;
    }

    .skip-link {
      position: fixed;
      top: 8px;
      left: 8px;
      transform: translateY(-160%);
      z-index: 100;
      background: var(--yellow);
      color: var(--black);
      padding: 12px 18px;
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    header a:focus-visible,
    header button:focus-visible,
    footer a:focus-visible,
    .loc-info a:focus-visible {
      outline-color: var(--yellow);
    }

    .spec-row {
      gap: 16px;
    }

    .spec-row span {
      min-width: 0;
      overflow-wrap: break-word;
    }

    @media (max-width:760px) {
      nav {
        visibility: hidden;
      }

      nav.open {
        visibility: visible;
      }

      .loc-info {
        padding: 32px 24px;
      }
    }

    /* Store descriptor beneath the header and footer wordmarks. */
    .wordmark {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;
    }

    .wordmark .wordmark-name {
      color: var(--yellow);
      line-height: 1;
    }

    .wordmark .wordmark-subtitle {
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0.025em;
      text-transform: none;
      color: #e7e2d3;
      white-space: nowrap;
    }

    footer .wordmark .wordmark-subtitle {
      font-size: 9px;
    }

    /* Product photography: cream surfaces, steel tones and yellow industrial accents. */
    .product-gallery {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
      margin-bottom: 18px;
    }

    .product-photo {
      margin: 0;
      min-width: 0;
      background: var(--yellow-bg);
      border: 1px solid var(--steel-line);
      overflow: hidden;
    }

    .product-photo img {
      width: 100%;
      height: auto;
      aspect-ratio: 1;
      object-fit: cover;
      background: var(--yellow-bg);
      filter: saturate(.65);
    }

    .product-photo figcaption {
      padding: 22px;
      border-top: 5px solid var(--yellow);
    }

    .product-photo h3 {
      font-family: 'Oswald', sans-serif;
      font-size: 23px;
      font-weight: 500;
      color: var(--black);
      margin-bottom: 8px;
      text-transform: uppercase;
    }

    .product-photo p {
      font-size: 14px;
      color: var(--steel);
      line-height: 1.6;
    }

    .product-note {
      font-size: 12px;
      color: #b9b4a6;
      margin-bottom: 30px;
    }

    @media(max-width:760px) {
      .product-gallery {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }

    /* QR stays on an opaque white surface, with no filters or cropping. */
    footer {
      padding: 48px 0;
    }

    footer .footer-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 292px;
      gap: 48px;
      align-items: center;
    }

    .footer-details {
      min-width: 0;
    }

    footer .footer-details .wordmark {
      font-size: 26px;
    }

    footer .footer-details .wordmark-subtitle {
      font-size: 10px;
    }

    .footer-summary {
      max-width: 46ch;
      margin: 22px 0 18px;
      color: #c9c4b8;
      line-height: 1.8;
      font-size: 14px;
    }

    .footer-details .foot-phones {
      line-height: 1.9;
      max-width: 48ch;
    }

    .footer-map-link {
      display: inline-block;
      margin-top: 20px;
      color: var(--yellow);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    .footer-qr-card {
      padding: 16px;
      background: var(--white);
      border-top: 5px solid var(--yellow);
      color: var(--black);
      width: 100%;
    }

    .footer-qr-heading {
      font-family: 'Oswald', sans-serif;
      font-size: 17px;
      text-transform: uppercase;
      font-weight: 500;
      letter-spacing: .03em;
      margin-bottom: 14px;
      text-align: center;
    }

    .footer-qr-image {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
      opacity: 1;
      filter: none;
      background: #fff;
    }

    .footer-qr-caption {
      font-size: 12px;
      color: var(--steel);
      text-align: center;
      margin-top: 12px;
    }

    @media(max-width:760px) {
      footer .footer-layout {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .footer-qr-card {
        max-width: 292px;
        justify-self: center;
      }
    }

    /* Use the untouched QR pixels; clip only the outer margin and old caption. */
    .footer-qr-card {
      padding: 0;
      background: transparent;
      border: 0;
      color: var(--yellow-bg);
    }

    .footer-qr-heading {
      color: var(--yellow);
      margin-bottom: 16px;
    }

    .footer-qr-crop {
      position: relative;
      width: 100%;
      aspect-ratio: 318 / 317;
      overflow: hidden;
      border-radius: 15.7%;
      isolation: isolate;
    }

    .footer-qr-crop .footer-qr-image {
      position: absolute;
      max-width: none;
      width: 108.805%;
      height: auto;
      left: -3.774%;
      top: -2.208%;
      background: transparent;
      opacity: 1;
      filter: none;
    }

    .footer-qr-name {
      color: var(--yellow-bg);
      font-family: 'Oswald', sans-serif;
      font-size: 23px;
      font-weight: 500;
      text-align: center;
      margin-top: 17px;
      line-height: 1.3;
    }

    .footer-qr-name span {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 500;
      margin-top: 6px;
      line-height: 1.5;
    }

    .footer-qr-caption {
      color: #c9c4b8;
      margin-top: 12px;
    }

    /* Cinematic background: quiet crossfades, fixed copy and an open right half. */
    .hero-background {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: var(--black);
      padding: 0;
      color: var(--white);
    }

    .hero-background .hero-content {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      min-height: 660px;
      padding-top: 84px;
      padding-bottom: 62px;
      pointer-events: none;
    }

    .hero-copy {
      width: 50%;
      max-width: 540px;
      pointer-events: auto;
    }

    .hero-background .hero-eyebrow {
      color: var(--yellow);
      font-size: 12px;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .hero-background h1 {
      font-size: clamp(40px, 4.8vw, 66px);
      line-height: 1.08;
      text-wrap: balance;
    }

    .hero-background .hero-copy>p {
      color: #e4ddce;
      font-size: 16px;
      line-height: 1.85;
      max-width: 40ch;
    }

    .hero-background .hero-actions {
      gap: 12px;
      margin-top: 28px;
    }

    .hero-background .btn-solid {
      background: var(--yellow);
      border-color: var(--yellow);
      color: var(--black);
    }

    .hero-background .btn-solid:hover {
      background: var(--yellow-bg);
      border-color: var(--yellow-bg);
    }

    .hero-background .btn-outline {
      color: var(--white);
      border-color: #b6afa1;
      background: rgba(24, 21, 16, .2);
    }

    .hero-background .btn-outline:hover {
      background: var(--white);
      color: var(--black);
    }

    .hero-background a:focus-visible,
    .hero-background button:focus-visible {
      outline-color: var(--yellow);
    }

    .hero-slides {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
    }

    .hero-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 2.6s ease-in-out;
      pointer-events: none;
    }

    .hero-slide.is-active {
      opacity: 1;
      z-index: 1;
    }

    .hero-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 65% center;
      transform: scale(1.045);
    }

    .hero-slide.is-active img {
      animation: heroSlowReveal 11s ease-out both;
    }

    @keyframes heroSlowReveal {
      from {
        transform: scale(1.045);
        filter: brightness(.88);
      }

      to {
        transform: scale(1);
        filter: brightness(1);
      }
    }

    .hero-shade {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(90deg, rgba(14, 13, 10, .94) 0%, rgba(14, 13, 10, .84) 30%, rgba(14, 13, 10, .56) 48%, rgba(14, 13, 10, .12) 70%, rgba(14, 13, 10, .03) 100%);
    }

    .hero-slider-controls {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-top: 36px;
      width: max-content;
    }

    .hero-slider-dots {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .hero-slider-controls button {
      height: 44px;
      min-width: 32px;
      padding: 0;
      background: transparent;
      border: 0;
      cursor: pointer;
      color: #ded6c7;
      font: 500 11px 'Inter', sans-serif;
    }

    .hero-slider-dots button::after {
      content: '';
      display: block;
      width: 18px;
      height: 3px;
      background: #867f70;
      transition: background .5s ease, width .5s ease;
    }

    .hero-slider-dots button[aria-pressed="true"]::after {
      background: var(--yellow);
      width: 32px;
    }

    .hero-slider-controls [data-slider="pause"] {
      min-width: 44px;
      border-left: 1px solid #746c5c;
      padding-left: 18px;
    }

    .hero-slider-controls button:hover {
      color: var(--yellow);
    }

    .hero-background.is-paused .hero-slide img {
      animation-play-state: paused;
    }

    .hero-background .hero-copy>.hero-image-note {
      font-size: 10px;
      color: #b9b09e;
      margin-top: 10px;
      letter-spacing: .02em;
    }

    @media(max-width:760px) {
      .hero-background .hero-content {
        min-height: 640px;
        padding-top: 64px;
        padding-bottom: 42px;
      }

      .hero-copy {
        width: 100%;
        max-width: 470px;
      }

      .hero-background h1 {
        font-size: clamp(38px, 8vw, 56px);
      }

      .hero-background .hero-copy>p {
        font-size: 15px;
      }

      .hero-slide img {
        object-position: 60% center;
      }

      .hero-shade {
        background: linear-gradient(90deg, rgba(14, 13, 10, .91), rgba(14, 13, 10, .55)), linear-gradient(0deg, rgba(14, 13, 10, .65), transparent 60%);
      }

      .hero-background .btn {
        padding: 12px 18px;
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .hero-slide {
        transition: none;
      }

      .hero-slide.is-active img {
        animation: none;
        transform: none;
        filter: none;
      }
    }

    /* Contained hero banner aligned with the page content. */
    .hero-background {
      width: calc(100% - 56px);
      max-width: 1024px;
      margin: 40px auto;
      background: var(--black);
      border-top: 4px solid var(--yellow);
      box-shadow: 10px 10px 0 var(--steel-line);
    }

    .hero-background .hero-content {
      min-height: 490px;
      padding: 48px 36px;
    }

    .hero-background .hero-copy {
      width: 50%;
      max-width: 470px;
    }

    .hero-background h1 {
      font-size: clamp(36px, 4.1vw, 52px);
    }

    .hero-background .hero-copy>p {
      font-size: 14px;
      line-height: 1.75;
    }

    .hero-background .hero-eyebrow {
      font-size: 10px;
      letter-spacing: .07em;
    }

    .hero-background .hero-actions {
      gap: 10px;
      margin-top: 24px;
    }

    .hero-background .btn {
      padding: 12px 16px;
      font-size: 13px;
    }

    .hero-background .hero-slider-controls {
      margin-top: 20px;
    }

    .hero-background .hero-copy>.hero-image-note {
      font-size: 10px;
    }

    @media(max-width:760px) {
      .hero-background {
        width: calc(100% - 32px);
        margin: 24px auto;
        box-shadow: 6px 6px 0 var(--steel-line);
      }

      .hero-background .hero-content {
        min-height: 510px;
        padding: 36px 24px;
      }

      .hero-background .hero-copy {
        width: 100%;
        max-width: 420px;
      }

      .hero-background h1 {
        font-size: clamp(34px, 7.5vw, 48px);
      }
    }

    .store-email,
    .footer-email a {
      color: var(--yellow-bg);
      overflow-wrap: anywhere;
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    .footer-email {
      margin-top: 12px;
      font-size: 14px;
    }

    .store-email:hover,
    .footer-email a:hover {
      color: var(--yellow);
    }

    /* Compact email contacts, aligned with the header and footer content. */
    .email-icon {
      display: block;
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      color: var(--yellow);
    }

    .header-contact {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
    }

    .header-email {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 500;
      color: #e7e2d3;
      white-space: nowrap;
    }

    .header-email:hover {
      color: var(--yellow);
    }

    .header-contact .nav-call {
      padding: 7px 12px;
      font-size: 12px;
    }

    .footer-email a {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      text-decoration: none;
    }

    .footer-email a span {
      overflow-wrap: anywhere;
    }

    .footer-email a:hover span {
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    @media(min-width:761px) and (max-width:1000px) {
      .nav-row {
        gap: 14px;
      }

      nav {
        gap: 16px;
        font-size: 13px;
      }

      .header-email {
        font-size: 11px;
      }
    }

    @media(max-width:760px) {
      .nav-row {
        flex-wrap: wrap;
        gap: 12px;
        padding-top: 14px;
        padding-bottom: 12px;
      }

      .header-contact {
        order: 3;
        flex: 0 0 100%;
        align-items: center;
        border-top: 1px solid #38342c;
        padding-top: 10px;
      }

      .header-email {
        font-size: 12px;
      }

      [id] {
        scroll-margin-top: 140px;
      }
    }

    /* Consistent steel detailing across the site. */
    :root {
      --metal-edge: #78838d;
      --metal-line: #c7cdd1;
      --metal-face: linear-gradient(180deg, #343c43 0%, #79848d 22%, #d6dce0 43%, #8e99a2 52%, #46515b 76%, #242c33 100%);
      --metal-ribs: repeating-linear-gradient(65deg, transparent 0 14px, #17212b55 14px 16px, #f0f4f680 16px 18px, transparent 18px 30px);
    }

    header {
      border-bottom: 3px solid #77838d;
      box-shadow: 0 3px 12px #00000020;
    }

    .hero-background {
      border: 1px solid #707c86;
      border-top: 0;
      box-shadow: 8px 8px 0 #bfc6cb, 0 12px 28px #00000018;
    }

    .hero-background::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 7px;
      z-index: 3;
      background: var(--metal-ribs), var(--metal-face);
      pointer-events: none;
    }

    .spec-card {
      border-color: var(--metal-line);
      border-top: 4px solid var(--metal-edge);
      background: linear-gradient(135deg, #f9f9f6, #e9ecee);
      box-shadow: 0 5px 14px #1825300a;
    }

    .spec-row {
      border-bottom-color: var(--metal-line);
    }

    .service-grid {
      gap: 16px;
      background: transparent;
      border: 0;
    }

    .service-card {
      position: relative;
      border: 1px solid var(--metal-line);
      background: linear-gradient(140deg, #fff 55%, #edf0f1);
      box-shadow: 0 3px 8px #19273308;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    .service-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--metal-ribs), var(--metal-face);
    }

    .service-card:hover {
      border-color: #7a8790;
      box-shadow: 0 7px 18px #19273315;
    }

    .service-card svg {
      color: #4b5b67;
    }

    .product-photo {
      border-color: #707b84;
      box-shadow: 0 6px 20px #00000022;
    }

    .product-photo figcaption {
      position: relative;
      border-top: 0;
      background: linear-gradient(135deg, #faf9f4, #e8ecee);
    }

    .product-photo figcaption::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: var(--metal-ribs), var(--metal-face);
    }

    .mat-grid {
      border-color: #515c65;
    }

    .mat-item {
      border-color: #424d56;
    }

    .section-num {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .section-num::before {
      content: '';
      display: block;
      flex: 0 0 28px;
      height: 5px;
      background: var(--metal-face);
      border-radius: 1px;
    }

    .location .wrap {
      border-color: #75818a;
      box-shadow: 0 6px 22px #19273310;
    }

    .loc-info {
      border-top: 5px solid #929da6;
    }

    .btn-outline {
      border-color: #7c8790;
    }

    .hero-background .btn-outline,
    .loc-actions .btn-outline {
      border-color: #a5afb7;
    }

    .nav-call,
    .btn-solid {
      box-shadow: inset 0 1px 0 #ffffff35, 0 2px 3px #00000014;
    }

    footer {
      background: linear-gradient(130deg, #181b1d, #181510 70%);
    }

    .footer-details {
      border-left: 3px solid #75828b;
      padding-left: 22px;
    }

    .footer-qr-heading {
      padding-bottom: 12px;
      border-bottom: 1px solid #68737c;
    }

    @media(max-width:760px) {
      .hero-background {
        box-shadow: 5px 5px 0 #bfc6cb;
      }

      .service-grid {
        gap: 14px;
      }

      .footer-details {
        padding-left: 16px;
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .service-card {
        transition: none;
      }
    }


    /* Ribbed steel scrollbar. Firefox uses the solid metallic fallback. */
    html {
      scrollbar-color: #77838d #e4e7e9;
      scrollbar-width: auto;
    }

    @supports selector(::-webkit-scrollbar) {
      html {
        scrollbar-color: auto;
        scrollbar-width: auto;
      }

      html::-webkit-scrollbar {
        width: 16px;
        height: 16px;
      }

      html::-webkit-scrollbar-track {
        background: linear-gradient(90deg, #b5bdc3, #edf0f2 40%, #d7dde1);
        border-left: 1px solid #a1abb3;
      }

      html::-webkit-scrollbar-thumb {
        min-height: 54px;
        border: 2px solid #d6dde1;
        border-radius: 8px;
        background:
          repeating-linear-gradient(155deg, transparent 0 7px, #17212b9c 7px 9px, #e3e9eed9 9px 11px, transparent 11px 17px),
          linear-gradient(90deg, #28333d 0%, #7d8b96 25%, #c0cad1 45%, #7b8a95 60%, #303e49 100%);
        background-clip: padding-box;
        box-shadow: inset 1px 0 1px #ffffff80, inset -1px 0 2px #14202b99;
      }

      html::-webkit-scrollbar-thumb:hover {
        background:
          repeating-linear-gradient(155deg, transparent 0 7px, #17212baa 7px 9px, #f3f6f9e6 9px 11px, transparent 11px 17px),
          linear-gradient(90deg, #26333e, #8b9ba7 30%, #d9e1e6 48%, #8697a4 65%, #2c3d4b);
        background-clip: padding-box;
      }

      html::-webkit-scrollbar-thumb:active {
        border-color: #7d8b96;
      }

      html::-webkit-scrollbar-corner {
        background: #d7dde1;
      }
    }

    @media(forced-colors:active) {
      html {
        scrollbar-color: auto;
      }

      html::-webkit-scrollbar-thumb {
        background: ButtonText;
        border-color: Canvas;
        box-shadow: none;
      }

      html::-webkit-scrollbar-track {
        background: Canvas;
      }
    }

    /* Enquiry and customer-information sections. */
    [hidden] {
      display: none !important;
    }

    .product-specs {
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid #bac3ca;
    }

    .spec-label {
      font-size: 10px;
      color: #4c5c68;
      text-transform: uppercase;
      letter-spacing: .06em;
      font-weight: 600;
    }

    .product-specs p {
      margin: 6px 0 0;
      font-size: 12px;
    }

    .enquire-btn {
      display: inline-block;
      margin-top: 16px;
      min-height: 44px;
      padding: 11px 14px;
      border: 1px solid #546571;
      background: #202b34;
      color: #fff;
      font: 600 12px 'Inter', sans-serif;
      cursor: pointer;
    }

    .enquire-btn:hover {
      background: #344957;
    }

    .stock-note {
      font-size: 12px;
      color: #c9c4b8;
      margin-bottom: 24px;
    }

    .project-section {
      background: #fff;
    }

    .project-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .project-grid figure {
      margin: 0;
      border: 1px solid #aebbc4;
      background: #f5f4ed;
    }

    .project-grid img {
      width: 100%;
      height: auto;
      aspect-ratio: 3/2;
      object-fit: cover;
    }

    .project-grid figcaption {
      padding: 24px;
    }

    .project-grid h3 {
      font-size: 23px;
      margin-bottom: 9px;
    }

    .project-grid p {
      font-size: 14px;
      color: #565d60;
    }

    .faq-section {
      background: #f0f1ed;
    }

    .faq-section h2 {
      font-size: 34px;
    }

    .faq-list {
      margin-top: 28px;
      border-top: 1px solid #acb7be;
    }

    .faq-list details {
      border-bottom: 1px solid #acb7be;
    }

    .faq-list summary {
      padding: 20px 4px;
      cursor: pointer;
      font-size: 15px;
      font-weight: 600;
    }

    .faq-list p {
      max-width: 78ch;
      padding: 0 4px 22px;
      color: #4e585f;
      font-size: 14px;
      line-height: 1.8;
    }

    .enquiry-form {
      margin-top: 26px;
      max-width: 500px;
      padding: 22px;
      background: #20272c;
      border: 1px solid #647581;
    }

    .enquiry-form h2 {
      color: var(--yellow);
      font-size: 24px;
    }

    .enquiry-form>p {
      font-size: 12px;
      line-height: 1.6;
      margin-top: 8px;
      color: #d2d7d9;
    }

    .enquiry-form label {
      display: block;
      font-size: 12px;
      color: #e9e8df;
      margin: 13px 0 6px;
    }

    .enquiry-form label span {
      color: #b1bbc1;
    }

    .enquiry-form input,
    .enquiry-form select,
    .enquiry-form textarea {
      width: 100%;
      min-width: 0;
      padding: 11px;
      border: 1px solid #7a8993;
      border-radius: 2px;
      background: #121b21;
      color: #fff;
      font: 14px 'Inter', sans-serif;
    }

    .enquiry-form textarea {
      resize: vertical;
    }

    .enquiry-form input::placeholder,
    .enquiry-form textarea::placeholder {
      color: #aab5bd;
    }

    .enquiry-form input:focus-visible,
    .enquiry-form select:focus-visible,
    .enquiry-form textarea:focus-visible {
      outline: 2px solid var(--yellow);
      outline-offset: 2px;
    }

    .form-two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .form-two>div {
      min-width: 0;
    }

    .form-trap {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    .enquiry-form button[type=submit] {
      margin-top: 16px;
      background: var(--yellow);
      border: 0;
      padding: 13px 18px;
      font-weight: 600;
      min-height: 44px;
      cursor: pointer;
      color: #181510;
    }

    .enquiry-form button:disabled {
      opacity: .65;
      cursor: wait;
    }

    .form-whatsapp {
      display: inline-block;
      margin: 14px 0 0 12px;
      color: #b1edbe;
      font-size: 12px;
    }

    .enquiry-form .form-status {
      color: #fff;
      font-size: 13px;
    }

    .form-status:empty {
      display: none;
    }

    .floating-enquiry,
    .floating-whatsapp {
      position: fixed;
      right: 26px;
      bottom: 26px;
      z-index: 60;
      background: var(--yellow);
      color: #181510;
      padding: 15px 20px;
      box-shadow: 0 5px 20px #0003;
      border: 1px solid #968221;
      font-size: 13px;
      font-weight: 600;
    }

    .floating-whatsapp {
      background: #1d7844;
      color: #fff;
      border-color: #91c8a3;
    }

    .mobile-contact-bar {
      display: none;
    }

    @media(max-width:760px) {
      body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
      }

      .project-grid {
        grid-template-columns: 1fr;
      }

      .floating-enquiry,
      .floating-whatsapp {
        display: none;
      }

      .mobile-contact-bar {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 70;
        background: #17232c;
        border-top: 3px solid #8e9ca6;
        padding-bottom: env(safe-area-inset-bottom);
      }

      .mobile-contact-bar a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 60px;
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        border-right: 1px solid #56636c;
      }

      .mobile-contact-bar a:nth-child(2) {
        background: var(--yellow);
        color: #181510;
      }

      .enquiry-form {
        padding: 18px;
      }

      .form-two {
        grid-template-columns: 1fr;
        gap: 0;
      }
    }

    /* Quote and map share one footer row. */
    footer .footer-enquiry-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 28px;
      align-items: stretch;
      margin-top: 32px;
    }

    .footer-enquiry-row .enquiry-form {
      margin: 0;
      max-width: none;
      min-width: 0;
    }

    .footer-map-card {
      padding: 22px;
      border: 1px solid #647581;
      background: #20272c;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .footer-map-card h2 {
      color: var(--yellow);
      font-size: 24px;
    }

    .footer-map-card>p {
      font-size: 13px;
      color: #d2d7d9;
      line-height: 1.7;
      margin: 12px 0 18px;
    }

    .footer-map-frame {
      flex: 1;
      min-height: 340px;
      display: flex;
    }

    .footer-map-frame iframe {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 340px;
      flex: 1;
      border: 0;
    }

    .footer-map-card .footer-map-link {
      align-self: flex-start;
      font-size: 13px;
      margin-top: 16px;
    }

    @media(max-width:760px) {
      footer .footer-enquiry-row {
        grid-template-columns: 1fr;
        gap: 22px;
      }

      .footer-map-card {
        padding: 18px;
      }

      .footer-map-frame,
      .footer-map-frame iframe {
        min-height: 300px;
      }
    }

    .footer-address {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 18px 0;
      font-style: normal;
      font-size: 13px;
      line-height: 1.8;
      color: #e7e2d3;
    }

    .footer-address svg {
      width: 17px;
      height: 17px;
      flex: 0 0 17px;
      margin-top: 4px;
      color: var(--yellow);
    }

    /* Enquiry controls adapt to screen width and touch input, including iPad. */
    .enquiry-form input,
    .enquiry-form select,
    .enquiry-form textarea {
      font-size: 16px;
      min-height: 44px;
    }

    .enquiry-form {
      scroll-margin-top: 150px;
    }

    @media(max-width:1024px), (hover:none) and (pointer:coarse) {
      body {
        padding-bottom: calc(68px + env(safe-area-inset-bottom));
      }

      .floating-enquiry,
      .floating-whatsapp {
        display: none;
      }

      .mobile-contact-bar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 70;
        background: #17232c;
        border-top: 3px solid #8e9ca6;
        padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
      }

      .mobile-contact-bar a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 60px;
        padding: 8px;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        border-right: 1px solid #56636c;
      }

      .mobile-contact-bar a:nth-child(2) {
        background: var(--yellow);
        color: #181510;
      }

      body.enquiry-editing .mobile-contact-bar {
        display: none;
      }
    }

    @media(min-width:761px) and (max-width:1024px) {
      footer .footer-enquiry-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
      }

      .footer-enquiry-row .enquiry-form,
      .footer-map-card {
        padding: 26px;
      }

      .form-two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }

      .footer-map-frame,
      .footer-map-frame iframe {
        min-height: 350px;
      }
    }

    @media(max-width:760px) {
      .form-two {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
      }

      .enquiry-form button[type=submit] {
        width: 100%;
      }

      .enquiry-form .form-whatsapp {
        display: block;
        margin: 14px 0 0;
        text-align: center;
        padding: 10px 0;
      }
    }

    /* Device classification controls the enquiry layout, including landscape iPads. */
    .enquiry-form .enquiry-device-label {
      display: inline-block;
      font-size: 11px;
      letter-spacing: .02em;
      color: #f3c316;
      border: 1px solid #627381;
      padding: 5px 9px;
      margin: 10px 0 4px;
    }

    html[data-enquiry-device="mobile"] .floating-enquiry,
    html[data-enquiry-device="mobile"] .floating-whatsapp,
    html[data-enquiry-device="ipad"] .floating-enquiry,
    html[data-enquiry-device="ipad"] .floating-whatsapp,
    html[data-enquiry-device="tablet"] .floating-enquiry,
    html[data-enquiry-device="tablet"] .floating-whatsapp {
      display: none;
    }

    html[data-enquiry-device="ipad"] footer .footer-enquiry-row,
    html[data-enquiry-device="tablet"] footer .footer-enquiry-row {
      grid-template-columns: minmax(0, 1fr);
    }

    html[data-enquiry-device="mobile"] .form-two {
      grid-template-columns: minmax(0, 1fr);
    }

    html[data-enquiry-device="mobile"] .enquiry-form button[type="submit"] {
      width: 100%;
    }

    /* Contact channel icons switch together with their labels and links. */
    .channel-icon {
      display: inline-block;
      width: 19px;
      height: 19px;
      flex: 0 0 19px;
      vertical-align: middle;
    }

    .floating-enquiry,
    .floating-whatsapp {
      align-items: center;
      gap: 9px;
    }

    .floating-enquiry:not([hidden]),
    .floating-whatsapp:not([hidden]) {
      display: inline-flex;
    }

    .form-whatsapp:not([hidden]) {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .form-whatsapp[data-channel="email"] {
      color: var(--yellow-bg);
    }

    .form-whatsapp[data-channel="whatsapp"] {
      color: #b1edbe;
    }

    .mobile-contact-bar [data-mobile-enquiry] {
      gap: 7px;
    }

    .mobile-contact-bar [data-channel="whatsapp"] {
      background: #1d7844;
      color: #fff;
    }

    .mobile-contact-bar [data-channel="email"] {
      background: var(--yellow);
      color: var(--black);
    }

    @media(max-width:1024px), (hover:none) and (pointer:coarse) {

      .floating-enquiry:not([hidden]),
      .floating-whatsapp:not([hidden]) {
        display: none;
      }
    }

    html[data-enquiry-device="ipad"] .floating-enquiry,
    html[data-enquiry-device="ipad"] .floating-whatsapp,
    html[data-enquiry-device="tablet"] .floating-enquiry,
    html[data-enquiry-device="tablet"] .floating-whatsapp,
    html[data-enquiry-device="mobile"] .floating-enquiry,
    html[data-enquiry-device="mobile"] .floating-whatsapp {
      display: none;
    }

/* Compact trust strip below the hero. */
.trust-strip {
  background: #151a1e;
  color: #fff;
  border-top: 1px solid #5e6971;
  border-bottom: 1px solid #2a3136;
}
.trust-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 0;
  padding-bottom: 0;
}
.trust-strip-inner > span {
  min-width: 0;
  padding: 15px 20px;
  border-right: 1px solid #39434a;
}
.trust-strip-inner > span:first-child { padding-left: 0; }
.trust-strip-inner > span:last-child { border-right: 0; padding-right: 0; }
.trust-strip strong,
.trust-strip small { display: block; }
.trust-strip strong {
  color: var(--yellow);
  font: 600 13px 'Inter', sans-serif;
  letter-spacing: .02em;
}
.trust-strip small {
  margin-top: 3px;
  color: #c7cdd1;
  font-size: 11px;
  line-height: 1.4;
}
@media(max-width:760px) {
  .trust-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-strip-inner > span,
  .trust-strip-inner > span:first-child,
  .trust-strip-inner > span:last-child {
    padding: 12px 10px;
    border-right: 1px solid #39434a;
    border-bottom: 1px solid #39434a;
  }
  .trust-strip-inner > span:nth-child(2n) { border-right: 0; }
  .trust-strip-inner > span:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Successful enquiry state. */
.enquiry-form.is-success > :not(.enquiry-success) { display: none !important; }
.enquiry-success { min-height: 100%; padding: 12px 2px 4px; }
.enquiry-success[hidden] { display: none !important; }
.enquiry-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  color: var(--yellow);
  font-size: 25px;
  font-weight: 700;
}
.enquiry-success h2 { color: var(--yellow); font-size: 24px; margin-bottom: 10px; }
.enquiry-success p { color: #eef0ec; font-size: 14px; line-height: 1.7; margin: 0 0 8px; }
.enquiry-success .enquiry-success-note { color: #bfc8cd; font-size: 12px; }
.enquiry-success-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.enquiry-success .success-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid #7a8993;
  background: transparent;
  color: #fff;
  font: 600 12px 'Inter', sans-serif;
  cursor: pointer;
  text-decoration: none;
}
.enquiry-success .success-action-primary { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.enquiry-success .success-action:hover,
.enquiry-success .success-action:focus-visible { border-color: var(--yellow); }
@media(max-width:520px) {
  .enquiry-success-actions { display: grid; grid-template-columns: 1fr; }
}

/* Mobile/tablet sticky quick actions: Call · WhatsApp/Email · Directions. */
.mobile-contact-bar .mobile-action {
  flex-direction: column;
  gap: 4px;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}

.mobile-contact-bar .mobile-action-icon,
.mobile-contact-bar .channel-icon {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.mobile-contact-bar .mobile-action > span,
.mobile-contact-bar [data-mobile-enquiry] > span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
}

.mobile-contact-bar .mobile-action-call {
  background: #202b34;
  color: #fff;
}

.mobile-contact-bar .mobile-action-direction {
  background: #202b34;
  color: #fff;
  border-right: 0;
}

.mobile-contact-bar .mobile-action-call:active,
.mobile-contact-bar .mobile-action-direction:active {
  background: #2f404c;
}

.mobile-contact-bar [data-channel="whatsapp"] {
  background: #1d7844;
  color: #fff;
}

.mobile-contact-bar [data-channel="email"] {
  background: var(--yellow);
  color: var(--black);
}

@media(max-width:1024px), (hover:none) and (pointer:coarse) {
  .mobile-contact-bar a {
    min-height: 64px;
    padding: 7px 6px 6px;
  }
}



/* PWA install controls */
.header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
}
.pwa-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #69757d;
  border-radius: 2px;
  background: transparent;
  color: #f2eee3;
  font: 600 11px 'Inter', sans-serif;
  cursor: pointer;
}
.pwa-install-btn[hidden] { display: none !important; }
.pwa-install-btn svg { width: 15px; height: 15px; }
.pwa-install-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.pwa-toast {
  position: fixed;
  left: 50%;
  bottom: 86px;
  z-index: 120;
  width: min(420px, calc(100% - 32px));
  transform: translateX(-50%);
  padding: 12px 16px;
  border: 1px solid #727e87;
  border-left: 4px solid var(--yellow);
  background: #171c20;
  color: #fff;
  box-shadow: 0 12px 30px #00000035;
  font-size: 12px;
  line-height: 1.5;
}
.pwa-toast[hidden] { display: none !important; }
@media(max-width:760px) {
  .header-tools { justify-content: center; order: -1; margin-bottom: 1px; }
  .header-contact { gap: 7px; }
  .pwa-install-btn { min-height: 32px; }
  .pwa-toast { bottom: 82px; }
}
@media(min-width:761px) {
  .header-tools { margin-bottom: -2px; }
}


/* Lightweight bilingual UI: both languages are pre-rendered; CSS shows one. */
html[data-lang="en"] .i18n-hi { display: none !important; }
html[data-lang="hi"] .i18n-en { display: none !important; }
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  white-space: nowrap;
  font: 600 11px 'Inter', sans-serif;
}
.language-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #bfc5c9;
  padding: 5px 4px;
  font: inherit;
  cursor: pointer;
}
.language-btn:hover,
.language-btn.is-active { color: var(--yellow); }
.language-btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.language-separator { color: #68747c; }
@media(max-width:760px) {
  .language-switch { font-size: 11px; }
  .header-tools { flex-wrap: wrap; }
}

/* =========================================================
   COMPACT HEADER — Lohabada
   Keeps the sticky header slim on desktop, tablet and mobile.
========================================================= */

header {
  border-bottom-width: 2px;
  box-shadow: 0 2px 10px #00000024;
}

header .nav-row {
  min-height: 58px;
  padding: 8px 28px;
  gap: 18px;
}

header .wordmark {
  gap: 2px;
  font-size: 22px;
  line-height: 1;
}

header .wordmark .wordmark-name {
  line-height: .95;
}

header .wordmark .wordmark-subtitle {
  font-size: 8.5px;
  line-height: 1.15;
  letter-spacing: .02em;
  opacity: .9;
}

header nav {
  gap: 22px;
  font-size: 13px;
}

header nav a {
  padding: 4px 0;
}

header .header-contact {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

header .header-tools {
  width: auto;
  gap: 5px;
  margin: 0;
  flex: 0 0 auto;
}

header .language-switch {
  min-height: 26px;
  font-size: 10px;
  gap: 2px;
}

header .language-btn {
  padding: 4px 3px;
}

header .pwa-install-btn {
  min-height: 27px;
  padding: 4px 7px;
  gap: 5px;
  font-size: 10px;
}

header .pwa-install-btn svg {
  width: 13px;
  height: 13px;
}

header .header-email {
  gap: 5px;
  font-size: 10.5px;
}

header .email-icon {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
}

header .header-contact .nav-call {
  padding: 6px 10px;
  font-size: 11px;
  border-radius: 3px;
}

/* Medium desktop/tablet: preserve space without adding height. */
@media (min-width: 761px) and (max-width: 1100px) {
  header .nav-row {
    padding-inline: 20px;
    gap: 12px;
  }

  header nav {
    gap: 14px;
    font-size: 12px;
  }

  header .wordmark {
    font-size: 20px;
  }

  header .header-email span {
    display: none;
  }

  header .header-email {
    width: 28px;
    height: 28px;
    justify-content: center;
    border: 1px solid #454c51;
    border-radius: 3px;
  }
}

/* Mobile: one compact header row only. */
@media (max-width: 760px) {
  header .nav-row {
    min-height: 52px;
    padding: 7px 14px;
    gap: 8px;
    flex-wrap: nowrap;
  }

  header .wordmark {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 19px;
  }

  header .wordmark .wordmark-subtitle {
    font-size: 7.5px;
    white-space: nowrap;
  }

  header .header-contact {
    order: initial;
    flex: 0 0 auto;
    width: auto;
    border-top: 0;
    padding-top: 0;
    gap: 4px;
  }

  header .header-email,
  header .nav-call {
    display: none !important;
  }

  header .header-tools {
    order: initial;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 3px;
    margin: 0;
  }

  header .language-switch {
    min-height: 28px;
    font-size: 9.5px;
  }

  header .language-btn {
    padding: 4px 2px;
  }

  header .pwa-install-btn {
    width: 29px;
    height: 29px;
    min-height: 29px;
    padding: 0;
    justify-content: center;
    border-radius: 3px;
  }

  header .pwa-install-btn > span {
    display: none;
  }

  header .pwa-install-btn svg {
    width: 14px;
    height: 14px;
  }

  header .nav-toggle {
    flex: 0 0 auto;
    min-width: 48px;
    height: 30px;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1;
    border-radius: 3px;
  }

  header nav a {
    padding: 11px 16px;
    font-size: 13px;
  }

  [id] {
    scroll-margin-top: 68px;
  }
}

@media (max-width: 420px) {
  header .nav-row {
    padding-inline: 11px;
  }

  header .wordmark {
    font-size: 18px;
  }

  header .wordmark .wordmark-subtitle {
    display: none;
  }
}