/* ==========================================================================
   Advantist Medical — core stylesheet
   Loaded after Bootstrap 5 and the Tailwind utility CDN so brand rules win.
   Palette is fixed by the brand: copper #C5906A over slate #39414C, with the
   pale blue / green / yellow washes used only as large background fields.
   ========================================================================== */

:root {
  /* --- slate ramp ------------------------------------------------------- */
  --slate-950: #1C222A;
  --slate-900: #232A33;
  --slate-800: #2E3641;
  --slate: #39414C;
  --slate-600: #4C5665;
  --slate-400: #7E8A99;
  --slate-200: #C3CBD4;

  /* --- copper ramp ------------------------------------------------------ */
  --copper-800: #8B5F3A;
  --copper-700: #A87550;
  --copper: #C5906A;
  --copper-400: #D9AE8E;
  --copper-200: #EEDACA;
  --copper-050: #FAF2EB;

  /* --- light grounds (the "light and decent" watermark shades) ----------- */
  --paper: #FAFBF9;
  --mist: #EDF3F2; /* pale green  */
  --sky: #E9F0F5; /* pale blue   */
  --sand: #F7F2E7; /* pale yellow */
  --line: #DEE4E4;
  --line-soft: #EBEFEF;

  /* --- type ------------------------------------------------------------- */
  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  /* --- rhythm ----------------------------------------------------------- */
  --shell: 1200px;
  --band-y: clamp(2.5rem, 5vw, 4.5rem);
  --nav-h: 76px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-lift: 0 18px 44px -24px rgba(35, 42, 51, 0.45);
  --shadow-deep: 0 30px 70px -30px rgba(35, 42, 51, 0.55);
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--slate);
  background: var(--paper);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

::selection {
  background: var(--copper-200);
  color: var(--slate-900);
}

/* Visible keyboard focus everywhere — required for clinical procurement users
   who often navigate long catalogues by keyboard. */
:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 2000;
  background: var(--slate-900);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 6px 6px;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 0;
  color: #fff;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
.display,
.nav-wordmark {
  font-family: var(--font-display);
  color: var(--slate-900);
  letter-spacing: -0.018em;
  line-height: 1.12;
  font-weight: 700;
}

h1,
.h1 {
  font-size: clamp(2.35rem, 5.1vw, 4rem);
}
h2,
.h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  line-height: 1.16;
}
h3,
.h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  letter-spacing: -0.01em;
}
h4 {
  font-size: 1.075rem;
  font-weight: 600;
}

p {
  max-width: 68ch;
}

.lede {
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  line-height: 1.62;
  color: var(--slate-600);
  max-width: 62ch;
}

.muted {
  color: var(--slate-600);
}

a {
  color: var(--copper-700);
  text-decoration-color: var(--copper-200);
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
a:hover {
  color: var(--copper-800);
}

/* Section heading with a short copper rule above it — the rule marks a section
   start, so it carries structure rather than decoration. */
.band-head {
  max-width: 60ch;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.band-head::before {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  background: var(--copper);
  margin-bottom: 1.4rem;
  border-radius: 2px;
}
.band-head.is-centred {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.band-head.is-centred::before {
  margin-left: auto;
  margin-right: auto;
}
.band-head p {
  margin-bottom: 0;
}
.band-head.is-centred p {
  margin-left: auto;
  margin-right: auto;
}

.on-dark,
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4 {
  color: #fff;
}
.on-dark p,
.on-dark .lede {
  color: rgba(255, 255, 255, 0.76);
}
.on-dark .band-head::before {
  background: var(--copper);
}

/* ==========================================================================
   Layout shell and bands
   ========================================================================== */

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}
.shell-wide {
  width: min(100% - 2.5rem, 1400px);
  margin-inline: auto;
}

.band {
  position: relative;
  padding-block: var(--band-y);
}
.band-tight {
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
}

.band-paper {
  background: var(--paper);
}
.band-mist {
  background: linear-gradient(180deg, var(--paper) 0%, var(--mist) 45%, var(--paper) 100%);
}
.band-sky {
  background: linear-gradient(180deg, var(--paper) 0%, var(--sky) 50%, var(--paper) 100%);
}
.band-sand {
  background: linear-gradient(170deg, var(--sand) 0%, var(--paper) 78%);
}
.band-slate {
  background: var(--slate-900);
  color: rgba(255, 255, 255, 0.78);
}

.band-rule {
  border-top: 1px solid var(--line-soft);
}

/* Watermark field: the pulse motif from the mark, held far back so body copy
   stays comfortably readable. */
.watermark {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.watermark svg {
  position: absolute;
  opacity: 0.5;
}
.watermark--right svg {
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: 620px;
}
.watermark--left svg {
  left: -8%;
  top: 46%;
  transform: translateY(-50%);
  width: 560px;
}
.band > .shell,
.band > .shell-wide {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-brand,
.btn-ghost,
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.975rem;
  letter-spacing: 0.005em;
  padding: 0.85rem 1.6rem;
  border-radius: 4px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease),
    border-color 0.22s var(--ease), transform 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}

.btn-brand {
  background: var(--copper);
  color: var(--slate-950);
  box-shadow: 0 10px 26px -14px rgba(197, 144, 106, 0.9);
}
.btn-brand:hover,
.btn-brand:focus {
  background: var(--copper-400);
  color: var(--slate-950);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(197, 144, 106, 0.95);
}

.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.38);
  color: #fff;
}
.btn-ghost:hover,
.btn-ghost:focus {
  border-color: var(--copper);
  color: var(--copper-400);
  transform: translateY(-2px);
}

