/* ==========================================================================
   Rasi Surgicals — "Clinical Trust" theme
   Palette sampled directly from the logo:
     red  #E1252B  (rounded cross + pulse line)
     navy #14476B  (caduceus + wordmark)
   ========================================================================== */

:root {
  --navy:        #14476B;
  --navy-600:    #0E3552;
  --navy-900:    #08263C;
  --navy-300:    #1D6191;

  --red:         #E1252B;
  --red-600:     #C41B21;
  --red-soft:    #FDECEC;

  --ink:         #0F1B24;
  --body:        #4A5C68;
  --muted:       #7B8B97;

  --tint:        #F2F7FB;
  --line:        #DCE7EF;
  --white:       #FFFFFF;

  --radius:      14px;   /* echoes the rounded corners of the logo cross */
  --radius-lg:   22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(8, 38, 60, .06);
  --shadow:    0 10px 30px rgba(8, 38, 60, .08);
  --shadow-lg: 0 22px 50px rgba(8, 38, 60, .14);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 84px;
}

/* --------------------------------------------------------------- base --- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 2.9vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }

a { color: var(--navy); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--red); }

p:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; }

::selection { background: var(--red); color: #fff; }

.text-navy  { color: var(--navy) !important; }
.text-red   { color: var(--red) !important; }
.bg-navy    { background: var(--navy) !important; }
.bg-tint    { background: var(--tint) !important; }

.section     { padding: clamp(64px, 8vw, 110px) 0; }
.section-sm  { padding: clamp(48px, 6vw, 76px) 0; }

/* ------------------------------------------------------------ preloader -- */

#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--white);
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
#preloader.is-done { opacity: 0; visibility: hidden; }

/* the trace runs out of the ECG tail on the logo's right edge, so the two read
   as one line — breathing is applied to the group to keep the join steady */
.preloader__logo {
  display: flex;
  align-items: flex-start;
  animation: pl-breathe 1.6s var(--ease) infinite;
}

.preloader__mark { width: 96px; }

.preloader__pulse {
  width: 150px;
  margin-top: 25px;  /* drops the trace onto the tail's centre line */
  margin-left: -2px; /* hides the rounded cap under the logo's tail dot */
}
.preloader__pulse path {
  fill: none;
  stroke: var(--red);
  stroke-width: 6;   /* renders ~4px at 150px wide — matches the tail's weight */
  stroke-linecap: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: pl-trace 1.6s linear infinite;
}

@keyframes pl-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes pl-trace   { to { stroke-dashoffset: -340; } }

/* --------------------------------------------------------------- header -- */

.topbar {
  background: var(--navy-900);
  color: rgba(255, 255, 255, .78);
  font-size: .875rem;
  padding: 9px 0;
}
.topbar a { color: rgba(255, 255, 255, .78); }
.topbar a:hover { color: #fff; }
.topbar i { color: var(--red); margin-right: 7px; }

.topbar__social a {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  margin-left: 6px;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.topbar__social a:hover { background: var(--red); transform: translateY(-2px); }
.topbar__social i { color: inherit; margin: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease), padding .3s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow); }

.navbar { padding: 14px 0; }
.navbar-brand img { height: 52px; transition: height .3s var(--ease); }
.site-header.is-stuck .navbar-brand img { height: 44px; }

.navbar-nav .nav-link {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  padding: 10px 2px !important;
  margin: 0 16px;
  position: relative;
}
.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 2px;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--red);
  transition: width .3s var(--ease);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: var(--navy); }
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after { width: 100%; }

.navbar-toggler { border: 1px solid var(--line); padding: 6px 10px; }
.navbar-toggler:focus { box-shadow: none; }

/* --------------------------------------------------------------- buttons - */

.btn {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 13px 30px;
  border: 2px solid transparent;
  transition: all .3s var(--ease);
}
.btn i { vertical-align: -1px; }

