/* ==========================================================================
   Prime Medical Inc. — THUASNE-style layer (client feedback, point 1)
   Loaded after styles.css on every page. Reference: thuasne.com
   - one dominant brand blue, square photos and cards, pill buttons
   - big headings in blue, "light + bold" word pairs, few eyebrow labels
   - blue page banners with the photo cut on a diagonal
   1. Tokens & type      5. Cards & tiles
   2. Buttons            6. Inner page banners
   3. Home hero slider   7. Product carousel
   4. Figures band, split 8. Misc components
   ========================================================================== */

/* ---------- 1. Tokens & type ---------- */
:root {
  --radius: 0px;
  --tx-panel: var(--blue);
  --tx-band: #eef2f8;
  --tx-diag: 14%; /* how far the diagonal photo edge leans in */
}
body {
  color: #343a46;
}
.h2 {
  color: var(--blue);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem);
}
/* THUASNE pairs a regular word with a bold one: "Our **Locations**" */
.h2:has(strong) {
  font-weight: 400;
}
.h2 strong {
  font-weight: 800;
  color: var(--blue);
}
.prose h2,
.member-name,
.card-title,
.pcard-name,
.office-name,
.pd h1 {
  color: var(--blue);
}
/* section eyebrow labels are dropped; the heading carries the section */
.section-head .label {
  display: none;
}
.section-head {
  margin-bottom: 36px;
}

/* ---------- 2. Buttons: pills ---------- */
.btn {
  border-radius: 40px;
  padding: 14px 30px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.btn-sm {
  padding: 11px 22px;
}
.btn-line {
  border: 2px solid var(--blue);
  color: var(--blue);
  background: transparent;
}
.btn-line:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn-white {
  color: var(--blue);
  border: 2px solid #fff;
}
.btn-white:hover {
  background: transparent;
  color: #fff;
  transform: none;
  box-shadow: none;
}
.btn-ghost-w {
  border-width: 2px;
}
.pcard-cta,
.f-btn {
  border-radius: 40px;
}

/* ---------- 3. Home hero slider ---------- */
.tx-hero {
  position: relative;
  margin-top: var(--nav-h);
  background: var(--tx-panel);
  color: #fff;
  overflow: hidden;
}
.tx-slides {
  display: grid;
}
.tx-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-rows: auto 1fr;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}
.tx-slide.is-active {
  opacity: 1;
  visibility: visible;
}
.tx-slide-img {
  width: 100%;
  height: 46vh;
  min-height: 260px;
  object-fit: cover;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}
.tx-slide-text {
  padding: 28px var(--gutter) 120px;
}
.tx-slide-title {
  font-size: clamp(2.3rem, 1.6rem + 3vw, 3.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.tx-accent {
  color: #ff6b74;
}
.tx-slide-sub {
  margin-top: 16px;
  max-width: 520px;
  font-size: 1.12rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
}
.tx-slide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
/* text rises in when its slide becomes active */
.tx-slide .tx-slide-text > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.tx-slide.is-active .tx-slide-text > * {
  opacity: 1;
  transform: none;
}
.tx-slide.is-active .tx-slide-text > :nth-child(2) { transition-delay: 0.1s; }
.tx-slide.is-active .tx-slide-text > :nth-child(3) { transition-delay: 0.2s; }
.tx-controls {
  position: absolute;
  left: var(--gutter);
  bottom: 36px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
}
.tx-arrow {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.tx-arrow svg {
  width: 18px;
  height: 18px;
}
.tx-arrow:hover {
  background: #fff;
  border-color: #fff;
  color: var(--blue);
}
/* story-style segment bars: done = full, current fills, next = empty */
.tx-segs {
  display: flex;
  gap: 8px;
}
.tx-seg {
  width: 44px;
  padding: 18px 0; /* 40px tall tap area around a 4px bar */
  border: 0;
  background: none;
  cursor: pointer;
}
.tx-seg span {
  position: relative;
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.32);
  overflow: hidden;
}
.tx-seg span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform-origin: left;
  transform: scaleX(0);
}
.tx-seg.is-done span::after,
.tx-seg.is-current span::after {
  transform: scaleX(1);
}
.tx-seg.is-running span::after {
  animation: tx-seg-fill var(--slide-ms, 6500ms) linear forwards;
}
.tx-seg:hover span {
  background: rgba(255, 255, 255, 0.55);
}
@keyframes tx-seg-fill {
  to { transform: scaleX(1); }
}
@media (min-width: 1024px) {
  .tx-seg {
    width: 56px;
  }
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .tx-slides {
    min-height: min(calc(100svh - var(--nav-h)), 720px);
  }
  .tx-slide {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    align-items: center;
  }
  .tx-slide-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 56%;
    height: 100%;
    min-height: 0;
    clip-path: polygon(var(--tx-diag) 0, 100% 0, 100% 100%, 0 100%);
  }
  .tx-slide-text {
    position: relative;
    z-index: 1;
    width: 48%;
    padding: 64px 0 140px max(var(--gutter), calc((100vw - 1240px) / 2));
  }
  .tx-controls {
    left: max(var(--gutter), calc((100vw - 1240px) / 2));
    bottom: 56px;
  }
}

