/* Site additions for pages built outside Webflow (services, contact, thanks).
   All values derive from tokens in strong-arm-haulage-alt-2.webflow.css:
   bg #dad9d2 · dark #333 · hairline #7d7d7d · accent #c64900 · light text #d3d3ce/#fafafa */

/* Never allow sideways panning — offscreen slider slides and the hero
   quick-links row otherwise widen the document on small screens. */
html,
body {
  overflow-x: clip;
}

/* --- Homepage About + Contact bands: connected hairline frames --- */

/* The cells are `align-items: flex-start` flex columns, so a <picture>
   shrink-wraps to the image's intrinsic ratio instead of filling the
   column — at every width, not just on phones. */
.section-about .w-layout-cell > picture,
.section-form .w-layout-cell > picture {
  align-self: stretch;
  width: 100%;
}

/* The photo cell carried its own top/bottom borders on the image while
   the form cell drew borders at the cell edge — two different heights,
   so the band read as two separate sections. Borders move to the cell
   and the photo stretches to meet them. */
.section-form .quick-stack-4 > .w-layout-cell:first-child {
  border-top: 1px solid #7d7d7d;
  border-bottom: 1px solid #7d7d7d;
}

.section-form .w-layout-cell > picture {
  flex: 1;
  display: flex;
}

.section-form .image-47 {
  border-top-style: none;
  border-bottom-style: none;
  height: 100%;
  min-height: 400px;
}

/* --- Sub-page header band (dark, carries the navbar) --- */
.page-header {
  background-color: #333;
  width: 100%;
}

.page-header-content {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 100px 80px 60px;
  display: flex;
}

.heading.page-title {
  font-size: 56px;
  line-height: 58px;
}

.page-intro {
  color: #d3d3ce;
  max-width: 620px;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-weight: 300;
}

.nav-link-2[aria-current="page"] {
  color: #fafafa;
}

/* Navbar links go accent orange on hover (the export faded them to a
   barely different grey). */
.nav-link-2,
.nav-dropdown-toggle,
.nav-dropdown-icon {
  transition: color 0.18s;
}

