/* EyesChoice Optometry — 2026 redesign
   Direction: modern minimalist boutique (ref: imaginoptique.com)
   Monochrome palette, geometric sans typography, generous whitespace,
   large photography, understated motion. */

/* ---- Design tokens ---- */
:root {
  --paper:  #ffffff;
  --bg:     #f5f4f1;   /* soft off-white ground */
  --ink:    #16150f;   /* near-black */
  --muted:  #8a877e;   /* secondary text */
  --line:   #e6e3dd;   /* hairlines */
  --hover:  #55524a;

  --display: "Jost", "Helvetica Neue", Arial, sans-serif;   /* geometric, chic */
  --body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1280px;
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --ease: cubic-bezier(.16,.7,.3,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease), opacity .25s var(--ease); }

h1,h2,h3,h4 { font-family: var(--display); font-weight: 400; line-height: 1.06; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 1.3em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

.eyebrow {
  font-family: var(--body);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1.5rem;
}

/* ---- Links / buttons: understated ---- */
.link-underline { position: relative; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; padding-bottom: 3px; }
.link-underline::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.link-underline:hover::after { transform: scaleX(1); }

.btn {
  display: inline-block; font-family: var(--body);
  font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  padding: 1.1em 2.6em; border: 1px solid var(--ink); color: var(--ink); background: transparent;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--hover); border-color: var(--hover); }
.btn--light { border-color: rgba(255,255,255,.8); color: #fff; }
.btn--light:hover { background: #fff; color: var(--ink); border-color:#fff; }

/* ---- Header ---- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem var(--gutter);
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.solid { background: rgba(245,244,241,.92); backdrop-filter: blur(10px); border-bottom-color: var(--line); padding-block: 1.1rem; }
.site-header.on-media:not(.solid) { color: #fff; }
.site-header.on-media:not(.solid) .brand-word { color:#fff; }
.brand { display:flex; align-items:center; gap:.7rem; }
.brand img { height: 40px; width:auto; }
.brand-word { font-family: var(--display); font-size: 1.15rem; letter-spacing: .32em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 2.2rem; }
.navlink { font-family: var(--body); font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.navlink:hover { opacity: .55; }
.has-sub { position: relative; }
.submenu { position:absolute; top:180%; left:50%; transform:translateX(-50%) translateY(6px); min-width: 250px; background: var(--paper); border:1px solid var(--line); padding:.6rem 0; opacity:0; visibility:hidden; transition: all .28s var(--ease); box-shadow: 0 30px 60px -30px rgba(0,0,0,.35); }
.has-sub:hover .submenu, .has-sub:focus-within .submenu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.submenu a { display:block; padding:.65rem 1.6rem; color: var(--ink); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.submenu a:hover { background: var(--bg); }
.header-cta { display:flex; align-items:center; gap:1.6rem; }
.nav-toggle { display:none; background:none; border:0; font-family:var(--body); font-size:.74rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; color:inherit; }

/* ---- Hero: full-bleed editorial ---- */
.hero { position: relative; height: 100vh; min-height: 620px; color:#fff; overflow:hidden; }
.hero__img { position:absolute; inset:0; background-size:cover; background-position:center; transform: scale(1.06); animation: heroZoom 9s var(--ease) forwards; }
.hero::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.08) 32%, rgba(0,0,0,.68) 100%); }
.hero__inner { text-shadow: 0 1px 24px rgba(0,0,0,.28); }
@keyframes heroZoom { to { transform: scale(1); } }
.hero__inner { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding: 0 var(--gutter) clamp(3rem,7vw,6rem); max-width: var(--wrap); margin:0 auto; }
.hero__inner .eyebrow { color: rgba(255,255,255,.8); }
.hero h1 { font-size: clamp(2.8rem, 7.5vw, 7rem); font-weight: 300; letter-spacing: -.02em; max-width: 16ch; }
.hero__lede { font-size: 1.05rem; max-width: 42ch; margin: 1.6rem 0 2.4rem; color: rgba(255,255,255,.9); }
.hero__actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* ---- Section rhythm ---- */
.section { padding-block: clamp(4.5rem, 11vw, 10rem); }
.section--paper { background: var(--paper); }
.section__head { max-width: 62ch; margin-bottom: clamp(3rem,6vw,5rem); }
.section__head h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); font-weight: 300; }
.section__head p { color: var(--muted); margin-top: 1.4rem; font-size: 1.05rem; }

/* ---- Services: editorial rows ---- */
.services { display:flex; flex-direction:column; }
.srow { display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap: clamp(1.5rem,5vw,5rem); padding-block: clamp(1.5rem,4vw,3rem); border-top:1px solid var(--line); }
.srow:last-child { border-bottom:1px solid var(--line); }
.srow__media { overflow:hidden; }
.srow__media img { aspect-ratio: 5/4; object-fit:cover; width:100%; transition: transform 1s var(--ease); }
.srow:hover .srow__media img { transform: scale(1.05); }
.srow:nth-child(even) .srow__media { order: 2; }
.srow__no { font-family:var(--display); font-size:.8rem; letter-spacing:.3em; color:var(--muted); }
.srow h3 { font-size: clamp(1.8rem,3.5vw,2.8rem); font-weight:300; margin:.8rem 0 1rem; }
.srow p { color: var(--muted); max-width: 46ch; }
.srow .link-underline { margin-top: 1.4rem; display:inline-block; }