/* ---------- 4. Figures band + image/text split ---------- */
.tx-stats {
  background: var(--tx-band);
  padding: 34px var(--gutter);
}
.tx-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 0;
}
.tx-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 18px;
  border-left: 2px solid rgba(18, 83, 164, 0.25);
}
.tx-stat-num {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: 800;
  color: var(--blue);
  line-height: 1.1;
}
.tx-stat-lbl {
  font-size: 0.98rem;
  font-weight: 600;
  color: #343a46;
  line-height: 1.4;
}
@media (min-width: 900px) {
  .tx-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.tx-stats-grid .tx-stat:last-child:nth-child(odd) {
  grid-column: 1 / -1; /* 3 figures on a 2-col phone grid: last one spans */
}
@media (min-width: 900px) {
  .tx-stats-grid .tx-stat:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* Certification logos. The artwork is white, so on light bands it is inked
   dark with a filter and comes to full strength on hover. */
.tx-certs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(18, 83, 164, 0.15);
}
.tx-certs-h {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.cert-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cert img {
  display: block;
  width: auto;
  filter: brightness(0);
  opacity: 0.72;
  transition: opacity 0.2s ease;
}
.cert:hover img {
  opacity: 1;
}
.cert-wide img { height: 26px; }
.cert-mark img { height: 32px; }
.cert-seal img { height: 46px; }
@media (min-width: 400px) {
  .cert-list { gap: 14px 22px; }
}
.cert-list--inline {
  margin: 18px 0 14px;
}
@media (min-width: 900px) {
  .tx-certs {
    justify-content: center;
    gap: 14px 40px;
  }
  .cert-list { gap: 16px 40px; }
  .cert-wide img { height: 34px; }
  .cert-mark img { height: 42px; }
  .cert-seal img { height: 60px; }
}
/* "Who We Are": a regular section inside the page width (same edges and
   padding as Our Locations / Our Products), square photo like the tiles,
   on the light band so it alternates with the white sections around it */
.tx-split {
  background: var(--tx-band);
}
.tx-split-grid {
  display: grid;
  gap: 32px;
  align-items: center;
}
.tx-split-media img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}
.tx-split-text .btn {
  margin-top: 28px;
}
.tx-split-text .body-text {
  font-size: 1.12rem;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .tx-split-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
  }
  .tx-split-media img {
    height: 420px;
  }
  .tx-split-text .body-text {
    font-size: 1.18rem;
  }
}