.btn-line {
  background: transparent;
  border-color: var(--slate-200);
  color: var(--slate-900);
}
.btn-line:hover,
.btn-line:focus {
  border-color: var(--copper);
  color: var(--copper-800);
  background: var(--copper-050);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 0.55rem 1.05rem;
  font-size: 0.88rem;
}

/* ==========================================================================
   Navigation — sticky, translucent over the hero, solid once scrolled
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1080;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease), height 0.3s var(--ease);
}
.nav.is-solid {
  background: rgba(35, 42, 51, 0.96);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(197, 144, 106, 0.28);
  box-shadow: 0 10px 34px -22px rgba(0, 0, 0, 0.8);
}
/* Interior pages open below a slate header, so the bar starts solid there. */
.nav.nav-static {
  background: rgba(35, 42, 51, 0.96);
  border-bottom-color: rgba(197, 144, 106, 0.28);
}

.nav-inner {
  width: min(100% - 2.5rem, 1400px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-brand img {
  width: 180px;
  height: 85px;
  border: none;
  /* transition: transform 0.35s var(--ease); */
}
/* .nav-brand:hover img {
  transform: scale(1.07) rotate(-3deg);
} */
.nav-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.02;
}
.nav-wordmark b {
  font-size: 1.16rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.005em;
}
.nav-wordmark span {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--copper-400);
  text-transform: uppercase;
  font-weight: 600;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  position: relative;
  display: block;
  padding: 0.55rem 0.95rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.97rem;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  border-radius: 3px;
  transition: color 0.2s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 0.28rem;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav-links a:hover,
.nav-links a:focus-visible {
  color: #fff;
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}
.nav-links a[aria-current="page"] {
  color: #fff;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.nav-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}
.nav-call svg {
  width: 17px;
  height: 17px;
  color: var(--copper);
  flex-shrink: 0;
}
.nav-call:hover {
  color: var(--copper-400);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Scroll progress hairline under the bar */
.nav-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--copper-700), var(--copper-400));
  transition: width 0.1s linear;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + 3.5rem);
  padding-bottom: 4.5rem;
  background: radial-gradient(
      120% 90% at 78% 18%,
      rgba(197, 144, 106, 0.2) 0%,
      rgba(197, 144, 106, 0) 58%
    ),
    linear-gradient(150deg, var(--slate-950) 0%, var(--slate-800) 58%, var(--slate) 100%);
  overflow: hidden;
  isolation: isolate;
}

/* Cursor-tracked copper light. Position is driven from JS. */
/* .hero-spot {
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(197, 144, 106, 0.2) 0%,
    rgba(197, 144, 106, 0) 65%
  );
  transform: translate(-50%, -50%);
  left: 70%;
  top: 35%;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
  z-index: 0;
} */

.hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(100% 75% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(100% 75% at 50% 40%, #000 30%, transparent 78%);
  z-index: 0;
}

/* The one orchestrated moment: the pulse trace from the mark draws itself
   across the hero on load, then holds. */
.hero-trace {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  height: 140px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}
.hero-trace svg {
  width: 100%;
  height: 100%;
}
.hero-trace path {
  fill: none;
  stroke: var(--copper);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 3200;
  stroke-dashoffset: 3200;
  animation: trace-draw 3.1s var(--ease) 0.35s forwards;
}
.hero-trace .trace-echo {
  stroke: rgba(197, 144, 106, 0.25);
  stroke-width: 8;
  filter: blur(6px);
}
@keyframes trace-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.hero-inner {
  position: relative;
  z-index: 2;
  /* Wider than the body shell: the headline is the hero, so it runs the full
     width of the screen rather than sitting in a narrow column. */
  width: min(100% - 2.5rem, 1400px);
  margin-inline: auto;
}

.hero h1 {
  color: #fff;
  margin-bottom: 2.6rem;
  max-width: none;
  font-size: clamp(2rem, 5.6vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
  text-wrap: balance;
}

/* Supporting copy and actions sit under the headline, side by side on wide
   screens, so the headline keeps the full measure to itself. */
.hero-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.75rem 3rem;
  align-items: end;
}
.hero .lede {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0;
  max-width: 52ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* --- headline word drop ------------------------------------------------ */
/* Each word is its own inline-block so it can fall in on its own beat. The
   spans are written into the HTML, not injected by script, so the headline is
   intact for search engines and for anyone without JavaScript. */
.hero h1 .w {
  display: inline-block;
  animation: word-drop 0.6s cubic-bezier(0.2, 1.32, 0.42, 1) both;
  animation-delay: calc(var(--i) * 68ms + 180ms);
}
@keyframes word-drop {
  0% {
    opacity: 0;
    transform: translateY(-0.85em) rotate(-3.5deg);
  }
  62% {
    opacity: 1;
    transform: translateY(0.07em) rotate(0.5deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Establishment marker — a real fact worth foregrounding for a 2007 business */
.hero-since {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.9rem;
  padding: 0.4rem 1rem 0.4rem 0.5rem;
  border: 1px solid rgba(197, 144, 106, 0.4);
  border-radius: 100px;
  background: rgba(197, 144, 106, 0.09);
  color: var(--copper-400);
  font-size: 0.87rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hero-since b {
  background: var(--copper);
  color: var(--slate-950);
  padding: 0.14rem 0.6rem;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 0.84rem;
}

/* Clinical domains served, as a factual strip rather than decorative chips */
.hero-domains {
  margin-top: 3.4rem;
  padding-top: 1.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.4rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.93rem;
}
.hero-domains span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.hero-domains span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--copper);
  flex-shrink: 0;
}

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */

.page-head {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(3rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: radial-gradient(
      100% 120% at 85% 10%,
      rgba(197, 144, 106, 0.17) 0%,
      rgba(197, 144, 106, 0) 60%
    ),
    linear-gradient(140deg, var(--slate-950) 0%, var(--slate-800) 100%);
  overflow: hidden;
}
.page-head .hero-grid {
  opacity: 0.7;
}
.page-head-inner {
  position: relative;
  z-index: 2;
}
.page-head h1 {
  color: #fff;
  margin-bottom: 1rem;
}
.page-head .lede {
  color: rgba(255, 255, 255, 0.74);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.5);
}
.crumbs a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--copper-400);
  text-decoration: underline;
}
.crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: rgba(255, 255, 255, 0.28);
}

/* ==========================================================================
   Capability rows (home) — plain rows, not a card kit
   ========================================================================== */

.cap-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.cap-row {
  display: grid;
  grid-template-columns: 58px 1fr minmax(0, 1.25fr);
  gap: 1.5rem 2rem;
  align-items: start;
  padding: 2rem 0.5rem;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.28s var(--ease), padding-left 0.28s var(--ease);
}
.cap-row:hover {
  background: var(--copper-050);
  padding-left: 1.25rem;
}
.cap-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--slate-900);
  color: var(--copper);
  flex-shrink: 0;
}
.cap-icon svg {
  width: 23px;
  height: 23px;
}
.cap-row h3 {
  margin: 0 0 0.35rem;
}
.cap-row p {
  margin: 0;
  color: var(--slate-600);
  font-size: 1rem;
}
.cap-row .cap-meta {
  color: var(--slate-400);
  font-size: 0.92rem;
  margin: 0.3rem 0 0;
}