.btn-red {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 8px 20px rgba(225, 37, 43, .26);
}
.btn-red:hover {
  background: var(--red-600);
  border-color: var(--red-600);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(225, 37, 43, .34);
}

.btn-navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-600); border-color: var(--navy-600); color: #fff; transform: translateY(-2px); }

.btn-outline-navy { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }

.btn-outline-white { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.btn-outline-white:hover { background: #fff; border-color: #fff; color: var(--navy); }

/* our .btn padding outweighs Bootstrap's .btn-sm, so restate it */
.btn-sm { padding: 9px 20px; font-size: .9rem; }

/* ------------------------------------------------------- section titles -- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  background: var(--red-soft);
  border-radius: var(--radius-pill);
  padding: 7px 18px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
}

/* heartbeat divider — the logo's pulse line, reused as a rule */
.pulse-rule {
  display: block;
  width: 150px;
  height: 20px;
  margin-top: 18px;
}
.pulse-rule.is-centered { margin-inline: auto; }
.pulse-rule path {
  fill: none;
  stroke: var(--red);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* on the dark bands the pale pill reads as a hole — go translucent instead */
.whyus .eyebrow,
.cta-band .eyebrow,
.page-header .eyebrow { background: rgba(225, 37, 43, .18); }

.lead-muted { font-size: 1.05rem; color: var(--muted); }

/* ------------------------------------------------------------ hero/slider */

.hero .carousel-item { height: clamp(460px, 72vh, 720px); }
.hero .carousel-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(8, 38, 60, .92) 0%, rgba(8, 38, 60, .72) 45%, rgba(8, 38, 60, .30) 100%);
  z-index: 1;
}
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: hero-zoom 9s var(--ease) forwards;
}
.carousel-item.active .hero__img { animation: hero-zoom 9s var(--ease) forwards; }
@keyframes hero-zoom { from { transform: scale(1.10); } to { transform: scale(1); } }

.hero__caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  text-align: left;
}
.hero__caption h1 { color: #fff; max-width: 15ch; }
.hero__caption p  { color: rgba(255, 255, 255, .82); max-width: 52ch; font-size: 1.08rem; }
.hero .eyebrow { background: rgba(225, 37, 43, .18); }

.hero .carousel-control-prev,
.hero .carousel-control-next { width: 62px; opacity: 1; z-index: 3; }
.hero .carousel-control-prev-icon,
.hero .carousel-control-next-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .14);
  background-size: 18px;
  border: 1px solid rgba(255, 255, 255, .3);
  transition: background-color .25s var(--ease);
}
.hero .carousel-control-prev:hover .carousel-control-prev-icon,
.hero .carousel-control-next:hover .carousel-control-next-icon { background-color: var(--red); border-color: var(--red); }

.hero .carousel-indicators { z-index: 3; margin-bottom: 28px; }
.hero .carousel-indicators [data-bs-target] {
  width: 28px; height: 4px;
  border-radius: 4px;
  border: 0;
  background: rgba(255, 255, 255, .4);
  opacity: 1;
}
.hero .carousel-indicators .active { background: var(--red); width: 44px; }

/* --------------------------------------------------------- feature strip - */

.feature-strip {
  position: relative;
  z-index: 5;
  margin-top: -58px;
}
.feature-strip .card-body { padding: 30px 26px; }

.feature-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  height: 100%;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.icon-badge {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: var(--radius);
  background: var(--red-soft);
  color: var(--red);
  font-size: 1.5rem;
  flex: 0 0 auto;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.feature-card:hover .icon-badge { background: var(--red); color: #fff; }

.icon-badge--navy { background: rgba(20, 71, 107, .09); color: var(--navy); }

/* ------------------------------------------------------------ about bits - */

.about-media { position: relative; }
.about-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); }

.about-media__accent {
  position: absolute;
  right: -14px; bottom: -14px;
  width: 58%;
  border: 8px solid #fff;
  border-radius: var(--radius-lg);
}