/* ---------- 5. Cards & tiles: square edges ---------- */
.card,
.pcard,
.member,
.office,
.region,
.form-card,
.dark-box,
.pd-media,
.dl-item,
.gallery figure,
.card-media,
.pcard-img,
.badge,
.prose img {
  border-radius: 0;
}
/* location tiles ("Thuasne at your side"): taller photos, text on the photo */
.region {
  min-height: 340px;
  padding: 28px;
}
.region-name {
  font-size: 1.8rem;
}
@media (min-width: 1024px) {
  .region {
    min-height: 420px;
  }
}
/* product cards: tall image well, blue title, lighter frame */
.pcard {
  border-color: #e6ebf2;
}
.pcard-img {
  height: 240px;
  background: #f3f6fa;
}
.pcard-name {
  font-size: 1.12rem;
  font-weight: 700;
}
.prod-grid {
  gap: 16px;
}
/* team photos stay round on purpose */
.member-photo {
  border-radius: 50%;
}
/* office cards: blue top rule instead of side bar */
.office::before {
  width: 100%;
  height: 4px;
}

/* ---------- 6. Inner page banners ----------
   Full-width photo under the dark-blue tint from styles.css (section 8) on
   every inner page; only the heading weight follows the theme. */
.page-hero h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* lead sentence under a short banner title; kept narrow so it stays on the
   tinted side and clear of any lettering in the photo */
.page-hero .hero-lead {
  max-width: 560px;
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
}
/* banner photos with their own lettering: deeper tint so the two texts
   don't compete; on phones the lettering is pushed out of frame */
.page-hero--busy::after {
  background: linear-gradient(100deg, rgba(8, 36, 77, 0.96) 0%, rgba(8, 36, 77, 0.9) 55%, rgba(8, 36, 77, 0.7) 100%);
}
@media (max-width: 767px) {
  .page-hero--busy > img {
    object-position: 12% center;
  }
  .page-hero--busy::after {
    background: rgba(8, 36, 77, 0.8);
  }
}

