:root{--ink:#edf1f7;--muted:#afbed0;--blue:#d1dae6;--line:#31435d;--ice:#c9d6e7}html{color-scheme:dark}body{background:#09172b;color:var(--ink)}.top{background:#071224;color:#b7c6da}.nav{background:#0a192ef2;border-color:#283a54}.links,.cart-trigger{color:#d7dfeb}.cart-trigger{background:#14263f;border-color:#40536c}.cart-trigger span{background:#d2dbe6;color:#10223a}.brand-logo img{object-fit:contain}.mobile-links{background:#0b1a30;border-color:#2a3c56}.hero{background:#0b1b33}.hero-water{background-image:url('assets/hero-navy-silver.png');background-image:image-set(url('assets/hero-navy-silver.webp') type('image/webp'),url('assets/hero-navy-silver.png') type('image/png'))}.hero-water:after{opacity:.2}.hero h1,.hero h1 span{color:#edf1f7}.hero h1 span{background:linear-gradient(110deg,#a9b5c6,#fff 40%,#acb9cc 65%,#eff6ff);background-clip:text;-webkit-background-clip:text;color:transparent}.hero-description,.hero-ruo{color:#c1cede}.hero-copy{width:62%}.hero-logo{width:300px;height:160px;object-fit:contain;object-position:left center}.hero-rule{background:linear-gradient(90deg,#eff6ff,#8c9fba,transparent)}.hero-motion{background:#0e2039e8;color:#d7e0ed;border-color:#405570}.btn,.inquiry-button{background:linear-gradient(115deg,#eef3f9,#aebed2);color:#11223a;border-color:#c1ccdb;box-shadow:0 4px 22px #0002}.btn:hover,.inquiry-button:hover{background:#fff;color:#09172b}.btn.secondary{background:#12253dbb;color:#e5edf8;border-color:#6d819d}.btn.secondary:hover{background:#243c5b;color:white}.rail{background:#0c1c32;border-color:#2c3c52}.rail .wrap,.rail b{color:#bbc9db}.catalog-section,.verification{background:#09172b}.eyebrow{color:#b7c6da}.material-card{background:#10223b;border-color:#30425d;box-shadow:none}.material-card:hover{border-color:#879bb7;box-shadow:0 15px 40px #0003}.product-art{background:#000616;aspect-ratio:1122/1402}.product-info{background:#10223b}.price,.lot-number{color:#dce6f4}.material-identity,.product-restriction,.button-disclaimer,.catalog-footnote,.sample-note{color:#b3c2d5}.search-box,.filter-pills button,.catalog-filter-row select,.variant-row select,.lookup input{background:#10223b;color:#e4edf8;border-color:#3a4c66}.search-box input,.variant-row label{color:#dae4f1}.search-box input::placeholder{color:#9aacc3}.search-box>span:last-child{color:#b7c8dd}.filter-pills button[aria-pressed=true]{background:#d4deec;border-color:#d4deec;color:#14243c}.view-product,.view-product.muted{background:#182d49;color:#dae4f2;border-color:#47607e}.quality,.terms-section{background:#0e2038;border-color:#2d405b}.documentation-steps>div{border-color:#536780}.documentation-steps span,.documentation-steps p,.terms-list,.notice{color:#b9c9dd}.notice{background:#182d48;border-color:#a9bad0}.lot-card{background:#10223b;border-color:#324660}.lot-card:hover{background:#172e4d;border-color:#8fa1bb}.lot-card strong{color:#eff3fa}.lot-card small,.lot-material,.lot-open{color:#afc4df}.contact-section{background:linear-gradient(110deg,#182f4f,#0b1a30)}.contact-section p,.policy-link{color:#bacbe0}.footer{background:#061123;border-color:#30415b;color:#adbed4}.footer-brand,.ref-footer-grid h3,.footer-disclaimer strong{color:#dce5f2}.footer-disclaimer{border-color:#2c3f59;color:#aebfd6}.footer-copyright{color:#a4b6cd}dialog{background:#10223b;color:#e7eff9;border-color:#50637e}.fine,.cart-line p{color:#b5c6dc}.close,.qty button{background:#243b58;color:white;border-color:#546d8d}.cart-line{border-color:#40536e}.research-edit{color:#d9e6f7}.toast{background:#d6e0ed;color:#10223b}#research-entry{background:radial-gradient(ellipse at 90% 5%,#213b5e,#08172b 70%);color:#edf3fc}#research-entry::backdrop{background:#08172b}#research-entry .entry-panel{background:#10223b;border-color:#516781}#research-entry .entry-brand,#research-entry a{color:#e1eaf7}#research-entry p,#research-entry .entry-help{color:#b7c7dc}#research-entry .entry-choice{border-color:#4c6483}#research-entry .entry-choice:has(input:checked){background:#243d5d;border-color:#c6d5e9}#research-entry button{background:#d7e1ee;color:#10223b;border-color:#c7d5e6}#research-entry button.entry-leave{background:#10223b;color:#d7e4f5;border-color:#6b81a0}.main{background:linear-gradient(#112742,#09172b 500px);color:#e3ecf8}.report-card,.card,.pending{background:#10223b;border-color:#405977}.report-panel,.coa-section,.qr-section,.pdf-link-section,.main .pdf-link-section{background:#182e4a;border-color:#405977}.result-row,.note,.pending p,.field small,.information-page .main p,.information-page .main li{color:#bfcee1}.result-row strong,.coa-section h2,.information-page .main a,.back{color:#edf4ff}.report-badge{background:#294562;color:#e4eefb}.purity-value{color:#e3edf9}.link-copy input{background:#10223b;color:#e1eaf6;border-color:#56708f}
@media(max-width:720px){.hero:before{background:linear-gradient(90deg,#09182cf5,#09182cce 55%,#09182c55)}.hero-copy{width:100%}.hero-logo{width:235px;height:125px}.hero .wrap{min-height:580px}.hero-water{background-position:65% center}}

/* Navy hero with reflective silver surfaces below. */
:root{--silver-surface:radial-gradient(ellipse at 80% 0%,#fff 0%,transparent 52%),linear-gradient(125deg,#d6dfe7 0%,#f5f8fb 30%,#e2e9ef 48%,#fcfdff 62%,#ccd7e1 100%)}
body{background:#e4ebf1}
.top{background:#071224}.nav{background:#0a192ef2}.mobile-links{background:#0b1a30}
.hero{background:#0b1b33}.hero-water{background-color:#0b1b33;background-blend-mode:normal;opacity:1}.hero-water:after{opacity:.2}
.hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0b1b33e8, #0b1b3380 52%,transparent);pointer-events:none}
.hero-rule{width:100px;margin:0 0 28px}.hero-copy{padding-block:35px}
.rail,.catalog-section,.verification,.quality,.terms-section,.contact-section{background:var(--silver-surface);color:#18334e;border-color:#b7c9d9}
.rail .wrap,.rail b,.eyebrow,.catalog-footnote,.section-head>p,.documentation-steps p,.documentation-steps span,.terms-list,.contact-section p,.policy-link,.lookup-status{color:#405b73}
.section h2,.section h3{color:#17344f}.documentation-steps>div{border-color:#acbfce}
.material-card{background:#ffffffb8;border-color:#fff;box-shadow:0 12px 36px #27486618;backdrop-filter:blur(16px)}
.material-card:hover{border-color:#99b2c9;box-shadow:0 18px 40px #27486626}
.product-info{background:linear-gradient(125deg,#ffffffed,#e4edf3e8);color:#18334e}
.product-title-row h3{color:#18334e}.price,.lot-number{color:#244f76}
.material-identity,.product-restriction,.button-disclaimer,.sample-note,.variant-row label{color:#496277}
.search-box,.filter-pills button,.catalog-filter-row select,.variant-row select,.lookup input{background:#ffffffb8;color:#203f5a;border-color:#b5c9d9;box-shadow:inset 0 1px #fff}
.search-box input{color:#203f5a}.search-box input::placeholder,.search-box>span:last-child{color:#577087}
.filter-pills button[aria-pressed=true]{background:#183c5c;color:#fff;border-color:#183c5c}
.view-product,.view-product.muted{background:#e4edf4;color:#224d70;border-color:#adc3d5}
.inquiry-button{background:linear-gradient(115deg,#173957,#2f597a);color:#fff;border-color:#284c6b}
.lot-card{background:linear-gradient(125deg,#ffffffd9,#e3ebf2cc);border-color:#fff;box-shadow:0 8px 25px #27486610;backdrop-filter:blur(12px)}
.lot-card:hover{background:#fff;border-color:#9fb8cd}.lot-card strong{color:#1e4362}.lot-card small,.lot-material,.lot-open{color:#49677e}
.notice{background:#ffffff9c;border-color:#a9bece;color:#3b556c}
.contact-section .btn{background:linear-gradient(115deg,#173957,#2f597a);color:#fff}
.footer{background:#09192d}
@media(max-width:720px){.hero:before{background:linear-gradient(90deg,#09182cf5,#09182cce 55%,#09182c55)}}

/* Silver-white navigation with consistent navy branding. */
.nav{background:linear-gradient(115deg,#ffffffed,#e3ebf2f5 48%,#ffffffed);border-bottom:1px solid #b9cbd9;box-shadow:0 2px 18px #17344f0d}
.brand-logo img{filter:brightness(0) saturate(100%) invert(14%) sepia(26%) saturate(1442%) hue-rotate(172deg) brightness(93%) contrast(93%)!important}
.links,.links a,.cart-trigger{color:#17344f}.links a:hover{color:#355f81}
.cart-trigger{background:#ffffffb8;border-color:#afc4d5}.cart-trigger span{background:#17344f;color:#fff}
.mobile-links{background:linear-gradient(115deg,#fff,#e3ebf2,#fff);color:#17344f;border-color:#b9cbd9}

/* One navy brand family: reflective logo, white label base, navy lettering. */
.brand-logo{position:relative;isolation:isolate}
.brand-logo img{opacity:0}
.brand-logo:after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,#0e233a 8%,#244664 33%,#59748d 43%,#294b69 49%,#102840 62%,#365875 79%,#142f49 100%);mask:url('/assets/ed-purity-logo.png') center/contain no-repeat;-webkit-mask:url('/assets/ed-purity-logo.png') center/contain no-repeat;pointer-events:none}
.vial-navy-lettering{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.footer{background:var(--silver-surface);color:#405b73;border-color:#b7c9d9}.footer-brand,.ref-footer-grid h3,.footer-disclaimer strong{color:#17344f}.ref-footer-grid a,.footer p,.footer-disclaimer,.footer-copyright{color:#405b73}.footer-brand{color:#17344f!important}.footer-disclaimer{border-color:#b7c9d9}

/* Approved glossy navy logo artwork, retaining its original reflections. */
.brand-logo:after{display:none}
.brand-logo img{opacity:1;filter:none!important;mix-blend-mode:multiply}

/* Locked source artwork: scale both layers together within the existing cards. */
.brand-logo img{mix-blend-mode:normal}
.vial-art{aspect-ratio:1122/1402;width:100%;height:auto}
.vial-art .vial-base,.vial-art .vial-navy-lettering{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* Availability states */
.status-flag{position:absolute;top:0;left:0;z-index:2;margin:12px;padding:6px 10px;border-radius:999px;font-size:9px;letter-spacing:1.3px;font-weight:700;color:#e8f0f8;background:#0b1b33cc;border:1px solid #ffffff2e;backdrop-filter:blur(4px)}
.material-card.is-soon .product-art{opacity:.42;filter:grayscale(.72)}
.material-card.is-soon .product-title-row h3,.material-card.is-soon .price{color:#8a9bab}
.material-card.is-oos .status-flag{background:#3a1420cc;color:#ffd9e0}
.inquiry-button[disabled]{background:#dbe5ee;color:#7b8c9b;cursor:not-allowed;box-shadow:none}

/* Brand wordmark: match the logo's PURITY lettering (Rajdhani, wide tracking) */
.footer-brand{display:inline-block;position:relative;font-family:Rajdhani,Arial,sans-serif!important;font-weight:700!important;font-size:30px!important;line-height:1.15;letter-spacing:.4em!important;text-indent:.4em;text-transform:uppercase;text-decoration:none;color:#13304c!important;padding-bottom:12px}
.footer-brand::after{content:"";position:absolute;left:0;right:.4em;bottom:0;height:2px;opacity:.6;background:linear-gradient(90deg,#13304c 0%,#7fa9c9 45%,#13304c 100%)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.footer-brand{background:linear-gradient(100deg,#0b2440 0%,#23507a 30%,#3f74a0 50%,#23507a 70%,#0b2440 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}}
@media(max-width:760px){.footer-brand{font-size:24px!important;letter-spacing:.32em!important;text-indent:.32em}}

.entry-brand{font-family:Rajdhani,Arial,sans-serif;letter-spacing:.34em;font-weight:700}

/* Qualification gate, light treatment.

   navy.css above styles the gate dark, from when the whole theme was dark.
   The rendered site is light — see the body override earlier in this block —
   and the logo is dark navy on transparency, so it cannot sit on a dark
   panel. These rules complete that move for the gate. Structure, spacing and
   typography stay in research-entry.css; only colour is settled here, because
   this file loads last. */
#research-entry{background:radial-gradient(ellipse at 70% 10%,#14304f,#070f1d 70%);color:#17344f;color-scheme:light}
#research-entry::backdrop{background:#070f1d}
#research-entry .entry-panel{background:linear-gradient(160deg,#fff 0%,#f2f6fa 48%,#e4ebf2 100%);border-color:#c8d6e4;box-shadow:0 30px 90px #0006}
#research-entry .entry-compliance{background:#071224;color:#b7c6da}
#research-entry .entry-brand,#research-entry legend{color:#216d96;letter-spacing:2.3px}
#research-entry a{color:#1d689e}
#research-entry h1{color:#17344f}
#research-entry p,#research-entry .entry-help{color:#52677b}
#research-entry .entry-check{color:#2b4458;border-bottom-color:#d7e2ec}
#research-entry .entry-declarations{border-top-color:#d7e2ec}
#research-entry input{accent-color:#1d689e}
#research-entry .entry-choice{border-color:#d2dfea;background:#fbfdff;color:#38536a}
#research-entry .entry-choice:hover{border-color:#9cc4dd}
#research-entry .entry-choice:has(input:checked){background:#e9f4fb;border-color:#6ea8ce;color:#17344f}
#research-entry button{background:#1d689e;color:#fff;border-color:#1d689e;border-radius:99px}
#research-entry button:hover{background:#155780;border-color:#155780}
#research-entry button.entry-leave{background:transparent;color:#546d82;border-color:#c0d2e0}
#research-entry button.entry-leave:hover{background:#eaf1f7;border-color:#9cb6c9}
#research-entry :focus-visible{outline:3px solid #1d689e;outline-offset:3px}
#research-entry #entry-error{color:#7d5410;background:#fdf6ea;border-color:#e3c08d;border-left-color:#c98a2e}

/* Homepage sections added for the features, process, statistics and questions
   blocks ([edp_features], [edp_process], [edp_stats], [edp_faq]).

   These reuse the catalog's card treatment rather than inventing a second
   visual language: same hairline border, same radius, same silver panel. Only
   the grid geometry differs, because the content does. */
.edp-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.edp-feature-grid>div{padding:26px;border:1px solid #d7e2ec;border-radius:16px;background:linear-gradient(160deg,#fff,#f4f8fb)}
.edp-feature-grid h3{font-size:19px;letter-spacing:-.4px;font-weight:600;color:#17344f;margin:0 0 10px}
.edp-feature-grid p{font-size:13px;line-height:1.75;color:#52677b;margin:0}

.edp-process-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.edp-process-grid>div{padding:22px 18px;border:1px solid #d7e2ec;border-radius:14px;background:linear-gradient(160deg,#fff,#f4f8fb)}
.edp-process-grid span{display:inline-block;font-size:11px;font-weight:700;letter-spacing:2px;color:#216d96;margin-bottom:10px}
.edp-process-grid h3{font-size:15px;font-weight:600;color:#17344f;margin:0 0 8px;letter-spacing:-.2px}
.edp-process-grid p{font-size:12px;line-height:1.7;color:#52677b;margin:0}

.edp-stat-rail .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
.edp-stat-rail b{display:block;font-size:34px;line-height:1.1;color:#216d96;font-weight:700;letter-spacing:-1px;margin-bottom:6px}
.edp-stat-rail span{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#52677b}

.faq-section .section-head{margin-bottom:26px}
.edp-faq{max-width:820px}
.edp-faq details{border:1px solid #d7e2ec;border-radius:12px;background:#fff;margin-bottom:10px;overflow:hidden}
.edp-faq details[open]{border-color:#9cc4dd;background:linear-gradient(160deg,#fff,#f1f7fb)}
.edp-faq summary{cursor:pointer;list-style:none;padding:17px 22px;font-size:15px;font-weight:600;color:#17344f;display:flex;justify-content:space-between;align-items:center;gap:16px}
.edp-faq summary::-webkit-details-marker{display:none}
.edp-faq summary:after{content:"+";font-size:20px;font-weight:400;color:#216d96;flex:none;line-height:1}
.edp-faq details[open] summary:after{content:"\2212"}
.edp-faq details[open] summary{color:#216d96}
.edp-faq p{margin:0;padding:0 22px 20px;font-size:13px;line-height:1.85;color:#52677b}
.edp-faq :focus-visible{outline:3px solid #216d96;outline-offset:-3px}

@media(max-width:900px){
	.edp-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.edp-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
	.edp-feature-grid,.edp-process-grid{grid-template-columns:1fr;gap:14px}
	.edp-stat-rail .wrap{gap:22px}
	.edp-stat-rail>.wrap>span{flex:1 1 40%}
	.edp-stat-rail b{font-size:28px}
}

/* WooCommerce single product.

   Woo's own gallery is removed so the locked vial composition is used
   instead; this gives that composition the same frame the catalog cards use,
   so a product page and a card are recognisably the same object. */
.edp-single-art{position:relative;max-width:460px;margin:0 0 28px;border:1px solid #d7e2ec;border-radius:16px;overflow:hidden;background:#000616;aspect-ratio:1122/1402}
.woocommerce div.product .edp-single-art img{display:block;width:100%;height:auto}
@media(max-width:760px){.edp-single-art{max-width:100%;margin-inline:auto}}

/* ------------------------------------------------------------------
   WooCommerce single product page.

   WooCommerce ships its own unstyled markup, which landed on a navy
   and silver site looking like a different website. These rules give
   it the catalog's vocabulary: the silver panel, the hairline border,
   the navy pill button, the small-caps labels.

   Nothing here restyles the catalog cards or the locked artwork; it
   dresses the page WooCommerce draws around them.
   ------------------------------------------------------------------ */

.woocommerce-page main,
.woocommerce main { padding: 0 0 70px; }

.woocommerce .wrap,
.woocommerce-page .wrap { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
	max-width: 1180px; margin: 0 auto 26px; padding: 22px 24px 0;
	font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #6b8198;
}
.woocommerce .woocommerce-breadcrumb a { color: #216d96; text-decoration: none; }
.woocommerce .woocommerce-breadcrumb a:hover { text-decoration: underline; }

/* Two columns: artwork, then the detail panel */
.woocommerce div.product {
	max-width: 1180px; margin-inline: auto; padding-inline: 24px;
	display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
	gap: 44px; align-items: start;
}
.woocommerce div.product .edp-single-art { margin: 0; grid-row: span 2; }
.woocommerce div.product > .summary { margin: 0; }

.woocommerce div.product .product_title {
	font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -1.4px;
	font-weight: 500; color: #17344f; margin: 0 0 6px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 24px; color: #216d96; font-weight: 600; margin: 0 0 18px;
}
.woocommerce div.product p.price del { opacity: .5; font-weight: 400; }

.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 14px; line-height: 1.85; color: #52677b;
	padding-bottom: 20px; border-bottom: 1px solid #d7e2ec; margin-bottom: 20px;
}

/* Variation picker */
.woocommerce div.product form.cart { margin: 0; }
.woocommerce div.product table.variations { margin: 0 0 18px; border: 0; width: 100%; }
.woocommerce div.product table.variations th,
.woocommerce div.product table.variations td { padding: 0 0 12px; border: 0; display: block; text-align: left; }
.woocommerce div.product table.variations label {
	font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; color: #5a7283; font-weight: 700;
}
.woocommerce div.product table.variations select {
	width: 100%; margin-top: 7px; padding: 12px 14px; min-height: 46px;
	border: 1px solid #d4e3ec; border-radius: 8px; background: #fbfdff;
	color: #254b66; font-size: 14px;
}
.woocommerce div.product .reset_variations { font-size: 11px; color: #6b8198; }
.woocommerce div.product .woocommerce-variation-price { margin-bottom: 14px; }

/* Quantity + add to cart */
.woocommerce div.product form.cart div.quantity { margin-right: 10px; }
.woocommerce div.product form.cart .quantity input {
	width: 72px; padding: 13px 10px; border: 1px solid #d4e3ec; border-radius: 99px;
	background: #fbfdff; color: #254b66; text-align: center; font-size: 14px;
}
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
	background: #1d689e; color: #fff; border: 1px solid #1d689e; border-radius: 99px;
	padding: 15px 30px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
	text-transform: uppercase; transition: background .15s, border-color .15s;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover { background: #155780; border-color: #155780; }
.woocommerce div.product form.cart .button:disabled,
.woocommerce div.product .single_add_to_cart_button.disabled {
	background: #c3d2de; border-color: #c3d2de; color: #fff; cursor: not-allowed;
}

/* Lot / SKU meta */
.woocommerce div.product .product_meta {
	margin-top: 22px; padding-top: 18px; border-top: 1px solid #d7e2ec;
	font-size: 11px; line-height: 2; color: #6b8198;
}
.woocommerce div.product .product_meta a { color: #216d96; }

/* Tabs and description */
.woocommerce div.product .woocommerce-tabs { grid-column: 2; margin-top: 10px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 18px; border-bottom: 1px solid #d7e2ec; }
.woocommerce div.product .woocommerce-tabs ul.tabs:before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none; border: 0; border-radius: 0; margin: 0 22px 0 0; padding: 0 0 10px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li:before,
.woocommerce div.product .woocommerce-tabs ul.tabs li:after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: #6b8198; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #17344f; }
.woocommerce div.product .woocommerce-tabs .panel h2 { display: none; }
.woocommerce div.product .woocommerce-tabs .panel p { font-size: 14px; line-height: 1.9; color: #52677b; }

/* Related products: the catalog cards already have a home, so this stays quiet */
.woocommerce .related.products { grid-column: 1 / -1; margin-top: 10px; padding-top: 34px; border-top: 1px solid #d7e2ec; }
.woocommerce .related.products > h2 {
	font-size: 10px; letter-spacing: 2.3px; text-transform: uppercase; color: #216d96; font-weight: 700; margin-bottom: 20px;
}
.woocommerce .related.products ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; }
.woocommerce .related.products ul.products li.product {
	width: auto; margin: 0; float: none; padding: 18px;
	border: 1px solid #d7e2ec; border-radius: 14px; background: linear-gradient(160deg, #fff, #f4f8fb);
}
.woocommerce .related.products ul.products li.product h2,
.woocommerce .related.products ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px; color: #17344f; font-weight: 600; padding: 0; margin: 0 0 6px;
}
.woocommerce .related.products ul.products li.product .price { font-size: 14px; color: #216d96; }
.woocommerce .related.products ul.products li.product .button { display: none; }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	max-width: 1180px; margin: 0 auto 24px; border-radius: 12px;
	border: 1px solid #c7dcea; border-top: 0; border-left: 3px solid #1d689e;
	background: #eef6fb; color: #17344f; font-size: 14px; line-height: 1.7;
}
.woocommerce-message:before, .woocommerce-info:before, .woocommerce-error:before { color: #1d689e; }
.woocommerce-message .button, .woocommerce-info .button {
	background: #1d689e; color: #fff; border-radius: 99px; padding: 10px 20px;
	font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700;
}

@media (max-width: 900px) {
	.woocommerce div.product { grid-template-columns: 1fr; gap: 26px; }
	.woocommerce div.product .edp-single-art { grid-row: auto; max-width: 420px; }
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce .related.products { grid-column: 1; }
	.woocommerce .related.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.woocommerce .related.products ul.products { grid-template-columns: 1fr; }
	.woocommerce div.product form.cart .button { width: 100%; }
}

/* Research-account prompt on the cart and checkout. */
.edp-account-prompt {
	display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
	max-width: 1180px; margin: 0 auto 26px; padding: 24px 26px;
	border: 1px solid #c7dcea; border-left: 3px solid #1d689e; border-radius: 14px;
	background: linear-gradient(160deg, #fff, #eef6fb);
}
.edp-account-prompt h2 { font-size: 19px; font-weight: 600; color: #17344f; margin: 0 0 8px; letter-spacing: -.3px; }
.edp-account-prompt p { font-size: 14px; line-height: 1.8; color: #52677b; margin: 0; max-width: 62ch; }
.edp-account-prompt .edp-account-prompt-note { font-size: 12px; line-height: 1.75; color: #6b8198; margin-top: 10px; }
.edp-account-prompt .button {
	flex: 0 0 auto; background: #1d689e; color: #fff; border: 1px solid #1d689e; border-radius: 99px;
	padding: 15px 28px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
	text-decoration: none; white-space: nowrap;
}
.edp-account-prompt .button:hover { background: #155780; border-color: #155780; color: #fff; }
@media (max-width: 700px) {
	.edp-account-prompt { padding: 20px; }
	.edp-account-prompt .button { width: 100%; text-align: center; }
}

/* A former price, shown only when a sale price is actually set. */
.price .price-was { font-size: .62em; color: #7d93a6; font-weight: 400; margin-right: 5px; text-decoration-thickness: 1px; }

/* The research-account link sits in the nav but is not a destination in the
   way the catalog is, so it reads one step quieter than its neighbours. */
.nav .links .edp-account-link { color: #216d96; font-weight: 600; }
.nav .links .edp-account-link:hover { color: #155780; }

/* Related products were inheriting WooCommerce's own narrow float layout, so
   the cards came out cramped and the titles wrapped mid-word. Give them the
   same room the catalog grid gets. */
.woocommerce .related.products ul.products li.product { min-width: 0; padding: 20px; text-align: left; }
.woocommerce .related.products ul.products li.product a { text-decoration: none; }
.woocommerce .related.products ul.products li.product h2,
.woocommerce .related.products ul.products li.product .woocommerce-loop-product__title {
	font-size: 16px; line-height: 1.3; overflow-wrap: normal; word-break: keep-all;
}
.woocommerce .related.products ul.products li.product .price { display: block; margin-top: 6px; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }

/* The footer belongs to the site, not to WooCommerce's column. */
.woocommerce-page .footer, .woocommerce .footer { clear: both; }

/* Payment instructions on the order-received page. */
.edp-payment-instructions {
	max-width: 760px; margin: 0 0 28px; padding: 24px 26px;
	border: 1px solid #c7dcea; border-left: 3px solid #1d689e; border-radius: 14px;
	background: linear-gradient(160deg, #fff, #eef6fb);
}
.edp-payment-instructions h2 { font-size: 18px; font-weight: 600; color: #17344f; margin: 0 0 12px; letter-spacing: -.3px; }
.edp-payment-instructions p { font-size: 14px; line-height: 1.85; color: #3d5567; margin: 0 0 12px; }
.edp-payment-instructions p:last-child { margin-bottom: 0; }

/* Lot record link beneath the add-to-cart form. */
.woocommerce div.product .edp-lot-link {
	display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	margin: 20px 0 0; padding: 14px 18px;
	border: 1px solid #d7e2ec; border-radius: 10px; background: #f4f8fb;
}
.woocommerce div.product .edp-lot-link a {
	font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
	color: #1d689e; text-decoration: none;
}
.woocommerce div.product .edp-lot-link a:hover { text-decoration: underline; }
.woocommerce div.product .edp-lot-number { font-size: 11px; letter-spacing: .6px; color: #6b8198; }
.woocommerce div.product .edp-lot-note { margin: 10px 0 0; font-size: 11px; line-height: 1.75; color: #6b8198; }

/* -------------------------------------------------------------------------
   Mobile navigation drawer

   The breakpoint matches where the inline header links are hidden, so the
   trigger and the links are never both on screen.
   ------------------------------------------------------------------------- */
.menu-trigger { display: none; }

.drawer { display: none; }

@media (max-width: 860px) {
	.menu-trigger {
		display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; margin-left: auto;
		padding: 0; border: 0; border-radius: 10px;
		background: transparent; color: #17344f; cursor: pointer;
	}
	.menu-trigger:focus-visible { outline: 2px solid #1d689e; outline-offset: 2px; }
	.menu-bars { display: block; width: 22px; }
	.menu-bars i {
		display: block; height: 2px; margin: 4px 0; border-radius: 2px;
		background: currentColor;
	}

	/* The drawer is a backdrop with a panel inside it. */
	.drawer {
		display: flex; justify-content: flex-end;
		position: fixed; inset: 0; z-index: 1200;
		background: rgba(10, 26, 41, 0); 
		transition: background .24s ease;
	}
	.drawer[hidden] { display: none; }
	.drawer.is-open { background: rgba(10, 26, 41, .45); }

	.drawer > * { position: relative; z-index: 1; }

	.drawer-head, .drawer-links, .drawer-ruo {
		background: #fff;
		width: min(420px, 100%);
		margin-left: auto;
	}

	.drawer-head {
		display: flex; align-items: center; justify-content: space-between;
		gap: 16px; padding: 18px 20px;
		border-bottom: 1px solid #e2eaf1;
	}
	.drawer-head .brand-logo img { display: block; height: auto; }

	.drawer-close {
		width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px;
		background: transparent; color: #17344f; font-size: 30px; line-height: 1;
		cursor: pointer;
	}
	.drawer-close:focus-visible { outline: 2px solid #1d689e; outline-offset: 2px; }

	.drawer-links { flex: 1; display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; }
	.drawer-links a {
		display: flex; align-items: center; justify-content: space-between;
		gap: 16px; min-height: 60px; padding: 0 20px;
		font-size: 19px; font-weight: 600; letter-spacing: -.2px;
		color: #17344f; text-decoration: none;
	}
	.drawer-links a:active { background: #f1f6fa; }
	.drawer-links a span { color: #9fb3c4; font-size: 22px; font-weight: 400; }
	.drawer-links a:focus-visible { outline: 2px solid #1d689e; outline-offset: -2px; }

	/* Account and cart: present, but not competing with the catalog links. */
	.drawer-rule { height: 1px; margin: 10px 20px; background: #e2eaf1; }
	.drawer-links .drawer-quiet,
	.drawer-rule ~ a { font-size: 17px; font-weight: 500; color: #51697d; min-height: 54px; }

	.drawer-ruo {
		margin: 0; padding: 18px 20px 24px;
		font-size: 10px; font-weight: 600; letter-spacing: 1px; line-height: 1.7;
		color: #6b8198; text-transform: uppercase;
		border-top: 1px solid #e2eaf1;
	}

	/* The page behind must not scroll while the panel is open. */
	html.drawer-open, html.drawer-open body { overflow: hidden; }

	/* Panel slide. Honours a reduced-motion preference. */
	.drawer-head, .drawer-links, .drawer-ruo {
		transform: translateX(16px); opacity: 0;
		transition: transform .24s ease, opacity .24s ease;
	}
	.drawer.is-open .drawer-head,
	.drawer.is-open .drawer-links,
	.drawer.is-open .drawer-ruo { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.drawer, .drawer-head, .drawer-links, .drawer-ruo { transition: none; }
}

/* -------------------------------------------------------------------------
   Certificate panel on the single product page
   ------------------------------------------------------------------------- */
.woocommerce div.product .edp-coa {
	margin: 22px 0 0; padding: 20px;
	border: 1px solid #d7e2ec; border-radius: 12px; background: #f6fafd;
}
.woocommerce div.product .edp-coa h2 {
	margin: 0 0 4px; font-size: 11px; font-weight: 700;
	letter-spacing: 1.4px; text-transform: uppercase; color: #1d689e;
}
.woocommerce div.product .edp-coa-lot {
	margin: 0 0 14px; font-size: 13px; font-weight: 600; color: #17344f;
}
.woocommerce div.product .edp-coa-rows {
	display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0;
}
.woocommerce div.product .edp-coa-rows dt {
	margin: 0; font-size: 12px; color: #6b8198;
}
.woocommerce div.product .edp-coa-rows dd {
	margin: 0; font-size: 13px; font-weight: 600; color: #17344f; text-align: right;
}
.woocommerce div.product .edp-coa-pending {
	margin: 0 0 10px; font-size: 13px; line-height: 1.75; color: #51697d;
}
.woocommerce div.product .edp-coa-links {
	display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0 0;
	padding-top: 14px; border-top: 1px solid #e2eaf1;
}
.woocommerce div.product .edp-coa-links a {
	font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
	color: #1d689e; text-decoration: none;
}
.woocommerce div.product .edp-coa-links a:hover { text-decoration: underline; }
.woocommerce div.product .edp-coa-note {
	margin: 14px 0 0; font-size: 11px; line-height: 1.75; color: #6b8198;
}

/* -------------------------------------------------------------------------
   The free-vial offer
   ------------------------------------------------------------------------- */
.woocommerce div.product .edp-offer {
	margin: 20px 0; padding: 18px;
	border: 1px solid #d7e2ec; border-radius: 12px; background: #fff;
}
.woocommerce div.product .edp-offer h2 {
	margin: 0 0 14px; font-size: 11px; font-weight: 700;
	letter-spacing: 1.4px; text-transform: uppercase; color: #17344f;
}
.edp-offer-headline {
	margin: 0 0 6px; font-size: 15px; font-weight: 650;
	letter-spacing: -.2px; color: #17344f;
}
.edp-offer-note + .edp-offer-note { margin-top: 4px; }
.woocommerce-cart .edp-offer { margin: 0 0 24px; }
.edp-offer-tiers {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
	margin: 0; padding: 0; list-style: none;
}
.edp-offer-tiers li {
	display: flex; flex-direction: column; gap: 2px; align-items: center;
	padding: 14px 10px; border: 1px solid #d7e2ec; border-radius: 10px;
	background: #f6fafd; text-align: center;
}
.edp-offer-paid { font-size: 15px; font-weight: 600; color: #17344f; }
.edp-offer-free {
	font-size: 12px; font-weight: 700; letter-spacing: .6px;
	text-transform: uppercase; color: #1d689e;
}
.edp-offer-note {
	margin: 12px 0 0; font-size: 11px; line-height: 1.75; color: #6b8198;
}

/* -------------------------------------------------------------------------
   Catalog beneath the hero
   ------------------------------------------------------------------------- */
.catalog-intro { padding-bottom: 0; }
.catalog-intro .section-head { margin-bottom: 28px; }
.material-summary {
	margin: 10px 0 0; font-size: 12.5px; line-height: 1.75; color: #51697d;
}

/* -------------------------------------------------------------------------
   Compound information, beneath the single product

   Replaces WooCommerce's tab strip. "Additional information" listed the vial
   amounts already shown as a dropdown a few inches above it, and the
   description tab held whatever single word the import left in the post body.
   ------------------------------------------------------------------------- */
.woocommerce .edp-compound { padding: 44px 0 56px; border-top: 1px solid #e2eaf1; margin-top: 44px; }
.woocommerce .edp-compound .eyebrow {
	font-size: 10px; font-weight: 700; letter-spacing: 1.6px;
	text-transform: uppercase; color: #1d689e; margin-bottom: 8px;
}
.woocommerce .edp-compound h2 {
	margin: 0 0 16px; font-size: 26px; font-weight: 600;
	letter-spacing: -.5px; color: #17344f;
}
.edp-compound-summary {
	max-width: 62ch; margin: 0 0 26px;
	font-size: 15px; line-height: 1.8; color: #3d5567;
}
.edp-compound-rows {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0; margin: 0 0 22px;
	border: 1px solid #d7e2ec; border-radius: 12px; overflow: hidden;
	background: #fff;
}
.edp-compound-rows > div {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px; padding: 15px 18px; border-bottom: 1px solid #edf2f7;
}
.edp-compound-rows dt { margin: 0; font-size: 12px; color: #6b8198; }
.edp-compound-rows dd {
	margin: 0; font-size: 13.5px; font-weight: 600; color: #17344f; text-align: right;
}
.edp-compound-ruo {
	margin: 0; font-size: 11px; line-height: 1.8; color: #6b8198; max-width: 70ch;
}

@media (max-width: 600px) {
	.woocommerce .edp-compound { padding: 32px 0 40px; margin-top: 32px; }
	.woocommerce .edp-compound h2 { font-size: 22px; }
	.edp-compound-rows > div { padding: 13px 16px; }
}

/* -------------------------------------------------------------------------
   Certificates index

   Grouped by compound, with the lots inside. The header states both numbers
   -- published and total -- because a page that reported only the flattering
   one would be claiming coverage the records do not have.
   ------------------------------------------------------------------------- */
.coa-hero { padding: 56px 0 40px; text-align: center; background: #eef3f8; border-bottom: 1px solid #dfe8f0; }
.coa-count {
	display: inline-block; margin: 0 0 18px; padding: 7px 16px;
	border: 1px solid #cfdeea; border-radius: 999px; background: #fff;
	font-size: 11px; font-weight: 700; letter-spacing: 1.1px;
	text-transform: uppercase; color: #1d689e;
}
.coa-hero h1 {
	margin: 0 0 16px; font-size: clamp(30px, 6vw, 46px); font-weight: 700;
	letter-spacing: -1.2px; color: #11263a;
}
.coa-intro {
	max-width: 62ch; margin: 0 auto 28px;
	font-size: 15px; line-height: 1.8; color: #3d5567;
}
.coa-search { display: block; max-width: 520px; margin: 0 auto; }
.coa-search input {
	width: 100%; padding: 15px 20px;
	border: 1px solid #cfdeea; border-radius: 999px; background: #fff;
	font: inherit; font-size: 15px; color: #11263a;
}
.coa-search input::placeholder { color: #8ba2b6; }
.coa-search input:focus-visible { outline: 2px solid #1d689e; outline-offset: 2px; }

.coa-index { padding: 44px 0 64px; }
.coa-grid {
	display: grid; gap: 18px;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.coa-card {
	display: flex; flex-direction: column; gap: 14px;
	padding: 20px; border: 1px solid #dfe8f0; border-radius: 14px; background: #fff;
}
.coa-card[hidden] { display: none; }
.coa-card-head { display: flex; align-items: center; gap: 14px; }
.coa-thumb { flex: 0 0 52px; width: 52px; }
.coa-thumb .vial-art { position: relative; width: 52px; height: 65px; }
.coa-thumb .vial-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.coa-flag {
	display: block; margin-bottom: 3px;
	font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px;
	text-transform: uppercase; color: #1d689e;
}
.coa-card h2 {
	margin: 0; font-size: 17px; font-weight: 650;
	letter-spacing: -.3px; color: #11263a;
}

.coa-lots { margin: 0; padding: 0; list-style: none; border-top: 1px solid #edf2f7; }
.coa-lots li {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px; padding: 9px 0; border-bottom: 1px solid #f2f6f9;
}
.coa-lots a { font-size: 13px; font-weight: 600; color: #1d689e; text-decoration: none; }
.coa-lots a:hover { text-decoration: underline; }
.coa-lots span { font-size: 11.5px; color: #8ba2b6; text-align: right; }

.coa-card-foot {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin-top: auto; padding-top: 4px;
}
.coa-product, .coa-view {
	font-size: 12px; font-weight: 600; text-decoration: none;
}
.coa-product { color: #51697d; }
.coa-view { color: #1d689e; }
.coa-product:hover, .coa-view:hover { text-decoration: underline; }
.coa-pending { font-size: 12px; color: #9fb3c4; }

.coa-empty { margin: 28px 0 0; text-align: center; font-size: 14px; color: #6b8198; }
.coa-note {
	max-width: 76ch; margin: 36px auto 0; text-align: center;
	font-size: 11.5px; line-height: 1.85; color: #8ba2b6;
}

@media (max-width: 600px) {
	.coa-hero { padding: 36px 0 28px; }
	.coa-index { padding: 28px 0 44px; }
	.coa-grid { grid-template-columns: 1fr; }
}

/* The certificate, embedded on the lot page. A browser that will not render a
   PDF inline falls back to the nested image or link, so the frame is never
   blank; the height is generous because a COA is a portrait document. */
.coa-document .coa-embed {
	display: block; width: 100%; height: min(78vh, 900px);
	border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: #fff;
}
.coa-document .coa-embed img { width: 100%; height: auto; display: block; }
.coa-embed-fallback { margin: 0; padding: 32px 20px; text-align: center; }
.coa-embed-fallback a { font-size: 13px; font-weight: 600; color: #1d689e; }
@media (max-width: 700px) { .coa-document .coa-embed { height: min(62vh, 640px); } }

/* -------------------------------------------------------------------------
   Other compounds, beneath the single product

   Replaces WooCommerce's related products, which rendered with no images at
   all once the loop thumbnail was removed in favour of the vial artwork.
   ------------------------------------------------------------------------- */
.woocommerce .edp-related { padding: 40px 0 56px; border-top: 1px solid #e2eaf1; }
.woocommerce .edp-related .eyebrow {
	font-size: 10px; font-weight: 700; letter-spacing: 1.6px;
	text-transform: uppercase; color: #1d689e; margin-bottom: 8px;
}
.woocommerce .edp-related h2 {
	margin: 0 0 24px; font-size: 24px; font-weight: 600;
	letter-spacing: -.5px; color: #17344f;
}
.edp-related-grid {
	display: grid; gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.edp-related-card {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: 20px 16px 18px; text-decoration: none;
	border: 1px solid #dfe8f0; border-radius: 14px; background: #fff;
	transition: border-color .15s ease, transform .15s ease;
}
.edp-related-card:hover { border-color: #b9d2e6; transform: translateY(-2px); }
.edp-related-art { display: block; width: 104px; margin-bottom: 10px; }
.edp-related-art .vial-art { position: relative; width: 104px; height: 130px; }
.edp-related-art .vial-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.edp-related-name {
	font-size: 14px; font-weight: 650; letter-spacing: -.2px; color: #11263a; text-align: center;
}
.edp-related-price { font-size: 12.5px; color: #51697d; text-align: center; }
.edp-related-price del { opacity: .55; margin-right: 4px; }
.edp-related-price ins { text-decoration: none; font-weight: 600; }
.edp-related-flag {
	margin-top: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px;
	text-transform: uppercase; color: #9fb3c4;
}
@media (prefers-reduced-motion: reduce) { .edp-related-card:hover { transform: none; } }
@media (max-width: 600px) {
	.woocommerce .edp-related { padding: 28px 0 40px; }
	.edp-related-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.edp-related-art, .edp-related-art .vial-art { width: 82px; }
	.edp-related-art .vial-art { height: 103px; }
}

/* Assurances beneath the add-to-cart form. Each line is checkable: the
   threshold is read from the shipping zone, not written here. */
.edp-assurances {
	display: flex; flex-wrap: wrap; gap: 8px 22px;
	margin: 16px 0 0; padding: 0; list-style: none;
}
.edp-assurances li {
	position: relative; padding-left: 18px;
	font-size: 12px; line-height: 1.6; color: #51697d;
}
.edp-assurances li::before {
	content: ""; position: absolute; left: 0; top: 7px;
	width: 7px; height: 7px; border-radius: 50%;
	background: #9fc4de;
}
@media (max-width: 600px) { .edp-assurances { gap: 6px 16px; } }

/* -------------------------------------------------------------------------
   The floating vial

   The approved artwork, displayed and never altered: exact aspect ratio, no
   filter, no drop shadow. Light comes from a separate element behind the
   glass, because a shadow or glow applied to the image itself would put a
   halo around the lettering.

   Every animation here sits behind html.hero-paused and behind a
   reduced-motion query, so the pause button means what it says.
   ------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }

.hero-vial {
	position: absolute; z-index: 0;
	right: clamp(-40px, 2vw, 90px);
	top: 50%;
	width: clamp(260px, 26vw, 420px);
	transform: translateY(-50%);
	pointer-events: none;
	--vial-x: 0px; --vial-y: 0px; --vial-tilt: 0deg;
}

/* The light it sits in. Behind the glass, never on it. */
.hero-vial-glow {
	position: absolute; inset: -24% -30%;
	border-radius: 50%;
	background:
		radial-gradient(closest-side, rgba(150,196,245,.28), rgba(123,173,224,.10) 58%, transparent 72%),
		radial-gradient(closest-side at 62% 34%, rgba(255,255,255,.22), transparent 64%);
	animation: edp-breathe 9s ease-in-out infinite;
}

/* Two layers of motion: the cursor's lean, then a slow idle drift inside it.
   Separating them keeps the drift smooth while the lean eases independently. */
.hero-vial-float {
	display: block;
	transform: translate3d(var(--vial-x), var(--vial-y), 0) rotate(var(--vial-tilt));
	will-change: transform;
}
.hero-vial-float .vial-art {
	position: relative; display: block;
	width: 100%; aspect-ratio: 1122 / 1402;
	animation: edp-drift 11s ease-in-out infinite;
}
.hero-vial-float .vial-art img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: contain;
}

@keyframes edp-drift {
	0%, 100% { transform: translateY(-10px) rotate(-.7deg); }
	50%      { transform: translateY(10px) rotate(.7deg); }
}
@keyframes edp-breathe {
	0%, 100% { opacity: .72; transform: scale(.97); }
	50%      { opacity: 1;   transform: scale(1.04); }
}

/* Slow motes rising through the light, like particulate in solution. */
.hero-vial::before, .hero-vial::after {
	content: ""; position: absolute; left: 32%;
	width: 5px; height: 5px; border-radius: 50%;
	background: rgba(214,232,252,.5);
	animation: edp-rise 13s linear infinite;
}
.hero-vial::after { left: 64%; width: 3px; height: 3px; animation-duration: 17s; animation-delay: -6s; }

@keyframes edp-rise {
	0%   { bottom: 6%;  opacity: 0; transform: translateX(0); }
	15%  { opacity: .7; }
	85%  { opacity: .5; }
	100% { bottom: 92%; opacity: 0; transform: translateX(16px); }
}

/* The copy keeps the foreground. */
.hero .wrap { position: relative; z-index: 1; }
.hero-copy { position: relative; z-index: 1; }

/* The pause button stops all of it, not some of it. */
html.hero-paused .hero-vial-glow,
html.hero-paused .hero-vial-float .vial-art,
html.hero-paused .hero-vial::before,
html.hero-paused .hero-vial::after { animation: none; }
html.hero-paused .hero-vial-float { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.hero-vial-glow,
	.hero-vial-float .vial-art,
	.hero-vial::before,
	.hero-vial::after { animation: none; }
	.hero-vial-float { transform: none; }
}

/* Below this the hero is already full of words. The vial would crowd them. */
@media (max-width: 860px) {
	.hero-vial { display: none; }
}

/* Dissolve the artwork's own rectangle into the hero.

   The composition carries an opaque navy field behind the glass. On a card
   that is the intended look; floating in the hero it reads as a pasted box
   with a hard edge. A mask feathers the outer field away without touching the
   file, recolouring anything, or putting an outline, patch or seam near the
   lettering — the vial itself stays fully opaque well inside the fade. */
.hero-vial-float .vial-art {
	-webkit-mask-image: radial-gradient(ellipse 60% 68% at 50% 47%, #000 56%, rgba(0,0,0,.72) 74%, transparent 93%);
	mask-image: radial-gradient(ellipse 60% 68% at 50% 47%, #000 56%, rgba(0,0,0,.72) 74%, transparent 93%);
}

/* -------------------------------------------------------------------------
   Hero vial, revised: closer in, tilted, travelling further up and down.
   ------------------------------------------------------------------------- */
.hero-vial {
	right: clamp(24px, 11vw, 250px);          /* brought in toward the headline */
	width: clamp(250px, 23vw, 380px);
	--vial-base-tilt: -7deg;                   /* the resting lean */
}

/* Base tilt lives on the wrapper so the cursor's lean adds to it rather than
   replacing it, and the drift below stays purely vertical. */
.hero-vial-float {
	transform:
		translate3d(var(--vial-x), var(--vial-y), 0)
		rotate(calc(var(--vial-base-tilt) + var(--vial-tilt)));
}

/* A longer, slower rise and fall. Vertical only -- the lean is already there. */
@keyframes edp-drift {
	0%, 100% { transform: translateY(-22px); }
	50%      { transform: translateY(22px); }
}
.hero-vial-float .vial-art { animation: edp-drift 7.5s ease-in-out infinite; }

/* The mask hugs the glass much more closely than before, so far less of the
   backdrop field survives around it. */
.hero-vial-float .vial-art {
	-webkit-mask-image: radial-gradient(ellipse 46% 60% at 50% 48%, #000 62%, rgba(0,0,0,.55) 80%, transparent 95%);
	mask-image: radial-gradient(ellipse 46% 60% at 50% 48%, #000 62%, rgba(0,0,0,.55) 80%, transparent 95%);
}

/* The glow follows it in. */
.hero-vial-glow { inset: -18% -22%; }

html.hero-paused .hero-vial-float { transform: rotate(var(--vial-base-tilt)); }
@media (prefers-reduced-motion: reduce) {
	.hero-vial-float { transform: rotate(var(--vial-base-tilt)); }
}

/* -------------------------------------------------------------------------
   Hero vial, cut out

   The backdrop is gone from the image itself, so there is nothing left to
   mask and no field to glow around. What is left is the vial.
   ------------------------------------------------------------------------- */
.hero-vial { width: clamp(190px, 17vw, 290px); right: clamp(32px, 12vw, 270px); }

.hero-vial-float img {
	display: block; width: 100%; height: auto;
	animation: edp-drift 7.5s ease-in-out infinite;
}

/* No mask: there is no rectangle to dissolve any more. */
.hero-vial-float .vial-art { -webkit-mask-image: none; mask-image: none; }

/* The light it stands in, well behind and much softer now that it is not
   compensating for a visible backdrop. */
.hero-vial-glow {
	inset: 4% -34% 10%;
	background: radial-gradient(closest-side, rgba(126,178,232,.20), rgba(96,150,210,.07) 60%, transparent 76%);
}

html.hero-paused .hero-vial-float img,
html.hero-paused .hero-vial-glow { animation: none; }
@media (prefers-reduced-motion: reduce) {
	.hero-vial-float img, .hero-vial-glow { animation: none; }
}