.stat-badge {
  position: absolute;
  left: -18px; bottom: 40px;
  background: var(--red);
  color: #fff;
  border-radius: var(--radius);
  padding: 20px 26px;
  box-shadow: var(--shadow-lg);
}
/* over the brand sheet, which reserves a clear band at its foot rather than
   letting the badge sit on top of a partner logo */
.stat-badge--low { bottom: -20px; }

.stat-badge strong { font-family: 'Poppins', sans-serif; font-size: 2.1rem; line-height: 1; display: block; }
.stat-badge span { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  font-weight: 500;
  color: var(--ink);
}
.check-list li::before {
  content: '\F26E';                 /* bi-check-lg */
  font-family: 'bootstrap-icons';
  position: absolute;
  left: 0; top: 1px;
  display: grid;
  place-items: center;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
  font-size: .72rem;
  line-height: 1;
}

/* --------------------------------------------------------- product cards - */

.product-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  height: 100%;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

.product-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tint); }
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.07); }

.product-card__tag {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(255, 255, 255, .94);
  color: var(--navy);
  font-family: 'Poppins', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}

/* wide variant: image column fills the row height instead of holding 4:3 */
.product-card--wide .product-card__media { aspect-ratio: auto; height: 100%; min-height: 250px; }
.product-card--wide .product-card__body { padding: 28px 30px; }

.product-card__body { padding: 24px 24px 26px; }
.product-card__body h3 { margin-bottom: 8px; transition: color .25s var(--ease); }
.product-card:hover .product-card__body h3 { color: var(--red); }
.product-card__body p { font-size: .94rem; margin-bottom: 16px; }

