/* Osmo glass surfaces: a shared, static backdrop keeps blur calm and legible. */
:root {
  --glass-surface: linear-gradient(135deg, rgba(255,255,255,.64), rgba(255,255,255,.29));
  --glass-border: rgba(255,255,255,.86);
  --glass-shadow: 0 18px 48px rgba(25,75,105,.09), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.28);
  --glass-dark: linear-gradient(135deg, rgba(24,86,119,.91), rgba(8,53,86,.88));
  --glass-blur: blur(22px) saturate(135%);
  --muted: #425f70;
  --teal: #00747e;
  --line: rgba(80,133,153,.2);
}
body { background: #e7f2f6; isolation: isolate; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 75% at 0% 3%, rgba(114,216,205,.58), transparent 73%),
    radial-gradient(ellipse 58% 70% at 100% 30%, rgba(134,173,221,.5), transparent 75%),
    radial-gradient(ellipse 56% 60% at 65% 105%, rgba(155,222,225,.55), transparent 80%),
    linear-gradient(130deg, #e7f6f3, #e5eef7 65%, #eaf4f7);
}
/* Frosted navigation lets the page's colours show through as it scrolls. */
.topbar {
  background: linear-gradient(100deg, rgba(8,56,88,.94), rgba(22,87,113,.91));
  border-bottom: 1px solid rgba(255,255,255,.23);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.header {
  background: rgba(250,255,255,.58);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 8px 30px rgba(22,74,104,.05), inset 0 1px rgba(255,255,255,.8);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.logo-frame { border-radius: 7px; box-shadow: 0 3px 12px rgba(31,86,105,.04); }
.hero, .about, .catalogue, .process { background: transparent; }
.hero { padding-block: 40px 34px; }
.hero-grid {
  padding: 34px;
  gap: 38px;
  border: 1px solid var(--glass-border);
  border-radius: 32px;
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.hero-copy { padding: 10px 0 10px 7px; }
.hero h1 { font-size: clamp(49px,4.55vw,66px); }
.hero-actions { gap: 22px; }
.hero-description { color: #425f70; }
.hero-visual {
  padding: 11px;
  background: linear-gradient(145deg, rgba(255,255,255,.50), rgba(255,255,255,.14));
  border: 1px solid var(--glass-border);
  border-radius: 27px;
  box-shadow: 0 15px 35px rgba(33,86,119,.1), inset 0 1px 0 #fff;
}
.hero-photo { border-radius: 19px 19px 60px 19px; }
.hero-visual figcaption { padding-inline: 3px; color: #496476; }
.hero-copy>.eyebrow, .photo-label, .photo-callout, .value-icon,
.outline-cross, .callout-icon, .step-number, .tray-icon, .icon-button,
.menu-toggle, .secondary-button {
  background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(237,255,252,.45));
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 5px 14px rgba(27,88,105,.05), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.hero-copy>.eyebrow { color: #28635f; }
.photo-label { color: var(--navy); }
.photo-callout {
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(241,253,255,.58));
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 10px 30px rgba(5,51,76,.16), inset 0 1px rgba(255,255,255,.95);
}
.photo-callout:hover { background: rgba(255,255,255,.9); }
/* Dark glass retains strong text contrast on the primary actions. */
.button, .filter.active, .quick-category.selected, .toast {
  background: var(--glass-dark);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 7px 19px rgba(16,62,91,.15), inset 0 1px 0 rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.button { border-radius: 12px; }
.button:hover { background: linear-gradient(135deg, rgba(29,106,133,.96), rgba(9,65,104,.96)); box-shadow: 0 10px 25px rgba(16,62,91,.22), inset 0 1px rgba(255,255,255,.35); }
.text-button { border-color: rgba(60,110,130,.3); }
.enquiry-count { background: rgba(122,241,224,.91); border: 1px solid rgba(255,255,255,.5); box-shadow: inset 0 1px rgba(255,255,255,.7); }
.value-strip { background: transparent; border: 0; }
.value-grid {
  padding: 24px 30px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: rgba(255,255,255,.36);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.value-grid>div+div { border-color: rgba(94,143,159,.22); }
.value-icon { color: #087b85; }
.section-pad { padding-block: 85px; }
/* Catalogue surfaces share a bevel, a subtle tint, and a translucent body. */
.catalogue-toolbar {
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 17px;
  background: rgba(255,255,255,.48);
  box-shadow: 0 8px 26px rgba(31,82,115,.05), inset 0 1px rgba(255,255,255,.9);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.filter:not(.active):hover { background: rgba(255,255,255,.7); }
.filter.active { border-radius: 9px; }
.search-box {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 10px;
  box-shadow: inset 0 1px 5px rgba(33,87,110,.04), 0 3px 10px rgba(36,89,112,.03);
}
.search-box input::placeholder { color: #506c7c; }
.product-card {
  background: linear-gradient(140deg, rgba(255,255,255,.57), rgba(255,255,255,.27));
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.product-card:hover { background: linear-gradient(140deg, rgba(255,255,255,.73), rgba(255,255,255,.45)); border-color: #fff; box-shadow: 0 22px 48px rgba(25,75,105,.15), inset 0 1px #fff; }
.product-card.selected { border-color: #348d97; box-shadow: 0 0 0 1px rgba(32,133,146,.5), 0 17px 40px rgba(34,104,119,.12), inset 0 1px rgba(255,255,255,.9); }
.product-art { background: radial-gradient(ellipse at 25% 15%, rgba(255,255,255,.56), transparent 75%), linear-gradient(150deg, rgba(188,220,233,.25), rgba(182,213,234,.4)); border-bottom: 1px solid rgba(255,255,255,.7); }
.art-dressings { background: linear-gradient(145deg, rgba(233,250,232,.52), rgba(164,212,204,.27)); }
.art-injection { background: linear-gradient(145deg, rgba(229,239,254,.56), rgba(162,195,228,.26)); }
.art-collection { background: linear-gradient(145deg, rgba(209,246,234,.57), rgba(151,210,208,.25)); }
.art-disposables { background: linear-gradient(145deg, rgba(236,235,255,.57), rgba(187,196,234,.29)); }
.art-index { color: #3d6176; }
.product-info { background: rgba(255,255,255,.12); }
.add-button { border-top-color: rgba(70,119,139,.19); }
.add-button span { background: rgba(255,255,255,.65); border-color: rgba(255,255,255,.95); box-shadow: 0 3px 8px rgba(32,91,112,.08), inset 0 1px #fff; }
.selected .add-button span { background: linear-gradient(145deg, #219d9f, #087983); border-color: rgba(255,255,255,.5); }
.range-help {
  background: linear-gradient(135deg, rgba(24,86,119,.87), rgba(8,53,86,.84));
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 22px;
  box-shadow: 0 20px 45px rgba(16,62,91,.18), inset 0 1px rgba(255,255,255,.3);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.no-results { background: rgba(255,255,255,.52); border-color: rgba(56,119,141,.35); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
.catalogue-note { border-color: rgba(20,121,131,.38); }
/* The about and ordering sections continue the same material language. */
.about { padding-block: 0 45px; }
.about-grid {
  padding: 50px;
  gap: 75px;
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.about h2 { font-size: clamp(34px,3.4vw,46px); }
.about-heading:before, .about-heading:after { border-color: rgba(255,255,255,.9); box-shadow: 0 0 35px rgba(255,255,255,.15); }
.about-principle { padding: 18px; margin-top: 12px; border: 1px solid rgba(255,255,255,.78); border-radius: 14px; background: linear-gradient(130deg, rgba(255,255,255,.43), rgba(255,255,255,.15)); box-shadow: inset 0 1px rgba(255,255,255,.8); }
.about-principle p { color: #425f70; }
.profile-link { border-color: rgba(34,103,122,.4); }
.process { padding-top: 45px; }
.process-grid { gap: 20px; }
.process-grid li {
  padding: 25px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.process-grid li:not(:last-child):before { display: none; }
.step-number { position: static; margin-bottom: 25px; color: #006c78; }
.process-grid h3 { font-size: 18px; }
.contact-grid {
  background: linear-gradient(125deg, rgba(30,99,124,.86), rgba(10,52,88,.87));
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 28px;
  box-shadow: 0 24px 55px rgba(12,55,87,.18), inset 0 1px 0 rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
}
.contact-grid:after { border-color: rgba(255,255,255,.15); box-shadow: 0 0 0 55px rgba(255,255,255,.025), 0 0 0 110px rgba(255,255,255,.018); }
.button-turquoise { color: #073b51; background: linear-gradient(130deg, rgba(202,255,244,.93), rgba(138,225,222,.91)); border-color: rgba(255,255,255,.75); box-shadow: 0 7px 20px rgba(2,33,55,.14), inset 0 1px rgba(255,255,255,.9); }
.button-turquoise:hover { background: linear-gradient(130deg, #ddfff8, #a4eee5); color: #073b51; }
.contact-aside svg { stroke: #9ee5df; filter: drop-shadow(0 4px 12px rgba(132,233,224,.24)); }
.footer { background: rgba(248,255,255,.38); border-top: 1px solid rgba(255,255,255,.8); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px rgba(255,255,255,.7); }
.footer-bottom { border-top-color: rgba(67,120,143,.17); }
/* Form glass is deliberately denser to protect readability over the page. */
dialog {
  background: linear-gradient(135deg, rgba(250,255,255,.91), rgba(233,247,250,.88));
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 24px;
  box-shadow: 0 30px 100px rgba(4,35,62,.3), inset 0 1px rgba(255,255,255,1);
  -webkit-backdrop-filter: blur(35px) saturate(125%);
  backdrop-filter: blur(35px) saturate(125%);
}
dialog::backdrop { background: rgba(18,48,73,.38); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.dialog-top { background: rgba(240,250,252,.92); border-bottom-color: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 4px 14px rgba(25,76,100,.04); }
.selected-fieldset { background: linear-gradient(135deg, rgba(255,255,255,.58), rgba(219,243,242,.37)); border-color: rgba(255,255,255,.95); box-shadow: inset 0 1px rgba(255,255,255,.95); }
.selected-fieldset legend { color: var(--navy); }
.quick-category { background: rgba(255,255,255,.68); border-color: rgba(165,199,207,.6); box-shadow: inset 0 1px rgba(255,255,255,.95); }
#quote-form input, #quote-form textarea { background: rgba(255,255,255,.68); border-color: rgba(138,184,196,.6); box-shadow: inset 0 2px 6px rgba(25,82,106,.035), 0 1px 0 rgba(255,255,255,.8); }
#quote-form input:focus, #quote-form textarea:focus { background: rgba(255,255,255,.94); }
#quote-form input::placeholder, #quote-form textarea::placeholder { color: #526e7d; }
#enquiry-ready { background: rgba(211,240,227,.7); border-color: rgba(255,255,255,.9); box-shadow: inset 0 1px rgba(255,255,255,.9); }
.enquiry-tray { background: linear-gradient(135deg, rgba(250,255,255,.81), rgba(228,246,249,.7)); border-color: rgba(255,255,255,.95); border-radius: 18px; box-shadow: 0 15px 45px rgba(13,61,91,.22), inset 0 1px rgba(255,255,255,1); -webkit-backdrop-filter: blur(28px) saturate(145%); backdrop-filter: blur(28px) saturate(145%); }
.icon-button:hover, .secondary-button:hover, .menu-toggle:hover { background: rgba(232,255,249,.95); }
@media (min-width:1600px) { .hero h1 { font-size: 70px; } }
@media (max-width:1150px) {
  .hero-grid { padding: 26px; gap: 28px; }
  .hero-copy { padding-left: 0; }
  .hero h1 { font-size: 53px; }
  .hero-actions { gap: 18px; }
  .value-grid { padding: 23px; }
  .about-grid { padding: 35px; gap: 48px; }
  .about h2 { font-size: 36px; }
  .process-grid li { padding: 22px; }
  .process-grid h3 { font-size: 17px; }
}
@media (max-width:900px) {
  .nav { background: rgba(243,252,253,.94); border: 1px solid rgba(255,255,255,.92); border-radius: 0 0 18px 18px; -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); box-shadow: 0 18px 35px rgba(20,70,100,.14); }
  .nav a { border-color: rgba(76,135,154,.16); }
  .hero-grid { padding: 24px; gap: 22px; }
  .hero h1 { font-size: 43px; }
  .hero-visual { padding: 8px; border-radius: 23px; }
  .hero-photo { aspect-ratio: .65; }
  .photo-callout { padding: 10px; gap: 8px; }
  .photo-callout .callout-icon { display: none; }
  .hero-visual figcaption { font-size: 9px; }
  .value-grid { padding: 21px; gap: 15px; }
  .value-grid>div+div { padding-left: 15px; }
  .about-grid { padding: 28px; gap: 35px; }
  .about h2 { font-size: 29px; }
  .about-principle { padding: 15px; gap: 12px; }
  .process-grid { gap: 20px; }
  .process-grid h3 { font-size: 19px; }
}
@media (max-width:600px) {
  .hero { padding-block: 20px 22px; }
  .hero-grid { padding: 22px 19px 19px; border-radius: 24px; gap: 26px; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(37px,10.1vw,52px); }
  .hero-description { font-size: 14px; }
  .hero-actions { flex-wrap: wrap; gap: 16px; }
  .hero-actions .button { font-size: 12px; }
  .hero-actions .text-button { font-size: 12px; }
  .hero-footnote { font-size: 10px; margin-top: 20px; gap: 8px; }
  .hero-visual { padding: 7px; border-radius: 20px; }
  .hero-photo { aspect-ratio: 1.05; border-radius: 14px 14px 36px 14px; }
  .photo-label { left: 10px; top: 12px; font-size: 7px; padding: 6px 8px; }
  .photo-callout { left: 10px; right: 20px; bottom: 12px; padding: 10px; }
  .photo-callout strong { font-size: 12px; }
  .photo-callout small { font-size: 9px; }
  .hero-visual figcaption { font-size: 8px; padding-inline: 2px; }
  .hero-visual figcaption>span:first-child { display: none; }
  .value-grid { padding: 23px; border-radius: 18px; gap: 20px; }
  .value-grid>div+div { padding: 0; }
  .section-pad { padding-block: 58px; }
  .catalogue-toolbar { padding: 12px; border-radius: 15px; }
  .filter:not(.active) { background: rgba(255,255,255,.33); border-color: rgba(255,255,255,.84); }
  .product-card, .range-help { border-radius: 20px; }
  .about { padding-block: 0 22px; }
  .about-grid { padding: 28px 23px; gap: 34px; border-radius: 23px; }
  .about h2 { font-size: 34px; }
  .about-heading:before, .about-heading:after { max-width: 100%; right: 0; }
  .about-content .large-copy { font-size: 23px; }
  .about-principle { padding: 16px 14px; }
  .about-principle p { font-size: 13px; }
  .process { padding-top: 36px; }
  .process-grid { gap: 15px; }
  .process-grid li, .process-grid li:last-child { padding: 23px; min-height: 0; border-radius: 18px; }
  .step-number { position: static; width: 40px; height: 40px; margin-bottom: 18px; }
  .process-grid h3 { padding-top: 0; font-size: 19px; }
  .contact-grid { border-radius: 22px; }
  .enquiry-tray { border-radius: 16px; }
}
@media (max-width:360px) {
  .hero-grid { padding: 20px 16px 16px; }
  .hero h1 { font-size: 34px; }
  .hero-actions .button { font-size: 11px; }
  .hero-actions .text-button { font-size: 11px; }
  .hero-footnote { font-size: 9px; }
  .about-grid { padding: 24px 20px; }
  .about h2 { font-size: 29px; }
  .about-content .large-copy { font-size: 21px; }
}
/* Preserve contrast if a browser or accessibility preference disables blur. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .header, .nav, .hero-grid, .value-grid, .catalogue-toolbar, .product-card, .about-grid, .process-grid li, .footer, .enquiry-tray, dialog, .dialog-top { background: #edf6f8; }
  .photo-callout, .photo-label { background: #f2f9fa; }
  .range-help, .contact-grid, .button, .filter.active, .quick-category.selected, .toast { background: #124568; }
  .button-turquoise { background: #bdeee5; }
}
@media (prefers-reduced-transparency:reduce) {
  .header, .nav, .hero-grid, .value-grid, .catalogue-toolbar, .product-card, .about-grid, .process-grid li, .footer, .enquiry-tray, dialog, .dialog-top { background: #edf6f8; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .photo-callout, .photo-label { background: #f2f9fa; }
  .range-help, .contact-grid, .button, .filter.active, .quick-category.selected, .toast { background: #124568; }
  .button-turquoise { background: #bdeee5; }
}
@media (forced-colors:active) {
  body::before { display: none; }
  .hero-grid, .value-grid, .product-card, .about-grid, .process-grid li, .contact-grid, .enquiry-tray, dialog { border: 1px solid CanvasText; }
}

/* Display the replacement wordmark in full, without the old image crop. */
.brand .logo-frame {
  height: auto;
  aspect-ratio: 5475 / 1705;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}
.brand .logo-frame img {
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  left: auto;
  top: auto;
  object-fit: contain;
}

/* Actual category photography, framed without changing the source photographs. */
.product-photo-art {
  display: block;
  height: 238px;
  background: rgba(239,248,250,.45);
}
.product-photo-art .category-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease;
}
.product-photo-art .art-index {
  top: 15px;
  left: 15px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 6px;
  background: rgba(248,254,255,.84);
  color: #16465e;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.art-examination .category-photo { object-position: 50% 52%; }
.art-dressings .category-photo { object-position: 50% 18%; }
.art-injection .category-photo { object-position: 50% 100%; }
.art-collection .category-photo { object-position: 58% 50%; }
.art-disposables .category-photo { object-position: 50% 48%; }
.product-card:hover .category-photo { transform: scale(1.035); }
.photo-credits { margin-top: 12px; font-size: 11px; color: var(--muted); max-width: 850px; }
.photo-credits summary { cursor: pointer; width: fit-content; padding-block: 5px; }
.photo-credits summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 3px; }
.photo-credits p { padding: 10px 14px; margin-top: 5px; border-left: 2px solid rgba(20,121,131,.3); line-height: 1.8; }
.photo-credits a { text-decoration: underline; text-underline-offset: 3px; }
.footer-brand .logo-frame { width: 190px; }
@media(max-width:1150px) { .footer-brand .logo-frame { width: 165px; } }
@media(max-width:600px) {
  .product-photo-art { height: 228px; }
  .footer-brand .logo-frame { width: 132px; }
}
@media(max-width:360px) { .footer-brand .logo-frame { width: 112px; } }

/* Keep the wider desktop hero proportional to the rest of the page. */
@media (min-width:1151px) {
  .hero-photo { width: 100%; max-height: 620px; }
  .hero-photo img { object-position: center top; }
}
@media (min-width:1600px) {
  .hero-grid { padding: 42px; gap: 64px; }
  .hero-copy { padding-left: 15px; }
  .hero h1 { font-size: clamp(70px,4.5vw,84px); }
  .hero-description { max-width: 490px; font-size: 18px; }
}