/* --- surfaces ---------------------------------------------------------- */

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.5rem;
  height: 100%;
}
.panel h3 {
  margin: 0 0 0.5rem;
}
.panel p {
  margin: 0;
  color: var(--slate-600);
  font-size: 0.95rem;
}
.panel-sand {
  background: var(--sand);
  border-color: #EAE1CB;
}
.panel-sand p {
  color: var(--slate-600);
}

/* Manufacturer tile on the home page */
.maker {
  display: block;
  text-align: center;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.1rem 0.9rem;
  height: 100%;
}
.maker b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--slate-900);
}
.maker .maker-origin {
  display: block;
  font-size: 0.82rem;
  color: var(--copper-700);
  margin-top: 0.2rem;
}
.maker .maker-what {
  display: block;
  font-size: 0.85rem;
  color: var(--slate-600);
  margin-top: 0.5rem;
  line-height: 1.45;
}
.maker:hover {
  border-color: var(--copper-200);
}

/* ==========================================================================
   Partner ledger — the products page backbone
   ========================================================================== */

.ledger {
  position: relative;
}

.ledger-band {
  position: relative;
  padding-block: clamp(3rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}
.ledger-band:last-child {
  border-bottom: 0;
}

.ledger-grid {
  display: grid;
  grid-template-columns: minmax(230px, 300px) 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.ledger-rail {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
}
.ledger-rail h2 {
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  margin: 0 0 0.5rem;
}
.ledger-origin {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--copper-800);
  background: var(--copper-050);
  border: 1px solid var(--copper-200);
  padding: 0.22rem 0.7rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}
.ledger-rail p {
  font-size: 0.97rem;
  color: var(--slate-600);
  margin-bottom: 1.1rem;
  max-width: 34ch;
}
.ledger-site {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--copper-200);
  padding-bottom: 2px;
}
.ledger-site svg {
  width: 13px;
  height: 13px;
}

.ledger-count {
  display: block;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.87rem;
  color: var(--slate-400);
}

/* --- device rows ------------------------------------------------------- */

.device-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.device {
  border-bottom: 1px solid var(--line);
  transition: background-color 0.25s var(--ease);
}
.device:hover {
  background: rgba(237, 243, 242, 0.6);
}

.device-main {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.35rem 1rem 1.35rem 0.25rem;
}

.device-thumb {
  width: 88px;
  height: 88px;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--sky), var(--mist));
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  padding: 1px;
}
.device-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}

.device-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--slate-900);
  margin: 0 0 0.2rem;
  line-height: 1.3;
}
.device-use {
  margin: 0;
  font-size: 0.95rem;
  color: var(--slate-600);
  max-width: 56ch;
}

.device-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Variant selector — populated from the manufacturer's configuration list */
.variant-select {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--slate-900);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.5rem 2rem 0.5rem 0.8rem;
  min-width: 210px;
  max-width: 300px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2339414C' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 15px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.variant-select:hover {
  border-color: var(--copper);
}
.variant-select:focus {
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(197, 144, 106, 0.2);
  outline: none;
}

.device-note {
  padding: 0 1rem 1.25rem 6rem;
  font-size: 0.92rem;
  color: var(--copper-800);
  background: transparent;
}
.device-note b {
  color: var(--slate-900);
  font-weight: 600;
}

/* Status pill for the categories still in preparation */
.soon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--slate-600);
  background: var(--sand);
  border: 1px solid #E8DFC8;
  padding: 0.24rem 0.75rem;
  border-radius: 100px;
}

/* --- category filter --------------------------------------------------- */