/* ---------- 7. Product carousel ("Discover our iconic products") ---------- */
.tx-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.tx-track::-webkit-scrollbar {
  display: none;
}
.tx-track:focus-visible {
  outline: 3px solid rgba(18, 83, 164, 0.4);
  outline-offset: 4px;
}
.tx-track > .pcard {
  scroll-snap-align: start;
  opacity: 1;
  transform: none;
}
.tx-track > .pcard:hover {
  transform: translateY(-4px);
}
.tx-track .pcard-img {
  height: 280px;
}
.tx-carousel-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.tx-progress {
  flex: 1;
  height: 3px;
  background: #dfe5ee;
  overflow: hidden;
}
.tx-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--blue);
  transform-origin: left;
  transform: scaleX(0.25);
  transition: transform 0.3s var(--ease);
}
.tx-arrow-dark {
  border-color: rgba(18, 83, 164, 0.35);
  color: var(--blue);
}
.tx-arrow-dark:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.tx-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  background: transparent;
  color: inherit;
}
@media (min-width: 640px) {
  .tx-track { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (min-width: 900px) {
  .tx-track { grid-auto-columns: calc((100% - 32px) / 3); }
}
@media (min-width: 1200px) {
  .tx-track { grid-auto-columns: calc((100% - 48px) / 4); }
}

/* ---------- 8. Misc components ---------- */
.cta-band::before,
.cta-band::after {
  display: none;
}
.bg-2,
.bg-3 {
  background: var(--tx-band);
}
.filter-row .f-btn {
  padding: 10px 18px;
  font-size: 0.78rem;
}

/* ---------- 9. Red / blue balance ----------
   #A0010B (--red) and #1253A4 (--blue) share the large areas roughly equally:
   alternating hero slides, banners by section, red CTA band, two-colour headings. */

/* hero: each slide paints its own panel; slides 2 and 4 are red */
.tx-slide {
  background: var(--blue);
}
.tx-slide--red {
  background: var(--red);
}
.tx-slide--red .tx-accent {
  color: #fff;
}

/* page banners: red for About and Shop Now sections, blue for Products, Downloads,
   New Projects and Contacts */
body[data-page="about"],
body[data-page="shop-now"],
body[data-page="home"] {
  --tx-panel: var(--red);
}

/* call-to-action band: opposite colour to the page banner so every page shows both */
.cta-band {
  background: var(--red);
}
body[data-page="about"] .cta-band,
body[data-page="shop-now"] .cta-band,
body[data-page="home"] .cta-band {
  background: var(--blue);
}

/* headings: regular word in blue, bold word in red ("Our **Locations**") */
.h2 strong {
  color: var(--red);
}

/* figures band: alternate the colour of the numbers and dividers */
.tx-stat:nth-child(even) {
  border-left-color: rgba(160, 1, 11, 0.35);
}
.tx-stat:nth-child(even) .tx-stat-num {
  color: var(--red);
}

/* product cards: red interaction state, red "View details" on hover */
.pcard:hover {
  border-color: rgba(160, 1, 11, 0.35);
}
.pcard:hover .pcard-cta {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.pcard-cat {
  color: var(--red);
}
/* product names in near-black so the red label and blue frame stay balanced */
.pcard-name {
  color: var(--ink);
}

/* product carousel progress + arrows */
.tx-progress span {
  background: var(--red);
}
.tx-arrow-dark:hover {
  background: var(--red);
  border-color: var(--red);
}

/* office cards and team names alternate colours */
.office:nth-child(even)::before {
  background: var(--red);
}
.member:nth-child(even) .member-name {
  color: var(--red);
}
.member:nth-child(even) .member-role {
  color: var(--blue);
}

/* outline buttons and links turn red on hover */
.btn-line:hover {
  background: var(--red);
  border-color: var(--red);
}
.prose a:hover,
.ci-row a:hover {
  color: var(--red);
}

/* footer: red top edge and red link hovers frame the dark-blue footer */
.site-footer {
  border-top: 6px solid var(--red);
}
.f-links a:hover {
  color: #ff9aa0;
}

/* ---------- Our Leading Brands: three brand cards (Home) ----------
   Square cards like the rest of Home; whole card is the link (via the name). */
.brand-grid {
  display: grid;
  gap: 20px;
}
.brand-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-top: 4px solid var(--blue);
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
}
.brand-card:nth-child(2) {
  border-top-color: var(--red);
}
.brand-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.brand-media {
  height: 240px;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--tx-band);
  overflow: hidden;
}
.brand-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.5s var(--ease);
}
.brand-card:hover .brand-media img {
  transform: scale(1.06);
}
.brand-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}
.brand-name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.brand-name a {
  color: var(--blue);
  text-decoration: none;
}
.brand-name a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.brand-card:nth-child(2) .brand-name a {
  color: var(--red);
}
.brand-sub {
  margin-top: 8px;
  flex: 1;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}