.product-card__link {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.product-card:hover .product-card__link { color: var(--red); }
.product-card__link i { transition: transform .3s var(--ease); }
.product-card:hover .product-card__link i { transform: translateX(4px); }

/* offset in-page anchors so the sticky header never covers the heading */
.product-block { scroll-margin-top: calc(var(--header-h) + 20px); }

/* The eight range photos come in at anything from 1.29 to 2.86 wide, so left
   to size themselves they render 209px to 467px tall and the blocks lose their
   shared rhythm. One ratio for all of them fixes that. `contain` rather than
   `cover` because the wide shots are product line-ups — cropping to fill would
   cut the outermost item straight off. Seven of the eight are already cut-outs
   on white, so the letterboxing reads as padding rather than a gap. */
.product-block img {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #fff;
  padding: 12px;
}

.product-tags { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.product-tags li {
  font-size: .82rem;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  color: var(--navy);
}

/* ------------------------------------------------------- brand partners -- */

/* the roll-call of distributorships — partner marks where we hold the artwork,
   name plates for the rest; both share one tile so the grid stays even */
.brand-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.brand-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 74px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-family: 'Poppins', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.35;
  color: var(--navy);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.brand-grid li:hover { border-color: var(--red); transform: translateY(-3px); }

/* logo tiles run a touch tighter — the plates already carry their own margin */
.brand-grid__logo { padding: 10px 12px; }
.brand-grid__logo img {
  display: block;
  max-width: 100%;
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* full-container variant — the Distributor page gives the grid the whole row */
.brand-grid--wide { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1199.98px) {
  .brand-grid--wide { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767.98px) {
  .brand-grid--wide { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
  .brand-grid,
  .brand-grid--wide { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------- catalogue / brochure cards -- */

.doc-card {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: inherit;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.doc-card:hover {
  border-color: var(--red);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  color: inherit;
}

.doc-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 1.45rem;
}

.doc-card__body { flex: 1 1 auto; min-width: 0; }

.doc-card__context {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.doc-card__title {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin: 3px 0 5px;
}
.doc-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: .82rem;
  color: var(--muted);
}

.doc-card__go {
  flex: 0 0 auto;
  color: var(--navy);
  font-size: 1.1rem;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.doc-card:hover .doc-card__go { color: var(--red); transform: translateY(2px); }

/* ------------------------------------------------------------- founder --- */

.founder-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(28px, 4vw, 42px);
}
.founder-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px; height: 78px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.founder-card__role {
  font-family: 'Poppins', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}

/* -------------------------------------------------------------- why-us --- */

.whyus { background: var(--navy-900); color: rgba(255, 255, 255, .75); position: relative; overflow: hidden; }
.whyus h2, .whyus h3 { color: #fff; }
.whyus::after {
  content: '';
  position: absolute;
  right: -140px; top: -140px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 37, 43, .22), transparent 68%);
}

.counter { font-family: 'Poppins', sans-serif; font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 700; color: #fff; line-height: 1; }
.counter-label { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }

/* ------------------------------------------------------------- gallery --- */

.gallery-item {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--tint);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery-item:hover img { transform: scale(1.08); }

.gallery-item__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(to top, rgba(8, 38, 60, .86), rgba(8, 38, 60, .12));
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.gallery-item:hover .gallery-item__overlay { opacity: 1; }
.gallery-item__overlay i {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 1.2rem;
  transform: translateY(12px);
  transition: transform .35s var(--ease);
}
.gallery-item:hover .gallery-item__overlay i { transform: translateY(0); }

/* centred pill row — now only the products page quick-jump uses it */
.gallery-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 44px; }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(8, 38, 60, .94);
}
.lightbox.is-open { display: grid; }
.lightbox img { max-width: min(1100px, 92vw); max-height: 86vh; border-radius: var(--radius); }
.lightbox__close {
  position: absolute;
  top: 22px; right: 26px;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1.3rem;
}
.lightbox__close:hover { background: var(--red); }

/* ---------------------------------------------------------- page header -- */

.page-header {
  position: relative;
  padding: clamp(70px, 9vw, 120px) 0;
  background: var(--navy-900) url('../img/page-header.jpg') center/cover no-repeat;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(8, 38, 60, .93), rgba(8, 38, 60, .66));
}
.page-header > .container { position: relative; z-index: 1; }
.page-header h1 { color: #fff; margin-bottom: 10px; }

.breadcrumb { margin: 0; }
.breadcrumb a { color: rgba(255, 255, 255, .72); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .4); }
.breadcrumb-item.active { color: var(--red); }

/* --------------------------------------------------------------- CTA ----- */

.cta-band {
  position: relative;
  background: var(--navy) url('../img/cta-bg.jpg') center/cover no-repeat;
  overflow: hidden;
}
.cta-band::before { content: ''; position: absolute; inset: 0; background: rgba(8, 38, 60, .86); }
.cta-band > .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .78); }

/* the closing strapline, set apart from the body copy above it */
.cta-band .tagline {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-family: 'Poppins', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: #fff !important;
}

/* -------------------------------------------------------------- contact -- */

.contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  height: 100%;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.contact-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.contact-card h3 { font-size: 1.08rem; margin: 18px 0 8px; }
.contact-card a { color: var(--body); }
.contact-card a:hover { color: var(--red); }

.form-control, .form-select {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 18px;
  font-size: .96rem;
  color: var(--ink);
  background: var(--tint);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.form-control:focus, .form-select:focus {
  background: #fff;
  border-color: var(--navy-300);
  box-shadow: 0 0 0 4px rgba(29, 97, 145, .12);
}
.form-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .88rem;
  color: var(--ink);
  margin-bottom: 7px;
}
.form-control::placeholder { color: var(--muted); }

.map-frame {
  border: 0;
  width: 100%;
  height: 430px;
  border-radius: var(--radius-lg);
  filter: grayscale(.25) contrast(1.05);
}

/* contact page — the map sits beside the details column and matches its height */
.map-frame--tall { height: 100%; min-height: 560px; }

@media (max-width: 991.98px) {
  /* stacked below lg, so a fixed height reads better than matching nothing */
  .map-frame--tall { height: 430px; min-height: 0; }
}

/* --------------------------------------------------------------- footer -- */

.site-footer { background: var(--navy-900); color: rgba(255, 255, 255, .66); padding-top: 76px; }
.site-footer h4 {
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 14px;
}
.site-footer h4::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 38px; height: 3px;
  border-radius: 3px;
  background: var(--red);
}
.site-footer a { color: rgba(255, 255, 255, .66); }
.site-footer a:hover { color: #fff; }
/* mark plus type, matching the header lockup — the footer is dark, so this
   uses the white-caduceus copy of the mark */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
}
.footer-brand img { height: 54px; width: auto; flex: 0 0 auto; }
.footer-brand__text { display: block; line-height: 1.15; }
.footer-brand__text strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: #fff;
}
.footer-brand__text small {
  display: block;
  margin-top: 2px;
  font-family: 'Poppins', sans-serif;
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .185em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 11px; }
.footer-links a { display: inline-flex; align-items: center; gap: 9px; transition: transform .25s var(--ease), color .25s var(--ease); }
.footer-links a::before { content: '\F285'; font-family: 'bootstrap-icons'; color: var(--red); font-size: .72rem; }
.footer-links a:hover { transform: translateX(4px); }

