/** Site Theme Tokens **/

:root {
    --core-accent: var(--color-blue);
}


/** Site Custom Stylesheet (From File) **/ 



 /** Site Custom Styles (From DB) **/ 

/* ============================================================
   All Metal Solutions — site styles
   Tokens, utilities, header/footer, and per-section rules.
   ============================================================ */ :root  {
  /* --- Brand palette (primitive names) --- */ --color-navy: #263672;
  --color-navy-dark: #1c2a5c;
  --color-blue: #244ca3;
  --color-blue-dark: #1d3d82;
  --color-sky: #4495d7;
  --color-sky-light: #74b0e1;
  --color-heading: #1d1d1d;
  --color-charcoal: #221e20;
  --color-ink: #080708;
  --color-ink-card: #15161a;
  --color-gray: #373737;
  --color-gray-soft: #676767;
  --color-gray-light: #ededed;
  --color-gray-lighter: #f5f5f5;
  --color-line: #e2e6ec;
  --color-gold: #f5b50a;
  /* --- Semantic anchors --- */ --color-brand: var(--color-navy);
  --color-text: var(--color-charcoal);
  --color-bg: #ffffff;
  /* --- Form field tokens (migrated to --core-form-* prefix) --- */ --core-form-field-bg: #ffffff;
  --core-form-field-text-color: #221e20;
  --core-form-field-border: #c8cdd6;
  --core-form-field-bg-disabled: #f3f3f3;
  --core-form-field-text-disabled: #9a9a9a;
}
/* --- Background utility classes --- */ .bg-navy  {
  background-color: var(--color-navy);
}
.bg-navy-dark  {
  background-color: var(--color-navy-dark);
}
.bg-blue  {
  background-color: var(--color-blue);
}
.bg-sky  {
  background-color: var(--color-sky);
}
.bg-sky-light  {
  background-color: var(--color-sky-light);
}
.bg-charcoal  {
  background-color: var(--color-charcoal);
}
.bg-ink  {
  background-color: var(--color-ink);
}
.bg-ink-card  {
  background-color: var(--color-ink-card);
}
.bg-gray-light  {
  background-color: var(--color-gray-light);
}
.bg-gray-lighter  {
  background-color: var(--color-gray-lighter);
}
.bg-white  {
  background-color: #ffffff;
}
/* ============================================================
   Smooth scrolling
   ============================================================ */ html  {
  scroll-behavior: smooth;
}
/* ============================================================
   Hero logo marquee — keyframes defined site-wide so the
   animation name is guaranteed to resolve (section-scoped
   style columns can mangle/drop @keyframes at-rules, which
   silently stops the animation from running).
   ============================================================ */ @keyframes hero-logos-scroll  {
  from  {
    transform: translateX(0);
  }
  to  {
    transform: translateX(-50%);
  }
}
/* ============================================================
   Base typography
   ============================================================ */ body  {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: var(--text-size-reg);
  letter-spacing: -0.02em;
  overflow-x: hidden;
}
h1, h2, h3, h4  {
  font-family: 'Archivo', 'Inter', sans-serif;
  margin: 0;
  line-height: 1.1;
  color: var(--color-heading);
}
p  {
  margin: 0;
}
a  {
  color: inherit;
}
img  {
  display: block;
  max-width: 100%;
}
/* Eyebrow label */ .eyebrow  {
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight-medium);
  font-size: var(--text-size-lg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: 0.75rem;
}
/* Big section heading */ .section-title  {
  font-family: 'Archivo', sans-serif;
  font-weight: var(--font-weight-xbold);
  font-size: clamp(2rem, 4vw, 3.5rem);
  text-transform: uppercase;
  letter-spacing: -0.018em;
  color: var(--color-heading);
}
.section-title em  {
  font-style: italic;
}
.section-intro  {
  font-size: var(--text-size-lg);
  color: var(--color-gray);
  max-width: 70ch;
}
/* On dark sections */ .is-dark, .is-dark .section-title  {
  color: #fff;
}
.is-dark .eyebrow  {
  color: var(--color-sky-light);
}
.is-dark .section-intro  {
  color: #f3f3f3;
}
/* ============================================================
   Buttons
   ============================================================ */ .btn  {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight-medium);
  font-size: var(--text-size-lg);
  text-decoration: none;
  border: none;
  transition: background-color 0.2s ease, transform 0.1s ease;
  cursor: pointer;
}
.btn-blue  {
  background: var(--color-blue);
  color: #fff;
}
.btn-blue:hover  {
  background: var(--color-blue-dark);
}
.btn-navy  {
  background: var(--color-navy);
  color: #fff;
}
.btn-navy:hover  {
  background: var(--color-navy-dark);
}
/* ============================================================
   Checklist (tick + text)
   ============================================================ */ .checklist  {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.checklist li  {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--text-size-lg);
  color: var(--color-gray);
}
.checklist svg  {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--color-blue);
}
.is-dark .checklist li  {
  color: #f3f3f3;
}
.is-dark .checklist svg  {
  color: var(--color-sky);
}
.core-tray-panel  {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}


 /** Content Section Styles **/ 