.brand-link svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s;
}
.brand-card:hover .brand-link {
  color: var(--red);
}
.brand-card:hover .brand-link svg {
  transform: translateX(4px);
}
@media (min-width: 640px) {
  .brand-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .brand-media {
    height: 200px;
  }
  .brand-name {
    font-size: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .brand-grid {
    gap: 24px;
  }
  .brand-media {
    height: 280px;
  }
  .brand-name {
    font-size: 1.6rem;
  }
}

/* ---------- 10. Readability & touch (older visitors, phones) ----------
   Text floor around 12.5-14px and tap areas of at least 40px, from the
   mobile audit. Sizes only; no layout changes. */
.mob-label,
.member-role,
.office-tag,
.card-kicker,
.card-link,
.duration,
.ph,
.opt,
.opt-lbl,
.lightbox-open {
  font-size: 0.8rem;
}
.label,
.crumbs,
.region-go,
.stat-lbl,
.f-col-h,
.f-btn,
.fl,
.footer-bottom {
  font-size: 0.85rem;
}
.pcard-cat {
  font-size: 0.78rem;
}
/* product "NEW" badge; scoped because the footer certification tiles also
   use .badge and their transparent tile style was hiding the red label */
.pcard .badge,
.pd .badge {
  display: inline-block;
  height: auto;
  padding: 4px 9px;
  border: 0;
  background: var(--red);
  color: #fff;
  font-size: 0.72rem;
}
.pcard-cta,
.pcard .pcard-cta.shop {
  font-size: 0.78rem;
  padding: 11px 18px;
}
/* footer + contact links: taller hit areas, same visual spacing */
.f-links {
  gap: 0;
}
.f-links a,
.f-office a,
.footer-bottom a,
.ci-row a,
.crumbs a {
  display: inline-block;
  padding: 10px 0;
}
.f-office a {
  padding: 8px 0;
}
.count-note {
  font-size: 0.9rem;
}
.socials a,
.mob-foot .socials a {
  width: 44px;
  height: 44px;
}
.socials svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 767px) {
  .btn {
    font-size: 0.88rem;
    padding: 15px 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tx-slide,
  .tx-slide .tx-slide-text > * {
    transition: none;
  }
  .tx-track {
    scroll-behavior: auto;
  }
}

/* ---------- 11. Site loader (once per visit) ----------
   White screen with the Prime logo and a red-to-blue line; lifts away like
   a curtain when the page has loaded. Skipped on later pages of the visit. */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: #fff;
  transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1), visibility 0.7s;
}
.no-loader .site-loader {
  display: none;
}
.site-loader-logo {
  width: 180px;
  height: auto;
  animation: loader-logo-in 0.6s var(--ease) both;
}
.site-loader-bar {
  width: 200px;
  height: 4px;
  border-radius: 2px;
  background: #e6ebf2;
  overflow: hidden;
}
.site-loader-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--blue));
  transform-origin: left;
  transform: scaleX(0);
  /* fills most of the way while loading; finishes when the page is ready */
  animation: loader-fill 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.site-loader.is-done .site-loader-bar span {
  animation: none;
  transform: scaleX(1);
  transition: transform 0.25s ease-out;
}
.site-loader.is-leaving {
  transform: translateY(-100%);
  visibility: hidden;
}
html:not(.no-loader) body.loader-on {
  overflow: hidden;
}
@keyframes loader-logo-in {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes loader-fill {
  to { transform: scaleX(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .site-loader {
    transition: opacity 0.3s, visibility 0.3s;
  }
  .site-loader.is-leaving {
    transform: none;
    opacity: 0;
  }
  .site-loader-logo,
  .site-loader-bar span {
    animation: none;
  }
}

/* ---------- 12. Footer ----------
   Compact: one band of columns (brand + email, Company, Products,
   Brands + Certifications), the three offices as slim cards, legal bar. */
.site-footer {
  padding: 48px var(--gutter) 20px;
}
.ft-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 20px;
  padding-bottom: 32px;
}
.ft-brand {
  grid-column: 1 / -1;
}
.site-footer .footer-logo img {
  height: 36px;
}
.ft-desc {
  margin-top: 14px;
  max-width: 400px;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}
.ft-kicker {
  margin: 18px 0 0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff9aa0;
}
.ft-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 0;
  font-size: 1.08rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(var(--red), var(--red)) left bottom / 0 2px no-repeat;
  transition: background-size 0.35s var(--ease);
}
.ft-mail svg {
  flex: none;
  width: 0.85em;
  height: 0.85em;
  transition: transform 0.25s var(--ease);
}
.ft-mail:hover,
.ft-mail:focus-visible {
  background-size: 100% 2px;
}
.ft-mail:hover svg {
  transform: translateX(4px);
}
.site-footer .ft-brand .socials {
  margin-top: 12px;
}

.ft-col .f-col-h {
  margin-bottom: 4px;
  color: #fff;
}
.ft-col .f-links a {
  padding: 8px 0;
  font-size: 0.92rem;
}
.ft-certs-h {
  margin-top: 20px;
}
.ft-certs {
  gap: 10px 14px;
  margin-top: 6px;
}
.ft-certs .cert img {
  filter: none;
  opacity: 0.82;
}
.ft-certs .cert:hover img {
  opacity: 1;
}
.ft-certs .cert-wide img { height: 20px; }
.ft-certs .cert-mark img { height: 24px; }
.ft-certs .cert-seal img { height: 36px; }
@media (min-width: 1024px) {
  .ft-cols {
    grid-template-columns: 1.7fr 0.8fr 1.05fr 1.1fr;
    gap: 32px 40px;
  }
  .ft-brand {
    grid-column: auto;
  }
  .ft-col .f-links a {
    padding: 5px 0;
  }
}

/* office cards: colour-coded top edge per region */
.ft-offices {
  display: grid;
  gap: 12px;
}
.ft-office {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px 12px;
  font-style: normal;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid var(--red);
  transition: background 0.2s ease;
}
.ft-office:nth-child(2) {
  border-top-color: #5b8fd6;
}
.ft-office:hover {
  background: rgba(255, 255, 255, 0.07);
}
.ft-office-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff9aa0;
}
.ft-office:nth-child(2) .ft-office-tag {
  color: #9cc0f0;
}
.ft-office-name {
  font-size: 0.95rem;
  color: #fff;
}
.ft-office-mail {
  align-self: flex-start;
  margin-top: auto;
  padding: 6px 0 2px;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
.ft-office-mail:hover {
  text-decoration-color: var(--red);
}
@media (min-width: 900px) {
  .ft-offices {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

.site-footer .footer-bottom {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  align-items: center;
}
@media (prefers-reduced-motion: reduce) {
  .ft-office,
  .ft-mail,
  .ft-mail svg {
    transition: none;
  }
}
/* tablets: three link columns under the brand, offices two-up */
@media (min-width: 600px) and (max-width: 1023px) {
  .ft-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .ft-offices {
    grid-template-columns: repeat(2, 1fr);
  }
  .ft-office:last-child {
    grid-column: 1 / -1;
  }
}

/* ---------- 13. Mobile pass 2026-11-05 ----------
   Readability floor (nothing under ~12.8px), taller footer email taps,
   hero controls that fit a 320px phone. */
.f-btn,
.filter-row .f-btn {
  font-size: 0.82rem;
}
.pcard-cat {
  font-size: 0.8rem;
}
.pcard-cta,
.pcard .pcard-cta.shop {
  font-size: 0.82rem;
}
.pcard .badge,
.pd .badge {
  font-size: 0.8rem;
}
.wf-num {
  font-size: 0.82rem;
}
.ft-kicker,
.ft-office-tag {
  font-size: 0.8rem;
}
@media (max-width: 599px) {
  .ft-office-mail {
    padding: 10px 0 6px;
  }
}
@media (max-width: 359px) {
  .tx-controls {
    gap: 10px;
  }
  .tx-segs {
    gap: 6px;
  }
  .tx-seg {
    width: 30px;
  }
}
/* mobile menu: phone + email rows get a full 40px tap height */
.mob-contact {
  min-height: 40px;
  padding: 8px 0;
}
/* breadcrumbs: links carry tap padding, so centre every item on one line */
.crumbs {
  align-items: center;
}
.crumbs li {
  display: flex;
  align-items: center;
}
.crumbs li + li::before {
  margin-right: 8px;
}

/* ---------- 14. Footer: office details + phone layout ----------
   Offices are <details>: cards from 600px (always open, no toggle), and
   tap-to-open rows on phones. Brands become chips, certifications one row. */
.ft-office-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  list-style: none;
}
.ft-office-head::-webkit-details-marker {
  display: none;
}
.ft-office-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-style: normal;
}
.ft-office-chev {
  display: none;
}
@media (min-width: 600px) {
  .ft-office-head {
    cursor: default;
  }
}
@media (max-width: 599px) {
  /* offices: compact accordion rows */
  .ft-offices {
    gap: 10px;
  }
  .ft-office {
    padding: 0;
  }
  .ft-office:hover {
    background: rgba(255, 255, 255, 0.04);
  }
  .ft-office-head {
    position: relative;
    min-height: 56px;
    padding: 13px 52px 13px 16px;
    cursor: pointer;
  }
  .ft-office-head:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
  }
  .ft-office-chev {
    position: absolute;
    right: 14px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: transform 0.25s var(--ease);
  }
  .ft-office-chev svg {
    width: 12px;
    height: 12px;
  }
  .ft-office[open] .ft-office-chev {
    transform: rotate(180deg);
  }
  .ft-office-body {
    margin: 0;
    padding: 0 16px 12px;
  }

  /* brands: full-width row of chips */
  .ft-col--brands {
    grid-column: 1 / -1;
  }
  .ft-col--brands .f-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
  }
  .ft-col--brands .f-links a {
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 0.88rem;
  }
  .ft-col--brands .f-links a:hover {
    padding-left: 14px;
    border-color: var(--red);
    background: var(--red);
    color: #fff;
  }

  /* certifications: one row */
  .ft-certs {
    flex-wrap: nowrap;
    gap: 12px;
  }
  .ft-certs .cert-wide img { height: 18px; }
  .ft-certs .cert-mark img { height: 22px; }
  .ft-certs .cert-seal img { height: 32px; }

  /* bottom bar: clear of the floating back-to-top button */
  .site-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-right: 60px;
  }
}
@media (max-width: 599px) and (prefers-reduced-motion: reduce) {
  .ft-office-chev {
    transition: none;
  }
}

