/* Shared header metrics across home and inner pages. */
header:not(.lightbox-head){box-sizing:border-box}
body>header{height:100px;min-height:100px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;background:#f8f3f3}
body>header.header{padding:0}
body>header .header-inner{width:88%;max-width:none;height:100px;min-height:100px;margin:auto;padding:0;display:flex;align-items:center;justify-content:space-between}
body>header .logo,body>header .brand img{width:245px;height:auto;max-width:100%}
body>header nav{gap:30px}
body>header nav a{font-family:'Segoe UI',Arial,sans-serif;font-size:12px!important;font-weight:400!important;letter-spacing:.5px!important;line-height:1.5;text-transform:none;padding:8px 0!important;color:#70535c}
@media(min-width:801px){body>header nav{display:flex!important;align-items:center}body>header .menu-toggle{display:none!important}}
@media(max-width:800px){body>header,body>header .header-inner{height:76px;min-height:76px}body>header .logo,body>header .brand img{width:180px}body>header>nav{display:none!important}body>header .menu-toggle{display:flex!important}body>header .nav a{font-size:16px!important}}
/* Shared hero media footprint; retain each original image's proportions. */
@media(min-width:801px){.poster .image-stage{width:43vw;max-width:570px;height:330px;left:auto;right:6%;top:24%}.page-banner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.page-banner .banner-media,.banner-products .banner-media,.banner-contact .banner-media{width:100%;max-width:570px;height:330px;justify-self:end}}
@media(max-width:800px){.page-banner .banner-media,.banner-products .banner-media,.banner-contact .banner-media{width:100%;max-width:480px;height:230px;justify-self:center}.poster .image-stage{height:230px}}
@media(max-width:480px){.page-banner .banner-media,.banner-products .banner-media,.banner-contact .banner-media{height:190px}.poster .image-stage{height:190px}}
@media(min-width:801px){.page-banner .banner-media,.banner-products .banner-media,.banner-contact .banner-media{width:min(43vw,570px)}}
@media(max-width:800px){.poster .image-stage{width:77%;max-width:480px;left:auto;right:6%}.page-banner .banner-media,.banner-products .banner-media,.banner-contact .banner-media{width:77vw;max-width:480px;justify-self:end}}
/* Equal link boxes prevent the active underline from moving text vertically. */
body>header nav a{box-sizing:border-box;display:flex!important;align-items:center;height:36px;margin:0;border:0!important;position:relative;transform:none;line-height:18px}
body>header nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:transparent}
body>header nav a[aria-current="page"]::after,body>header nav a:hover::after{background:#a7476b}
body>header nav{margin:0;padding:0;align-items:center}
/* One hero frame geometry and a separate translucent backing layer. */
.page-banner .banner-media{overflow:visible;isolation:isolate;padding:0;border:0;box-sizing:border-box}
.page-banner .banner-media img{display:block;width:100%;height:100%;object-fit:cover;border-radius:44px 12px 65px 15px;transform:none}
.page-banner .banner-media::after{content:'';display:block!important;position:absolute;inset:-10px 17px 12px -9px;z-index:-1;border:1px solid #ffffffb3;border-radius:55px 15px 70px 18px;background:linear-gradient(125deg,#ffffff70,#ffffff08 48%,#d4aebc44)!important;transform:rotate(-2deg);pointer-events:none}
@media(min-width:801px){.page-banner{position:relative;min-height:550px;padding-top:65px;padding-bottom:65px;box-sizing:border-box}.page-banner .banner-inner{max-width:48%;grid-column:1/-1}.page-banner .banner-media{position:absolute;top:100px;right:6%;left:auto;width:min(43vw,570px);height:330px}.poster .image-stage{top:100px;height:330px}.poster .image-plane{height:100%;box-sizing:border-box}.banner-products h1{font-size:clamp(42px,5.5vw,80px)}}
@media(max-width:800px){.page-banner .banner-media{position:relative;top:auto;right:auto;width:77vw;height:230px}.page-banner .banner-media img{border-radius:25px 8px 35px 9px}.page-banner .banner-media::after{border-radius:36px 10px 45px 12px}}
@media(max-width:480px){.page-banner .banner-media{height:190px}}
/* Remove inherited grid placement and centered wrap offsets. */
@media(min-width:801px){
 .page-banner{display:block;min-height:550px}
 .page-banner .banner-inner{width:48%;max-width:48%;margin:0;padding:0;min-height:420px;display:flex;align-items:center}
 .page-banner .banner-copy{width:100%;max-width:none;margin:0;padding:0}
 .page-banner .banner-media{grid-area:auto;inset:100px 6% auto auto;margin:0;align-self:auto;justify-self:auto}
}
@media(max-width:800px){.page-banner .banner-inner{width:100%;max-width:100%;margin:0}.page-banner .banner-copy{width:100%;margin:0}}
/* Contact invitation shares the homepage layout and controls. */
.contact-section.home-section{padding:90px 6%;background:#fcfafb}
.contact-section .section-kicker{font-size:9px;letter-spacing:2px;color:#a45e73}
.contact-section>div{display:flex;align-items:center;justify-content:space-between;gap:35px}
.contact-section h2{font-family:'Segoe UI',Arial,sans-serif;font-weight:300;font-size:clamp(35px,4.5vw,64px);letter-spacing:-2px;line-height:1.12;margin:20px 0 0}
.contact-section p{font-size:13px;line-height:1.8;color:#93808a;margin-top:25px}
.contact-section .contact-button{display:flex;align-items:center;gap:28px;font:inherit;font-size:13px;border:1px solid #cbb2be;padding:20px 25px;background:transparent;color:inherit;cursor:pointer}
.contact-section .contact-button:hover{background:#f2e5eb}
.contact-section .email-link{display:inline-block;font-size:13px;color:#a16e83;margin-top:10px}
@media(max-width:600px){.contact-section.home-section{padding:55px 6%}.contact-section>div{display:block}.contact-section h2{font-size:38px;letter-spacing:-1.4px}.contact-section .contact-button{margin-top:28px;display:inline-flex;padding:15px 19px}}
html{scrollbar-gutter:stable}
@media(max-width:800px){body>header .home-main-nav{display:none!important}}
/* Align hero text by shared rows rather than centering each text block. */
@media(min-width:801px){
 .page-banner .banner-inner{align-items:flex-start;min-height:420px}
 .page-banner .banner-copy{display:grid;grid-template-columns:1fr;grid-template-rows:18px minmax(244px,auto) auto;row-gap:24px;align-content:start}
 .page-banner .banner-copy .eyebrow{grid-column:1;grid-row:1;margin:0;line-height:18px}
 .page-banner .banner-copy h1{grid-column:1;grid-row:2;margin:0;font-size:clamp(42px,5.5vw,76px);line-height:1.08;align-self:start}
 .page-banner .banner-copy .lead{grid-column:1;grid-row:3;margin:0;align-self:start}
}
@media(min-width:801px) and (max-width:1100px){.page-banner .banner-copy{grid-template-rows:18px minmax(230px,auto) auto}.page-banner .banner-copy h1{font-size:clamp(38px,4.8vw,53px)}}
@media(max-width:800px){.page-banner .banner-copy{display:block}.page-banner .banner-copy .eyebrow{margin:0}.page-banner .banner-copy h1{margin:24px 0}.page-banner .banner-copy .lead{margin:0}}
/* Tap-first category selection: no animated outline. */
.product-nav .product-link-trace{display:none!important}
.product-nav .product-links a{border:0!important;border-radius:4px;padding:16px 12px;min-height:48px;color:#806b76;background:#f0e8ec;transition:background-color .15s,color .15s;box-shadow:none}
.product-nav .product-links a[aria-current]{background:#d8c3cc;color:#513c46;font-weight:500}
.product-nav .product-links a:focus-visible{outline:2px solid #806271;outline-offset:3px}
@media(hover:hover){.product-nav .product-links a:hover:not([aria-current]){background:#e7d9df;color:#624b56}}
@media(max-width:600px){.product-links{gap:8px}.product-nav .product-links a{padding:13px 10px;font-size:12px;line-height:1.5}}
/* Use identical text line boxes, not anonymous flex text alignment. */
body>header nav a{display:block!important;height:36px;line-height:36px!important;padding:0!important;vertical-align:baseline;font-size-adjust:none;font-kerning:auto}
/* Keep the full headline above the media, including its rotated backing pane. */
@media(min-width:801px){
 .poster .beyond{top:28px;font-size:clamp(48px,7vw,100px);line-height:1.12;white-space:nowrap}
 .poster .image-stage{top:170px}
 .poster{min-height:650px}
 .poster .intro{top:30px}
}
/* Centered, fluid headline beside the hero media. */
@media(min-width:801px){
 .poster #headline{position:absolute;left:6%;top:44%;transform:translateY(-50%);width:40%;margin:0;z-index:4;font-family:'Segoe UI',Arial,sans-serif;font-weight:300;font-size:clamp(42px,5.4vw,88px);line-height:1.12;letter-spacing:-.045em}
 .poster #headline .beyond,.poster #headline .visible{position:static;display:block;font:inherit;letter-spacing:inherit;white-space:normal;transform:none}
 .poster .image-stage{top:50%;transform:translateY(-50%);margin-top:-20px}
 .poster .image-stage:hover{transform:translateY(-50%)}
 .poster .red-band p{align-self:end;margin-bottom:14px}
 .poster .red-band{top:68%;height:13%}
}
/* Desktop headline brackets the existing ultrasound descriptor. */
@media(min-width:801px){
 .poster #headline{position:static;transform:none;width:auto;font-size:inherit}
 .poster #headline .beyond,.poster #headline .visible{position:absolute;left:6%;width:40%;font-family:'Segoe UI',Arial,sans-serif;font-weight:300;font-size:clamp(40px,5.1vw,82px);line-height:1.08;letter-spacing:-.045em;white-space:normal;z-index:4}
 .poster #headline .beyond{top:auto;bottom:calc(53% + 28px);transform:none}
 .poster #headline .visible{top:calc(59% + 28px);bottom:auto;transform:none}
 .poster .red-band{top:47%;height:12%;padding-left:6%;display:flex;align-items:center}
 .poster .red-band p{align-self:center;margin:0;line-height:1.8;font-size:9px;letter-spacing:3px}
}

/* Align desktop display type to the adjacent 330px media frame. */
@media(min-width:801px){
 .poster #headline .beyond{top:calc(50% - 185px);bottom:auto}
 .poster #headline .visible{top:auto;bottom:calc(50% - 145px)}
}

/* Align the hero annotations with their content. */
@media(min-width:801px){
.poster .margin-note{display:block;writing-mode:horizontal-tb;left:6%;top:calc(50% - 229px);font:500 11px/20px 'Segoe UI',Arial,sans-serif;letter-spacing:2px;color:#624650}
.poster .intro{left:auto;right:6%;top:calc(50% - 273px);width:min(43vw,570px);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 0 16px;border-bottom:1px solid #70535c40;color:#624650;font:500 11px/1.7 'Segoe UI',Arial,sans-serif;letter-spacing:1.7px}
.poster .intro i{width:1px;height:30px;flex:0 0 1px;margin:0;background:#70535c55}
.poster .intro p{display:block;margin:0;font:400 12px/1.7 'Segoe UI',Arial,sans-serif;letter-spacing:.35px}
}
@media(max-width:800px){.poster .margin-note,.poster .intro{display:none}}

.ui-arrow{display:inline-block;width:18px;height:18px;vertical-align:middle;flex-shrink:0}.hero-media-controls .ui-arrow{width:20px;height:20px}

/* Company vision: soft rose surface continuous with the rest of the site. */
body .vision{background:linear-gradient(120deg,#eadbe1 0%,#f5edf0 100%);color:#624650;border-top:1px solid #dcc8d1;border-bottom:1px solid #dcc8d1}
body .vision .eyebrow{color:#805b6d}
body .vision .eyebrow::before{background:#ad8194}
body .vision h2{color:#624650;font-weight:300}
body .vision p{color:#78616c}

/* One mobile navigation pattern across all four pages. */
body>header.header{position:sticky;top:0;z-index:30}
body>header .brand img{display:block}
body>header .menu-toggle{appearance:none;-webkit-appearance:none;color:#70535c;width:44px;height:44px;padding:10px;border:0;border-radius:8px;background:transparent;cursor:pointer;align-items:center;justify-content:center}
body>header .menu-toggle[aria-expanded="true"]{background:#70535c0e}
body>header .menu-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:24px;height:24px}
body>header .menu-icon span{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .18s ease}
body>header .menu-toggle[aria-expanded="true"] .menu-icon span:first-child{transform:translateY(3.75px) rotate(45deg)}
body>header .menu-toggle[aria-expanded="true"] .menu-icon span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
@media(max-width:800px){body>header #main-nav.nav{display:none!important;position:absolute;top:76px;left:0;right:0;background:#f8f3f3;padding:12px 20px 22px;margin:0;box-shadow:0 12px 20px #17212612;flex-direction:column;gap:0;align-items:stretch}body>header #main-nav.nav.open{display:flex!important}body>header #main-nav.nav a{width:100%;font-size:16px!important;height:44px;line-height:44px!important}}