/* ---- About split ---- */
.split { display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem,6vw,6rem); align-items:center; }
.split img { aspect-ratio: 4/5; object-fit:cover; width:100%; }
.split h2 { font-size: clamp(2rem,4vw,3.2rem); font-weight:300; margin-bottom:1.4rem; }
.split p { color: var(--muted); }

/* ---- Team ---- */
.team { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(1.25rem,3vw,2.5rem); }
.member__img { position:relative; overflow:hidden; }
.member img { aspect-ratio: 3/4; object-fit:cover; width:100%; filter: grayscale(1) contrast(1.02); transition: filter .6s var(--ease), transform 1s var(--ease); }
.member:hover img, .member:focus-within img { filter: grayscale(0); transform: scale(1.04); }
.member__bio {
  position:absolute; inset:0; display:flex; align-items:flex-end;
  padding: clamp(1rem,1.6vw,1.5rem);
  background: linear-gradient(180deg, rgba(22,21,15,0) 8%, rgba(22,21,15,.55) 45%, rgba(22,21,15,.9) 100%);
  opacity:0; transition: opacity .5s var(--ease);
}
.member__bio p {
  color:#fff; font-size:.8rem; line-height:1.6; margin:0;
  letter-spacing:0; text-transform:none;
  transform: translateY(12px); transition: transform .55s var(--ease);
}
.member:hover .member__bio, .member:focus-within .member__bio { opacity:1; }
.member:hover .member__bio p, .member:focus-within .member__bio p { transform:none; }
.member h3 { font-size:1.35rem; font-weight:400; margin:1.1rem 0 .25rem; }
.member__role { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0; }

/* Touch devices: no hover — show bio inline below the name */
@media (hover: none) {
  .member__bio { position:static; opacity:1; background:none; padding:0; margin-top:.7rem; }
  .member__bio p { color:var(--muted); font-size:.85rem; transform:none; }
}

/* ---- Location ---- */
.location__grid { display:grid; grid-template-columns: 1fr 1fr; gap:0; }
.location__info { padding: clamp(2.5rem,6vw,5rem); background: var(--paper); }
.location__info h2 { font-size: clamp(1.9rem,3.5vw,2.8rem); font-weight:300; margin-bottom:2.4rem; }
.info-row { display:grid; grid-template-columns:auto 1fr; gap:.3rem 2.5rem; }
.info-row dt { font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); padding-top:.35rem; }
.info-row dd { margin:0 0 1.4rem; line-height:1.6; }
.info-row a:hover { opacity:.6; }
.map iframe { width:100%; height:100%; min-height:420px; border:0; filter: grayscale(1) contrast(1.05); }

