/* Homepage: spacious clinical product studio, with one coordinated motion sequence. */
.home-page .nav { padding:10px 0; background:rgb(255 255 255 / 94%); border-bottom:1px solid #dfeaf2; }
.home-page .nav.is-scrolled { padding:6px 0; }
.home-page .nav-inner { max-width:1660px; gap:24px; padding:0 40px; }
.home-page .nav-logo { flex-shrink:0; display:block; }
.home-page .nav-logo-img,.home-page .nav.is-scrolled .nav-logo-img { width:112px; height:88px; mix-blend-mode:normal; }
.home-page .nav-links { gap:28px; }
.home-page .nav-link { font-size:14px; letter-spacing:0; }
.home-page .nav-right { gap:14px; }
.nav-call { display:flex; align-items:center; gap:9px; background:#153c6e; border:1px solid #153c6e; border-radius:7px; padding:10px 15px; min-height:46px; color:white; font-size:14px; line-height:1.25; }
.nav-call small { display:block; font-size:11px; opacity:.85; margin-top:3px; }
.nav-call:hover { background:#245683; }
.floating-call { position:fixed; right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom),var(--floating-call-clearance,0px)); z-index:900; display:grid; place-items:center; width:54px; height:54px; border-radius:50%; color:#fff; background:linear-gradient(145deg,#32638e,#153c6e 70%); border:1px solid rgb(255 255 255 / 60%); box-shadow:0 5px 20px #153c6e38, inset 0 1px 0 #ffffff45; transition:transform .2s,box-shadow .2s; }
.floating-call svg { pointer-events:none; }
.floating-call-label { position:absolute; right:66px; white-space:nowrap; font-size:13px; color:#153c6e; background:#fff; padding:8px 12px; border:1px solid #dfeaf2; border-radius:7px; box-shadow:0 4px 18px #153c6e14; opacity:0; transform:translateX(4px); pointer-events:none; transition:opacity .2s,transform .2s; }
.floating-call:focus-visible { outline:3px solid #69afd5; outline-offset:4px; }
.floating-call:focus-visible .floating-call-label { opacity:1; transform:none; }
@media(hover:hover) and (pointer:fine) { .floating-call:hover { transform:translateY(-2px); box-shadow:0 8px 24px #153c6e50; } .floating-call:hover .floating-call-label { opacity:1; transform:none; } }
.home-page:has(.sidebar.is-open,.cart-drawer.is-open,.nav-links.is-open) .floating-call { visibility:hidden; }
@media(max-width:768px) { .floating-call { width:50px; height:50px; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom),var(--floating-call-clearance,0px)); } }
@media print { .floating-call { display:none; } }
.home-page .catalog-hero { display:block; min-height:0; padding:152px 40px 24px; background:#f3f8fc; isolation:isolate; }
.home-hero-shell { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,100px); max-width:1520px; margin:0 auto; align-items:center; }
.home-page .catalog-hero .hero-content { display:block; width:auto; max-width:none; padding:0; margin:0; }
.home-page .hero-intro { display:flex; align-items:center; gap:12px; color:#48667f; font-size:14px; margin:0 0 25px; }
.hero-intro-line { display:block; width:38px; height:2px; background:#69afd5; transform-origin:left; }
.home-page .catalog-hero .hero-title { font-size:clamp(3.6rem,5.45vw,6.2rem); line-height:1.03; letter-spacing:-.045em; color:#153c6e; margin-bottom:26px; }
.hero-heading-line { display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.hero-heading-line > span { display:block; }
.home-page .catalog-hero .hero-sub { color:#48667f; max-width:490px; font-size:17px; line-height:1.75; margin:0 0 28px; }
.home-page .catalog-hero .hero-actions { margin:0 0 28px; gap:26px; align-items:center; }
.home-page .hero-actions .btn { background:#153c6e; min-height:52px; border-radius:7px; gap:24px; }
.home-page .hero-actions .btn span { font-size:23px; transition:transform .25s; }
.home-page .hero-actions .btn:hover span { transform:translate(3px,-3px); }
.home-page .hero-call { display:inline-flex; gap:15px; align-items:center; min-height:44px; color:#153c6e; padding:6px 0; }
.home-page .hero-search { width:100%; max-width:500px; margin:0 0 18px; box-shadow:none; border-radius:7px; border-color:#c9d9e6; }
.home-page .hero-search input { font-size:16px; padding:15px; }
.home-page .hero-search button { padding:12px 18px; }
.home-page .hero-promises { gap:10px 18px; color:#48667f; font-size:12px; line-height:1.6; }
.home-page .hero-promises span::before { content:'✓'; margin-right:6px; color:#39789b; }
.home-page .catalog-hero-visual { display:block; width:100%; max-width:none; padding:0; min-width:0; }
.showcase-contours { position:absolute; width:118%; height:100%; left:-9%; top:0; pointer-events:none; z-index:-1; stroke:#8bbad6; stroke-width:.8; opacity:.7; }
.showcase-contours path { stroke:#376f99; stroke-width:1.2; }
.showcase-topline { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:44px; margin:0 0 13px; padding:0 7px; font-size:13px; color:#48667f; }
.showcase-stage { padding:0 17px 134px 38px; position:relative; perspective:1200px; }
.home-page .hero-product-showcase { position:relative; border-radius:12px; transform:rotate(1.5deg); box-shadow:0 20px 55px #153c6e14; border:1px solid #e3edf3; transform-origin:center; transition:transform .35s; }
.home-page .hero-product-showcase > img { height:clamp(280px,23vw,365px); width:100%; object-fit:contain; padding:5px; background:#fff; }
.home-page .hero-product-caption { padding:16px 22px; align-items:center; gap:16px; }
.home-page .hero-product-caption strong { font-family:var(--ff-display); font-size:27px; line-height:1.15; margin-top:4px; }
#showcasePrice { font-size:17px; color:#153c6e; text-align:right; flex-shrink:0; }
#showcasePrice small { display:block; font-size:10px; color:#48667f; margin-top:4px; max-width:145px; white-space:normal; }
.home-page .hero-product-small { bottom:8px; left:0; width:84%; max-width:425px; min-height:110px; padding:12px 18px; border-radius:9px; transform:rotate(-2deg); font-size:14px; line-height:1.4; gap:14px; border:1px solid #dce9f3; transition:transform .35s; }
.home-page .hero-product-small img { width:84px; height:84px; flex-shrink:0; }
.home-page .hero-product-small strong { color:#153c6e; margin-top:5px; font-size:12px; }
.showcase-link-arrow { margin-left:auto; font-size:25px; color:#153c6e; }
.showcase-controls { display:flex; gap:8px; margin-top:18px; }
.showcase-controls button { position:relative; flex:1; min-width:0; min-height:46px; padding:11px 8px 14px; color:#48667f; border-bottom:2px solid #cadde9; font-size:13px; text-align:left; }
.showcase-controls button[aria-pressed=true] { color:#153c6e; font-weight:500; }
.showcase-controls button > span { position:absolute; inset:auto 0 -2px; height:2px; background:#153c6e; transform:scaleX(0); transform-origin:left; }
.showcase-controls button[aria-pressed=true] > span { transform:scaleX(1); }
.showcase-controls button:disabled { opacity:.4; }
.hero-scroll-cue { display:flex; gap:16px; align-items:center; width:fit-content; margin:28px auto 0; padding:12px; font-size:12px; color:#48667f; }
.hero-scroll-cue span { font-size:21px; }
.home-page .brand-ribbon { padding:26px 30px; gap:clamp(24px,5vw,85px); }
.home-page .brand-ribbon > span { font-size:12px; }
.home-page .brand-ribbon strong { color:#153c6e; }
.home-page .container { max-width:1520px; }
.home-page .products-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.home-page .catalog-collections { position:relative; }
.home-page .collection-card { border-radius:9px; transition:border-color .25s; }
.home-page .collection-card img { transition:transform .6s cubic-bezier(.2,.7,.25,1); }
.home-page .collection-card:hover img,.home-page .collection-card:focus-visible img { transform:scale(1.045); }
.home-page .collection-card h3::after { content:' ↗'; font-family:var(--ff-body); font-size:20px; }
.home-page .collection-text { background:white; color:#48667f; }
.home-page .collection-text h3 { color:#153c6e; }
.home-page .about { padding:72px 0; }
.home-page .about-grid { max-width:1180px; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,5vw,72px); }
.home-page .about-visual { min-width:0; width:100%; max-width:420px; margin:0; }
.home-page .about-visual-card { width:100%; padding:18px; border-radius:12px; background:white; border:1px solid #dfeaf2; box-shadow:0 12px 32px #153c6e0a; }
.home-page .about-visual-card img { display:block; width:100%; height:auto; max-height:382px; object-fit:contain; border-radius:0; }
.home-page .about-content { min-width:0; }
.home-page .about-content .section-title { font-size:clamp(2.4rem,3.4vw,3.5rem); line-height:1.08; margin-bottom:24px; }
.home-page .about-text { font-size:16px; line-height:1.75; color:#48667f; }
@media(max-width:900px) { .home-page .about-grid { max-width:680px; grid-template-columns:minmax(0,1fr); gap:32px; } .home-page .about-visual { max-width:320px; margin:0 auto; } .home-page .about { padding:48px 0; } }
@media(max-width:400px) { .home-page .about-visual { max-width:260px; } .home-page .about-visual-card { padding:12px; } }
.home-page .value-item { position:relative; padding-top:20px; }
.home-page .value-item::before { content:''; position:absolute; top:0; left:0; height:2px; width:44px; background:#69afd5; transform-origin:left; }
[hidden] { display:none !important; }
/* The page reveals while the branded doors open, without a second waiting stage. */
.home-entering .hero-heading-line > span { animation:home-title-in 1.3s .15s cubic-bezier(.18,.75,.25,1) both; }
.home-entering .hero-heading-line:nth-child(2) > span { animation-delay:.28s; }
.home-entering .hero-intro-line { animation:home-line-in .8s .1s both; }
.home-entering .hero-sub,.home-entering .hero-actions,.home-entering .hero-search,.home-entering .hero-promises { animation:home-soft-in 1.1s .3s both; }
.home-entering .hero-search { animation-delay:.4s; }
.home-entering .hero-promises { animation-delay:.5s; }
.home-entering .showcase-stage { animation:home-stage-in 1.5s .15s cubic-bezier(.18,.75,.25,1) both; }
.home-entering .showcase-contours > * { stroke-dasharray:1; animation:home-contour-in 1.8s .1s both; }
.showcase-changing .hero-product-showcase { animation:home-product-change .6s cubic-bezier(.2,.65,.25,1) both; }
.showcase-changing .hero-product-small { animation:home-secondary-change .7s .07s cubic-bezier(.2,.65,.25,1) both; }
.showcase-changing .showcase-contours > * { stroke-dasharray:1; animation:home-contour-in 1.25s both; }
.home-page .is-drawn .value-item::before { animation:home-line-in .8s both; }
.home-page .is-drawn .value-item:nth-child(2)::before { animation-delay:.12s; }
.home-page .is-drawn .value-item:nth-child(3)::before { animation-delay:.24s; }
.home-page .is-drawn .value-item:nth-child(4)::before { animation-delay:.36s; }
.home-page .is-drawn.about-visual-card img { animation:home-about-in 1.1s cubic-bezier(.2,.65,.25,1) both; }
/* Light passes stay on the product image, clear of names, prices and controls. */
.home-page .hero-product-showcase::after { content:''; position:absolute; pointer-events:none; top:0; left:0; width:100%; height:clamp(280px,23vw,365px); border-radius:12px 12px 0 0; background:linear-gradient(110deg,transparent 25%,rgb(255 255 255 / 65%) 45%,rgb(179 218 244 / 20%) 50%,transparent 68%); transform:translateX(-120%); }
.home-entering .hero-product-showcase::after { animation:home-light-pass 2.2s .75s both; }
.home-entering .showcase-changing .hero-product-showcase::after { animation:home-light-pass 1.7s .2s both; }
.home-page .hero-actions .btn,.home-page .nav-call,.home-page .collection-card { position:relative; overflow:hidden; isolation:isolate; }
.home-page .hero-actions .btn::after,.home-page .nav-call::after,.home-page .collection-card::after { content:''; position:absolute; pointer-events:none; inset:0; background:linear-gradient(110deg,transparent 30%,rgb(255 255 255 / 28%) 49%,transparent 68%); transform:translateX(-120%); }
.home-page .hero-actions .btn:focus-visible::after,.home-page .nav-call:focus-visible::after,.home-page .collection-card:focus-visible::after { animation:home-light-pass .8s both; }
@media(hover:hover) and (pointer:fine) { .home-page .hero-actions .btn:hover::after,.home-page .nav-call:hover::after,.home-page .collection-card:hover::after { animation:home-light-pass .85s both; } }
@keyframes home-light-pass { from { transform:translateX(-120%); } to { transform:translateX(120%); } }
@keyframes home-title-in { from { transform:translateY(105%) rotate(2deg); } to { transform:translateY(0) rotate(0); } }
@keyframes home-soft-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes home-line-in { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes home-stage-in { from { opacity:0; transform:translate(35px,16px) rotate(3deg); } to { opacity:1; transform:none; } }
@keyframes home-contour-in { from { stroke-dashoffset:1; opacity:0; } to { stroke-dashoffset:0; opacity:1; } }
@keyframes home-product-change { from { opacity:0; transform:translate(20px,12px) rotate(4deg) scale(.97); } to { opacity:1; transform:rotate(1.5deg); } }
@keyframes home-secondary-change { from { opacity:0; transform:translate(-18px,12px) rotate(-5deg); } to { opacity:1; transform:rotate(-2deg); } }
@keyframes home-about-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (hover:hover) and (pointer:fine) { .home-page .hero-product-showcase:hover { transform:rotate(0) translateY(-4px); } .home-page .hero-product-small:hover { transform:rotate(0) translateY(-3px); } }
@media(min-width:1700px) { .home-page .catalog-hero { padding-top:165px; padding-bottom:30px; } .home-hero-shell { gap:90px; } }
@media(max-width:1150px) { .home-page .nav-inner { gap:16px; padding:0 26px; } .home-page .nav-links { gap:18px; } .nav-call small { display:none; } .home-page .catalog-hero { padding:140px 30px 20px; } .home-hero-shell { gap:25px; } .home-page .catalog-hero .hero-title { font-size:clamp(3.3rem,5.5vw,4.4rem); } .showcase-stage { padding-left:14px; padding-right:5px; } .home-page .hero-product-caption { padding:15px; } .home-page .hero-product-caption strong { font-size:23px; } .home-page .hero-product-small { max-width:90%; } }
@media(max-width:980px) and (min-width:769px) { .home-page .nav-link { font-size:12px; } .home-page .nav-links { gap:13px; } .home-page .nav-right { gap:8px; } .home-page .nav-inner { gap:12px; padding:0 20px; } .home-page .nav-logo-img,.home-page .nav.is-scrolled .nav-logo-img { width:98px; height:78px; } }
@media(max-width:900px) { .home-hero-shell { grid-template-columns:1fr; gap:36px; max-width:620px; } .home-page .catalog-hero .hero-content { text-align:left; } .home-page .catalog-hero .hero-title { font-size:clamp(3rem,7.4vw,4.8rem); } .home-page .hero-product-showcase > img { height:360px; } .home-page .catalog-hero .hero-actions { justify-content:flex-start; } .home-page .hero-promises { justify-content:flex-start; } .home-page .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:768px) { .home-page .nav-inner { padding:0 18px; gap:12px; } .home-page .nav-logo-img,.home-page .nav.is-scrolled .nav-logo-img { width:94px; height:72px; } .home-page .nav-right { gap:10px; } .nav-call { padding:8px 10px; min-height:44px; font-size:12px; gap:7px; } .home-page .nav-links { padding-top:110px; gap:22px; } .home-page .nav-link { font-size:21px; } .home-page .catalog-hero { padding:124px 22px 16px; } .home-page .catalog-hero .hero-title { margin-bottom:20px; } .home-page .hero-intro { font-size:12px; margin-bottom:20px; } .home-page .catalog-hero .hero-sub { font-size:16px; margin-bottom:23px; } .home-page .hero-search { max-width:none; } .home-page .hero-search input { font-size:16px; } .home-page .hero-promises { font-size:11px; gap:5px 12px; } .home-page .hero-product-showcase > img { height:310px; } .home-page .hero-product-small { width:92%; max-width:425px; } .home-page .showcase-topline { font-size:12px; } .showcase-controls button { font-size:12px; min-height:48px; } .home-page .brand-ribbon { gap:18px 28px; } .home-page .brand-ribbon strong { font-size:24px; } }
@media(max-width:400px) { .home-page .nav-inner { padding:0 12px; gap:8px; } .home-page .nav-right { gap:7px; } .home-page .nav-logo-img,.home-page .nav.is-scrolled .nav-logo-img { width:82px; height:64px; } .nav-call { padding:8px; gap:5px; } .nav-call svg { width:13px; } .home-page .nav-cart-btn,.home-page .nav-account-btn { width:32px; height:36px; } .home-page .catalog-hero { padding-left:18px; padding-right:18px; padding-top:110px; } .home-page .catalog-hero .hero-title { font-size:clamp(2.7rem,11.5vw,3.3rem); } .home-page .hero-actions .btn { padding:14px 18px; gap:15px; } .home-page .catalog-hero .hero-actions { gap:18px; } .home-page .hero-product-showcase > img { height:270px; } .home-page .hero-product-caption { padding:12px; gap:8px; } .home-page .hero-product-caption strong { font-size:21px; } #showcasePrice { font-size:15px; } .home-page .hero-product-small { padding:10px; gap:10px; font-size:12px; } .home-page .hero-product-small img { width:65px; height:65px; } .home-page .hero-product-small strong { font-size:11px; } .showcase-topline { padding:0; } }
@media(prefers-reduced-motion:reduce) { .home-page *, .home-page *::before,.home-page *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } .showcase-contours > * { stroke-dasharray:none!important; stroke-dashoffset:0!important; } }
@media(max-width:768px) { .home-page .nav-cart-btn,.home-page .nav-account-btn,.home-page .nav-toggle { width:44px; height:44px; min-width:44px; } .home-page .nav-toggle { align-items:center; justify-content:center; } }
@media(max-width:359px) { .home-page .nav-inner { padding:0 10px; gap:6px; } .home-page .nav-right { gap:4px; } .home-page .nav-logo-img,.home-page .nav.is-scrolled .nav-logo-img { width:64px; height:60px; } .nav-call svg { display:none; } .nav-call { padding:8px; white-space:nowrap; } }
@media(max-width:900px) { .home-page .hero-product-showcase::after { height:360px; } }
@media(max-width:768px) { .home-page .hero-product-showcase::after { height:310px; } }
@media(max-width:400px) { .home-page .hero-product-showcase::after { height:270px; } }
@media(max-width:768px) {
  .home-page .brand-ribbon { flex-wrap:nowrap; justify-content:space-between; gap:clamp(8px,2.5vw,18px); padding:22px 16px; overflow-x:auto; }
  .home-page .brand-ribbon > span { display:none; }
  .home-page .brand-ribbon strong { flex:0 0 auto; white-space:nowrap; font-size:clamp(16px,4.8vw,22px); }
}