@import url("fonts.css");

/* ============================================================
   Plumbing only. Nothing here is a design decision — no colour,
   no typeface, no layout. Each site writes its own visual system
   on top; this file only carries the things that must be right
   on every site and are invisible when they are.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* A sideways-scrollable page drags position:fixed elements out of view on
     phones. Clip rather than scroll. (clip, not hidden: hidden would make html
     a scroll container and break scroll-padding and sticky.) */
  overflow-x: clip;
}

body { margin: 0; }
body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
/* A <button> inherits the user agent's grey `buttonface` unless something says
   otherwise. An outline/ghost button that sets only border-color and color then
   renders as light-grey with (often white) text on it — invisible. Reset here;
   any variant that wants a fill sets one and wins on specificity. */
button { background: transparent; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Reveal-on-scroll. The JS failsafe shows everything if the observer
   never runs, so content can never be stranded invisible. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease, ease), transform .7s var(--ease, ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@media print {
  .site-header, .lightbox, .skip-link, .gallery-more, .filters, .map-consent, .callbar { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
}

/* ============================================================
   MedTech — clinical instrument system.
   Hairline rules, a strict measure, mono for every figure.
   The logo carries the colour, so the page stays neutral.
   ============================================================ */
:root {
  --paper:    #ffffff;
  --shell:    #f4f6f7;
  --ink:      #0c1a24;
  --ink-2:    #1c2f3c;
  --body:     #465966;
  --dim:      #5a6a74;
  --rule:     #dbe3e8;
  --rule-2:   #c3d0d8;
  --teal:     #0a6e6a;
  --teal-2:   #085551;
  --teal-pale:#e6f2f1;
  --navy:     #123a5c;

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", "IBM Plex Sans", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(1.1rem, 4vw, 3.5rem);
  --wrap: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

body { background:var(--paper); color:var(--body); font-family:var(--sans); font-size:1rem; line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color:var(--teal); text-underline-offset:3px; }
a:hover { color:var(--teal-2); }
h1,h2,h3,h4 { color:var(--ink); font-weight:600; line-height:1.2; letter-spacing:-.017em; }
:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.skip-link { position:absolute; left:1rem; top:-100px; z-index:300; background:var(--teal); color:#fff; padding:.7rem 1.1rem; font-weight:600; text-decoration:none; }
.skip-link:focus { top:1rem; }

/* label: the small uppercase mono tag used throughout */
.label { display:block; font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--teal); }

/* ---------- Utility bar ---------- */
.utility { border-bottom:1px solid var(--rule); background:var(--shell); font-size:.8rem; color:var(--dim); }
.utility .wrap { display:flex; flex-wrap:wrap; gap:.3rem 1.5rem; justify-content:space-between; padding-block:.5rem; }
.utility a { color:var(--ink-2); text-decoration:none; }
.utility a:hover { color:var(--teal); }
.utility .mono { color:var(--ink); }

/* ---------- Header ---------- */
.site-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.95); backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--rule); }
.header-inner { display:flex; align-items:center; gap:1.25rem; min-height:76px; position:relative; }
.brand { margin-right:auto; display:inline-flex; align-items:center; text-decoration:none; }
.brand img { height:46px; width:auto; }
.nav { display:flex; align-items:center; gap:clamp(.9rem,2vw,2rem); }
.nav a { position:relative; font-size:.9rem; font-weight:500; color:var(--ink-2); text-decoration:none; padding-block:.35rem; transition:color .2s var(--ease); }
.nav a::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform .26s var(--ease); }
.nav a:hover { color:var(--teal); } .nav a:hover::after { transform:scaleX(1); }
.nav a[aria-current="page"] { color:var(--ink); font-weight:600; } .nav a[aria-current="page"]::after { transform:scaleX(1); }
.header-cta { display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--rule-2); padding:.55rem 1.1rem; font-family:var(--mono); font-size:.92rem; font-weight:500; color:var(--ink); text-decoration:none; transition:border-color .2s var(--ease), color .2s var(--ease); }
.header-cta:hover { border-color:var(--teal); color:var(--teal); }
.header-cta svg { width:15px; height:15px; stroke:var(--teal); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.nav-toggle { display:none; width:42px; height:42px; border:0; background:transparent; cursor:pointer; padding:0; align-items:center; justify-content:center; }
.nav-toggle span { display:block; width:20px; height:1.5px; background:var(--ink); position:relative; transition:background-color .2s var(--ease); }
.nav-toggle span::before, .nav-toggle span::after { content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), top .2s var(--ease); }
.nav-toggle span::before { top:-6px; } .nav-toggle span::after { top:6px; }
.site-header.is-open .nav-toggle span { background:transparent; }
.site-header.is-open .nav-toggle span::before { top:0; transform:rotate(45deg); }
.site-header.is-open .nav-toggle span::after { top:0; transform:rotate(-45deg); }
@media (max-width:900px) {
  .nav-toggle { display:inline-flex; }
  .header-cta span { display:none; }
  .nav { position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); border-top:1px solid var(--rule); padding:0 var(--gutter) 1rem; max-height:0; overflow:hidden; visibility:hidden; transition:max-height .35s var(--ease), visibility .35s; }
  .site-header.is-open .nav { max-height:70vh; visibility:visible; overflow-y:auto; }
  .nav a { font-size:1rem; padding:.9rem 0; border-bottom:1px solid var(--rule); }
  .nav a::after { display:none; }
}

