/* ===========================================================
   Equidor Medtech — Brand Stylesheet
   Palette derived from the equidor logo (teal-blue + orange)
   =========================================================== */

:root {
  /* Brand */
  --c-primary:        #15728F;   /* equidor teal-blue */
  --c-primary-dark:   #0E4D62;
  --c-primary-darker: #093749;
  --c-accent:         #F39200;   /* medtech orange */
  --c-accent-dark:    #D87E00;

  /* Neutrals */
  --c-ink:    #182A33;
  --c-body:   #3D525C;
  --c-muted:  #6A7E88;
  --c-line:   #E2EBEF;
  --c-bg:     #F4F8FA;
  --c-bg-2:   #EAF2F6;
  --c-card:   #FFFFFF;
  --c-white:  #FFFFFF;

  /* Soft product tints */
  --tint-purple: linear-gradient(160deg, #f3ecff 0%, #faf6ff 100%);
  --tint-blue:   linear-gradient(160deg, #e6f1fb 0%, #f4f9ff 100%);
  --tint-teal:   linear-gradient(160deg, #e3f4f4 0%, #f3fbfb 100%);
  --tint-amber:  linear-gradient(160deg, #fff2dd 0%, #fffaf0 100%);

  /* System */
  --radius:    18px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --shadow-sm: 0 4px 14px rgba(16, 60, 80, 0.06);
  --shadow:    0 14px 40px rgba(16, 60, 80, 0.10);
  --shadow-lg: 0 26px 70px rgba(16, 60, 80, 0.16);
  --maxw: 1500px;
  --nav-h: 92px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-logo: "Baloo 2", "Quicksand", "Inter", system-ui, sans-serif;
}

/* ----------------------------- Reset ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-body);
  background: var(--c-bg);
  line-height: 1.65;
  font-size: 17px;
  /* Clip horizontal overflow (e.g. the 1.25 scaled product photo bulging past
     its column) without creating a scroll context that would break sticky
     positioning. overflow-x: hidden would; overflow-x: clip doesn't. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--c-primary); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--c-accent); }
h1, h2, h3, h4 { color: var(--c-ink); line-height: 1.18; margin: 0 0 .5em; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.35rem; }
p  { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; }
section { position: relative; }

/* ----------------------------- Layout ---------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section   { padding: 88px 0; }
.section--tight { padding: 60px 0; }
.section--bg   { background: var(--c-bg-2); }
.section--white{ background: var(--c-white); }

/* ----------------------------- Innovations banner (home) -------- */
.innovation-banner { position: relative; overflow: hidden; padding: 110px 0; background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary-darker) 100%); color: #fff; text-align: center; }
.innovation-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 0; filter: saturate(0.95) brightness(0.85); }
.innovation-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(14,77,98,0.55) 0%, rgba(9,55,73,0.70) 100%); z-index: 1; pointer-events: none; }
.innovation-banner::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(243,146,0,.35), transparent 70%); border-radius: 50%; z-index: 1; pointer-events: none; }
.innovation-banner > .container { position: relative; z-index: 2; }
.innovation-banner__inner { max-width: 760px; margin: 0 auto; }
.innovation-banner .eyebrow { color: #ffd79b; }
.innovation-banner__h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.15; margin: 10px 0 18px; letter-spacing: -0.01em; }
.innovation-banner__p { color: rgba(255,255,255,0.88); font-size: 1.08rem; max-width: 640px; margin: 0 auto 28px; }
.innovation-banner .btn--accent { background: var(--c-accent); color: #fff; border: none; }
.innovation-banner .btn--accent:hover { background: var(--c-accent-dark); }
@media (max-width: 720px) { .innovation-banner { padding: 70px 0; } }
.center { text-align: center; }
.eyebrow {
  display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-accent); margin-bottom: 14px;
}
.section-head { max-width: 720px; margin: 0 auto 54px; text-align: center; }
.section-head h2 { color: var(--c-primary); text-transform: capitalize; }
.section-head h2.single-line { white-space: nowrap; }
@media (max-width: 720px) { .section-head h2.single-line { white-space: normal; } }
.section-head p  { color: var(--c-muted); font-size: 1.08rem; margin: 0; }
.lead { font-size: 1.15rem; color: var(--c-body); text-wrap: pretty; }

/* ----------------------------- Buttons --------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  font-weight: 600; font-size: .98rem; letter-spacing: .01em;
  padding: 14px 28px; border-radius: 999px; border: 2px solid transparent;
  transition: all .25s var(--ease); white-space: nowrap;
}
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--accent { background: var(--c-accent); color: #fff; }
.btn--accent:hover { background: var(--c-accent-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--ghost { background: transparent; color: var(--c-accent); border-color: var(--c-accent); letter-spacing: .16em; text-transform: uppercase; font-size: .82rem; }
.btn--ghost:hover { background: var(--c-accent); color: #fff; }
.btn--light { background: #fff; color: var(--c-primary); }
.btn--light:hover { background: var(--c-bg-2); color: var(--c-primary-dark); transform: translateY(-2px); }
.btn--block { width: 100%; justify-content: center; }

/* ----------------------------- Navbar ---------------------------- */
/* Rounded floating bar at all times: full-width at top, narrower pill on scroll.
   Width is driven by the wrap's horizontal padding (a real length) so the
   transition interpolates smoothly instead of snapping. */
.nav-wrap {
  /* At the top of the page the bar is flat and docked, flush with the viewport
     edges. On scroll it transitions into the centred floating pill below. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 0;
  transition: padding .45s var(--ease);
}
.nav {
  position: relative;       /* anchor for ::before backdrop layer */
  width: 100%; margin: 0;
  background: transparent;  /* moved to ::before — see note below */
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: 0 2px 12px rgba(16, 60, 80, 0.06);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(24px, 3vw, 42px);
  transition: padding .45s var(--ease), border-radius .45s var(--ease),
              border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* Glossy backdrop lives in a ::before pseudo-element rather than on .nav
   itself. Reason: backdrop-filter on an element creates a containing
   block for any position:fixed descendant. With backdrop-filter on .nav,
   the mobile slide-in drawer (.nav__links, position: fixed) was getting
   trapped inside the pill and clipped. The pseudo-element is a descendant
   of .nav, NOT an ancestor of .nav__links, so the drawer stays anchored
   to the viewport while the blur still paints behind every nav child. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: -1;
  transition: background .35s var(--ease),
              backdrop-filter .35s var(--ease),
              -webkit-backdrop-filter .35s var(--ease);
}
.nav-wrap.scrolled { padding: 12px max(20px, calc((100% - var(--maxw)) / 2)) 0; }
.nav-wrap.scrolled .nav {
  padding: 12px 30px;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 30px rgba(16, 60, 80, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Glass / frosted blur — more transparent background, heavier blur,
   light edge to read as glass over whatever content is behind it. */
.nav-wrap.scrolled .nav::before {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}
.nav__logo { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-logo); font-weight: 700; font-size: 1.8rem; letter-spacing: -.01em; line-height: 1; }
.nav__logo-img { height: 56px; width: auto; display: block; transition: height .4s var(--ease); }
.nav-wrap.scrolled .nav__logo-img { height: 48px; }
.nav__logo-text { align-items: baseline; gap: 2px; }
.nav__logo .e-eq { color: var(--c-primary); }
.nav__logo .e-dot { color: var(--c-accent); }
.nav__logo .e-sub { color: var(--c-accent); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: lowercase; margin-left: 2px; align-self: flex-end; }
.nav__links { display: flex; align-items: center; gap: 6px; list-style: none; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 5px; padding: 10px 16px; border-radius: 999px;
  color: var(--c-ink); font-weight: 600; font-size: 1.02rem; cursor: pointer; background: none; border: none; font-family: inherit;
}
.nav__link:hover { color: var(--c-primary); background: var(--c-bg-2); }
.nav__link.is-active { color: var(--c-primary); font-weight: 700; }
.nav__caret { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease); }
.nav__item.open .nav__caret { transform: rotate(-135deg) translateY(-2px); }

