/* One visitor header on every page. Primary links stay visible on mobile. */
.header.unified-header{position:fixed;inset:0 0 auto;z-index:50;height:100px;display:flex;gap:28px;padding:0 5.2%;align-items:center;background:#181a1ef5;backdrop-filter:blur(14px)}
.unified-header>.wordmark{margin-right:auto;flex-shrink:0}.header.unified-header>.primary-nav{display:flex;align-items:center;gap:26px;margin:0}.unified-header>.primary-nav a{font-size:1rem;min-height:44px;display:flex;align-items:center;white-space:nowrap}.unified-header a[aria-current=page]:not(.wordmark){color:#cbb994;text-decoration:underline;text-underline-offset:8px}.header.unified-header .site-menu{position:relative;inset:auto;max-width:none}.unified-header .site-menu summary{min-height:44px;font-size:1rem;display:flex;align-items:center;padding:10px 0;gap:8px}.header.unified-header .contact-nav{position:static;min-height:44px;font-size:.95rem;padding:14px 18px;gap:10px;white-space:nowrap}.unified-header .site-menu nav{right:0;top:calc(100% + 12px);width:300px;max-width:calc(100vw - 32px);max-height:65svh}.unified-header .site-menu nav a{font-size:.95rem!important;min-height:44px}.unified-header :focus-visible{outline:3px solid #cbb994;outline-offset:4px}
@media(max-width:950px){.header.unified-header{height:136px;display:grid;grid-template-columns:1fr auto;grid-template-rows:66px 60px;gap:0 16px;padding:5px 5%}.header.unified-header>.wordmark{grid-column:1;grid-row:1;margin:0;font-size:1.7rem}.unified-header>.wordmark span{display:none}.header.unified-header .contact-nav{grid-column:2;grid-row:1;justify-self:end;font-size:.875rem;padding:12px}.header.unified-header>.primary-nav{grid-column:1;grid-row:2;gap:22px;display:flex}.header.unified-header>.primary-nav a{font-size:.95rem}.header.unified-header>.site-menu{grid-column:2;grid-row:2;justify-self:end}.unified-header .site-menu summary{font-size:.95rem}.content-page,.myopia-page,.product-page{padding-top:136px}.content-page .article-hero{padding-top:35px}html{scroll-padding-top:150px}.header.unified-header .site-menu nav{right:0}.unified-header .site-menu summary span{display:none}}
@media(max-width:420px){.header.unified-header{padding:5px 4%;gap:0 8px}.header.unified-header>.primary-nav{gap:12px}.header.unified-header>.primary-nav a,.unified-header .site-menu summary{font-size:.82rem}.header.unified-header>.wordmark{font-size:1.55rem}.header.unified-header .contact-nav{font-size:.82rem;padding:11px 10px}.unified-header .contact-nav>span{display:none}}
/* Warm neutral palette with restrained, solid blue actions. */
:root{--action-blue:#30362f;--action-hover:#42483d}
.button,.product-contact .button{background:var(--action-blue);color:#fff}
.button:hover,.product-contact .button:hover{background:var(--action-hover);color:#fff}
.hero h1 em{color:#ffffff}
.hero .focus-control input,.compare-slider input{accent-color:#cbb994}
.frame-choices button[aria-pressed=true],.choice-row button[aria-pressed=true],.distance-controls button[aria-pressed=true]{background:var(--action-blue);color:#fff;border-color:var(--action-blue)}
.header.unified-header{background:#181a1ef5}
.unified-header a[aria-current=page]:not(.wordmark){color:#cbb994}
/* Clear neutral surfaces; blue is reserved for accents and controls. */
:root{--ink:#181a1e;--paper:#fff;--lime:#cbb994}
.hero h1 em{color:#fff}
.myopia-home,.product-contact{background:#eef1f3;color:#181a1e}
.photo-placeholder{background:#25272c;color:#fff}
.placeholder-title em{color:#fff}.placeholder-label{color:#cbb994}
.product-section.light{background:#fff;color:#181a1e}
.frame-playground{background:#f1f2f4;border-color:#c5c8ce}
.product-hero h1 em{color:#cbb994}
/* White typography on slate surfaces, including their secondary text. */
.myopia-teaser,.myopia-jump,.method-card.featured,.outdoor,.content-card:hover,.site-menu[open] summary,.lab-controls button[aria-pressed=true]{background:#30362f;color:#fff}
.myopia-teaser :is(h2,p,em,a,.eyebrow),.method-card.featured :is(h3,p,li,span),.outdoor :is(h2,h3,p,li,span,em){color:#fff}
.content-card:hover :is(h3,span){color:#fff}
.myopia-teaser .button{background:#fff;color:#344b5f}
.myopia-teaser .button:hover{background:#e8edf1;color:#263b4d}