.content-section-2538  {
  &.content-section  {
    background: #fff;
    border-bottom: 1px solid var(--color-line);
  }
  .content-section-inner  {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .header-main  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .header-logo img  {
    height: 56px;
    width: auto;
  }
  .header-actions  {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
  }
  .header-phone  {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-size-reg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-navy);
    text-decoration: none;
    white-space: nowrap;
  }
  .header-phone svg  {
    width: 18px;
    height: 18px;
    color: var(--color-navy);
  }
  .header-phone:hover  {
    color: var(--color-blue);
  }
  .header-cta  {
    white-space: nowrap;
  }
  @media (max-width: 1279px)  {
    .core-menu  {
      order: 3;
    }
    .header-actions  {
      order: 2;
      margin-left: auto;
    }
    .header-main  {
      gap: 16px;
    }
    .core-menu-extras .btn  {
      width: auto !important;
    }
  }
  @media (max-width: 1023px)  {
    &.content-section  {
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .header-main  {
      gap: 16px;
    }
    .header-actions  {
      gap: 14px;
    }
  }
  @media (max-width: 767px)  {
    &.content-section  {
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .header-main  {
      flex-wrap: nowrap;
      gap: 12px;
    }
    .header-actions  {
      margin-left: auto;
    }
    .header-phone span  {
      display: none;
    }
    .header-cta  {
      display: none;
    }
  }
}
.content-section-2539  {
  &.content-section  {
    color: #fff;
  }
  .content-section-inner  {
    padding-top: 72px;
    padding-bottom: 36px;
  }
  .footer-top  {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 40px 80px;
    align-items: start;
    padding-bottom: 48px;
  }
  .footer-logo img  {
    width: 220px;
    height: auto;
  }
  .footer-blurb  {
    margin-top: 20px;
    color: rgba(255,255,255,0.7);
    font-size: var(--text-size-reg);
    max-width: 300px;
  }
  .footer-col h4  {
    font-family: 'Inter', sans-serif;
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-size-xl);
    color: #fff;
    margin-bottom: 22px;
  }
  .footer-col ul  {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
  }
  .footer-col a  {
    text-decoration: none;
    color: rgba(255,255,255,0.82);
    font-size: var(--text-size-lg);
  }
  .footer-col a:hover  {
    color: #fff;
  }
  .footer-contact  {
    display: grid;
    gap: 16px;
  }
  /* Contact Us column: the neighbouring Our Facilities address is two lines
   (business name + street) starting from the same top, so its street line sits
   ~one line-height below. Tighten the gap between the single-line phone and the
   Email Sales line so Email Sales rises to align with that street row. */ .footer-contact--stacked  {
    gap: 6px;
  }
  .footer-contact .footer-line  {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255,255,255,0.82);
  }
  .footer-contact svg  {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 3px;
    color: rgba(255,255,255,0.6);
  }
  .footer-contact a  {
    text-decoration: none;
    color: rgba(255,255,255,0.82);
  }
  .footer-contact .core-eml-reveal  {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: rgba(255,255,255,0.82);
    cursor: pointer;
    text-align: left;
  }
  .footer-contact .core-eml-reveal:hover  {
    color: #fff;
  }
  /* Our Facilities: enlarge the business name so the street line below it drops
   down and aligns with the Email Sales line in the Contact Us column. */ .footer-contact strong  {
    color: #fff;
    display: block;
    margin-bottom: 6px;
    font-size: var(--text-size-xl);
    line-height: 1.25;
  }
  .footer-bottom  {
    border-top: 1px solid rgba(255,255,255,0.14);
    padding-top: 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .footer-bottom p  {
    color: rgba(255,255,255,0.5);
    font-size: var(--text-size-xs);
  }
  .footer-bottom a  {
    color: rgba(255,255,255,0.5);
    font-size: var(--text-size-xs);
    text-decoration: none;
  }
  .footer-bottom a:hover  {
    color: #fff;
    text-decoration: underline;
  }
  @media (max-width: 1023px)  {
    .footer-top  {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 767px)  {
    .footer-top  {
      grid-template-columns: 1fr;
      justify-items: center;
    }
    .footer-col  {
      text-align: center;
    }
    .footer-contact  {
      justify-items: center;
    }
    .footer-bottom  {
      justify-content: center;
      text-align: center;
    }
    /* Keep the address line's icon snug to the text on portrait mobile */ .footer-contact .footer-line  {
      display: inline-flex;
      justify-content: center;
      text-align: left;
    }
  }
}
.content-section-2540  {
  &.content-section  {
    background: linear-gradient(90deg, rgba(8,7,8,0.9) 0%, rgba(8,7,8,0.62) 42%, rgba(8,7,8,0.18) 100%), url('/site-assets/images/hero-weld.webp') center / cover no-repeat;
    color: #fff;
    min-height: 78vh;
    display: flex;
    align-items: center;
  }
  .content-section-inner  {
    width: 100%;
  }
  .hero-inner  {
    max-width: 100%;
  }
  .eyebrow  {
    color: var(--color-sky-light);
  }
  h1  {
    font-family: 'Archivo', sans-serif;
    font-weight: var(--font-weight-xbold);
    font-size: clamp(2rem, 6.5vw, 4rem);
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    max-width: 20ch;
    overflow-wrap: break-word;
  }
  h1 em  {
    font-style: italic;
  }
  .hero-accent  {
    color: var(--color-sky-light);
  }
  .hero-lede  {
    font-size: var(--text-size-lg);
    color: rgba(255,255,255,0.9);
    max-width: 45rem;
    margin-top: 24px;
  }
  .hero-cta  {
    margin-top: 36px;
  }
  .hero-note  {
    margin-top: 18px;
    color: rgba(255,255,255,0.62);
    font-size: var(--text-size-sm);
    max-width: 34rem;
  }
  .hero-trusted  {
    margin-top: 40px;
  }
  .hero-trusted-label  {
    font-family: 'Archivo', sans-serif;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    color: var(--color-sky);
    letter-spacing: 0.02em;
    margin-bottom: 14px;
  }
  /* Logo marquee — a continuous, seamless, constant-speed scroll.
   Two identical logo groups sit side by side inside the track; the track is
   animated by exactly one group's width (-50% of the track), so the moment the
   first group scrolls fully off, the second (identical) group is in precisely
   the same place — the loop is invisible. A gradient mask fades the logos in and
   out at the edges so items don't pop at the container boundary.
   NOTE: the @keyframes for this live in site-wide custom_styles — a
   section-scoped style column can drop/mangle @keyframes at-rules, which is
   what stopped the animation running. */ .hero-logos-marquee  {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .hero-logos-track  {
    display: flex;
    width: max-content;
    animation: hero-logos-scroll 40s linear infinite;
  }
  /* Pause the marquee while the visitor hovers over it. */ .hero-logos-marquee:hover .hero-logos-track  {
    animation-play-state: paused;
  }
  .hero-logos-group  {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .hero-logos-group .hero-logo-item  {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
  }
  /* Respect reduced-motion — hold the logos still for anyone who prefers it. */ @media (prefers-reduced-motion: reduce)  {
    .hero-logos-track  {
      animation: none;
    }
  }
  .trusted-logo  {
    display: inline-block;
    height: 32px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    opacity: 0.9;
  }
  .trusted-logo-tall  {
    height: 44px;
  }
  /* Force the National Group SVG to flat white so it matches the other
   monochrome-white logos on the dark hero. */ .trusted-logo-mono  {
    filter: brightness(0) invert(1);
  }
  @media (max-width: 1023px)  {
    .hero-logos-group .hero-logo-item  {
      padding: 0 15px;
    }
  }
}
.content-section-2541  {
  .smarter-row  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }
  .smarter-row + .smarter-row  {
    margin-top: 64px;
  }
  .smarter-media  {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    height: 100%;
  }
  .smarter-media img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .smarter-copy h2  {
    margin-bottom: 18px;
  }
  .smarter-copy p:not(.eyebrow)  {
    color: var(--color-gray);
    font-size: var(--text-size-lg);
  }
  .smarter-copy .checklist  {
    margin-top: 24px;
  }
  .smarter-copy .checklist li  {
    color: var(--color-text);
    font-size: var(--text-size-reg);
  }
  .smarter-sub  {
    font-family: 'Archivo', sans-serif;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-size-4xl);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    line-height: 1.15;
    margin-bottom: 16px;
  }
  .smarter-highlight  {
    color: var(--color-blue);
    font-weight: var(--font-weight-semibold);
  }
  /* Second row image cropped to a square (rounded corners preserved by .smarter-media) */ .smarter-row + .smarter-row .smarter-media  {
    aspect-ratio: 1 / 1;
    height: auto;
  }
  .smarter-row + .smarter-row .smarter-media img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Stat banner spanning the full bottom edge of the image */ .smarter-stat  {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--color-blue);
    color: #fff;
    padding: 22px 28px;
    border-radius: 0;
  }
  .smarter-stat .stat-icon-wrap  {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .smarter-stat .stat-icon  {
    width: 46px;
    height: 46px;
    color: #fff;
  }
  .smarter-stat .stat-figure  {
    font-family: 'Archivo', sans-serif;
    font-weight: var(--font-weight-xbold);
    font-size: clamp(2.5rem, 4vw, 3.25rem);
    line-height: 1;
    color: #fff;
    flex: 0 0 auto;
  }
  .smarter-stat .stat-label  {
    font-size: var(--text-size-lg);
    text-transform: uppercase;
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    color: #fff;
  }
  @media (max-width: 1279px)  {
    .smarter-stat .stat-figure  {
      font-size: 40px !important;
    }
  }
  @media (max-width: 1023px)  {
    .smarter-row  {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .smarter-media  {
      min-height: 320px;
    }
    .smarter-stat .stat-figure  {
      font-size: clamp(2.5rem, 4vw, 3.25rem) !important;
    }
  }
  @media (max-width: 639px)  {
    .smarter-stat  {
      left: 0;
      right: 0;
      bottom: 0;
      gap: 14px;
      padding: 16px 18px;
    }
    .smarter-stat .stat-icon  {
      width: 34px;
      height: 34px;
    }
    .smarter-stat .stat-label  {
      font-size: var(--text-size-xs);
    }
  }
}
.content-section-2543  {
  .process-head  {
    text-align: center;
    margin-bottom: 56px;
  }
  .process-head .eyebrow, .process-head .section-title  {
    text-align: center;
  }
  .process-steps  {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    position: relative;
  }
  .process-step  {
    text-align: center;
    position: relative;
  }
  /* Connecting line between each step's number and the next */ .process-step:not(:last-child)::after  {
    content: "";
    position: absolute;
    top: 30px;
    left: calc(50% + 66px);
    width: calc(100% - 108px);
    height: 1px;
    background: var(--color-blue);
    opacity: 0.45;
    z-index: 0;
  }
  .process-num  {
    width: 60px;
    height: 60px;
    margin: 0 auto 24px;
    border-radius: 10px;
    background: var(--color-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo', sans-serif;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-size-4xl);
    position: relative;
    z-index: 1;
  }
  .process-step h3  {
    font-family: 'Archivo', sans-serif;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-size-3xl);
    text-transform: uppercase;
    letter-spacing: -0.03em;
    margin-bottom: 10px;
  }
  .process-step p  {
    color: var(--color-gray);
    font-size: var(--text-size-reg);
  }
  @media (max-width: 1023px)  {
    .process-steps  {
      grid-template-columns: repeat(2, 1fr);
      gap: 36px;
    }
    /* On 2-col layout the horizontal connectors don't line up cleanly — hide them */ .process-step:not(:last-child)::after  {
      display: none;
    }
  }
  @media (max-width: 767px)  {
    .process-steps  {
      grid-template-columns: 1fr;
    }
  }
}
.content-section-2544  {
  .advantage-head  {
    text-align: center;
    max-width: 62rem;
    margin: 0 auto 56px;
  }
  .advantage-head .eyebrow, .advantage-head .section-title  {
    text-align: center;
  }
  .advantage-grid  {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  .adv-card  {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 40px rgba(0,0,0,0.10);
    padding: 34px;
  }
  .adv-icon  {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 24px;
  }
  .adv-icon-svg  {
    color: var(--color-text);
    display: block;
  }
  .adv-card h3  {
    font-family: 'Archivo', sans-serif;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-size-3xl);
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin-bottom: 18px;
    line-height: 1.2;
    border-top: 1px solid var(--color-line);
    padding-top: 24px;
  }
  .adv-card p  {
    color: var(--color-gray);
    font-size: var(--text-size-reg);
  }
  .spec-list  {
    display: grid;
    gap: 10px;
  }
  .spec-row  {
    display: flex;
    align-items: baseline;
    gap: 12px;
    border-top: 1px solid var(--color-line);
    padding-top: 10px;
  }
  .spec-row .spec-num  {
    color: var(--color-blue);
    font-family: 'Archivo', sans-serif;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-size-xl);
    flex: none;
  }
  .spec-row span:last-child  {
    color: var(--color-gray);
    font-size: var(--text-size-sm);
    line-height: 1.4;
  }
  @media (max-width: 1023px)  {
    .advantage-grid  {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 767px)  {
    .advantage-grid  {
      grid-template-columns: 1fr;
    }
  }
}
.content-section-2545  {
  .carousel-head  {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
  }
  .carousel-nav  {
    display: flex;
    gap: 14px;
    align-items: center;
    align-self: flex-end;
    margin-bottom: -18px;
  }
  .carousel-arrow  {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid var(--color-navy);
    background: #fff;
    color: var(--color-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .carousel-arrow svg  {
    width: 22px;
    height: 22px;
  }
  .carousel-arrow:hover  {
    background: var(--color-navy);
    color: #fff;
  }
  /* Desktop shows all 3 slides at once, so the arrows are redundant — hide them
   here and re-show at the tablet/phone breakpoints (see _md) where fewer cards
   are visible and paging is needed. */ .carousel-nav  {
    display: none;
  }
  .industries-intro  {
    color: var(--color-gray);
    font-size: var(--text-size-lg);
    margin-bottom: 36px;
    max-width: 70ch;
  }
  /* Prevent the slider track from causing horizontal page overflow */ &.content-section  {
    overflow-x: hidden;
  }
  /* --- Card-shadow clipping fix ---
   The scroll track clips on all four sides, so the card box-shadow must live
   fully inside the track's padding on EVERY side, at both the resting first/last
   positions (protected by padding) and mid-scroll (protected by the gap).
   The card shadow is 0 14px 30px -12px: horizontal reach ~18px, downward reach
   ~32px, upward reach ~4px. To stop hard-cut edges we give the track padding
   that comfortably clears the shadow on all sides, and a gap >= the horizontal
   reach so the left/right edges of middle cards don't clip while scrolling. */ .slider-track  {
    padding: 16px 28px 38px;
    gap: 28px;
  }
  .slider-dots  {
    margin-top: 4px;
  }
  .industry-card  {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 14px 30px -12px rgba(0,0,0,0.22);
    overflow: hidden;
    height: 100%;
  }
  .industry-card .industry-media img  {
    width: 100%;
    height: 230px;
    object-fit: cover;
  }
  .industry-card .industry-body  {
    padding: 28px;
  }
  .industry-card h3  {
    font-family: 'Archivo', sans-serif;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-size-3xl);
    letter-spacing: -0.04em;
    text-transform: uppercase;
    line-height: 1.15;
    margin-bottom: 20px;
    min-height: 2.3em;
  }
  .industry-card .checklist li  {
    font-size: var(--text-size-reg);
  }
  .industry-dummy .industry-tag  {
    display: inline-block;
    font-size: var(--text-size-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-blue);
    background: var(--color-gray-light);
    border-radius: 4px;
    padding: 4px 10px;
    margin-bottom: 12px;
  }
  @media (max-width: 1023px)  {
    /* Tablet & phones: fewer than 3 cards are visible, so bring the paging arrows
   back. This max-width query cascades down to the phone breakpoints too. */ .carousel-nav  {
      display: flex;
    }
    /* Card-shadow clipping fix for tablet/phone.
   Below 3 visible cards the cards are wider and sit closer to the scroll
   track's clip edges, so the ~18px horizontal shadow reach was hard-cutting on
   the left/right of the outer (and mid-scroll) cards. Give the track a wider
   horizontal gutter and gap so the feathered shadow has room to fade inside the
   clip box on both sides at every scroll position. The slider JS subtracts the
   horizontal padding when sizing cards, so cards just get marginally narrower —
   no extra card peeks in. */ .slider-track  {
      padding-left: 34px;
      padding-right: 34px;
      gap: 34px;
    }
  }
  @media (max-width: 767px)  {
    .carousel-head  {
      flex-direction: column;
      align-items: flex-start;
    }
    /* Row is stacked here — cancel the desktop downward nudge and left-align the arrows */ .carousel-nav  {
      margin-bottom: 0;
      align-self: flex-start;
      justify-content: flex-start;
    }
    /* Portrait / phone: a single card is (near) full-width, so keep a generous
   horizontal gutter and gap so the feathered shadow edge sits comfortably
   inside the clip box on both sides rather than hard-cutting. The downward
   shadow reach (~32px) also needs clearing, so keep the vertical padding. */ .slider-track  {
      padding: 16px 34px 38px;
      gap: 34px;
    }
  }
  @media (max-width: 639px)  {
    /* Smallest phones: keep the same shadow-clearing gutter/gap so the card's
   ~18px horizontal and ~32px downward shadow reach never hard-cuts at the
   track's clip edges. */ .slider-track  {
      padding: 16px 30px 38px;
      gap: 30px;
    }
  }
}
.content-section-2546  {
  .self-assessment-grid  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }
  .self-assessment-media img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    min-height: 420px;
  }
  .self-assessment-copy h2  {
    margin-bottom: 18px;
  }
  .self-assessment-copy .lede  {
    color: #bababa;
    font-size: var(--text-size-lg);
    margin-bottom: 28px;
  }
  .self-assessment-copy .checklist li  {
    font-size: var(--text-size-reg);
  }
  .self-assessment-copy .btn  {
    margin-top: 28px;
  }
  @media (max-width: 1023px)  {
    .self-assessment-grid  {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .self-assessment-media img  {
      height: auto;
      min-height: 0;
    }
  }
}
.content-section-2547  {
  .reviews-head  {
    text-align: center;
    margin-bottom: 48px;
  }
  .reviews-head .eyebrow, .reviews-head .section-title  {
    text-align: center;
  }
  /* Give card shadows room inside the clipping track */ .slider-track  {
    padding: 16px 20px;
    gap: 32px;
  }
  .review-card  {
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 14px 30px -12px rgba(0,0,0,0.15);
    padding: 36px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .review-card--single  {
    padding: 56px 64px;
  }
  .review-stars  {
    display: flex;
    gap: 4px;
    color: var(--color-gold);
    margin-bottom: 26px;
  }
  .review-stars svg  {
    width: 22px;
    height: 22px;
  }
  .review-body  {
    display: grid;
    gap: 20px;
  }
  .review-body p  {
    font-size: var(--text-size-xl);
    color: var(--color-text);
    line-height: 1.6;
    font-weight: var(--font-weight-normal);
  }
  .review-divider  {
    height: 1px;
    background: var(--color-line);
    margin: 30px 0 22px;
  }
  .review-name  {
    font-family: 'Inter', sans-serif;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-size-xl);
    color: #000;
  }
  .review-role  {
    font-size: var(--text-size-reg);
    color: var(--color-gray-soft);
    margin-top: 4px;
    line-height: 1.5;
  }
  /* Slider controls */ .slider-controls  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
    padding: 0 20px 16px;
  }
  .slider-dots  {
    margin-top: 0;
  }
  .slider-dot  {
    width: 10px;
    height: 10px;
    background: #c7ccd4;
  }
  .slider-dot.active  {
    background: var(--color-blue);
  }
  .slider-arrows  {
    display: flex;
    gap: 12px;
  }
  .slider-prev, .slider-next  {
    width: 48px;
    height: 48px;
    background: #fff;
    color: var(--color-navy);
    box-shadow: 0 6px 16px -6px rgba(0,0,0,0.25);
  }
  .slider-prev:hover, .slider-next:hover  {
    background: var(--color-blue);
    color: #fff;
  }
  .slider-prev svg, .slider-next svg  {
    width: 20px;
    height: 20px;
  }
  @media (max-width: 767px)  {
    /* Phone: the review card's shadow (0 14px 30px -12px, ~18px horizontal /
   ~32px downward reach) was hard-cutting because the track padding/gap here
   was tighter than the shadow. Give the track enough gutter and gap on all
   sides for the feathered edge to fade inside the clip box. */ .slider-track  {
      padding: 16px 24px 34px;
      gap: 24px;
    }
    .review-card--single  {
      padding: 32px 24px;
    }
    .review-body p  {
      font-size: var(--text-size-lg);
    }
    .slider-controls  {
      padding: 0 8px;
    }
  }
}
.content-section-2548  {
  .locations-grid  {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
  }
  .locations-copy h2  {
    margin: 14px 0 22px;
    font-size: clamp(1.75rem, 3.4vw, 3rem);
  }
  .locations-copy p:not(.eyebrow)  {
    color: var(--color-gray);
    font-size: var(--text-size-lg);
  }
  .location-cards  {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .location-cards-single  {
    grid-template-columns: 1fr;
    width: 580px;
  }
  .location-card  {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(0,0,0,0.08);
    overflow: hidden;
  }
  .location-card img  {
    width: 100%;
    height: auto;
    display: block;
  }
  .location-card .location-body  {
    padding: 20px;
  }
  .location-card h3  {
    font-family: 'Archivo', sans-serif;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-size-2xl);
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--color-heading);
    margin-bottom: 8px;
  }
  .location-card p  {
    color: var(--color-gray);
    font-size: var(--text-size-reg);
  }
  @media (max-width: 1023px)  {
    .locations-grid  {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .location-cards-single  {
      width: 100%;
    }
  }
  @media (max-width: 767px)  {
    .location-cards-single  {
      width: 100%;
    }
  }
}
.content-section-2550  {
  background: linear-gradient(rgba(8,7,8,0.82), rgba(8,7,8,0.82)), url('/site-assets/images/enquiry-bg.webp') center / cover no-repeat;
  &.content-section  {
    text-align: center;
  }
  .content-section-inner > *  {
    margin-left: auto;
    margin-right: auto;
  }
  h2  {
    margin: 8px auto 20px;
    max-width: 22ch;
  }
  .cta-lede  {
    color: rgba(255,255,255,0.85);
    font-size: var(--text-size-lg);
    max-width: 48rem;
  }
  .btn  {
    margin-top: 32px;
  }
  .cta-contact  {
    margin-top: 26px;
    color: rgba(255,255,255,0.9);
    font-size: var(--text-size-lg);
  }
  .cta-contact a  {
    color: #fff;
    text-decoration: underline;
  }
  .cta-contact .core-eml-reveal  {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--text-size-lg);
  }
}
.content-section-2551  {
  .wherever-head  {
    text-align: center;
    max-width: 62rem;
    margin: 0 auto 44px;
  }
  .wherever-head .eyebrow, .wherever-head .section-title  {
    text-align: center;
  }
  .wherever-head .section-intro  {
    margin: 16px auto 0;
    color: #bababa;
  }
  .wherever-cards  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .wherever-card  {
    background: var(--color-ink-card);
    border-radius: 20px;
    overflow: hidden;
  }
  .wherever-card img  {
    width: 100%;
    height: 240px;
    object-fit: cover;
  }
  .wherever-card img.pos-high  {
    object-position: center 30%;
  }
  .wherever-card .wherever-body  {
    padding: 30px;
  }
  .wherever-card h3  {
    font-family: 'Archivo', sans-serif;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-size-4xl);
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 10px;
  }
  .wherever-card p  {
    color: #bababa;
    font-size: var(--text-size-lg);
  }
  .wherever-footer  {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--color-ink-card);
    border-radius: 20px;
    padding: 28px 32px;
  }
  .wherever-footer p  {
    color: #f3f3f3;
    font-size: var(--text-size-lg);
    max-width: 62ch;
  }
  @media (max-width: 1023px)  {
    .wherever-cards  {
      grid-template-columns: 1fr;
    }
  }
}
.content-section-2552  {
  background: linear-gradient(rgba(8,7,8,0.82), rgba(8,7,8,0.82)), url('/site-assets/images/enquiry-bg.webp') center / cover no-repeat;
  &.content-section  {
    text-align: center;
  }
  .content-section-inner > *  {
    margin-left: auto;
    margin-right: auto;
  }
  h2  {
    margin: 8px auto 20px;
    max-width: 22ch;
  }
  .cta-lede  {
    color: rgba(255,255,255,0.85);
    font-size: var(--text-size-lg);
    max-width: 48rem;
  }
  .btn  {
    margin-top: 32px;
  }
  .cta-contact  {
    margin-top: 26px;
    color: rgba(255,255,255,0.9);
    font-size: var(--text-size-lg);
  }
  .cta-contact a  {
    color: #fff;
    text-decoration: underline;
  }
  .cta-contact .core-eml-reveal  {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--text-size-lg);
  }
}