/* Dropdowns */
.dropdown {
  position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 14px; opacity: 0; visibility: hidden; transition: all .25s var(--ease); border: 1px solid var(--c-line);
}
/* Transparent bridge between the nav link and its dropdown, so moving the cursor
   across the visual gap doesn't lose hover and cause a flicker. Active only while
   the item is open / hovered, so it never blocks clicks on the page below. */
.nav__item--has-drop::after {
  content: ""; position: absolute; top: 100%; left: -10px; right: -10px; height: 22px;
  pointer-events: none;
}
.nav__item--has-drop:hover::after,
.nav__item--has-drop.open::after { pointer-events: auto; }
.nav__item.open .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown--mega { width: 480px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dropdown--list { width: 230px; }
.drop-link {
  display: block; padding: 13px 18px; border-radius: var(--radius-sm); color: var(--c-ink); font-weight: 600; font-size: .98rem;
  background: var(--tint-blue); transition: all .2s var(--ease); text-align: center;
}
/* Both dropdowns (mega + list) share the same drop-link styling now -
   the previous .dropdown--list override that stripped the background
   has been removed. */
.dropdown--list { display: grid; gap: 6px; }
.drop-link:hover { background: var(--c-primary); color: #fff; box-shadow: 0 6px 16px rgba(16, 60, 80, 0.18); }
.drop-link small { display: block; font-weight: 500; font-size: .76rem; color: var(--c-muted); margin-top: 2px; }
.drop-link:hover small { color: rgba(255,255,255,.85); }
.drop-link--logo { background: var(--c-bg-2); padding: 8px 12px; display: flex; align-items: center; justify-content: center; min-height: 44px; }
.drop-link--logo:hover { background: var(--c-primary); box-shadow: 0 6px 16px rgba(16, 60, 80, 0.18); }
.drop-logo-img { display: block; max-height: 22px; max-width: 100%; width: auto; transition: filter .2s var(--ease); }
.drop-link--logo:hover .drop-logo-img { filter: brightness(0) invert(1); }

/* Mobile nav toggle */
.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav__toggle span { width: 26px; height: 2.5px; background: var(--c-ink); border-radius: 2px; transition: .3s var(--ease); }
.nav.open .nav__toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav__toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ----------------------------- Hero ------------------------------ */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; align-items: stretch; }
.hero__media { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-darker) 100%); }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(9,55,73,.35), rgba(9,55,73,0) 60%); }
.hero__content { display: flex; flex-direction: column; justify-content: center; padding: 70px clamp(28px, 6vw, 90px); background: #fff; }
.hero__content h1 { color: var(--c-ink); margin-bottom: 18px; }
.hero__content h1 .accent { color: var(--c-primary); }
.hero__content .lead { max-width: 30rem; margin-bottom: 30px; color: var(--c-muted); }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__stats { display: flex; gap: 36px; margin-top: 46px; flex-wrap: wrap; }
.hero__stat .num { font-size: 1.9rem; font-weight: 800; color: var(--c-primary); line-height: 1; }
.hero__stat .lbl { font-size: .85rem; color: var(--c-muted); margin-top: 4px; }

/* Animated hero motion graphic (vestibular / eye-tracking motif) */
.hero__media--anim svg { display: block; }
.hg-ring, .hg-sweep, .hg-orbit, .hg-core { transform-box: view-box; transform-origin: 400px 430px; }
.hg-ring  { opacity: 0; animation: hgRadar 4.8s var(--ease) infinite; }
.hg-r2 { animation-delay: 1.2s; }
.hg-r3 { animation-delay: 2.4s; }
.hg-r4 { animation-delay: 3.6s; }
.hg-sweep { animation: hgSpin 9s linear infinite; }
.hg-orbit { animation: hgSpin 16s linear infinite; }
.hg-core  { animation: hgCore 3.4s ease-in-out infinite; }
.hg-glow  { animation: hgGlow 6s ease-in-out infinite; }
.hg-wave-o { animation: hgWave 6s linear infinite; }
.hg-wave-w { animation: hgWave 9s linear infinite; }

@keyframes hgRadar { 0% { transform: scale(.16); opacity: .6; } 70% { opacity: .22; } 100% { transform: scale(1); opacity: 0; } }
@keyframes hgSpin  { to { transform: rotate(360deg); } }
@keyframes hgCore  { 0%,100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.14); opacity: .66; } }
@keyframes hgGlow  { 0%,100% { opacity: .45; } 50% { opacity: .85; } }
@keyframes hgWave  { to { transform: translateX(-200px); } }

@media (prefers-reduced-motion: reduce) {
  .hg-ring, .hg-sweep, .hg-orbit, .hg-core, .hg-glow, .hg-wave-o, .hg-wave-w { animation: none !important; }
  .hg-ring { opacity: .18; }
}

