:root {
  --ink:#071e22;
  --black:#08090b;
  --blue:#0a5cad;
  --blue-dark:#083c72;
  --gold:#ffd447;
  --cream:#f3f0e8;
  --paper:#fffdf8;
  --muted:#6f706d;
  --line:rgba(7,30,34,.15);
  --white:#fff;
  --shadow:0 30px 80px rgba(7,30,34,.14);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}

img,video { display:block; width:100%; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p,figure { margin:0; }
button,input,textarea,select { font:inherit; }

.skip-link {
  position:fixed;
  left:16px;
  top:-80px;
  z-index:1000;
  padding:12px 18px;
  border-radius:999px;
  color:white;
  background:var(--blue);
  font-weight:800;
}
.skip-link:focus { top:16px; }

.wrap {
  width:min(1260px,calc(100% - 56px));
  margin-inline:auto;
}

.offer-bar {
  padding:11px 20px;
  text-align:center;
  color:var(--ink);
  background:var(--gold);
  font-size:12px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.offer-bar span { margin-inline:9px; }

.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,253,248,.92);
  border-bottom:1px solid rgba(7,30,34,.08);
  backdrop-filter:blur(18px);
}
.nav {
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.logo { display:flex; align-items:center; gap:12px; min-width:max-content; }
.logo-mark {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:white;
  background:var(--ink);
  font-size:19px;
  font-weight:900;
  letter-spacing:-.09em;
}
.logo-copy strong { display:block; font-size:18px; letter-spacing:-.04em; }
.logo-copy small {
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.nav-links { display:flex; align-items:center; gap:30px; color:rgba(7,30,34,.68); font-size:13px; font-weight:800; }
.nav-links a { position:relative; }
.nav-links a::after {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-7px;
  height:2px;
  background:var(--blue);
  transition:right .2s ease;
}
.nav-links a:hover::after { right:0; }

.button {
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.button:hover { transform:translateY(-2px); }
.button-dark { color:white; background:var(--ink); }
.button-blue { color:white; background:var(--blue); box-shadow:0 16px 34px rgba(10,92,173,.25); }
.button-gold { color:var(--black); background:var(--gold); box-shadow:0 16px 34px rgba(255,212,71,.24); }
.button-glass { color:white; border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.12); backdrop-filter:blur(12px); }
.text-link { color:var(--blue); font-weight:900; }

.actions { margin-top:30px; display:flex; flex-wrap:wrap; gap:11px; align-items:center; }

.hero {
  position:relative;
  min-height:calc(100vh - 118px);
  display:grid;
  align-items:end;
  overflow:hidden;
  color:white;
  background:var(--ink);
}
.hero-video {
  position:absolute;
  inset:0;
  height:100%;
  object-fit:cover;
}
.hero-shade {
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(3,11,13,.82) 0%,rgba(3,11,13,.44) 48%,rgba(3,11,13,.1) 76%),
    linear-gradient(0deg,rgba(3,11,13,.72) 0%,transparent 46%);
}
.hero-content { position:relative; z-index:2; padding-block:90px 54px; }
.eyebrow {
  color:var(--blue);
  font-size:11px;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.eyebrow.light { color:rgba(255,255,255,.7); }
.hero h1 {
  margin-top:25px;
  max-width:1000px;
  font-family:Manrope,Inter,sans-serif;
  font-size:clamp(58px,9vw,130px);
  line-height:.8;
  letter-spacing:-.085em;
  font-weight:700;
  text-transform:uppercase;
}
.hero h1 span { display:block; }
.hero h1 .accent { color:var(--gold); }
.hero-lead {
  margin-top:28px;
  max-width:640px;
  color:rgba(255,255,255,.8);
  font-size:clamp(18px,2vw,24px);
  line-height:1.4;
  letter-spacing:-.035em;
}
.scroll-cue {
  position:absolute;
  right:0;
  bottom:58px;
  display:flex;
  gap:13px;
  align-items:center;
  color:rgba(255,255,255,.75);
  font-size:10px;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.scroll-cue span { width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:50%; }

.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); background:white; border-bottom:1px solid var(--line); }
.quick-grid article { min-height:205px; padding:32px; border-right:1px solid var(--line); }
.quick-grid article:last-child { border-right:0; }
.quick-grid span { color:var(--blue); font-size:11px; font-weight:900; letter-spacing:.16em; }
.quick-grid h2 { margin-top:46px; font-size:clamp(22px,2.2vw,31px); line-height:1; letter-spacing:-.055em; }
.quick-grid p { margin-top:11px; color:var(--muted); font-size:14px; line-height:1.5; }

.section { padding:120px 0; }
.split { display:grid; grid-template-columns:1.05fr .95fr; gap:82px; align-items:center; }
.split.reverse { grid-template-columns:.92fr 1.08fr; }
.media { position:relative; overflow:hidden; background:var(--cream); box-shadow:var(--shadow); }
.media img { min-height:640px; object-fit:cover; }
.rounded-b { border-radius:170px 40px 80px 54px; }
.copy-block h2,
.care-eyewear h2,
.section-heading h2,
.brands h2,
.billing h2,
.reviews h2,
.faq h2,
.visit h2 {
  margin-top:20px;
  font-family:Manrope,Inter,sans-serif;
  font-size:clamp(52px,6.7vw,96px);
  line-height:.88;
  letter-spacing:-.08em;
}
.copy-block .lead { margin-top:28px; color:var(--muted); font-size:clamp(19px,2vw,24px); line-height:1.45; letter-spacing:-.035em; }
.notice { margin-top:24px; padding:20px; border-left:4px solid var(--gold); background:#fff8d8; }
.notice strong,.notice span { display:block; }
.notice strong { font-size:15px; }
.notice span { margin-top:6px; color:var(--muted); font-size:14px; line-height:1.45; }

.care-eyewear { background:var(--cream); }
.care-eyewear-grid { display:grid; grid-template-columns:.88fr 1.12fr; gap:82px; align-items:start; }
.care-eyewear-copy { position:sticky; top:130px; }
.care-eyewear-copy .lead { margin-top:28px; color:var(--muted); font-size:clamp(19px,2vw,24px); line-height:1.45; letter-spacing:-.035em; }
.care-services { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); background:rgba(255,255,255,.38); }
.care-services article { min-height:190px; padding:27px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.care-services span { color:var(--blue); font-size:11px; font-weight:900; letter-spacing:.17em; }
.care-services h3 { margin-top:43px; font-size:24px; line-height:1; letter-spacing:-.045em; }
.care-services p { margin-top:11px; color:var(--muted); font-size:14px; line-height:1.5; }

.section-heading { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:end; }
.section-heading > p { max-width:520px; color:var(--muted); font-size:22px; line-height:1.45; letter-spacing:-.035em; }

.brands { background:white; }
.brand-intro { margin-top:20px; display:grid; grid-template-columns:1fr .7fr; gap:70px; align-items:end; }
.brand-intro h2 { margin-top:0; }
.brand-intro p { color:var(--muted); font-size:20px; line-height:1.5; }
.featured-brands { margin-top:58px; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:350px; gap:18px; }
.brand-visual { position:relative; overflow:hidden; border-radius:28px; color:white; background:var(--ink); }
.brand-visual.wide { grid-column:span 2; }
.brand-visual img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.brand-visual:hover img { transform:scale(1.035); }
.brand-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(3,11,13,.85),rgba(3,11,13,.04) 66%); }
.brand-visual > div { position:absolute; z-index:2; left:26px; right:26px; bottom:24px; }
.brand-visual span { color:var(--gold); font-size:10px; font-weight:900; letter-spacing:.17em; text-transform:uppercase; }
.brand-visual h3 { margin-top:8px; font-size:clamp(30px,3vw,46px); line-height:.95; letter-spacing:-.055em; }
.brand-visual p { margin-top:9px; color:rgba(255,255,255,.74); font-size:14px; }
.brand-visual.product { background:white; box-shadow:inset 0 0 0 1px var(--line); }
.brand-visual.product img { object-fit:contain; padding:24px 28px 112px; }
.brand-visual.product::after { background:linear-gradient(0deg,rgba(3,11,13,.92) 0,rgba(3,11,13,.82) 29%,transparent 58%); }
.brand-cloud { margin-top:42px; display:flex; flex-wrap:wrap; gap:11px; }
.brand-cloud span {
  min-height:55px;
  display:inline-flex;
  align-items:center;
  padding:0 21px;
  border:1px solid rgba(3,11,13,.12);
  border-radius:999px;
  color:var(--brand-ink,var(--ink));
  background:var(--brand-bg,var(--cream));
  box-shadow:0 7px 18px rgba(3,11,13,.09);
  font-size:12px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:transform .2s ease,box-shadow .2s ease;
}
.brand-cloud span:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgba(3,11,13,.16); }
.brand-cloud .feature { font-size:16px; }
.brand-cloud .brand-cazal { --brand-bg:#d7a62a; --brand-ink:#171106; }
.brand-cloud .brand-tom-ford { --brand-bg:#4b302b; --brand-ink:#fffaf4; }
.brand-cloud .brand-gucci { --brand-bg:#0f5132; --brand-ink:#ffffff; }
.brand-cloud .brand-fendi { --brand-bg:#f6c445; --brand-ink:#17130a; }
.brand-cloud .brand-ray-ban { --brand-bg:#d9202f; --brand-ink:#ffffff; }
.brand-cloud .brand-persol { --brand-bg:#a94a1f; --brand-ink:#ffffff; }
.brand-cloud .brand-prada { --brand-bg:#151515; --brand-ink:#ffffff; }
.brand-cloud .brand-versace { --brand-bg:#e2b93b; --brand-ink:#151109; }
.brand-cloud .brand-tiffany { --brand-bg:#81d8d0; --brand-ink:#102c2c; }
.brand-cloud .brand-burberry { --brand-bg:#caa77d; --brand-ink:#21180e; }
.brand-cloud .brand-dolce-gabbana { --brand-bg:#50364e; --brand-ink:#ffffff; }
.brand-cloud .brand-oakley { --brand-bg:#4e5966; --brand-ink:#ffffff; }
.brand-cloud .brand-vogue { --brand-bg:#aa2f62; --brand-ink:#ffffff; }
.brand-cloud .brand-coach { --brand-bg:#82502d; --brand-ink:#ffffff; }
.brand-cloud .brand-michael-kors { --brand-bg:#80601f; --brand-ink:#ffffff; }
.brand-cloud .brand-swarovski { --brand-bg:#173f67; --brand-ink:#ffffff; }
.brand-cloud .brand-ana-hickmann { --brand-bg:#984653; --brand-ink:#ffffff; }
.brand-cloud .brand-hickmann { --brand-bg:#694a78; --brand-ink:#ffffff; }
.brand-cloud .brand-t-charge { --brand-bg:#245da5; --brand-ink:#ffffff; }
.brand-cloud .brand-polar { --brand-bg:#00a3bd; --brand-ink:#052d34; }
.brand-cloud .brand-darcy { --brand-bg:#7a2638; --brand-ink:#ffffff; }
.fine-print { margin-top:25px; color:var(--muted); font-size:12px; }

.lenses { color:white; background:var(--blue-dark); }
.lens-heading > div:last-child > p { color:rgba(255,255,255,.68); font-size:20px; line-height:1.5; }
.premium-row { margin-top:24px; display:flex; flex-wrap:wrap; gap:8px; }
.premium-row span { padding:9px 12px; border:1px solid rgba(255,255,255,.22); border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.lens-grid { margin-top:64px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.18); border-left:1px solid rgba(255,255,255,.18); }
.lens-grid article { min-height:210px; padding:25px; border-right:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); }
.lens-grid span { color:var(--gold); font-size:10px; font-weight:900; letter-spacing:.18em; }
.lens-grid h3 { margin-top:54px; font-size:23px; line-height:1; letter-spacing:-.045em; }
.lens-grid p { margin-top:11px; color:rgba(255,255,255,.62); font-size:13px; line-height:1.5; }

.lab-section { background:var(--paper); }
.lab-list { margin-top:35px; border-top:1px solid var(--line); }
.lab-list div { display:grid; grid-template-columns:48px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.lab-list strong { color:var(--blue); font-size:11px; letter-spacing:.14em; }
.lab-list span { font-size:17px; font-weight:800; letter-spacing:-.025em; }

.billing { padding:96px 0; color:white; background:var(--blue); }
.billing-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:90px; align-items:end; }
.billing h2 { max-width:780px; }
.billing-grid > div:last-child > p { color:rgba(255,255,255,.75); font-size:20px; line-height:1.55; }
.billing .button { margin-top:30px; }
.insurance-showcase { margin-top:58px; }
.insurance-label { margin-bottom:15px; color:rgba(255,255,255,.62); font-size:10px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.insurance-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.insurance-logo { min-height:116px; display:flex; align-items:center; justify-content:center; padding:25px; border-radius:18px; background:white; box-shadow:0 14px 28px rgba(0,0,0,.09); }
.insurance-logo img { width:auto; max-width:100%; height:auto; max-height:54px; object-fit:contain; }
.insurance-note { max-width:880px; margin-top:18px; color:rgba(255,255,255,.66); font-size:12px; line-height:1.55; }

.reviews { background:var(--cream); }
.review-card { display:grid; grid-template-columns:1fr .9fr; min-height:650px; overflow:hidden; border-radius:40px; background:white; box-shadow:var(--shadow); }
.review-card > div { padding:68px; align-self:center; }
.review-card > div > p:not(.eyebrow) { margin-top:26px; color:var(--muted); font-size:20px; line-height:1.5; }
.review-card .button { margin-top:30px; }
.review-card figure,.review-card img { height:100%; }
.review-card img { object-fit:cover; }

.faq-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:start; }
.faq-grid > div:first-child > p:last-child { margin-top:27px; color:var(--muted); font-size:18px; line-height:1.5; }
.faq-list { border-top:1px solid var(--line); }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list summary { position:relative; padding:25px 44px 25px 0; cursor:pointer; list-style:none; font-size:17px; font-weight:850; letter-spacing:-.025em; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:0; top:20px; color:var(--blue); font-size:26px; font-weight:500; }
.faq-list details[open] summary::after { content:"–"; }
.faq-list details p { padding:0 42px 24px 0; color:var(--muted); font-size:15px; line-height:1.6; }

.visit { padding:120px 0; color:white; background:var(--ink); }
.visit-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }
.visit-intro > p:not(.eyebrow) { margin-top:28px; color:rgba(255,255,255,.65); font-size:20px; line-height:1.55; }
.contact-row { display:grid; grid-template-columns:130px 1fr; gap:24px; padding:22px 0; border-bottom:1px solid rgba(255,255,255,.15); }
.contact-row > span { color:rgba(255,255,255,.45); font-size:10px; font-weight:900; letter-spacing:.17em; text-transform:uppercase; }
.contact-row a { font-size:20px; line-height:1.45; letter-spacing:-.035em; overflow-wrap:anywhere; }
.hours { margin-top:30px; display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }
.hours div { min-height:98px; padding:12px 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border-radius:999px; text-align:center; background:rgba(255,255,255,.07); }
.hours b { color:rgba(255,255,255,.42); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.hours span { font-size:13px; font-weight:900; }
.map-key { max-width:390px; margin-top:28px; display:flex; align-items:center; gap:14px; padding:12px 18px 12px 12px; border:1px solid rgba(255,255,255,.18); border-radius:18px; background:rgba(255,255,255,.08); transition:transform .2s ease,background .2s ease; }
.map-key:hover { transform:translateY(-2px); background:rgba(255,255,255,.12); }
.map-pin { width:50px; height:50px; flex:0 0 50px; display:grid; place-items:center; border-radius:14px; color:var(--ink); background:var(--gold); }
.map-pin svg { width:25px; height:25px; fill:currentColor; }
.map-key small,.map-key strong { display:block; }
.map-key small { color:rgba(255,255,255,.52); font-size:10px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.map-key strong { margin-top:4px; color:white; font-size:16px; }

footer { padding:34px 0 42px; background:var(--paper); }
.footer-grid { display:grid; grid-template-columns:1fr auto auto; gap:30px; align-items:center; }
.footer-brand { display:flex; align-items:center; gap:13px; }
.footer-brand strong { font-size:16px; letter-spacing:-.035em; }
.footer-grid > div:nth-child(2) { display:flex; flex-wrap:wrap; gap:18px; color:var(--blue); font-size:13px; font-weight:850; }
.footer-grid > p { color:var(--muted); font-size:12px; text-align:right; }

@media (max-width:1050px) {
  .nav-links { display:none; }
  .quick-grid { grid-template-columns:repeat(2,1fr); }
  .quick-grid article:nth-child(2) { border-right:0; }
  .quick-grid article:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .split,.split.reverse,.care-eyewear-grid,.section-heading,.brand-intro,.billing-grid,.faq-grid,.visit-grid { grid-template-columns:1fr; }
  .split.reverse .copy-block { order:2; }
  .split.reverse .media { order:1; }
  .care-eyewear-copy { position:static; }
  .featured-brands { grid-template-columns:repeat(2,1fr); }
  .brand-visual.wide { grid-column:span 2; }
  .lens-grid { grid-template-columns:repeat(3,1fr); }
  .insurance-grid { grid-template-columns:repeat(2,1fr); }
  .review-card { grid-template-columns:1fr; }
  .review-card figure { min-height:520px; }
  .hours { grid-template-columns:repeat(4,1fr); }
  .footer-grid { grid-template-columns:1fr auto; }
  .footer-grid > p { grid-column:1/-1; text-align:left; }
}

@media (max-width:720px) {
  .wrap { width:min(100% - 32px,1260px); }
  .offer-bar { font-size:9px; line-height:1.45; letter-spacing:.1em; }
  .nav { min-height:70px; }
  .logo-mark { width:39px; height:39px; }
  .logo-copy strong { font-size:16px; }
  .nav-cta { min-height:42px; padding:0 15px; font-size:11px; }
  .hero { min-height:730px; }
  .hero-content { padding-block:72px 42px; }
  .hero h1 { font-size:clamp(54px,18vw,76px); }
  .hero-lead { max-width:330px; font-size:18px; }
  .scroll-cue { display:none; }
  .quick-grid { grid-template-columns:1fr; }
  .quick-grid article { min-height:150px; border-right:0; border-bottom:1px solid var(--line); }
  .quick-grid h2 { margin-top:25px; }
  .section,.visit { padding:82px 0; }
  .split { gap:52px; }
  .media img { min-height:430px; }
  .rounded-b { border-radius:28px; }
  .copy-block h2,.care-eyewear h2,.section-heading h2,.brands h2,.billing h2,.reviews h2,.faq h2,.visit h2 { font-size:52px; }
  .care-services { grid-template-columns:1fr; }
  .care-services article { min-height:145px; padding:23px; }
  .care-services h3 { margin-top:28px; }
  .featured-brands { grid-template-columns:1fr; grid-auto-rows:330px; }
  .brand-visual.wide { grid-column:span 1; }
  .brand-visual.product img { padding:20px 20px 110px; }
  .brand-cloud span { min-height:48px; padding:0 16px; font-size:10px; }
  .lens-grid { grid-template-columns:1fr; }
  .lens-grid article { min-height:150px; }
  .lens-grid h3 { margin-top:32px; }
  .billing-grid { gap:40px; }
  .insurance-showcase { margin-top:44px; }
  .insurance-grid { grid-template-columns:repeat(2,1fr); gap:9px; }
  .insurance-logo { min-height:92px; padding:18px 14px; border-radius:14px; }
  .insurance-logo img { max-height:42px; }
  .review-card { border-radius:28px; }
  .review-card > div { padding:42px 24px; }
  .review-card figure { min-height:360px; }
  .faq-grid { gap:48px; }
  .contact-row { grid-template-columns:1fr; gap:8px; }
  .hours { grid-template-columns:repeat(2,1fr); }
  .hours div { min-height:76px; border-radius:22px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-grid > p { grid-column:auto; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