/* ---------- Page head ---------- */
.pagehead { border-bottom:1px solid var(--rule); }
.pagehead .wrap { padding-block: clamp(2.5rem,6vw,4.5rem); }
.pagehead .label { margin-bottom:1rem; }
.pagehead h1 { font-size:clamp(1.9rem,4.6vw,3.1rem); max-width:19ch; }
.pagehead .stand { margin-top:1.1rem; max-width:60ch; font-size:clamp(1.02rem,1.4vw,1.14rem); color:var(--ink-2); }

/* home hero: text left, framed photo right */
.hero-split { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:900px) { .hero-split { grid-template-columns:1fr; } }
.framed { position:relative; padding:12px; border:1px solid var(--rule); }
.framed img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.framed figcaption { margin-top:.7rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }

/* ---------- Data band ---------- */
.data { border-bottom:1px solid var(--rule); background:var(--shell); }
.data dl { display:grid; grid-template-columns:repeat(4,1fr); }
.data .cell { padding:clamp(1.4rem,3vw,2.1rem) clamp(.8rem,1.6vw,1.5rem); border-left:1px solid var(--rule); }
.data .cell:first-child { border-left:0; }
.data dt { font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.data dd { margin:.4rem 0 0; font-family:var(--mono); font-weight:500; font-size:clamp(1.45rem,3vw,2.1rem); color:var(--ink); line-height:1; letter-spacing:-.02em; }
.data .sub { display:block; margin-top:.35rem; font-family:var(--sans); font-size:.8rem; color:var(--dim); letter-spacing:0; }
@media (max-width:800px) { .data dl { grid-template-columns:repeat(2,1fr); } .data .cell:nth-child(odd){border-left:0} .data .cell:nth-child(n+3){border-top:1px solid var(--rule)} }

/* ---------- Sections ---------- */
.section { padding-block: clamp(3rem,7vw,5.5rem); }
.section--shell { background:var(--shell); border-block:1px solid var(--rule); }
.sec-head { max-width:52rem; margin-bottom:clamp(1.8rem,4vw,2.75rem); }
.sec-head h2 { font-size:clamp(1.55rem,3.4vw,2.35rem); }
.sec-head p { margin-top:.9rem; font-size:1.02rem; }

/* ---------- Two-column document with sticky index ---------- */
.doc { display:grid; grid-template-columns:15rem 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:940px) { .doc { grid-template-columns:1fr; } .doc-index { position:static !important; } }
.doc-index { position:sticky; top:100px; }
.doc-index ol { list-style:none; counter-reset:idx; border-top:1px solid var(--rule); }
.doc-index li { counter-increment:idx; border-bottom:1px solid var(--rule); }
.doc-index a { display:flex; gap:.7rem; padding:.65rem 0; font-size:.9rem; color:var(--ink-2); text-decoration:none; transition:color .2s var(--ease); }
.doc-index a::before { content:counter(idx,decimal-leading-zero); font-family:var(--mono); font-size:.75rem; color:var(--teal); padding-top:.15rem; }
.doc-index a:hover { color:var(--teal); }

.article > section { padding-block:clamp(1.75rem,3.5vw,2.5rem); border-top:1px solid var(--rule); }
.article > section:first-child { border-top:0; padding-top:0; }
.article h3 { font-size:clamp(1.2rem,2.4vw,1.55rem); }
.article h3 .n { font-family:var(--mono); font-size:.78rem; color:var(--teal); display:block; margin-bottom:.35rem; letter-spacing:.1em; }
.article p { margin-top:.75rem; max-width:68ch; }
.article ul.plain { list-style:none; margin-top:.9rem; display:grid; gap:.35rem; }
.article ul.plain li { position:relative; padding-left:1.1rem; font-size:.95rem; }
.article ul.plain li::before { content:""; position:absolute; left:0; top:.68rem; width:6px; height:1px; background:var(--teal); }

/* ---------- Equipment index (was shop categories) ---------- */
.equip { columns:3 14rem; column-gap:clamp(1.5rem,3vw,3rem); }
.equip li { list-style:none; break-inside:avoid; border-bottom:1px solid var(--rule); padding:.7rem 0; font-size:.96rem; color:var(--ink-2); display:flex; justify-content:space-between; gap:1rem; }
.equip li .tag { font-family:var(--mono); font-size:.7rem; color:var(--dim); letter-spacing:.06em; }

/* ---------- Assurances ---------- */
.assure { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); border:1px solid var(--rule); }
.assure div { padding:1.4rem 1.5rem; border-left:1px solid var(--rule); }
.assure div:first-child { border-left:0; }
.assure svg { width:22px; height:22px; stroke:var(--teal); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; margin-bottom:.75rem; }
.assure h3 { font-size:1rem; }
.assure p { margin-top:.35rem; font-size:.87rem; color:var(--dim); }
@media (max-width:700px) { .assure div { border-left:0; border-top:1px solid var(--rule); } .assure div:first-child { border-top:0; } }