.filter-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 900;
  background: rgba(250, 251, 249, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding-block: 0.85rem;
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.filter-label {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--slate-400);
  letter-spacing: 0.04em;
}
.chip {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--slate-600);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.42rem 1rem;
  cursor: pointer;
  transition: all 0.22s var(--ease);
}
.chip:hover {
  border-color: var(--copper);
  color: var(--copper-800);
}
.chip.is-on {
  background: var(--slate-900);
  border-color: var(--slate-900);
  color: #fff;
}
.filter-search {
  margin-left: auto;
  position: relative;
}
.filter-search input {
  font-family: var(--font-body);
  font-size: 0.92rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.45rem 1rem 0.45rem 2.3rem;
  width: 260px;
  background: #fff;
  color: var(--slate-900);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.filter-search input:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(197, 144, 106, 0.18);
}
.filter-search svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--slate-400);
  pointer-events: none;
}

.empty-state {
  padding: 4rem 1rem;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.empty-state h3 {
  margin-bottom: 0.5rem;
}
.empty-state p {
  margin: 0 auto 1.4rem;
  color: var(--slate-600);
}

/* The ledger supplies its own vertical rhythm per band. */
.ledger-host {
  padding-block: 0;
}
#catalogue-empty {
  padding-block: 5rem;
}

/* ==========================================================================
   Parallax layer (products page)
   ========================================================================== */

.parallax-host {
  position: relative;
  overflow: hidden;
}
.parallax-layer {
  position: absolute;
  inset: -12% 0 -12% 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.parallax-layer svg {
  position: absolute;
  opacity: 0.55;
}
.parallax-layer .p-a {
  top: 4%;
  right: -4%;
  width: 520px;
}
.parallax-layer .p-b {
  top: 46%;
  left: -6%;
  width: 460px;
}
.parallax-layer .p-c {
  bottom: 3%;
  right: 8%;
  width: 380px;
}
.parallax-host > .shell,
.parallax-host > .shell-wide {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   About page
   ========================================================================== */

.vm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.vm-panel {
  padding: clamp(1.9rem, 3vw, 2.6rem);
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
}
.vm-panel.is-vision {
  background: linear-gradient(160deg, var(--sky) 0%, #fff 62%);
  border-color: #D7E4EE;
}
.vm-panel.is-mission {
  background: linear-gradient(160deg, var(--mist) 0%, #fff 62%);
  border-color: #D6E4E1;
}
.vm-panel h2 {
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  margin-bottom: 1.1rem;
}
.vm-panel p:last-child {
  margin-bottom: 0;
}

.mission-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.1rem;
}
.mission-list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 0.9rem;
  align-items: start;
  font-size: 1rem;
  line-height: 1.62;
}
.mission-list li svg {
  width: 20px;
  height: 20px;
  color: var(--copper-700);
  margin-top: 0.28rem;
}
.mission-list b {
  color: var(--slate-900);
  font-weight: 600;
}

/* Timeline — content genuinely is a sequence, so the ordering is meaningful */
.timeline {
  position: relative;
  padding-left: 2.4rem;
  margin: 0;
  list-style: none;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--copper) 0%, var(--copper-200) 100%);
}
.timeline li {
  position: relative;
  padding-bottom: 2.1rem;
}
.timeline li:last-child {
  padding-bottom: 0;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -2.4rem;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--copper);
}
.timeline .t-year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--slate-900);
  display: block;
  margin-bottom: 0.2rem;
}
.timeline p {
  margin: 0;
  color: var(--slate-600);
  font-size: 0.98rem;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  overflow: hidden;
}
.stat {
  background: var(--slate-900);
  padding: 1.9rem 1.5rem;
}
.stat .stat-n {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 700;
  color: var(--copper);
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}
.stat .stat-l {
  font-size: 0.93rem;
  color: rgba(255, 255, 255, 0.66);
  margin: 0;
  line-height: 1.45;
}

/* ==========================================================================
   Gallery
   ========================================================================== */