.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: 13px; margin-bottom: 16px; }
.footer-contact i { color: var(--red); font-size: 1.05rem; margin-top: 4px; }

.footer-bottom {
  margin-top: 58px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 22px 0;
  font-size: .88rem;
}

/* ------------------------------------------------------- floating utils -- */

.float-stack {
  position: fixed;
  right: 22px; bottom: 26px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.float-btn {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 1.4rem;
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), opacity .3s var(--ease), visibility .3s var(--ease);
}
.float-btn:hover { transform: translateY(-3px); color: #fff; }

.float-btn--wa { background: #25D366; }
.float-btn--wa::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .6);
  animation: wa-ring 2.2s var(--ease) infinite;
}
.float-btn--wa { position: relative; }
@keyframes wa-ring {
  70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.float-btn--top { background: var(--navy); opacity: 0; visibility: hidden; }
.float-btn--top.is-visible { opacity: 1; visibility: visible; }

/* ------------------------------------------------------- scroll reveal --- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 991.98px) {
  .navbar-collapse {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-top: 14px;
    padding: 12px 18px;
    box-shadow: var(--shadow);
  }
  .navbar-nav .nav-link { margin: 0; padding: 11px 0 !important; border-bottom: 1px solid var(--line); }
  .navbar-nav .nav-item:last-child .nav-link { border-bottom: 0; }
  .navbar-nav .nav-link::after { display: none; }

  .feature-strip { margin-top: 0; }
  .stat-badge { left: 12px; bottom: 12px; padding: 15px 20px; }
  .about-media__accent { display: none; }
}

@media (max-width: 575.98px) {
  /* a g-5 row's -24px side margins exceed the container's 12px padding,
     which pushes the document 12px wider than a 360px viewport */
  .row.g-5 { --bs-gutter-x: 1.5rem; }

  .hero .carousel-control-prev,
  .hero .carousel-control-next { display: none; }
  .hero__caption { text-align: center; }
  .hero__caption h1, .hero__caption p { max-width: none; margin-inline: auto; }
  .hero .eyebrow { margin-inline: auto; }
  .float-stack { right: 14px; bottom: 16px; }

  /* Left to wrap, the pills end each row at a different width and the block
     reads as a ragged edge against the paragraph and button, which are both
     flush. Two equal columns put the right edge back. `stretch` so a label
     that needs two lines lifts its neighbour to match instead of leaving a
     step, and the text centres because a fixed cell leaves short labels with
     a lot of trailing space. */
  .product-tags {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
  }
  .product-tags li {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 10px;
    hyphens: auto;
  }
}