/* ---- Footer ---- */
.site-footer { background: var(--ink); color: #bcb9b1; padding-block: clamp(3.5rem,7vw,6rem); font-size:.88rem; }
.site-footer a:hover { color:#fff; }
.footer__top { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:2.5rem; }
.footer__brand .brand-word { color:#fff; }
.site-footer h4 { color:#fff; font-family:var(--body); font-size:.7rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; margin:0 0 1.4rem; }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { margin-bottom:.6rem; }
.footer__social { display:flex; gap:1.4rem; margin-top:1.6rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.footer__bottom { border-top:1px solid rgba(255,255,255,.14); margin-top:3.5rem; padding-top:1.8rem; color:var(--muted); font-size:.78rem; letter-spacing:.04em; }

/* ---- Mobile menu ---- */
.mobile-menu { position:fixed; inset:0; background:var(--bg); z-index:100; transform:translateY(-100%); transition:transform .5s var(--ease); display:flex; flex-direction:column; padding: clamp(2rem,7vw,4rem) var(--gutter); }
.mobile-menu.open { transform:translateY(0); }
.mobile-menu__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:2.5rem; }
.mobile-menu a.m-link { font-family:var(--display); font-size:clamp(1.6rem,7vw,2.4rem); font-weight:300; padding:.45rem 0; }
.mobile-menu a.m-link:hover { opacity:.55; }
.mobile-menu .close { background:none; border:0; font-family:var(--body); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; }

/* ==== Inner pages ==== */

/* Slim page hero */
.page-hero { padding: clamp(8.5rem, 14vw, 12rem) 0 clamp(3rem,6vw,5rem); background: var(--paper); border-bottom:1px solid var(--line); }
.page-hero .wrap { max-width: 78ch; }
.page-hero h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight:300; letter-spacing:-.02em; }
.page-hero .lede { font-size: 1.1rem; color: var(--muted); margin-top:1.6rem; max-width: 62ch; }
.page-hero--media { position:relative; padding:0; border:0; height:min(64vh,560px); background-size:cover; background-position:center; display:flex; align-items:flex-end; color:#fff; }
.page-hero--media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.15) 40%,rgba(0,0,0,.7)); }
.page-hero--media .wrap { position:relative; z-index:2; padding-bottom: clamp(2.5rem,6vw,4.5rem); text-shadow:0 1px 24px rgba(0,0,0,.3); }
.page-hero--media .lede { color: rgba(255,255,255,.9); }

/* Article prose */
.prose { max-width: 72ch; margin:0 auto; }
.prose h2 { font-size: clamp(1.6rem,3vw,2.3rem); font-weight:400; margin: 2.8rem 0 1rem; }
.prose h3 { font-size: clamp(1.3rem,2.4vw,1.7rem); font-weight:500; margin: 2.2rem 0 .8rem; }
.prose p { color: #34322b; }
.prose ul { list-style:none; padding:0; margin: 0 0 1.5rem; }
.prose li { position:relative; padding-left:1.6rem; margin-bottom:.6rem; color:#34322b; }
.prose li::before { content:""; position:absolute; left:0; top:.7em; width:7px; height:1px; background: var(--ink); }
.prose .lead { font-size:1.2rem; line-height:1.7; color: var(--ink); }

/* Two-column feature list (services within a page) */
.feature-list { display:grid; grid-template-columns:1fr 1fr; gap: clamp(1.5rem,4vw,3rem) clamp(2rem,5vw,4rem); }
.feature { border-top:1px solid var(--line); padding-top:1.4rem; }
.feature h3 { font-size:1.4rem; font-weight:400; margin-bottom:.6rem; }
.feature p { color: var(--muted); font-size:.96rem; margin:0; }

/* Image gallery */
.gallery { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(.75rem,2vw,1.5rem); }
.gallery--4 { grid-template-columns: repeat(4,1fr); }
.gallery a, .gallery figure { margin:0; overflow:hidden; display:block; }
.gallery img { aspect-ratio:1/1; object-fit:cover; width:100%; transition: transform .8s var(--ease); }
.gallery a:hover img, .gallery figure:hover img { transform: scale(1.06); }

/* Insurance logos */
.logos { display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; }
.logos a, .logos figure { margin:0; display:flex; align-items:center; justify-content:center; background:var(--paper); border:1px solid var(--line); padding:1.6rem; aspect-ratio:3/2; transition: border-color .3s var(--ease); }
.logos a:hover, .logos figure:hover { border-color: var(--ink); }
.logos img { max-height:70px; width:auto; filter: grayscale(1); opacity:.85; transition: all .3s var(--ease); }
.logos a:hover img, .logos figure:hover img { filter:none; opacity:1; }

/* Reviews */
.reviews { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.25rem,3vw,2rem); }
.review { background:var(--paper); border:1px solid var(--line); padding: clamp(1.6rem,3vw,2.4rem); display:flex; flex-direction:column; }
.review p { color:#34322b; font-size:.98rem; flex:1; }
.review__stars { color:#16150f; letter-spacing:.2em; margin-bottom:1rem; font-size:.9rem; }
.review__by { font-family:var(--display); font-size:1.05rem; margin-top:1.2rem; }
.review__loc { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* Article cards (Journal) */
.articles { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,3vw,2.5rem); }
.article-card { display:flex; flex-direction:column; }
.article-card__img { overflow:hidden; margin-bottom:1.2rem; }
.article-card img { aspect-ratio:3/2; object-fit:cover; width:100%; transition: transform .8s var(--ease); }
.article-card:hover img { transform: scale(1.05); }
.article-card__date { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; }
.article-card h3 { font-size:1.4rem; font-weight:400; margin-bottom:.6rem; }
.article-card p { color:var(--muted); font-size:.95rem; }

/* CTA band */
.cta-band { background: var(--ink); color:#f5f4f1; text-align:center; padding-block: clamp(3.5rem,8vw,6rem); }
.cta-band h2 { font-size: clamp(1.9rem,4vw,3rem); font-weight:300; margin-bottom:1rem; }
.cta-band p { color:#bcb9b1; max-width:48ch; margin:0 auto 2.2rem; }
.cta-band .actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

@media (max-width: 960px) {
  .feature-list, .reviews, .articles { grid-template-columns:1fr; }
  .gallery, .gallery--4 { grid-template-columns: repeat(2,1fr); }
  .logos { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 540px) {
  .logos { grid-template-columns: repeat(2,1fr); }
}

/* ---- Scroll reveal ---- */
.reveal { opacity:0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .nav { display:none; }
  .nav-toggle { display:inline-block; }
  .header-cta .btn { display:none; }
  .srow { grid-template-columns:1fr; }
  .srow:nth-child(even) .srow__media { order:0; }
  .srow__media { margin-bottom:1.5rem; }
  .split { grid-template-columns:1fr; }
  .team { grid-template-columns:1fr 1fr; }
  .location__grid { grid-template-columns:1fr; }
  .map iframe { min-height:320px; }
  .footer__top { grid-template-columns:1fr 1fr; gap:2rem 1.5rem; }
}
@media (max-width: 540px) {
  .team { grid-template-columns:1fr 1fr; }
  .footer__top { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__img { animation:none; transform:none; }
  .reveal { opacity:1; transform:none; transition:none; }
  * { scroll-behavior:auto; }
}