.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.gal-item {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease),
    border-color 0.32s var(--ease);
}
.gal-item:hover,
.gal-item:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: var(--copper-200);
}
.gal-item img,
.gal-item svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gal-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem 1rem 0.9rem;
  background: linear-gradient(180deg, transparent, rgba(28, 34, 42, 0.9));
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  transform: translateY(100%);
  transition: transform 0.32s var(--ease);
}
.gal-item:hover .gal-cap,
.gal-item:focus-visible .gal-cap {
  transform: translateY(0);
}
.gal-item[data-empty] {
  background: repeating-linear-gradient(
    45deg,
    var(--paper),
    var(--paper) 12px,
    var(--mist) 12px,
    var(--mist) 24px
  );
  border-style: dashed;
  cursor: default;
}
.gal-item[data-empty]:hover {
  transform: none;
  box-shadow: none;
}
.gal-slot {
  text-align: center;
  padding: 1.5rem;
  color: var(--slate-400);
  font-size: 0.9rem;
}
.gal-slot b {
  display: block;
  color: var(--slate-600);
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(28, 34, 42, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.lightbox.is-open {
  display: flex;
}
.lightbox figure {
  max-width: min(1000px, 92vw);
  margin: 0;
  text-align: center;
}
.lightbox img,
.lightbox svg {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 6px;
  background: #fff;
}
.lightbox figcaption {
  color: rgba(255, 255, 255, 0.82);
  margin-top: 1rem;
  font-size: 0.98rem;
}
.lightbox-close {
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.field {
  margin-bottom: 1.15rem;
}
.field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--slate-900);
  margin-bottom: 0.4rem;
}
.field .req {
  color: var(--copper-700);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--slate-900);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.72rem 0.95rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea {
  min-height: 130px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(197, 144, 106, 0.18);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: #B3452F;
  box-shadow: 0 0 0 3px rgba(179, 69, 47, 0.14);
}
.field-error {
  display: none;
  margin: 0.35rem 0 0;
  font-size: 0.86rem;
  color: #B3452F;
}
.field-error.is-shown {
  display: block;
}
.field-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}

.form-note {
  font-size: 0.88rem;
  color: var(--slate-400);
  margin-top: 1rem;
}

.form-status {
  display: none;
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  border-radius: 6px;
  font-size: 0.95rem;
  border: 1px solid;
}
.form-status.is-shown {
  display: block;
}
.form-status.is-ok {
  background: var(--mist);
  border-color: #C6DDD6;
  color: #235B4C;
}
.form-status.is-bad {
  background: #FBEDEA;
  border-color: #EFD0C8;
  color: #8A3423;
}

.contact-panel {
  background: var(--slate-900);
  color: rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  padding: clamp(1.8rem, 3vw, 2.4rem);
}
.contact-panel h3 {
  color: #fff;
  margin-bottom: 1.4rem;
}
.contact-line {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0.9rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  align-items: start;
}
.contact-line:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.contact-line svg {
  width: 20px;
  height: 20px;
  color: var(--copper);
  margin-top: 0.25rem;
}
.contact-line .cl-label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  color: var(--slate-400);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}
.contact-line a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  display: block;
  line-height: 1.55;
}
.contact-line a:hover {
  color: var(--copper-400);
  text-decoration: underline;
}

.dept-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
}
.dept-table th,
.dept-table td {
  text-align: left;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.dept-table th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--slate-900);
  white-space: nowrap;
}
.dept-table tr:hover td,
.dept-table tr:hover th {
  background: var(--copper-050);
}

.map-frame {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  background: var(--mist);
}
.map-frame iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}

/* Carried over from a product the visitor picked in the catalogue */
.enquiry-context {
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--copper-800);
}

.contact-line .cl-plain {
  color: #fff;
  font-weight: 600;
  line-height: 1.55;
}

/* ==========================================================================
   Call-to-action band
   ========================================================================== */

.cta-band {
  position: relative;
  background: linear-gradient(135deg, var(--slate-950) 0%, var(--slate-800) 100%);
  overflow: hidden;
}
.cta-band .hero-grid {
  opacity: 0.6;
}
.cta-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem 3rem;
  align-items: center;
}
.cta-inner h2 {
  color: #fff;
  margin-bottom: 0.7rem;
}
.cta-inner p {
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 52ch;
}
.cta-actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  background: var(--slate-950);
  color: rgba(255, 255, 255, 0.66);
  padding-top: clamp(3.25rem, 6vw, 4.75rem);
  font-size: 0.97rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  padding-bottom: 3rem;
}
.foot-brand img {
  width: 250px;
  margin-bottom: 1.2rem;
}
.foot-brand p {
  font-size: 0.95rem;
  max-width: 38ch;
  color: rgba(255, 255, 255, 0.6);
}
.foot h4 {
  color: #fff;
  font-size: 0.96rem;
  letter-spacing: 0.04em;
  margin-bottom: 1.1rem;
}
.foot ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.62rem;
}
.foot a {
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.foot a:hover {
  color: var(--copper-400);
  padding-left: 4px;
}
.foot-contact li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.65rem;
  align-items: start;
  line-height: 1.55;
}
.foot-contact svg {
  width: 16px;
  height: 16px;
  color: var(--copper);
  margin-top: 0.28rem;
}