.nav-link-2:hover {
  color: #fa4c0a;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:hover .text-block-2,
.nav-dropdown-toggle:hover .nav-dropdown-icon,
.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown:hover .text-block-2,
.nav-dropdown:hover .nav-dropdown-icon {
  color: #fa4c0a;
}

/* --- Services list --- */
.services-list {
  flex-flow: column;
  padding: 80px;
  display: flex;
}

.service-row {
  border-bottom: 1px solid #7d7d7d;
  grid-template-columns: 1fr 1fr;
  scroll-margin-top: 40px;
  display: grid;
}

.service-row.first {
  border-top: 1px solid #7d7d7d;
}

.service-row-media {
  border-right: 1px solid #7d7d7d;
  padding: 25px 25px 25px 0;
}

.service-row.flip .service-row-media {
  border-right-style: none;
  border-left: 1px solid #7d7d7d;
  order: 2;
  padding: 25px 0 25px 25px;
}

/* One fixed height for every row so the photos all match and the row
   borders land on a steady rhythm. */
.service-row-media img {
  object-fit: cover;
  width: 100%;
  height: 480px;
  display: block;
}

/* Equal padding on both sides — the copy was flush against the centre
   divider on alternate rows. */
.service-row-body {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  padding: 40px;
  display: flex;
}

.service-copy {
  color: #333;
  max-width: 520px;
  margin-bottom: 30px;
  font-family: Inter, sans-serif;
  font-weight: 300;
}

/* --- Dark CTA band --- */
.cta-band {
  background-color: #333;
  flex-flow: column;
  align-items: flex-start;
  padding: 120px 80px;
  display: flex;
}

.cta-band .heading-11 {
  padding-left: 0;
}

/* --- Contact page --- */
.contact-section {
  background-color: #333;
  padding: 0 80px 120px;
}

.contact-grid {
  grid-column-gap: 0;
  grid-row-gap: 0;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  display: grid;
}

.contact-info {
  border-top: 1px solid #7d7d7d;
  border-bottom: 1px solid #7d7d7d;
  flex-flow: column;
  padding: 40px 40px 0 0;
  display: flex;
  position: relative;
}

/* Orange strap ticks where each column meets the frame's top hairline. */
.contact-info::before,
.contact-form-cell::before {
  content: "";
  background-color: #fa4c0a;
  width: 44px;
  height: 2px;
  position: absolute;
  top: -1px;
  left: 0;
}

.contact-copy {
  color: #d3d3ce;
  max-width: 480px;
  font-family: Inter, sans-serif;
  font-weight: 300;
}

/* What-to-include checklist: hairline rows with the safety-orange square. */
.contact-checklist {
  max-width: 480px;
  margin: 4px 0 20px;
  padding: 0;
  list-style: none;
}

.contact-checklist li {
  color: #d3d3ce;
  border-bottom: 1px solid #55554f;
  padding: 14px 0 14px 30px;
  font-family: Inter, sans-serif;
  font-weight: 300;
  position: relative;
}

.contact-checklist li:first-child {
  border-top: 1px solid #55554f;
}

.contact-checklist li::before {
  content: "";
  background-color: #fa4c0a;
  width: 9px;
  height: 9px;
  position: absolute;
  top: 21px;
  left: 2px;
}

.contact-meta {
  flex-wrap: wrap;
  gap: 24px 56px;
  margin: 16px 0 40px;
  display: flex;
}

/* Phone, WhatsApp and email are the point of this page: large enough to
   read out or tap, with the small mono labels kept above. */
.contact-meta > div {
  color: #d3d3ce;
  font-family: Roboto Mono, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.contact-meta span {
  color: #9a9a94;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  font-size: 11px;
  display: block;
}

/* Form column: right-hand half of the frame, split off by the centre
   divider. */
.contact-form-cell {
  border-top: 1px solid #7d7d7d;
  border-bottom: 1px solid #7d7d7d;
  border-left: 1px solid #7d7d7d;
  padding: 40px 0 48px 40px;
  position: relative;
}

.contact-form-cell::before {
  left: 40px;
}

.contact-form-cell .form-head {
  margin-bottom: 28px;
}

.form-head-eyebrow {
  color: #fa4c0a;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  font-family: Roboto Mono, sans-serif;
  font-size: 12px;
}

.form-head-note {
  color: #d3d3ce;
  max-width: 420px;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-weight: 300;
}

.field-group {
  flex: 1;
  flex-flow: column;
  min-width: 0;
  display: flex;
}

.field-label {
  color: #9a9a94;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  font-family: Roboto Mono, sans-serif;
  font-size: 11px;
}

.field-label span {
  color: #6f6f69;
  text-transform: none;
  letter-spacing: 0;
}

.form .field-group .text-field {
  width: 100%;
}

/* --- Two-step quote form ---
   js/site.js adds .sah-steps to the form and swaps the panels; without
   JS both steps render stacked as two labelled sections and the
   next/back controls stay hidden. */
.form-step-head {
  margin-bottom: 22px;
}

.form-step-num {
  color: #fa4c0a;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  font-family: Roboto Mono, sans-serif;
  font-size: 11px;
}

.form-step-title {
  color: #fafafa;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.form-step + .form-step {
  margin-top: 36px;
}

.form:not(.sah-steps) .sah-step-next,
.form:not(.sah-steps) .sah-step-back {
  display: none;
}

.form.sah-steps .form-step {
  display: none;
}

.form.sah-steps .form-step.active {
  animation: sah-step-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
  display: block;
  margin-top: 0;
}

@keyframes sah-step-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.form-step-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  display: flex;
}

.sah-step-back {
  appearance: none;
  cursor: pointer;
  color: #9a9a94;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: #0000;
  border: none;
  padding: 12px 0;
  font-family: Roboto Mono, sans-serif;
  font-size: 12px;
}

.sah-step-back:hover {
  color: #fafafa;
}

@media (prefers-reduced-motion: reduce) {
  .form.sah-steps .form-step.active {
    animation: none;
  }
}

/* --- Forms (Netlify) --- */
textarea.text-field {
  resize: vertical;
  width: 100%;
  min-height: 140px;
  margin-bottom: 30px;
}

select.text-field {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237d7d7d' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: right 8px center;
  background-repeat: no-repeat;
  width: 100%;
  margin-bottom: 30px;
  padding-right: 30px;
}

select.text-field option {
  color: #333;
}

select.text-field.empty {
  color: #999;
}

.submit-button {
  cursor: pointer;
  background-color: #0000;
  padding: 0;
  font: inherit;
}

.honeypot-field {
  display: none;
}

/* --- Thanks page --- */
.thanks-content {
  background-color: #333;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 60vh;
  padding: 100px 80px;
  display: flex;
}

/* --- Service detail pages --- */
.service-detail {
  --sd-gutter: 80px;
  flex-flow: column;
  padding: 80px var(--sd-gutter);
  display: flex;
}

.service-detail-intro {
  border-top: 1px solid #7d7d7d;
  border-bottom: 1px solid #7d7d7d;
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.service-detail-copy {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 40px 40px 0;
  display: flex;
}

.service-detail-media {
  border-left: 1px solid #7d7d7d;
  padding: 25px 0 25px 25px;
}

.service-detail-media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 360px;
  max-height: 560px;
  display: block;
}

/* How-it-works: the process gets its own stage — a full-bleed dark band
   in the site's dark-section language, breaking out of the page gutter.
   The top margin matches the section's top padding so the intro's bottom
   border sits in the same clear space as its top one. */
.service-steps {
  background-color: #292926;
  margin-top: 80px;
  margin-left: calc(-1 * var(--sd-gutter));
  margin-right: calc(-1 * var(--sd-gutter));
  padding: 64px var(--sd-gutter) 72px;
}

.service-steps .section-label {
  color: #fafafa;
  margin-bottom: 40px;
}

.service-steps-grid {
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 48px;
  display: grid;
}

.service-step {
  border-top: 1px solid #55554f;
  padding-top: 22px;
  position: relative;
}

/* Orange tick at the start of each step's hairline — the strap motif. */
.service-step::before {
  content: "";
  background-color: #fa4c0a;
  width: 44px;
  height: 2px;
  position: absolute;
  top: -1px;
  left: 0;
}

.service-step-num {
  color: #fa4c0a;
  font-family: Roboto Mono, sans-serif;
  font-size: 26px;
  line-height: 1;
}

.service-step-title {
  color: #d3d3ce;
  margin: 14px 0 10px;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.service-steps .service-copy {
  color: #b9b9b3;
  margin-bottom: 0;
}

.service-included {
  padding: 60px 0;
}

/* Framed like the intro: hairlines above and below, photo inset 25px
   from the frame, list centred against it. */
.service-included-grid {
  border-top: 1px solid #7d7d7d;
  border-bottom: 1px solid #7d7d7d;
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.service-included-media {
  border-left: 1px solid #7d7d7d;
  padding: 25px 0 25px 25px;
}

.service-included-media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 340px;
  max-height: 480px;
  display: block;
}

/* Single column of features, a small stroke icon beside each line. */
.included-items {
  flex-flow: column;
  gap: 20px;
  align-self: center;
  max-width: 560px;
  padding: 40px 40px 40px 0;
  display: flex;
}

.included-item {
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.included-item svg {
  color: #c64900;
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: -1px;
  display: block;
}

.included-item span {
  color: #333;
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  display: block;
}

/* FAQs sit two per column; answers open in place without disturbing
   the neighbouring column's rhythm thanks to align-items: start. */
.service-faqs {
  border-bottom: 1px solid #7d7d7d;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 80px;
  align-items: start;
  padding: 60px 0;
  display: grid;
}

.service-faqs .section-label {
  grid-column: 1 / -1;
}

.service-faq {
  border-bottom: 1px solid #7d7d7d;
}

/* Third and fourth questions form the bottom row. */
.service-faq:nth-of-type(n + 3) {
  border-bottom-style: none;
}

.service-faq summary {
  cursor: pointer;
  color: #333;
  padding: 20px 0;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  list-style: none;
}

.service-faq summary::-webkit-details-marker {
  display: none;
}

.service-faq summary::after {
  content: "+";
  color: #c64900;
  float: right;
}

.service-faq[open] summary::after {
  content: "\2212";
}

.service-faq p {
  color: #333;
  max-width: 640px;
  padding-bottom: 20px;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-weight: 300;
}

/* The answer fades in while js/site.js tweens the panel height. */
.service-faq[open] > p {
  animation: sah-faq-fade 360ms ease both;
}

@keyframes sah-faq-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-faq[open] > p {
    animation: none;
  }
}

.other-services {
  padding: 60px 0 0;
}

.other-services-links {
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-top: 20px;
  display: flex;
}

.other-services-links a {
  color: #c64900;
  font-family: Roboto Mono, sans-serif;
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
}

.service-copy a,
.service-included a {
  color: #c64900;
}

.section-label {
  color: #333;
  margin-bottom: 20px;
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 600;
}

/* Kickers on the light background need a darker accent to reach WCAG AA
   (4.75:1); the dark-band kickers keep the brand orange. */
.section-services .service-small-head,
.section-reviews .service-small-head,
.services-list .service-small-head,
.service-detail .service-small-head {
  color: #a03b00;
}

/* The "view all google reviews" button is commented out until the client's
   reviews link exists. Its bottom margin was the section's bottom spacing, so
   the section carries it instead. Remove the class when the button returns. */
.section-reviews.no-reviews-button {
  padding-bottom: 160px;
}

/* .heading-11 was authored on <h1> and relies on the element's 38px default;
   demoted to <h2> for document outline, so pin the size it was designed at. */
h2.heading-11 {
  font-size: 38px;
}

/* AVIF hero background where supported (base rule lives in the Webflow css) */
.hero-content {
  background-image: linear-gradient(#00000080, #00000080),
    image-set(url("../images/hiab-crane-lifting-roof-truss.avif") type("image/avif"),
      url("../images/hiab-crane-lifting-roof-truss.jpeg") type("image/jpeg"));
}

/* --- Footer --- */

/* The export's hover colour was a near-black #1a1b1fbf — invisible on
   the dark footer. Use the dark-background accent orange instead. */
.footer-link {
  transition: color 0.18s;
}

.footer-link:hover {
  color: #fa4c0a;
}

/* --- Responsive (breakpoints match the Webflow export) --- */
@media screen and (max-width: 991px) {
  /* The export keeps the navbar's 80px desktop gutters on small screens,
     squeezing the menu overlay to ~230px — match the page gutters instead. */
  .navbar-logo-left {
    padding-left: 45px;
    padding-right: 45px;
  }

  /* The export's collapsed menu is a white panel but keeps the navbar's light
     link colour — make links legible and comfortably tappable. */
  .nav-menu-wrapper .nav-link-2,
  .nav-menu-wrapper .text-block-2 {
    color: #333;
  }

  .nav-menu-wrapper .nav-link-2[aria-current="page"] {
    color: #c64900;
  }

  .nav-menu-wrapper .nav-link-2,
  .nav-menu-wrapper .nav-dropdown-toggle {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Long service names: let the panel breathe and the labels wrap.
     The export fixes .nav-menu-wrapper at 230px — widen both it and the panel. */
  .nav-menu-wrapper.w-nav-menu {
    width: 100%;
  }

  .nav-menu-two {
    width: calc(100% - 40px);
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .nav-dropdown-link {
    white-space: normal;
  }

  .nav-dropdown-link[aria-current="page"],
  .w-dropdown-link.w--current {
    color: #c64900;
  }

  .page-header-content {
    padding: 80px 45px 50px;
  }

  .service-detail {
    --sd-gutter: 45px;
    padding: 60px var(--sd-gutter);
  }

  .service-steps {
    margin-top: 60px;
  }

  .service-steps-grid {
    grid-template-columns: 1fr;
    grid-row-gap: 36px;
  }

  .service-faqs {
    grid-column-gap: 45px;
  }

  .service-row-media img {
    height: 380px;
  }

  .services-list {
    padding: 60px 45px;
  }

  .cta-band {
    padding: 100px 45px;
  }

  .contact-section {
    padding: 0 45px 100px;
  }
}

@media screen and (max-width: 767px) {
  .service-row,
  .service-row.flip {
    grid-template-columns: 1fr;
  }

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

  .service-detail-media {
    border-left-style: none;
    order: -1;
    padding: 25px 0 0;
  }

  .service-detail-copy {
    padding: 25px 0 40px;
  }

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

  .service-included-media {
    border-left-style: none;
    padding: 0 0 25px;
  }

  .service-included-media img {
    min-height: 0;
    max-height: 260px;
  }

  .included-items {
    gap: 18px;
    padding: 32px 0 8px;
  }

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

  .service-faq:nth-of-type(n + 3) {
    border-bottom-style: solid;
  }

  .service-faq:last-of-type {
    border-bottom-style: none;
  }

  .service-row-media,
  .service-row.flip .service-row-media {
    border-left-style: none;
    border-right-style: none;
    order: 0;
    padding: 25px 0 0;
  }

  .service-row-media img {
    height: 260px;
  }

  .service-row-body,
  .service-row.flip .service-row-body {
    padding: 25px 0 40px;
  }

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

  .contact-info {
    border-bottom-style: none;
    padding-right: 0;
  }

  .contact-form-cell {
    border-left-style: none;
    padding: 32px 0 40px;
  }

  .contact-form-cell::before {
    left: 0;
  }

  .section-form .image-47 {
    min-height: 0;
  }
}

@media screen and (max-width: 479px) {
  .page-header-content {
    padding: 60px 24px 40px;
  }

  .heading.page-title {
    font-size: 32px;
    line-height: 35px;
  }

  .services-list {
    padding: 40px 24px;
  }

  .service-detail {
    --sd-gutter: 24px;
    padding: 40px var(--sd-gutter);
  }

  .service-steps {
    margin-top: 40px;
    padding-top: 48px;
    padding-bottom: 56px;
  }

  .cta-band {
    padding: 80px 24px;
  }

  .contact-section {
    padding: 0 24px 80px;
  }

  .thanks-content {
    padding: 80px 24px;
  }

  .navbar-logo-left {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero-services-wrap {
    flex-wrap: wrap;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ============================================================
   Mobile layout repair — homepage Webflow export
   ------------------------------------------------------------
   The export ships the homepage's three Quick Stack grids
   (#about, testimonials, contact form) with desktop column
   counts and 80px gutters at EVERY breakpoint — Webflow never
   generated tablet/phone overrides for them. On a 390px phone
   that left the About section rendering in a 230px-wide,
   4-column grid (one word per line, heading colliding with the
   image) and the testimonials grid measuring 630px, silently
   truncated by the `overflow-x: clip` guard on html/body.

   The column counts come from #w-node-… ID rules at the bottom
   of strong-arm-haulage-alt-2.webflow.css, so these overrides
   must match that specificity — hence the ID selectors. Two of
   the grids are switched to flex so the cells' `grid-column:
   span 2` declarations stop applying without having to unset
   each cell individually.

   services.html / contact.html / service-*.html are hand-built
   and already responsive — nothing here targets them.
   ============================================================ */

@media screen and (max-width: 991px) {
  /* 80px desktop gutters -> match the page gutters used elsewhere. */
  .section-about,
  .section-form {
    padding-left: 45px;
    padding-right: 45px;
  }

  .section-about {
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .section-form {
    padding-top: 90px;
  }

  /* The testimonials block indents its own children rather than the
     section, so each one needs the gutter applied separately. */
  .quick-stack-2 {
    padding-left: 45px;
    padding-right: 45px;
  }

  .service-small-head.reviews {
    margin-left: 45px;
    padding-top: 90px;
  }

  /* Base rule only sets a left indent, so the last word ran under the
     right edge once the heading had a phone-width line to fill. */
  .heading-9.hero.reviews {
    padding-left: 45px;
    padding-right: 45px;
  }

  .button-new.reviews {
    margin-left: 45px;
    margin-bottom: 90px;
  }

  .section-reviews.no-reviews-button {
    padding-bottom: 90px;
  }

  /* Testimonials: three columns is too tight below 992px. */
  #w-node-_559df9ad-dd83-970b-e19c-151d7f3876d4-eae5b7ce {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
}

@media screen and (max-width: 767px) {
  /* --- About: 4-column grid -> single column ---
     Flex drops the cells' `span 2` rules; `order` interleaves the
     copy between the two photos instead of stacking them together. */
  #w-node-_91cc76a3-d47a-cfd5-e5d5-04c3268f74be-eae5b7ce {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
  }

  .section-about .w-layout-cell.bottom-right {
    order: 3;
  }

  .section-about .w-layout-cell.bottom-left {
    order: 4;
  }

  /* Vertical rules between columns become stray lines once stacked. */
  .section-about .top-left,
  .section-about .bottom-left {
    border-right-style: none;
  }

  .section-about .bottom-left {
    border-bottom-style: none;
  }

  /* Asymmetric padding was there to inset each photo from its column
     divider; full-bleed reads better in a single column. */
  .image-41,
  .image-42 {
    height: 260px;
    padding-left: 0;
    padding-right: 0;
  }

  /* The cells are `align-items: flex-start` flex columns, so a <picture>
     shrink-wraps to the image's intrinsic ratio and the photos come out
     ~280px wide instead of filling the column. */
  .section-about .w-layout-cell > picture,
  .section-form .w-layout-cell > picture {
    align-self: stretch;
    width: 100%;
  }

  .heading-11 {
    padding-right: 0;
    line-height: 34px;
  }

  h2.heading-11 {
    font-size: 30px;
  }

  /* Scoped to About: the review cards use the same class and need their
     25px inset kept, or the text sits on the card border. */
  .section-about .text-block-5 {
    padding-left: 0;
  }

  .button-new.about {
    margin-left: 0;
  }

  /* --- Testimonials: -> single column --- */
  #w-node-_559df9ad-dd83-970b-e19c-151d7f3876d4-eae5b7ce {
    grid-template-columns: 1fr;
  }

  /* Cards are drawn with left/top borders that only close up as a
     row; box each card now that they stack. */
  .section-reviews .w-layout-cell.cell {
    border: 1px solid #7d7d7d;
  }

  /* --- Contact form: 2-column grid -> single column ---
     The left cell held a 25px sliver of photo; the form itself was
     squeezed to 175px. Photo goes full width above the form. */
  #w-node-_7a3813b8-86b9-0880-4a81-da0415786df3-eae5b7ce {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
  }

  .image-47 {
    height: 220px;
    padding: 0;
  }

  /* Left rule separated the form from the photo column; stacked, it
     just hangs down the side of the form. */
  .section-form .cell-5 {
    border-left-style: none;
  }

  .div-block-32 {
    padding-left: 0;
    padding-right: 0;
  }

  /* First name / surname sit side by side — too narrow to read on a phone. */
  .div-block-31 {
    flex-direction: column;
    gap: 0;
  }

  /* --- Services carousel ---
     The mask is pinned to a 250px card width, so a phone shows one
     card plus a sliver of the next. Let the card fill the viewport. */
  .parallax-mask,
  .parallax-slide-3,
  .parallax-slide-3.intro {
    width: 100%;
  }

  /* The export's 120%/150% portrait ratios were tuned for that 250px
     card; at full viewport width they blow the image up to ~513px tall
     and the title bar lands below the fold of the 100vh section. */
  .ratio_200-3 {
    padding-top: 90%;
  }

  /* Card + heading + controls no longer fit a fixed 100vh; grow with
     the content rather than spilling over the About section. */
  .section-services {
    height: auto;
    min-height: 100svh;
    padding-top: 72px;
    padding-bottom: 48px;
  }

  /* Breathing room between the photo and the title bar it was touching. */
  .parallax-slide-3 .services-card-head {
    margin-top: 12px;
  }
}

@media screen and (max-width: 479px) {
  .section-about,
  .section-form {
    padding-left: 24px;
    padding-right: 24px;
  }

  .section-about {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .section-form {
    padding-top: 64px;
  }

  .quick-stack-2 {
    padding-left: 24px;
    padding-right: 24px;
  }

  .service-small-head.reviews {
    margin-left: 24px;
    padding-top: 64px;
  }

  .heading-9.hero.reviews {
    padding-left: 24px;
    padding-right: 24px;
  }

  .button-new.reviews {
    margin-left: 24px;
    margin-bottom: 64px;
  }

  .section-reviews.no-reviews-button {
    padding-bottom: 64px;
  }

  h2.heading-11 {
    font-size: 27px;
  }

  .heading-11 {
    line-height: 31px;
  }

  /* Four hero quick links across a phone gives each ~80px, so every
     label wraps to three lines. Two per row keeps them on one or two.
     The section is sized `height: 11%` of the hero and the links are
     `height: 100%`, so a second row would spill into the section below
     — both need to grow with their content once wrapping is on. */
  .hero-services-tabs {
    height: auto;
  }

  .hero-services-wrap {
    flex-wrap: wrap;
    align-content: flex-start;
    height: auto;
    row-gap: 4px;
    padding-bottom: 16px;
  }

  .link-block-4 {
    width: 50%;
    min-height: 44px;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 12px;
  }
}

/* --- Touch targets and legibility (all pages) ---
   The export's 12px labels and sub-44px controls flagged across
   every page in the mobile audit, not just the homepage. */
@media screen and (max-width: 767px) {
  /* .text-block-7 (button labels) deliberately stays at 12px — it's the
     uppercase mono brand style, it clears Lighthouse's 12px threshold,
     and `.text-block-7.hero` would need matching specificity anyway, so
     bumping only the base class would split the buttons two ways. */
  .text-block-3,
  .review-name,
  .heading-10,
  .service-small-head {
    font-size: 14px;
  }

  .heading-10 {
    line-height: 20px;
  }

  /* Footer links are 16px tall inline anchors sitting ~4px apart. */
  .footer-link {
    padding-top: 14px;
    padding-bottom: 14px;
    display: inline-block;
  }

  .footer-social-link {
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    display: inline-flex;
  }

  /* "Learn more →" / related-service links are standalone targets, not
     links inside a sentence, so the inline-link exemption doesn't apply. */
  .other-services-links a {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 14px;
    display: inline-block;
  }

  .other-services-links {
    gap: 0 30px;
    margin-top: 8px;
  }

  /* Card and form controls below the 44px minimum. */
  .link-block-6.service {
    width: 44px;
    height: 44px;
    padding: 12px;
  }

  .text-field,
  .text-field.extra-pad,
  select.text-field {
    min-height: 44px;
  }

  .navbar-brand {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* --- Desktop services dropdown (all pages) ---
   The export's panel was a white rounded card — the one soft shape on a
   site drawn entirely in hard hairlines. Redrawn in the site's own
   language: dark panel, hairline rules, the safety-orange strap tick,
   links that step aside for an arrow on hover. */
@media (min-width: 992px) {
  /* Stays position:absolute from the Webflow base rule — an absolutely
     positioned box is already the containing block for the ::before.
     The visual offset below the toggle is a TRANSPARENT border, not a
     margin: a margin gap breaks the hover path and Webflow closes the
     dropdown while the pointer crosses it, but border area still counts
     as hovering the panel. background-clip keeps the gap see-through
     and the inset shadow draws the 1px frame inside the padding box. */
  .nav-dropdown-list {
    background-color: #292926;
    background-clip: padding-box;
    border: 0 solid #0000;
    border-top-width: 8px;
    border-radius: 0;
    min-width: 320px;
    box-shadow: inset 0 0 0 1px #55554f, 0 18px 40px #00000040;
  }

  /* Orange strap tick over the panel's top hairline — the site motif.
     top: 7px lands it on the visible edge below the 8px hover bridge. */
  .nav-dropdown-list::before {
    content: "";
    background-color: #fa4c0a;
    width: 44px;
    height: 2px;
    position: absolute;
    top: 7px;
    left: 18px;
  }

  .nav-dropdown-list.w--open {
    padding-top: 0;
    padding-bottom: 6px;
    animation: sah-dd-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes sah-dd-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  /* Eyebrow row js/site.js prepends into the panel. */
  .sah-dd-head {
    color: #9a9a94;
    text-transform: uppercase;
    letter-spacing: 1px;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 18px 10px;
    font-family: Roboto Mono, sans-serif;
    font-size: 11px;
    display: flex;
  }

  .sah-dd-head a {
    color: #fa4c0a;
    letter-spacing: 1px;
    margin-left: 24px;
    font-size: 11px;
    text-decoration: none;
  }

  .sah-dd-head a:hover {
    color: #fafafa;
  }

  .nav-dropdown-list .nav-dropdown-link {
    color: #d3d3ce;
    border-top: 1px solid #3f3f3b;
    width: 100%;
    padding: 13px 48px 13px 18px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    position: relative;
    transition: color 0.18s, background-color 0.18s, padding-left 0.18s;
  }

  .nav-dropdown-list .nav-dropdown-link::after {
    content: "\2192";
    color: #fa4c0a;
    opacity: 0;
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translate(-8px, -50%);
    transition: opacity 0.18s, transform 0.18s;
  }

  .nav-dropdown-list .nav-dropdown-link:hover {
    color: #fafafa;
    background-color: #33332f;
    padding-left: 26px;
  }

  .nav-dropdown-list .nav-dropdown-link:hover::after {
    opacity: 1;
    transform: translate(0, -50%);
  }

  .nav-dropdown-list .nav-dropdown-link[aria-current="page"] {
    color: #fa4c0a;
  }

  /* Chevron turns over while the panel is open. */
  .nav-dropdown-icon {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s;
  }

  .nav-dropdown-toggle.w--open .nav-dropdown-icon,
  .nav-dropdown:hover .nav-dropdown-icon {
    transform: rotate(180deg);
  }
}

/* --- Full-screen mobile menu (all pages) ---
   Replaces the Webflow collapse dropdown below 992px. The overlay is
   built by js/site.js from each page's own nav links, so the markup
   here never has to be kept in sync by hand. Motion: the panel wipes
   down over the page, then links rise in with a short stagger. */

a.text-block-2 {
  color: inherit;
  text-decoration: none;
}

.sah-menu {
  z-index: 990;
  visibility: hidden;
  background-color: #292926;
  flex-direction: column;
  display: flex;
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-102%);
  transition: transform 520ms cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 520ms;
}

html.sah-menu-open .sah-menu {
  visibility: visible;
  transform: translateY(0);
  transition: transform 520ms cubic-bezier(0.76, 0, 0.24, 1);
}

html.sah-menu-open,
html.sah-menu-open body {
  overflow: hidden;
}

.sah-menu-inner {
  flex-direction: column;
  gap: 36px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 24px 48px;
  display: flex;
}

.sah-menu-group {
  display: flex;
  flex-direction: column;
}

.sah-menu-link {
  color: #d3d3ce;
  font-family: Inter, sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.2;
  text-decoration: none;
  padding: 12px 0;
}

/* The individual services hang off a safety-orange strap line directly
   under the Services entry — the one loud element in a quiet panel. */
.sah-menu-sub {
  border-left: 2px solid #fa4c0a;
  flex-direction: column;
  margin: 14px 0 20px;
  padding-left: 18px;
  display: flex;
}

.sah-menu-sub .sah-menu-link {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 11px 0;
}

.sah-menu-link[aria-current="page"] {
  color: #fa4c0a;
}

.sah-menu-cta {
  margin-top: 8px;
  align-self: flex-start;
}

/* Top-level links read as rows off the same hairline system as the
   rest of the site, each with a quiet right-edge arrow; the current
   page's arrow is lit orange. */
.sah-menu-group > .sah-menu-link {
  border-bottom: 1px solid #3f3f3b;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.sah-menu-group > .sah-menu-link:last-child {
  border-bottom-style: none;
}

.sah-menu-group > .sah-menu-link::after {
  content: "\2192";
  color: #55554f;
  font-size: 22px;
  font-weight: 400;
}

.sah-menu-group > .sah-menu-link[aria-current="page"]::after {
  color: #fa4c0a;
}

/* Strap-line footer pinned to the bottom of the panel. */
.sah-menu-meta {
  color: #9a9a94;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-top: 1px solid #3f3f3b;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: auto;
  padding-top: 18px;
  font-family: Roboto Mono, sans-serif;
  font-size: 11px;
  display: flex;
}

.sah-menu-inner {
  z-index: 1;
  flex: 1;
  position: relative;
}

/* Staggered rise-in for overlay children once the wipe lands. */
.sah-menu .sah-stagger {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 360ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.sah-menu-open .sah-menu .sah-stagger {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(240ms + var(--i, 0) * 45ms);
}

/* Header row inside the overlay mirrors the navbar, so when the panel
   wipes down over it the logo appears to stay put and the hamburger
   becomes an X. Gutters match the navbar container at each breakpoint. */
.sah-menu-header {
  flex: none;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--sah-header-top, 25px) var(--sah-gutter, 48px) 14px;
  display: flex;
}

.sah-menu-header img {
  margin-top: 5px;
}

.sah-menu-close {
  appearance: none;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid #7d7d7d;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  position: relative;
}

.sah-menu-close span {
  background-color: #fafafa;
  border-radius: 1px;
  width: 22px;
  height: 2px;
  position: absolute;
}

.sah-menu-close span:first-child {
  transform: rotate(45deg);
}

.sah-menu-close span:last-child {
  transform: rotate(-45deg);
}

/* The fresh hamburger button doesn't carry .w-nav-button, so it needs
   Webflow's show/hide breakpoints re-stated. */
.sah-menu-btn {
  appearance: none;
  cursor: pointer;
  background-color: transparent;
  border: none;
  display: none;
}

.sah-burger {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: 24px;
  height: 20px;
  display: flex;
}

.sah-burger span {
  background-color: #fafafa;
  border-radius: 1px;
  width: 24px;
  height: 2px;
}

@media (max-width: 991px) {
  .sah-menu-btn {
    display: inline-flex;
  }
}

@media (min-width: 992px) {
  .sah-menu {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sah-menu,
  html.sah-menu-open .sah-menu,
  .sah-menu .sah-stagger,
  html.sah-menu-open .sah-menu .sah-stagger {
    transition-duration: 1ms;
    transition-delay: 0s;
  }
}

/* --- Services carousel: descriptions and working arrows (all pages) --- */

/* Webflow only binds arrows that are direct children of the .w-slider,
   but the design puts them in the control row below it. These native
   arrows stay invisible; js/site.js forwards clicks from the visible
   pair. Kept in the layout (not display:none) so Webflow still treats
   them as bindable controls. */
.sah-slider-arrow {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  position: absolute;
}

/* The export shipped the card overlay at #0003, far too light to carry
   text — slide 7's leftover heading was invisible on its photo. Scoped
   to slide-3 so the hero slider's overlay is untouched. */
.parallax-slide-3 .parallax-card-inner {
  background-image: linear-gradient(180deg, #0000 45%, #000c);
  justify-content: flex-start;
}

.service-card-desc {
  color: #fafafa;
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 21px;
}

/* The whole card opens its service page, not just the + chip: the chip's
   link stretches over the card. js/site.js swallows the click that ends
   a swipe so dragging the carousel never navigates. */
.parallax-slide-3 {
  position: relative;
  cursor: pointer;
}

.link-block-6.service::after {
  content: "";
  position: absolute;
  inset: 0;
}

.parallax-slide-3 .image-cover {
  transition: transform .5s ease;
}

.link-block-6.service {
  transition: background-color .2s ease, border-color .2s ease;
}

.link-block-6.service img {
  transition: filter .2s ease;
}

@media (hover: hover) {
  .parallax-slide-3:hover .image-cover {
    transform: scale(1.04);
  }

  .parallax-slide-3:hover .link-block-6.service {
    background-color: #c64900;
    border-color: #c64900;
  }

  .parallax-slide-3:hover .link-block-6.service img {
    filter: brightness(0) invert(1);
  }
}

.link-block-6.service:focus-visible {
  background-color: #c64900;
  border-color: #c64900;
}

.link-block-6.service:focus-visible img {
  filter: brightness(0) invert(1);
}

/* Arrow buttons site-wide: on hover only the arrow box fills with the
   accent and its arrow goes white; the label half stays as it is. Hover
   is gated to real pointers so a tap doesn't leave a phone stuck orange.
   .dark-bg boxes sit on dark sections and take the brighter accent. */
.div-block-19,
.link-block-6.sah-carousel-prev,
.link-block-6.sah-carousel-next {
  transition: background-color .2s ease, border-color .2s ease;
}

.div-block-19 img,
.link-block-6.sah-carousel-prev img,
.link-block-6.sah-carousel-next img {
  transition: filter .2s ease;
}

@media (hover: hover) {
  .button-new:hover .div-block-19,
  .link-block-6.sah-carousel-prev:hover,
  .link-block-6.sah-carousel-next:hover {
    background-color: #c64900;
  }

  .link-block-6.sah-carousel-prev:hover,
  .link-block-6.sah-carousel-next:hover {
    border-color: #c64900;
  }

  .button-new:hover .div-block-19.dark-bg {
    background-color: #fa4c0a;
  }

  .button-new:hover .div-block-19 img,
  .link-block-6.sah-carousel-prev:hover img,
  .link-block-6.sah-carousel-next:hover img {
    filter: brightness(0) invert(1);
  }
}

.button-new:focus-visible .div-block-19,
.link-block-6.sah-carousel-prev:focus-visible,
.link-block-6.sah-carousel-next:focus-visible {
  background-color: #c64900;
}

.button-new:focus-visible .div-block-19.dark-bg {
  background-color: #fa4c0a;
}

.button-new:focus-visible .div-block-19 img,
.link-block-6.sah-carousel-prev:focus-visible img,
.link-block-6.sah-carousel-next:focus-visible img {
  filter: brightness(0) invert(1);
}

/* Arrow buttons are functional now — give them a finger-sized face.
   They were <a> tags; as <button>s they need the UA chrome stripped. */
.link-block-6.sah-carousel-prev,
.link-block-6.sah-carousel-next {
  appearance: none;
  cursor: pointer;
  background-color: transparent;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font: inherit;
  display: inline-flex;
}

/* Keep the glyph at the size of the arrow chip on .button-new (18px face)
   rather than letting it fill the whole 44px button. */
.link-block-6.sah-carousel-prev img,
.link-block-6.sah-carousel-next img {
  width: 18px;
  height: auto;
}

/* --- WhatsApp widget (built by site.js) ---
   Square, hairline-framed and dark to match the site; only the glyph
   carries WhatsApp green so it is recognisable at a glance. Sits below
   the mobile menu (990). */
.sah-wa {
  z-index: 980;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  display: flex;
  position: fixed;
  right: 24px;
  bottom: 24px;
}

.sah-wa-toggle {
  color: #25d366;
  cursor: pointer;
  background-color: #292926;
  border: 1px solid #55554f;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  display: flex;
  box-shadow: 0 6px 18px #0000004d;
}

.sah-wa-toggle svg {
  width: 26px;
  height: 26px;
}

.sah-wa-toggle:hover,
.sah-wa-toggle[aria-expanded="true"] {
  border-color: #fa4c0a;
}

.sah-wa-card {
  background-color: #333;
  border: 1px solid #55554f;
  width: 320px;
  max-width: calc(100vw - 48px);
  padding: 20px;
  position: relative;
  box-shadow: 0 10px 30px #00000059;
}

.sah-wa-card[hidden] {
  display: none;
}

/* The orange strap tick used on the site's hairlines. */
.sah-wa-card::before {
  content: "";
  background-color: #fa4c0a;
  width: 44px;
  height: 2px;
  position: absolute;
  top: -1px;
  left: 20px;
}

.sah-wa-head {
  border-bottom: 1px solid #55554f;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 14px;
  display: flex;
}

.sah-wa-eyebrow {
  color: #fa4c0a;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  font-family: Roboto Mono, sans-serif;
  font-size: 11px;
}

.sah-wa-title {
  color: #fafafa;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.sah-wa-close {
  color: #d3d3ce;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 2px 4px;
  font-size: 14px;
  line-height: 1;
}

.sah-wa-close:hover {
  color: #fa4c0a;
}

.sah-wa-copy {
  color: #d3d3ce;
  margin-bottom: 18px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}

.sah-wa-start {
  color: #fafafa;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: #c64900;
  border: 1px solid #c64900;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  font-family: Roboto Mono, sans-serif;
  font-size: 12px;
  text-decoration: none;
  display: flex;
}

.sah-wa-start:hover {
  background-color: #fa4c0a;
  border-color: #fa4c0a;
}

.sah-wa-call {
  color: #fafafa;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid #7d7d7d;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 13px 16px;
  font-family: Roboto Mono, sans-serif;
  font-size: 12px;
  text-decoration: none;
  display: flex;
}

.sah-wa-call:hover {
  color: #fa4c0a;
  border-color: #fa4c0a;
}

.contact-meta a {
  color: inherit;
  text-decoration: none;
}

.contact-meta a:hover {
  color: #fa4c0a;
}

@media screen and (max-width: 479px) {
  .sah-wa {
    right: 16px;
    bottom: 16px;
  }

  .contact-meta > div {
    font-size: 18px;
  }
}

/* --- Image dimensions ---
   Every <img> carries width/height attributes so the browser can reserve
   its space before it loads (no layout shift). :where() keeps this rule at
   zero specificity, so any existing sizing on an image still wins; it only
   stops the height attribute from stretching images whose width is set by
   CSS or capped by max-width. */
:where(img[width][height]) {
  height: auto;
}

/* --- Home services section: keep its breathing room ---
   The export pins this section to exactly 100vh and centres the content,
   so on a short window (a laptop, or any browser with tabs and a bookmarks
   bar) the space above the heading and below the carousel controls
   collapses: 178px at 1728x900 but only 53px at 1440x650. Grow past the
   viewport instead of squeezing, with a floor on the vertical padding.
   Below 992px the responsive rule further down already does this. */
@media screen and (min-width: 992px) {
  .section-services {
    height: auto;
    min-height: 100vh;
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

/* --- Contact details: footer, navbar icons, dropdown call strip ---
   Landline 0808 196 2928 is the call number everywhere; the mobile is
   WhatsApp only (see the widget in js/site.js). */

/* Footer: phone and email sit under the wordmark. The export's
   .footer-wrapper is a flex row, so the brand and its details are
   grouped in a column of their own. */
.footer-brand-block {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.footer-contact {
  flex-direction: column;
  align-items: flex-start;
  margin-top: 18px;
  display: flex;
}

.footer-contact .footer-link {
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 0;
  display: inline-flex;
}

.footer-contact-icon {
  color: #fa4c0a;
  flex: none;
  width: 15px;
  height: 15px;
}

@media screen and (max-width: 767px) {
  .footer-brand-block,
  .footer-contact {
    align-items: center;
    text-align: center;
  }
}

/* Navbar icons: phone, email, Facebook, Instagram as a quiet cluster
   after the text links, split off by a hairline. Hidden with the rest
   of the Webflow menu below 992px; js/site.js clones them into the
   full-screen menu and puts the phone beside the hamburger instead. */
.sah-nav-icons {
  border-left: 1px solid #55554f;
  align-items: center;
  gap: 2px;
  margin-left: 14px;
  padding-left: 14px;
  display: flex;
}

.sah-nav-icon {
  color: #9a9a94;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: inline-flex;
  transition: color 0.18s;
}

.sah-nav-icon svg {
  width: 18px;
  height: 18px;
}

.sah-nav-icon:hover {
  color: #fa4c0a;
}

/* The tools wrapper (phone + hamburger) must vanish on desktop, or it
   takes the third slot in the navbar's space-between row and pushes
   the menu into the middle. */
.sah-nav-tools {
  display: none;
}

.sah-nav-phone {
  display: none;
}

@media screen and (max-width: 991px) {
  .sah-nav-icons {
    display: none;
  }

  .sah-nav-tools {
    align-items: center;
    display: flex;
  }

  .sah-nav-phone {
    color: #d3d3ce;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    margin-right: 6px;
    display: inline-flex;
  }

  .sah-nav-phone svg {
    width: 22px;
    height: 22px;
  }
}

/* Full-screen menu: the same icons as a row of 44px targets above the
   strap-line. */
.sah-menu-icons {
  border-top: 1px solid #3f3f3b;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  margin-left: -11px;
  padding-top: 14px;
  display: flex;
}

.sah-menu-icons .sah-nav-icon {
  color: #d3d3ce;
  width: 44px;
  height: 44px;
}

.sah-menu-icons .sah-nav-icon svg {
  width: 22px;
  height: 22px;
}

/* Services dropdown: orange "Call now" strip across the foot of the
   panel, inset 1px so the panel's hairline frame still shows. Sits in
   the same media query as the panel restyle. */
@media (min-width: 992px) {
  .sah-dd-call {
    color: #1a1a18;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: #fa4c0a;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin: 8px 1px 1px;
    padding: 14px 18px;
    font-family: Roboto Mono, sans-serif;
    font-size: 11px;
    text-decoration: none;
    display: flex;
    transition: background-color 0.18s;
  }

  .sah-dd-call strong {
    letter-spacing: 0.5px;
    font-size: 14px;
    font-weight: 700;
  }

  .sah-dd-call strong::after {
    content: "\2192";
    margin-left: 10px;
    display: inline-block;
    transition: transform 0.18s;
  }

  .sah-dd-call:hover {
    background-color: #ff6a2e;
  }

  .sah-dd-call:hover strong::after {
    transform: translateX(4px);
  }

  .nav-dropdown-list.w--open {
    padding-bottom: 0;
  }
}