/* ----------------------------- Hero slider ----------------------- */
.hero-slider { position: relative; overflow: hidden; outline: none; }
.slider__track { display: flex; transition: transform .7s var(--ease); will-change: transform; }
.slider__track.no-anim { transition: none; }
.slide {
  position: relative; flex: 0 0 100%; min-height: 100vh;
  display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; overflow: hidden;
}
.slide::after { content: ""; position: absolute; right: -140px; top: -140px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(243,146,0,.28), transparent 70%); border-radius: 50%; pointer-events: none; }
.slide__content { position: relative; z-index: 2; padding: 70px clamp(28px, 6vw, 92px); color: #fff; }
.slide__content .eyebrow { color: #ffd79b; }
.slide__content h1 { color: #fff; margin-bottom: 18px; }
.slide__content h1 .hl { color: #ffd79b; }
.slide__content p { color: rgba(255,255,255,.92); max-width: 33rem; font-size: 1.14rem; margin-bottom: 30px; }
.slide__visual { position: relative; z-index: 1; height: 100%; min-height: 280px; display: flex; align-items: center; justify-content: center; padding: 40px; }
.slide__visual svg { width: min(82%, 440px); height: auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.18)); }

/* slide background themes */
.slide--eye       { background: linear-gradient(120deg, #15728F 0%, #093749 100%); }
.slide--precision { background: linear-gradient(120deg, #1a6aa0 0%, #0a2c44 100%); }
.slide--relief    { background: linear-gradient(120deg, #0E4D62 0%, #15728F 55%, #1a93ab 100%); }
.slide--rehab     { background: linear-gradient(120deg, #5b3aa6 0%, #1a5f87 100%); }

/* arrows */
.slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.45); color: #fff;
  font-size: 1.7rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .25s var(--ease), transform .25s var(--ease);
}
.slider__arrow:hover { background: rgba(255,255,255,.34); }
.slider__arrow:active { transform: translateY(-50%) scale(.94); }
.slider__arrow--prev { left: 22px; } .slider__arrow--next { right: 22px; }

/* dots */
.slider__dots { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 10px; }
.slider__dot { width: 12px; height: 12px; padding: 0; border: none; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.5); transition: all .3s var(--ease); }
.slider__dot:hover { background: rgba(255,255,255,.8); }
.slider__dot.active { background: #fff; width: 32px; }

/* motif animations */
.sl-eye   { transform-box: view-box; transform-origin: 200px 200px; animation: slLook 5s ease-in-out infinite; }
.sl-wave  { animation: slWave 4s linear infinite; }
.sl-spin  { transform-box: view-box; transform-origin: 200px 200px; animation: hgSpin 7s linear infinite; }
.sl-pulse { transform-box: view-box; transform-origin: 200px 200px; opacity: 0; animation: slRing 3.4s var(--ease) infinite; }
.sl-beat  { transform-box: view-box; transform-origin: 318px 108px; animation: slBeat 2.4s ease-in-out infinite; }
.sl-float { transform-box: view-box; transform-origin: 200px 320px; animation: slBob 3.2s ease-in-out infinite; }
@keyframes slLook { 0%,100% { transform: translateX(-15px); } 50% { transform: translateX(15px); } }
@keyframes slWave { to { transform: translateX(-160px); } }
@keyframes slRing { 0% { transform: scale(.35); opacity: .65; } 100% { transform: scale(1); opacity: 0; } }
@keyframes slBeat { 0%,100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(1); } 45% { transform: scale(1.16); } }
@keyframes slBob  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@media (max-width: 980px) {
  .slide { grid-template-columns: 1fr; min-height: auto; }
  .slide__visual { order: -1; min-height: 240px; padding: 36px 36px 0; }
  .slide__visual svg { width: min(54%, 260px); }
  .slide__content { padding: 30px clamp(24px, 6vw, 60px) 64px; }
  .slider__dots { bottom: 16px; }
  .slider__arrow { width: 44px; height: 44px; font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .slider__track { transition: none; }
  .sl-eye, .sl-wave, .sl-spin, .sl-pulse, .sl-beat, .sl-float { animation: none !important; }
}

/* ----------------------------- Product cards --------------------- */
.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.pcard {
  display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--c-card); box-shadow: var(--shadow-sm); border: 1px solid var(--c-line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(16, 60, 80, 0.14), 0 4px 12px rgba(16, 60, 80, 0.06);
  border-color: rgba(16, 60, 80, 0.12);
}
@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard:hover { transition: none; transform: none; }
}
.pcard__body { padding: 30px; display: flex; flex-direction: column; flex: 1; text-align: center; }
.pcard__badge { position: absolute; top: 10px; right: 10px; z-index: 3; font-size: .56rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c-primary); background: rgba(255,255,255,.32); -webkit-backdrop-filter: blur(6px) saturate(160%); backdrop-filter: blur(6px) saturate(160%); padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 3px 9px rgba(24,42,51,.12), inset 0 1px 0 rgba(255,255,255,.8); }
.pcard--blue   .pcard__badge { color: #1a6aa0; background: rgba(168,206,240,.40); }
.pcard--teal   .pcard__badge { color: #0E4D62; background: rgba(150,213,213,.40); }
.pcard--amber  .pcard__badge { color: #a86a00; background: rgba(247,206,140,.44); }
.pcard--purple .pcard__badge { color: #6b46c1; background: rgba(214,196,255,.44); }
.pcard__name { font-size: 1.7rem; font-weight: 800; margin: 0 0 4px; }
.pcard__sub { color: var(--c-primary); font-weight: 600; font-size: 1.02rem; margin-bottom: 18px; }
.pcard__media { position: relative; border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; background: var(--c-bg-2); aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; }
.products-more { display: none; text-align: center; margin-top: 28px; }
.pcard__media img, .pcard__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.pcard:hover .pcard__media img, .pcard:hover .pcard__media svg { transform: scale(1.08); }
.pcard__desc { color: var(--c-muted); font-size: .98rem; margin-bottom: 18px; }
.pcard__feats { list-style: none; text-align: left; margin: 0 0 22px; display: grid; gap: 10px; }
.pcard__feats li { position: relative; padding-left: 28px; font-size: .95rem; color: var(--c-body); }
.pcard__feats li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-primary); -webkit-mask: var(--check) center/12px no-repeat; mask: var(--check) center/12px no-repeat; }
.pcard .btn { margin-top: auto; }
.pcard__media--logo { padding: 30px 34px; }
.pcard__media--logo img { width: 100%; height: auto; max-height: 84px; object-fit: contain; }
.ph--logo { padding: 56px; }
.ph--logo img { width: min(86%, 460px); height: auto; }
.ph--device { padding: 0; overflow: hidden; }
.ph--device img, .ph--device svg { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Real device photograph: the photo floats on the page with the soft cyan
   glow applied to the image itself (no surrounding card). scale 0.9 keeps
   the photo slightly smaller than the prose column. */
.ph--photo { padding: 0; overflow: visible; background: transparent; transform: scale(0.9); transform-origin: center; }
.ph--photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
/* The glow lives on the actual photo elements (the swap pair, or the single
   single-image fallback) — slight 12 px corner soften so the shadow doesn't
   meet razor-sharp pixels. */
.ph--photo img,
.ph--photo .photo-swap img {
  border-radius: 22px;
  box-shadow:
    0 12px 36px -8px rgba(82, 180, 220, 0.30),
    0 0   60px -10px rgba(82, 180, 220, 0.25);
}
/* Photo media uses a square container (the source photos are 1:1). */
.pdetail__media:has(.ph--photo) .ph { aspect-ratio: 1 / 1; }
/* Strip the box-around-the-image chrome on the overview side panel: no rounded
   frame, no clipping, no box shadow on the container. The glow lives on the
   photo itself (rule below), so the image reads as floating on the page rather
   than sitting inside a card. */
.pdetail__media:has(.ph--photo) {
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
/* Mask-image feather no longer needed: the .pdetail__media's rounded clip +
   ambient cyan glow give the soft-card look without dissolving the photo
   into the page background. Keeping this comment so a search for "mask-image"
   on the overview photo finds the design decision. */
/* (Earlier rule "drop card chrome" deleted: the floating soft-glow card style
   defined a few lines above (border-radius: 28px + layered cyan shadow) is the
   intended treatment now.) */

/* Looping crossfade between a device shot and an in-use model shot in the same
   overview side panel. Both images stack absolutely; opacity animations swap
   them on an 8s cycle.
   will-change: opacity keeps each image on its own GPU compositing layer so
   the crossfade animation doesn't trigger layout thrash inside the sticky
   side panel during scroll (which was causing 1-2 px vertical jitter). */
.photo-swap { position: relative; width: 100%; height: 100%; }
.photo-swap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; will-change: opacity; backface-visibility: hidden; }
.photo-swap__a { animation: photoSwapA 8s infinite ease-in-out; }
.photo-swap__b { animation: photoSwapB 8s infinite ease-in-out; }
@keyframes photoSwapA {
  0%, 40% { opacity: 1; }
  50%, 90% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes photoSwapB {
  0%, 40% { opacity: 0; }
  50%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-swap__a { animation: none; opacity: 1; }
  .photo-swap__b { animation: none; opacity: 0; }
}
.pcard--purple .pcard__media { background: var(--tint-purple); }
.pcard--blue   .pcard__media { background: var(--tint-blue); }
.pcard--teal   .pcard__media { background: var(--tint-teal); }
.pcard--amber  .pcard__media { background: var(--tint-amber); }
.pcard--soon { opacity: .98; }
.pcard__soon-tag { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--c-accent); border:1px solid var(--c-accent); padding:4px 10px; border-radius:999px; margin-top:auto; }

:root {
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E");
}

/* ----------------------------- Icon tiles ------------------------ */
.itile { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #fff; margin: 0 auto 18px; box-shadow: var(--shadow-sm); }
.itile svg { width: 30px; height: 30px; }
.itile--teal { background: linear-gradient(135deg,#1aa0b8,#15728F); }
.itile--purple { background: linear-gradient(135deg,#9b6bff,#7a45e0); }
.itile--amber { background: linear-gradient(135deg,#ffb347,#F39200); }
.itile--blue { background: linear-gradient(135deg,#4d96f5,#2c6fd6); }
.itile--green { background: linear-gradient(135deg,#46c98b,#2aa86b); }

/* ----------------------------- Feature / value cards ------------- */
.vcard { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 34px 28px; text-align: center; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); height: 100%; }
.vcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.vcard h3 { margin-bottom: 10px; }
.vcard p { color: var(--c-muted); font-size: .96rem; margin: 0; }

/* ----------------------------- Department cards (contact) ------- */
.dept-stack { display: grid; gap: 18px; }
.dept-card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 4px; align-items: start; }
.dept-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.dept-card__tile { grid-row: 1 / span 3; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; margin-top: 4px; flex: 0 0 42px; }
.dept-card__tile svg { width: 20px; height: 20px; }
.dept-card__tile--primary { background: var(--c-primary); }
.dept-card__tile--accent { background: var(--c-accent); }
.dept-card h3 { margin: 0; font-size: 1.15rem; color: var(--c-heading); }
.dept-card__desc { color: var(--c-muted); margin: 0; font-size: .94rem; }
.dept-info { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; }
.dept-info li { display: flex; align-items: center; gap: 10px; font-size: .94rem; color: var(--c-body); }
.dept-info li svg { width: 16px; height: 16px; color: var(--c-primary); flex: 0 0 16px; }
.dept-info li a { color: var(--c-body); }
.dept-info li a:hover { color: var(--c-primary); }
.dept-stack > .cinfo__row { margin-top: 4px; }
.cert-std { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); background: var(--c-bg-2); padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }

/* ----------------------------- Tabs (Resources) ----------------- */
.tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; border-bottom: 1px solid var(--c-line); }
.tab-btn { appearance: none; background: none; border: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 1rem; color: var(--c-muted); padding: 14px 24px; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .2s var(--ease), border-color .2s var(--ease); }
.tab-btn:hover { color: var(--c-primary); }
.tab-btn.is-active { color: var(--c-primary); border-bottom-color: var(--c-accent); }
/* Compliance tab uses the long label on desktop, just 'Compliance' on phones
   so all three tabs fit on a single line. */
.tab-btn__short { display: none; }
@media (max-width: 540px) {
  .tabs { gap: 2px; }
  .tab-btn { padding: 12px 12px; font-size: .92rem; }
  .tab-btn__long { display: none; }
  .tab-btn__short { display: inline; }
}
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: tab-fade .35s var(--ease); }
@keyframes tab-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ----------------------------- FAQ accordion -------------------- */
.faq { max-width: 840px; margin: 0 auto; display: grid; gap: 14px; }
.faq details { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 0 24px; box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; font-weight: 600; color: var(--c-body); padding: 20px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--c-accent); font-size: 1.5rem; font-weight: 700; line-height: 1; flex: 0 0 auto; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--c-muted); margin: 0; padding: 0 0 22px; line-height: 1.7; }

/* ----------------------------- Page hero (inner) ----------------- */
.phero { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-darker) 100%); color: #fff; padding: 150px 0 90px; text-align: center; position: relative; overflow: hidden; }
.phero::before { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(243,146,0,.35), transparent 70%); border-radius: 50%; z-index: 1; pointer-events: none; }
/* Per-product animated SVG hero background (assets/img/hero/<slug>.svg).
   Sits behind the text content, in front of the gradient. The SVG carries its
   own internal animations. */
.phero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 0; }
/* Photo-backed hero variant — the photograph carries the colour, so suppress
   the dark gradient and the orange radial accent that the default phero adds. */
.phero--photo { background: #0E2A36; }
.phero--photo::before { display: none; }
.phero--photo .phero__bg { filter: saturate(0.95) brightness(0.95); }
.phero--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(14,77,98,0.50) 0%, rgba(9,55,73,0.62) 100%); z-index: 1; pointer-events: none; }
.phero--photo > .container, .phero--photo .eyebrow { z-index: 2; }
.phero > .container { position: relative; z-index: 2; }
.phero .eyebrow { position: relative; z-index: 2; }
.phero h1 { color: #fff; }
.phero p { color: rgba(255,255,255,.85); max-width: 680px; margin: 0 auto; font-size: 1.12rem; }
.phero .eyebrow { color: #ffd79b; }
.phero__h1 { line-height: 0; margin: 6px 0 18px; position: relative; z-index: 2; }
.phero__tagline { font-size: 1.18rem; font-weight: 600; font-style: italic; color: #ffd79b; letter-spacing: .01em; margin: 0 0 12px; max-width: 720px; margin-left: auto; margin-right: auto; position: relative; z-index: 2; }
.phero__logo { display: inline-flex; align-items: center; justify-content: center; padding: 8px 0; }
.phero__logo-img { display: block; max-height: 110px; width: auto; max-width: min(520px, 100%); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.28)); }
@media (max-width: 720px) { .phero__logo { padding: 4px 0; } .phero__logo-img { max-height: 72px; } }
.phero__actions { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.product-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ----------------------------- Other-products carousel --------- */
/* Auto-scrolling horizontal strip. 4 cards in view on desktop. The track
   contains the 7 products rendered twice so the auto-scroller can wrap
   seamlessly — see the matching handler in main.js. */
.op-carousel-wrap { position: relative; }
.op-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 1px solid var(--c-line); color: var(--c-primary);
  box-shadow: var(--shadow); cursor: pointer; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s var(--ease), background .25s var(--ease),
              color .25s var(--ease), opacity .25s var(--ease);
}
.op-arrow svg { width: 18px; height: 18px; display: block; }
.op-arrow:hover { background: var(--c-primary); color: #fff; transform: translateY(-50%) scale(1.06); }
.op-arrow:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.op-arrow--prev { left: -20px; }
.op-arrow--next { right: -20px; }
.op-arrow.is-hidden { opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.85); }
@media (max-width: 720px) { .op-arrow { display: none; } }

.op-carousel {
  display: grid; grid-auto-flow: column;
  /* Fixed card width — the carousel spans the full container width and shows
     as many cards as fit. Card count in view scales with the viewport. */
  grid-auto-columns: 220px;
  gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px 14px;
  /* Hide scrollbar but keep scroll functional */
  scrollbar-width: none; -ms-overflow-style: none;
}
.op-carousel::-webkit-scrollbar { display: none; width: 0; height: 0; }

.op-card {
  display: flex; flex-direction: column;
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 14px;
  text-decoration: none; color: var(--c-body);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.op-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(21, 114, 143, 0.30); }
.op-card__media {
  aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--c-bg-2); margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
}
.op-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); display: block; }
.op-card:hover .op-card__media img { transform: scale(1.06); }
/* Photo variant for the device PNGs in the carousel: no surrounding box, the
   soft cyan glow rides on the image itself (matches the overview treatment).
   The carousel uses slightly tighter shadow numbers because the cards are
   smaller. */
.op-card__media:has(.op-card__img--photo) {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.op-card__img--photo {
  object-fit: cover !important;
  object-position: center;
  border-radius: 16px;
  box-shadow:
    0 8px 22px -6px rgba(82, 180, 220, 0.30),
    0 0 36px -8px rgba(82, 180, 220, 0.22);
}
.op-card__name { font-weight: 700; font-size: .95rem; color: var(--c-primary); text-align: center; }

@media (max-width: 600px) { .op-carousel { grid-auto-columns: 180px; } .op-card { padding: 12px; } }
@media (max-width: 420px) { .op-carousel { grid-auto-columns: 70%; } }

.btn--icon { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn--icon svg { width: 19px; height: 19px; flex: 0 0 auto; }
.btn--download:hover svg { animation: btn-bob .6s var(--ease); }
@keyframes btn-bob { 0%,100% { transform: translateY(0); } 40% { transform: translateY(3px); } }
/* Equal-size action buttons */
.product-actions .btn { min-width: 240px; }

/* ----------------------------- Product detail -------------------- */
.overview__h2 { display: block; line-height: 0; margin: 0 0 18px; }
.overview__logo-img { display: block; max-height: 52px; width: auto; max-width: min(300px, 100%); }
@media (max-width: 720px) { .overview__logo-img { max-height: 40px; } }
/* Consecutive .lead paragraphs in the overview get even rhythm */
.lead + .lead { margin-top: 22px; }

/* About page prose — centred narrow column with comfortable line-height */
.about-prose { max-width: 820px; margin: 0 auto; }
.about-prose p { color: var(--c-body); font-size: 1.06rem; line-height: 1.85; margin: 0 0 22px; }
.about-prose p:last-child { margin-bottom: 0; }
.about-prose .lead { font-size: 1.18rem; color: var(--c-ink); }
.about-prose strong { color: var(--c-primary); font-weight: 700; }

/* Trusted-by clinic logos strip — continuous horizontal marquee.
   Track contains two copies of the logo set; the animation translates by
   -50% so the loop is seamless. Soft edge fade via mask-image. */
.logos-strip {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logos-track {
  display: flex; gap: 64px; padding: 18px 0;
  width: max-content;
  animation: logos-scroll 50s linear infinite;
}
.logos-strip:hover .logos-track { animation-play-state: paused; }
.logo-item {
  flex: 0 0 auto;
  height: 56px; min-width: 180px;
  display: flex; align-items: center; justify-content: center;
  opacity: .55;
  filter: grayscale(100%);
  transition: opacity .3s var(--ease), filter .3s var(--ease);
}
.logo-item:hover { opacity: 1; filter: grayscale(0); }
.logo-item img { height: 100%; width: auto; max-width: none; display: block; }
@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .logos-track { animation: none; } }
@media (max-width: 600px) { .logos-track { gap: 40px; } .logo-item { height: 44px; } }

/* Trusted-by clinic logos: bare images, no frame / no background / no shadow.
   Each clinic gets a fixed-width slot so logos of varied aspect ratios
   produce consistent density across the marquee.
   Slot width sized so logos up to ~3.7:1 aspect ratio render at the full
   56-px height instead of being width-clipped. At ~7 visible across a
   1366-1440 px desktop viewport (10 × 210 + 9 × 22 ≈ 1898 px / viewport). */
.logos-strip--clinicians .logos-track { gap: 22px; padding: 8px 0; align-items: center; }
.clinician-card {
  flex: 0 0 210px;
  display: flex; align-items: center; justify-content: center;
  opacity: .85;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.clinician-card:hover { opacity: 1; transform: translateY(-2px); }
.clinician-card__avatar {
  height: 56px; width: 100%;
  background: none; box-shadow: none; border-radius: 0; overflow: visible;
  display: flex; align-items: center; justify-content: center;
}
.clinician-card__avatar img {
  height: 100%; width: auto; max-width: 100%;
  object-fit: contain; display: block;
}
@media (max-width: 600px) {
  .clinician-card { flex: 0 0 140px; }
  .clinician-card__avatar { height: 44px; }
  .logos-strip--clinicians .logos-track { gap: 14px; }
}

/* Feature banner image (centred card, rounded corners, soft shadow) */
.banner { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); max-width: 1400px; margin: 0 auto; }
.banner img { width: 100%; height: auto; display: block; }
/* Full-bleed banner — spans the entire page width, no border-radius */
.banner-full { width: 100%; margin: 0; overflow: hidden; line-height: 0; }
.banner-full img { width: 100%; height: auto; display: block; }
.banner-full + section, .banner-full + .section { padding-top: 48px; }

/* Technology pillars — stacked icon-left / prose-right rows */
.pillars { display: grid; gap: 24px; max-width: 980px; margin: 0 auto; }
.pillar { display: grid; grid-template-columns: 96px 1fr; gap: 28px; align-items: start; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 32px clamp(24px, 4vw, 40px); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pillar__icon { display: flex; align-items: flex-start; }
.pillar__icon .itile { margin: 0; }
.pillar__body h3 { margin: 0 0 10px; color: var(--c-primary); font-size: 1.5rem; }
.pillar__body p { margin: 0; color: var(--c-body); line-height: 1.8; font-size: 1.02rem; }
@media (max-width: 640px) {
  .pillar { grid-template-columns: 1fr; padding: 26px 24px; gap: 18px; }
  .pillar__icon { justify-content: center; }
}

/* Technology stack diagram — four layered bands with arrows between them */
.tech-stack { max-width: 880px; margin: 0 auto; }
.tech-stack__layer { padding: 22px 28px; border-radius: var(--radius); background: var(--c-card); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); position: relative; }
.tech-stack__layer--1 { border-left: 4px solid #7a45e0; }            /* sensors — deep purple */
.tech-stack__layer--2 { border-left: 4px solid var(--c-primary); }   /* CV — teal */
.tech-stack__layer--3 { border-left: 4px solid #F39200; }            /* AI — orange */
.tech-stack__layer--4 { border-left: 4px solid #2aa86b; }            /* UI/VR/reports — green */
.tech-stack__label { font-weight: 700; color: var(--c-ink); font-size: 1.06rem; margin-bottom: 4px; }
.tech-stack__desc { color: var(--c-muted); font-size: .95rem; line-height: 1.55; }
.tech-stack__arrow { text-align: center; color: var(--c-muted); font-size: 1.5rem; padding: 8px 0; line-height: 1; }
@media (max-width: 600px) { .tech-stack__layer { padding: 18px 22px; } }

/* Stats — spaced numbers, no card. Big brand-teal numeral + small uppercase
   label below, centred in each grid cell. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; max-width: 1180px; margin: 0 auto; }
.stat { text-align: center; padding: 0; background: none; border: none; box-shadow: none; }
.stat__num { font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 800; color: var(--c-primary); line-height: 1.05; margin-bottom: 8px; letter-spacing: -.02em; }
.stat__plus { color: var(--c-accent); font-weight: 700; margin-left: 2px; }
.stat__label { font-size: .82rem; color: var(--c-muted); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 680px) { .stats { grid-template-columns: 1fr 1fr; gap: 24px; } }

.pdetail { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; }
.pdetail__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); position: sticky; top: 120px; will-change: transform; }
.pdetail__media .ph { aspect-ratio: 5/4; display: flex; align-items: center; justify-content: center; }
.pdetail__media .ph img, .pdetail__media .ph svg, .pdetail__media .ph .itile { transition: transform .5s var(--ease); }
.pdetail__media:hover .ph img, .pdetail__media:hover .ph svg, .pdetail__media:hover .ph .itile { transform: scale(1.06); }
.featbox { list-style: none; display: grid; gap: 14px; margin: 0 0 8px; }
.featbox li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; color: var(--c-body); }
.featbox li::before { content: ""; flex: 0 0 22px; height: 22px; border-radius: 50%; margin-top: 2px; background: var(--c-primary); -webkit-mask: var(--check) center/13px no-repeat; mask: var(--check) center/13px no-repeat; }
.featbox--2col { grid-template-columns: 1fr 1fr; column-gap: 36px; row-gap: 14px; }
@media (max-width: 720px) { .featbox--2col { grid-template-columns: 1fr; } }

/* Key Capabilities variant: right-pointing arrow marker instead of the tick.
   Same mask-and-fill technique as the base check — the pseudo-element is
   filled with brand teal and the SVG arrow defines the visible mask shape.
   Border-radius/box-shadow added by the base rule are explicitly cleared
   so this variant inherits cleanly. */
.featbox--arrow li::before {
  flex: 0 0 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: 0;
  border: 0;
  background: var(--c-primary);
  box-shadow: none;
  -webkit-mask: var(--arrow) center/18px no-repeat;
  mask: var(--arrow) center/18px no-repeat;
}

/* ----------------------------- Protocol list (numbered + bold) ---- */
.protolist { list-style: none; display: grid; gap: 16px; margin: 0; padding: 0; counter-reset: pl; }
.protolist--2col { grid-template-columns: 1fr 1fr; column-gap: 40px; }
@media (max-width: 720px) { .protolist--2col { grid-template-columns: 1fr; } }
.protolist li { counter-increment: pl; display: flex; gap: 14px; align-items: flex-start; }
.protolist li::before { content: counter(pl); flex: 0 0 28px; height: 28px; border-radius: 50%; background: rgba(21, 114, 143, 0.08); color: var(--c-primary); font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.protolist .proto-name { font-weight: 700; color: var(--c-body); font-size: 1rem; line-height: 1.55; }
.protolist .proto-desc { display: block; color: var(--c-muted); font-weight: 400; font-size: .92rem; line-height: 1.55; margin-top: 3px; }
.protolist .proto-body { display: flex; flex-direction: column; }

/* Cap at max 6 columns per row, while still wrapping responsively on narrower viewports */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(220px, calc((100% - 5 * 16px) / 6)), 1fr)); gap: 16px; }
.spec { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.spec .k { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; }
.spec .v { font-size: 1.18rem; font-weight: 700; color: var(--c-ink); margin-top: 4px; }

.chip-list { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { background: var(--c-bg-2); color: var(--c-primary-dark); border-radius: 999px; padding: 9px 18px; font-size: .92rem; font-weight: 600; }

.block { margin-bottom: 56px; }
.block > h2 { color: var(--c-primary); }

/* ----------------------------- Team cards ------------------------
   Modern profile cards sized for a 4-across desktop row.
   Avatar: 132 px circle with a soft white ring + teal halo so it
   reads as a polished portrait disc rather than a sticker. Card
   chrome itself is light — rounded, faint border, soft shadow that
   deepens on hover, subtle lift. */
.person {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 22px;
  padding: 34px 22px 28px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(16, 60, 80, 0.04);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.person:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -10px rgba(16, 60, 80, 0.18), 0 4px 12px rgba(16, 60, 80, 0.06);
  border-color: rgba(21, 114, 143, 0.18);
}
.person__avatar {
  width: 132px; height: 132px; border-radius: 50%;
  margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-darker));
  /* white ring + cyan halo */
  box-shadow:
    0 0 0 5px #fff,
    0 0 0 6px rgba(21, 114, 143, 0.14),
    0 12px 26px -8px rgba(21, 114, 143, 0.30);
}
/* Photo variant: contains a headshot instead of initials. */
.person__avatar--photo { overflow: hidden; background: var(--c-bg-2); padding: 0; position: relative; }
.person__avatar--photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  /* baseline transform; the hover transform on .person:hover overrides it */
  transform: scale(1);
  transition: transform .6s var(--ease), filter .4s var(--ease);
}
/* Per-photo crop tuning: anagha + ajith have a bit more headroom in their
   source files than malini/srinivas, so we shift the visible window down
   ~40% to centre the face inside the avatar circle. */
.person__avatar--photo img[src*="anagha"],
.person__avatar--photo img[src*="ajith"] {
  object-position: center 40%;
}
/* Subtle hover animation: photo zooms in ~6% and brightens a hair so it
   reads as 'lit'. The whole card lifts via the existing .person:hover
   transform; this just adds the in-circle motion. */
.person:hover .person__avatar--photo img {
  transform: scale(1.08);
  filter: saturate(1.08) brightness(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .person__avatar--photo img,
  .person:hover .person__avatar--photo img { transition: none; transform: none; filter: none; }
}
.person__name { font-size: 1.18rem; font-weight: 800; margin: 0 0 4px; color: var(--c-ink); letter-spacing: -.01em; }
.person__role { color: var(--c-primary); font-weight: 600; font-size: .94rem; margin: 0 0 14px; }
/* Responsibility chip hidden for now per user request. Markup is still
   rendered (kept in person() in build.py) so flipping this back on is a
   one-line change here. To restore: delete this rule. */
.person p { display: none !important; }

/* Responsibility chip — upgraded from the flat pill to a more confident
   "status badge" treatment:
     • soft cyan-to-tint gradient background (depth, not flat)
     • slightly heavier 1.5 px tinted outline
     • subtle inner highlight via inset 1 px box-shadow + soft outer shadow
     • status-dot now has a halo ring (8 px dot + 3 px halo) so it reads
       as an indicator rather than a punctuation dot
     • lifts 1 px when the card is hovered (rides the card's lift)
     • on direct hover, gradient saturates a hair so the chip feels alive */
.person p {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .86rem !important;
  font-weight: 600 !important;
  color: var(--c-primary-darker) !important;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 !important;
  padding: 7px 16px 7px 13px;
  background: linear-gradient(135deg, #e8f3fb 0%, #d9ecf3 100%);
  border: 1px solid rgba(21, 114, 143, 0.22);
  border-radius: 999px;
  line-height: 1.4;
  box-shadow:
    0 2px 8px rgba(16, 60, 80, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.person p::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.20);
  flex: 0 0 8px;
}
.person:hover p {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #def0f9 0%, #cce5ee 100%);
  box-shadow:
    0 5px 14px rgba(16, 60, 80, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
@media (prefers-reduced-motion: reduce) {
  .person p, .person:hover p { transform: none; transition: none; }
}
/* Lead-in paragraph above the team grid - sits centred, modest width so
   the line length stays comfortable, breathing room before the card row. */
.team-intro {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--c-body);
  text-wrap: pretty;
}
/* ---------- Event cards (Resources > Events tab) ----------
   Modern, two-column card with a soft date pill on the left and the
   event title + location on the right. Wider single-column layout
   so a one-event list reads as intentional rather than empty. */
.events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 880px;
  margin: 0 auto;
}
.event-card {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 24px;
  align-items: center;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 20px;
  padding: 22px 28px;
  box-shadow: 0 2px 10px rgba(16, 60, 80, 0.04);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  text-align: left;
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -8px rgba(16, 60, 80, 0.14), 0 3px 10px rgba(16, 60, 80, 0.04);
  border-color: rgba(21, 114, 143, 0.18);
}
.event-card__date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 80px;
  background: var(--tint-blue);
  border-radius: 14px;
  padding: 10px 8px;
}
.event-card__date-label {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-accent); font-weight: 700;
  white-space: nowrap;
}
.event-card__date-num {
  font-size: 1.4rem; font-weight: 800; color: var(--c-primary);
  line-height: 1; margin-top: 6px;
  white-space: nowrap;
}
.event-card__title {
  font-size: 1.1rem; font-weight: 700; margin: 0 0 8px;
  color: var(--c-ink); line-height: 1.35;
}
.event-card__loc {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--c-muted); font-size: .94rem;
}
.event-card__loc svg { width: 16px; height: 16px; color: var(--c-primary); flex: 0 0 16px; }
.event-card__desc { color: var(--c-muted); font-size: .94rem; line-height: 1.55; margin: 8px 0 0; }
@media (max-width: 600px) {
  .event-card { grid-template-columns: 1fr; padding: 18px 20px; gap: 14px; }
  .event-card__date { height: auto; flex-direction: row; gap: 8px; padding: 10px 16px; }
}

/* Team grid: all 4 cards in a single row on desktop, gracefully wraps to
   2 columns on tablet, 1 column on phone. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 980px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .person { padding: 28px 18px 22px; }
}
@media (max-width: 540px) {
  .team-grid { grid-template-columns: 1fr; }
  .person__avatar { width: 108px; height: 108px; }
}

/* ----------------------------- Contact --------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.cinfo { display: grid; gap: 36px; }
.cinfo__row { display: flex; gap: 16px; align-items: flex-start; }
.cinfo__icon { flex: 0 0 48px; height: 48px; border-radius: 14px; background: var(--c-bg-2); color: var(--c-primary); display: flex; align-items: center; justify-content: center; }
.cinfo__icon svg { width: 22px; height: 22px; }
/* Coloured tile variants for the contact-team rows. White icon on a soft
   gradient so they read like the home-page Why Equidor tiles. */
.cinfo__icon--teal { background: linear-gradient(135deg,#1aa0b8,#15728F); color: #fff; }
.cinfo__icon--blue { background: linear-gradient(135deg,#4d96f5,#2c6fd6); color: #fff; }
.cinfo__row h4 { margin: 0 0 2px; font-size: 1.02rem; }
.cinfo__row p { margin: 0; color: var(--c-muted); font-size: .96rem; }
.cinfo__contacts { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.cinfo__contacts li { display: flex; align-items: center; gap: 10px; font-size: .94rem; color: var(--c-body); }
.cinfo__contacts li svg { width: 16px; height: 16px; color: var(--c-primary); flex: 0 0 16px; }
.cinfo__contacts li a { color: var(--c-body); }
.cinfo__contacts li a:hover { color: var(--c-primary); }
.form { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-sm); }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .9rem; color: var(--c-ink); margin-bottom: 7px; }
/* Required-field marker: brand-accent asterisk next to the label text.
   aria-hidden in the markup so screen readers rely on the `required`
   attribute (which conveys the same information semantically). */
.field label .req { color: var(--c-accent); margin-left: 4px; font-weight: 700; }
/* Optional-field hint: light, smaller, lower-contrast so the eye is drawn
   to the required fields first. */
.field label .opt { color: var(--c-muted); font-size: .82em; font-weight: 400; margin-left: 4px; }
/* Paired field: two inputs side-by-side under one heading, used for the
   "Phone or Email" combo where either field satisfies the requirement.
   Fieldset defaults (border, padding, margin) are reset to match .field. */
.field.field--pair { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.field__heading { display: block; font-weight: 600; font-size: .9rem; color: var(--c-ink); margin: 0 0 7px; padding: 0; }
.field__heading .req { color: var(--c-accent); margin-left: 4px; font-weight: 700; }
.field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field__row input { width: 100%; }
.field__hint { display: block; margin-top: 6px; font-size: .82rem; color: var(--c-muted); line-height: 1.5; }
@media (max-width: 520px) { .field__row { grid-template-columns: 1fr; } }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--c-line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem; color: var(--c-ink); background: var(--c-bg); transition: border-color .2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--c-primary); background: #fff; }
.field textarea { resize: vertical; min-height: 130px; }
/* Honeypot field — visually hidden but kept in the DOM and accessible to
   absolute-positioned screen readers (it's aria-hidden so SR won't announce it
   either). Bots that fill every input will trip the server-side honeypot. */
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Contact form status / feedback line */
.form__status { margin: 14px 0 0; font-size: .95rem; min-height: 1.4em; }
.form__status--pending { color: var(--c-muted); }
.form__status--success { color: #1b8a4a; font-weight: 600; }
.form__status--error   { color: #c53030; font-weight: 600; }
#contactSubmit:disabled { opacity: .6; cursor: not-allowed; }

/* ----------------------------- Banner CTA ------------------------ */
.cta-banner { background: linear-gradient(135deg, var(--c-primary), var(--c-primary-darker)); border-radius: var(--radius-lg); padding: 60px clamp(28px,6vw,72px); text-align: center; color: #fff; position: relative; overflow: hidden; }
.cta-banner::before { content:""; position:absolute; left:-80px; bottom:-80px; width:300px; height:300px; background: radial-gradient(circle, rgba(243,146,0,.3), transparent 70%); border-radius:50%; }
.cta-banner h2 { color: #fff; position: relative; }
.cta-banner p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 26px; position: relative; }

/* ----------------------------- Notice (placeholder) -------------- */
.notice { background: #fff7e9; border: 1px solid #f5d79a; border-left: 4px solid var(--c-accent); border-radius: var(--radius-sm); padding: 16px 20px; color: #8a5a00; font-size: .92rem; margin-bottom: 28px; }
.notice strong { color: #6f4800; }

/* ----------------------------- Footer ---------------------------- */
.footer { background: var(--c-primary-darker); color: rgba(255,255,255,.78); padding: 64px 0 28px; margin-top: 0; }
.footer a { color: rgba(255,255,255,.78); }
.footer a:hover { color: #fff; }
/* align-items: start so each grid cell content flows from the cell top rather
   than stretching, which lets the logo and the three h4 headers all share the
   same baseline anchor. */
.footer__grid { display: grid; grid-template-columns: 1.5fr .9fr 1.7fr 1.2fr; gap: 56px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.14); align-items: start; }
/* Logo nudged up by 8 px (negative margin-top) so its visual centre lines up
   with where the h4 text baselines fall in the neighbouring columns. */
.footer__logo { display: block; margin: -18px 0 18px; line-height: 0; }
.footer__logo-img { height: 56px; width: auto; display: block; }
.footer p { font-size: .92rem; line-height: 1.7; }
.footer p a { font-size: inherit; line-height: inherit; }
/* All column headers share the exact same font, size, weight, spacing and
   bottom margin so COMPANY / PRODUCTS / STAY UPDATED sit at the same y. */
.footer h4 { color: #fff; font-size: .98rem; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; margin: 0 0 18px; line-height: 1.2; }
/* Contact rows with inline icons: phone, email, address, LinkedIn. The icon
   sits in its own narrow column so multi-line address text stays cleanly
   indented under itself. Address uses <br> for explicit line breaks; the
   icon stays top-aligned. */
.footer__contacts { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 24em; }
.footer__contacts li { display: flex; align-items: flex-start; gap: 12px; font-size: .94rem; line-height: 1.55; }
.footer__contacts li a, .footer__contacts li span { color: rgba(255,255,255,.78); }
.footer__contacts li a:hover { color: #fff; }
.footer__icon { flex: 0 0 20px; height: 20px; color: var(--c-accent); margin-top: 2px; }
.footer__icon svg { width: 18px; height: 18px; display: block; }
/* Company name as a standalone left-aligned line between the logo and the
   contacts list. Bold white, slightly larger than the body copy. */
.footer__company { display: block; color: #fff; font-weight: 700; font-size: 1rem; margin: 0 0 14px; text-align: left; }
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer ul a { font-size: .94rem; display: inline-block; transition: color .2s var(--ease), transform .2s var(--ease); }
.footer ul a::after { content: "\2192"; display: inline-block; opacity: 0; margin-left: 2px; color: var(--c-accent); transition: opacity .2s var(--ease), margin-left .2s var(--ease); }
.footer ul a:hover { color: #fff; }
.footer ul a:hover::after { opacity: 1; margin-left: 8px; }
/* Products column: two columns of links */
.footer__prod { grid-template-columns: 1fr 1fr; column-gap: 28px; }
.footer__bottom { padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .86rem; color: rgba(255,255,255,.6); }

/* ----------------------------- Reveal animation ------------------ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ----------------------------- Mobile backdrop ------------------- */
.nav-backdrop { position: fixed; inset: 0; background: rgba(9,40,53,.4); opacity: 0; visibility: hidden; transition: .3s var(--ease); z-index: 90; }
.nav-backdrop.show { opacity: 1; visibility: visible; }

/* ----------------------------- Responsive ------------------------ */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero__media { min-height: 320px; order: -1; }
  .hero { min-height: auto; }
  .pdetail { grid-template-columns: 1fr; }
  .pdetail__media { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  /* Mobile docking/scrolled padding only — backdrop-filter is handled
     globally on .nav::before (a descendant, NOT an ancestor of the
     fixed-positioned .nav__links drawer), so the previous mobile
     workaround of disabling backdrop-filter entirely is no longer
     needed. The drawer escapes the pill cleanly because the blur
     no longer creates a containing block for it. */
  /* Docked state at top: navbar is flush against the viewport edges
     (no side margin). Scrolled state lifts off into a pill with 14 px
     of side margin, mirroring the desktop behaviour. */
  .nav-wrap { padding: 0; }
  .nav-wrap.scrolled { padding: 12px 14px 0; }
  .nav-wrap.scrolled .nav { padding: 12px 18px; }
  .nav__toggle { display: flex; position: relative; z-index: 96; }

  .nav__links {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw);
    background: #fff; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 92px 18px 32px; box-shadow: var(--shadow-lg); transform: translateX(100%);
    /* visibility + pointer-events kill the 1-px sub-pixel sliver some mobile
       browsers (notably iOS Safari) leak past `transform: translateX(100%)`.
       The visibility transition is delayed by the slide-out duration so the
       drawer fully completes its animation before becoming hidden; on open
       the delay is reset to 0 so the slide-in is visible from frame 0. */
    transition: transform .35s var(--ease), visibility 0s linear .35s;
    overflow-y: auto;
    /* Must sit above the navbar (z-index: 100) so the drawer overlays the
       scrolled-state pill - otherwise the floating pill clips the drawer's
       top items in mobile pill mode. */
    z-index: 110;
    visibility: hidden; pointer-events: none;
  }
  .nav.open .nav__links {
    transform: translateX(0);
    visibility: visible; pointer-events: auto;
    transition: transform .35s var(--ease), visibility 0s linear 0s;
  }
  .nav__item { width: 100%; }
  .nav__link { width: 100%; justify-content: space-between; font-size: 1.08rem; padding: 14px 16px; border-radius: 12px; }

  /* dropdowns become indented single-column accordions */
  .dropdown, .dropdown--mega, .dropdown--list {
    position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: none;
    width: 100%; display: none; padding: 2px 0 10px 8px; background: transparent;
    grid-template-columns: 1fr; gap: 4px;
  }
  /* The desktop rule .nav__item.open .dropdown sets transform: translateX(-50%)
     to centre the panel under its nav link. That rule has higher specificity
     than the unscoped .dropdown override above, so without resetting transform
     here, opening a dropdown in the hamburger drawer shifts it 50% to the left
     and clips it off-screen. */
  .nav__item.open .dropdown,
  .nav__item.open .dropdown--mega,
  .nav__item.open .dropdown--list { display: grid; grid-template-columns: 1fr; transform: none; }
  .drop-link { background: var(--c-bg); text-align: left; padding: 12px 16px; }
}

@media (max-width: 720px) {
  .section { padding: 60px 0; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .nav__logo { font-size: 1.45rem; }
  body { font-size: 16px; }
}

@media (max-width: 540px) {
  .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .container { padding: 0 20px; }
  .hero__stats { gap: 24px; }
  .products-grid.is-collapsed .pcard:nth-child(n+3) { display: none; }
  .products-more { display: block; }
}