.social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.social a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.8);
  transition: transform 0.28s var(--ease), background-color 0.28s var(--ease),
    border-color 0.28s var(--ease), color 0.28s var(--ease);
}
.social a:hover {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--slate-950);
  transform: translateY(-3px);
  padding-left: 0;
}
.social svg {
  width: 19px;
  height: 19px;
}

.foot-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 1.5rem;
  /* display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem; 
  justify-content: space-between;
  align-items: center; */
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.44);
  text-align: center;
}
.foot-bar a {
  font-size: 0.88rem;
}

.regulatory {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: 1.25rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.38);
  max-width: none;
}

/* Floating WhatsApp — a real conversion path for Indian hospital procurement */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1050;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px -10px rgba(37, 211, 102, 0.7);
  transition: transform 0.28s var(--ease);
}
.wa-float:hover {
  transform: scale(1.08);
  color: #fff;
}
.wa-float svg {
  width: 29px;
  height: 29px;
}

/* Back-to-top */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 1050;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--slate-900);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease),
    visibility 0.28s;
  box-shadow: var(--shadow-lift);
}
.to-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.to-top svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ledger-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .ledger-rail {
    position: static;
  }
  .ledger-rail p {
    max-width: 60ch;
  }
}

@media (max-width: 991.98px) {
  :root {
    --nav-h: 66px;
  }
  .nav-toggle {
    display: flex;
  }
  .nav-cta .nav-call {
    display: none;
  }
  .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(28, 34, 42, 0.985);
    backdrop-filter: blur(16px);
    padding: 0.5rem 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(197, 144, 106, 0.28);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s var(--ease), opacity 0.25s var(--ease),
      visibility 0.3s;
  }
  .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .nav-links a {
    padding: 0.95rem 0.35rem;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav-links a::after {
    left: 0.35rem;
    bottom: 0.55rem;
  }
  .nav-links .nav-mobile-call {
    margin-top: 1rem;
    justify-content: center;
    border-bottom: 0;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }
  .cta-inner {
    grid-template-columns: 1fr;
  }
  .cap-row {
    grid-template-columns: 46px 1fr;
  }
  .cap-row .cap-body {
    grid-column: 2;
  }
  .cap-row .cap-side {
    grid-column: 2;
  }
  .device-main {
    grid-template-columns: 58px 1fr;
    gap: 1rem;
  }
  .device-thumb {
    width: 58px;
    height: 58px;
  }
  .device-actions {
    grid-column: 2;
    flex-wrap: wrap;
  }
  .variant-select {
    min-width: 0;
    width: 100%;
    max-width: none;
  }
  .device-note {
    padding-left: 4.6rem;
  }
  .filter-search {
    margin-left: 0;
    width: 100%;
  }
  .filter-search input {
    width: 100%;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 1rem;
  }
  .shell,
  .shell-wide,
  .hero-inner {
    width: min(100% - 1.75rem, var(--shell));
  }
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 2.5rem);
  }
  .hero-lower {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .hero-actions .btn-brand,
  .hero-actions .btn-ghost {
    flex: 1 1 100%;
    justify-content: center;
  }
  .hero-domains {
    gap: 0.55rem 1.4rem;
    font-size: 0.88rem;
  }
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .field-2 {
    grid-template-columns: 1fr;
  }
  .device-note {
    padding-left: 1rem;
  }
  .to-top {
    bottom: 82px;
    right: 16px;
  }
  .wa-float {
    right: 16px;
    bottom: 16px;
  }
  .watermark svg {
    opacity: 0.3;
  }
}

/* ==========================================================================
   Print — procurement teams routinely print product pages for file notes
   ========================================================================== */

@media print {
  .nav,
  .wa-float,
  .to-top,
  .filter-bar,
  .cta-band,
  .watermark,
  .parallax-layer,
  .hero-trace {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .ledger-band {
    break-inside: avoid;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }
}