/* ---------- 15. Footer brand row on tablets (600–1023px) ----------
   Full-width row was left-heavy: logo + description on the left, the
   contact block on the right behind a thin divider, row ruled off below. */
@media (min-width: 600px) and (max-width: 1023px) {
  .ft-brand {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas:
      "logo kicker"
      "desc mail"
      "desc social";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(40px, 6vw, 64px);
    align-items: start;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .ft-brand::after {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 32px;
    left: calc((100% - clamp(40px, 6vw, 64px)) * 1.2 / 2.2 + clamp(40px, 6vw, 64px) / 2);
    width: 1px;
    background: rgba(255, 255, 255, 0.14);
  }
  .ft-brand .footer-logo {
    grid-area: logo;
    justify-self: start;
  }
  .ft-brand .ft-desc {
    grid-area: desc;
    max-width: none;
  }
  .ft-brand .ft-kicker {
    grid-area: kicker;
    align-self: end;
    margin: 0;
  }
  .ft-brand .ft-mail {
    grid-area: mail;
    justify-self: start;
    margin-top: 6px;
    font-size: clamp(1rem, 0.7rem + 0.7vw, 1.15rem);
  }
  .site-footer .ft-brand .socials {
    grid-area: social;
    margin-top: 14px;
  }
}

/* ---------- 16. Tablet pass (600–1023px only) ----------
   Figures in one row; post/video cards two-up with a wide horizontal card
   where the count is odd; office cards two-up with the third spread out;
   product filters as an even 2-column grid; belt guide photos in a row. */
@media (min-width: 600px) and (max-width: 1023px) {
  /* Home figures: three across, no orphan */
  .tx-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .tx-stats-grid .tx-stat:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .tx-certs {
    justify-content: space-between;
  }

  /* posts + videos: two columns */
  .grid-3:has(> .card) {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  /* first post (and a last odd video) becomes a wide horizontal card */
  .grid-3 > .card:not(.video-card):first-child,
  .grid-3 > .video-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .grid-3 > .card:not(.video-card):first-child .card-media,
  .grid-3 > .video-card:last-child:nth-child(odd) .card-media {
    height: 100%;
    min-height: 220px;
    aspect-ratio: auto;
  }
  .grid-3 > .card:not(.video-card):first-child .card-media img {
    height: 100%;
    object-fit: cover;
  }
  .grid-3 > .card:not(.video-card):first-child .card-body,
  .grid-3 > .video-card:last-child:nth-child(odd) .card-body {
    justify-content: center;
  }
  /* office cards: two-up, the third runs full width with its details in a row */
  .offices {
    grid-template-columns: repeat(2, 1fr);
  }
  .offices > .office:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  .offices > .office:last-child:nth-child(odd) .office-tag,
  .offices > .office:last-child:nth-child(odd) .office-name {
    grid-column: 1 / -1;
  }
  .office .ci-row a {
    overflow-wrap: anywhere;
  }

  /* product filters: tidy 2-column grid instead of ragged pill rows */
  .filter-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .filter-row .f-btn {
    justify-content: center;
    min-height: 48px;
    padding: 10px 12px;
    letter-spacing: 0.03em;
    line-height: 1.3;
    text-align: center;
  }

  /* back pain belt guide: three photos in a row under the text */
  .sticky .gallery {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 720px;
  }
  /* Shop Now: centred under the three photos, sized to its label
     (the page sets width:100% inline, so override it here) */
  .sticky .gallery {
    margin-inline: auto;
  }
  .sticky .btn {
    display: flex;
    width: fit-content !important;
    min-width: 240px;
    margin: 32px auto 0;
    padding-inline: 44px;
  }
}

/* back pain belt guide, phones: the three photos sit in one small row
   instead of three full-width stacked images */
@media (max-width: 599px) {
  .sticky .gallery {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px;
  }
  .sticky .btn {
    margin-top: 28px;
  }
}

/* back pain belt guide, laptops/desktops: one white card beside the article
   (red top edge + soft shadow, like the office cards). The photos have white
   backgrounds, so on white they read as cut-outs. They zig-zag left / right /
   left and overlap a little, sized from the screen height so the card fits in
   view and stays pinned; Shop Now closes the card full width. */
@media (min-width: 1024px) {
  .split.top:has(> aside.sticky) {
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, 400px);
    gap: clamp(48px, 5vw, 88px);
  }
  aside.sticky {
    padding: 22px 26px 26px;
    background: #fff;
    border: 1px solid rgba(18, 83, 164, 0.12);
    border-top: 4px solid var(--red);
    box-shadow: 0 24px 48px -30px rgba(8, 36, 77, 0.45);
  }
  .sticky .gallery {
    grid-template-columns: 1fr !important;
    gap: 0;
  }
  .sticky .gallery figure {
    --ph: clamp(150px, calc((100vh - var(--nav-h) - 190px) / 2.7), 250px);
    width: calc(var(--ph) * 4 / 3);
    height: var(--ph);
    max-width: 76%;
    aspect-ratio: auto;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }
  .sticky .gallery figure:nth-child(odd) {
    justify-self: start;
  }
  .sticky .gallery figure:nth-child(even) {
    justify-self: end;
  }
  .sticky .gallery figure + figure {
    margin-top: calc(var(--ph) * -0.14);
  }
  .sticky .gallery img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: normal;
    transition: transform 0.4s var(--ease);
  }
  .sticky .gallery figure:hover img {
    transform: scale(1.04);
  }
  .sticky .btn {
    width: 100% !important;
    max-width: none;
    margin: 18px 0 0;
  }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .sticky .gallery img {
    transition: none;
  }
}

/* Home hero, slide 1: no title ("Welcome!" removed per client), so the short
   intro line is the lead: larger and bolder than other slides' sub-lines */
.tx-slide-sub--lead {
  margin-top: 0;
  max-width: 560px;
  font-size: clamp(1.35rem, 1rem + 1.3vw, 2rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #fff;
}

/* Korea banner (factory from the road): building sits right of centre,
   keep it in frame when narrow screens crop the sides */
.page-hero > img[src$="korea-banner.jpg"] {
  object-position: 64% 48%;
}