/* ---------- Contact ---------- */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
@media (max-width:860px) { .contact-grid { grid-template-columns:1fr; } }
.cdl { border-top:1px solid var(--rule); }
.cdl .row { display:grid; grid-template-columns:9rem 1fr; gap:.3rem 1.25rem; padding:1rem 0; border-bottom:1px solid var(--rule); }
.cdl dt { font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); padding-top:.2rem; }
.cdl dd { margin:0; font-size:1.02rem; color:var(--ink); }
.cdl dd a { font-family:var(--mono); font-weight:500; text-decoration:none; }
.cdl dd a:hover { text-decoration:underline; }
@media (max-width:560px) { .cdl .row { grid-template-columns:1fr; } }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; background:transparent; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.6rem; border:1px solid transparent; font-size:.92rem; font-weight:600; text-decoration:none; cursor:pointer; transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.btn--solid { background:var(--teal); color:#fff; } .btn--solid:hover { background:var(--teal-2); color:#fff; }
.btn--line { border-color:var(--rule-2); color:var(--ink); } .btn--line:hover { border-color:var(--teal); color:var(--teal); }
.cta-row { margin-top:1.75rem; display:flex; flex-wrap:wrap; gap:.6rem; }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--rule); background:var(--shell); padding-block:2.2rem; font-size:.86rem; color:var(--dim); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
@media (max-width:760px) { .footer-grid { grid-template-columns:1fr; gap:1.5rem; } }
.site-footer img { height:40px; width:auto; }
.site-footer h2.fcol, .site-footer h4 { font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin-bottom:.6rem; }
.site-footer ul { list-style:none; display:grid; gap:.3rem; }
.site-footer a { color:var(--ink-2); text-decoration:none; }
.site-footer a:hover { color:var(--teal); }
.footer-base { margin-top:1.75rem; padding-top:1.1rem; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; font-size:.8rem; }
.foot-blurb { margin-top:.9rem; font-size:.86rem; max-width:38ch; }
.mt-h { margin-top:.7rem; font-size:clamp(1.4rem,3vw,1.9rem); }
.mt-f { margin-top:1.5rem; }
.foot-blurb { margin-top:.9rem; font-size:.86rem; max-width:38ch; }
.mt-h { margin-top:.7rem; font-size:clamp(1.4rem,3vw,1.9rem); }
.mt-f { margin-top:1.5rem; }

/* [hidden] must win. A rule like `.gallery-more { display:flex }` outranks the
   browser's own `[hidden] { display:none }`, which left an empty "Show 0 more"
   button on screen whenever a gallery had nothing further to reveal. */
[hidden] { display: none !important; }

/* Contact page: a logo panel where a photograph used to be. */
.markpanel { border:1px solid var(--rule); background:var(--shell); padding:clamp(2rem,5vw,3.25rem); text-align:center; }
.markpanel img { width:min(280px,70%); height:auto; margin:0 auto; }
.markpanel .mp-name { margin-top:1.4rem; font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.18em; color:var(--ink-2); }
.markpanel .mp-meta { margin-top:.5rem; font-size:.82rem; color:var(--dim); }

/* Homepage "since 2005": copy beside a facts panel, no photograph.
   The stock image here was a beauty salon, not medical equipment. */
.since { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:900px) { .since { grid-template-columns:1fr; } }
.since-copy h2 { margin-top:1rem; font-size:clamp(1.5rem,3.2vw,2.2rem); }
.since-copy p { margin-top:.95rem; }
.since-facts { border-top:1px solid var(--rule); }
.since-facts > div { display:grid; grid-template-columns:10rem 1fr; gap:.3rem 1.25rem; padding:.95rem 0; border-bottom:1px solid var(--rule); }
.since-facts dt { font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); padding-top:.2rem; }
.since-facts dd { margin:0; color:var(--ink); font-size:1rem; }
@media (max-width:520px) { .since-facts > div { grid-template-columns:1fr; } }