/* ==================================================================
   NEW VISION OPTOMETRY - site.css

   THIS FILE IS THE APPROVED CONCEPT PAGE'S STYLESHEET, LIFTED WHOLE.
   Every token, every bay, the lens board, the callbar, the header and
   the footer are the concept page's own rules, unchanged, so the
   multi-page draft is in the same hand as the page the client
   approved. Four things are added for a site that has more than one
   page, and they are the only additions:

     1. NAV DROPDOWN     the Services menu, CSS only, hover and
                         focus-within, no script.  Section: header.
     2. MOBILE MENU      a <details> disclosure that carries the same
                         nav below 1000px, where the desktop row is
                         hidden.  Section: header.
     3. PAGE HERO        .phero, the compact interior page head:
                         eyebrow, H1, one line of dek, on paper.
     4. CURRENT PAGE     [aria-current=page] states in the nav, the
                         menu and the footer.

   Plus three small carried pieces the extra pages need and the one
   page concept never did: .btn-line (an outline button for light
   grounds, the light twin of .btn-ghost), the four .ground-* helpers
   so a new section can take a known background instead of inventing
   one, and a four column footer grid.

   Nothing else was touched. If a rule below looks odd, it is the
   concept page's own and the reason is in the comment beside it.
   ==================================================================

   art direction: THE LENS PAIR

   Their mark is two circles that overlap: a solid navy disc and a
   bright blue ring, meeting in the middle to read as "nv" and, at a
   glance, as a pair of lenses. This page treats that construction as
   a drawing system rather than a bullet point. Seven dry eye
   therapies, seven lenses, one grammar: disc at cx 50, ring at cx 88,
   both r 28, each therapy adding exactly one drawn idea in brass.

   EVERY COLOUR BELOW IS A MEASURED PIXEL SAMPLE FROM ONE OF THEIR
   OWN FILES. Coordinates are in the file's own pixel space.

     #013f66  the painted wall of their exam lane, exam-lane.jpg at
              (350,400). This is the ground the whole clinical side of
              the page sits on.
     #11486e  the same wall higher up, exam-lane.jpg at (420,120)
     #002133  the wall their monogram is painted on, team-wall.jpg at
              (880,120)
     #133c8b  the solid disc in their own logo.png
     #007cc4  the bright ring in that same file, and the "vision" half
              of the wordmark
     #a08356  the brass etagere in their own waiting room,
              waiting.jpg at (430,110). The same brass is on the
              optical chair legs, the mirror stands and the eye
              sculpture on the wall in optical.jpg.
     #eae6dc  the warm wall of their own optical, optical.jpg
     #d7c8a8  the gold eye sculpture on that wall, optical.jpg at
              (170,180), which is where the brass tint comes from

   So: cobalt is the ground, bone is the paper, their blue is the
   voice, and brass is the one warm note. Boldness is spent in one
   place, the lens board, and everything around it is kept flat.

   Structure comes off their own building. The vinyl on the window at
   2201 West Olive reads monogram, wordmark, a heavy horizontal rule,
   then the street in caps. Every section head here is set in that
   order.
   ================================================================== */

:root{
  --cobalt:#013f66;
  --cobalt-lift:#11486e;
  --cobalt-deep:#002133;
  --ink-navy:#001528;
  --navy:#133c8b;
  --blue:#007cc4;
  --blue-ink:#005b91;
  --blue-lift:#3aa6e0;
  --brass:#a08356;
  --brass-ink:#7a6136;
  --brass-lift:#c9a86a;
  --bone:#f6f4ef;
  --bone-2:#ebe8df;
  --white:#ffffff;
  --ink:#12202e;
  --body:#3b4855;
  --muted:#5f6b78;
  --line:#e0dbcf;
  --on-dark:#e7eef4;
  --on-dark-2:#a4bacb;

  --maxw:1180px;
  --measure:62ch;
  --pad:clamp(20px,5vw,34px);
  --bay:clamp(64px,9vw,124px);

  --display:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --t-label:clamp(10.5px,.24vw + 9.9px,12px);
  --t-small:clamp(13.5px,.3vw + 12.8px,15px);
  --t-body:clamp(16.5px,.32vw + 15.7px,18px);
  --t-lead:clamp(18px,.85vw + 16.2px,22px);
  --t-h3:clamp(19px,.9vw + 17.3px,23px);
  --t-h2:clamp(28px,3vw + 19px,46px);
  --t-display:clamp(25px,3.1vw + 16.5px,42px);
  --t-hero:clamp(42px,7.6vw + 8px,86px);

  --focus:var(--blue-ink);
  --r:20px;
  --r-sm:12px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:80px}
body{
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.64;
  color:var(--body);
  background:var(--bone);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
::selection{background:var(--blue-lift);color:#00121f}

h1,h2{
  font-family:var(--display);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.035em;
  color:var(--ink);
}
h3{font-family:var(--display);font-weight:600;letter-spacing:-.018em;line-height:1.2;color:var(--ink)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.bay{padding-block:var(--bay)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--white);color:var(--cobalt);padding:12px 18px}

/* --- the two circle glyph, lifted straight out of their monogram ---
   A solid disc and an open ring sharing a quarter of their width, the
   same construction as the mark, at 12px. -------------------------- */
.ov{display:inline-block;width:21px;height:12px;flex:none;position:relative}
.ov::before,.ov::after{content:"";position:absolute;top:0;width:12px;height:12px;border-radius:50%}
.ov::before{left:0;background:currentColor}
.ov::after{right:0;border:1.8px solid currentColor}

/* --- the window vinyl head: glyph, caps, heavy rule, then heading -- */
.eyebrow{
  display:flex;align-items:center;gap:11px;
  font-family:var(--display);
  font-size:var(--t-label);font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--blue-ink);
}
.rule{height:0;border-top:2px solid var(--line);margin:20px 0 24px}
.h2{font-size:var(--t-h2);color:var(--cobalt)}
.lede2{margin-top:18px;max-width:52ch;font-size:var(--t-lead);line-height:1.5;color:var(--muted)}
@media(min-width:700px){.h2{max-width:19ch}}

/* Dark grounds recolour the head device rather than restyling it. */
.on-dark{color:var(--on-dark);--focus:var(--blue-lift)}
.on-dark .eyebrow{color:var(--brass-lift)}
.on-dark .rule{border-top-color:rgba(233,240,247,.24)}
.on-dark .h2{color:#fff}
.on-dark .lede2{color:var(--on-dark-2)}
.on-dark h3{color:#fff}

/* ==================== ribbon ================================== */
.ribbon{
  background:var(--white);color:var(--muted);
  font-size:var(--t-label);letter-spacing:.06em;
  padding:2px var(--pad);text-align:center;
  border-bottom:1px solid var(--line);
}
.ribbon b{color:var(--cobalt-deep);font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.ribbon a{
  display:inline-flex;align-items:center;min-height:40px;padding:0 6px;
  color:var(--blue-ink);font-weight:600;white-space:nowrap;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(0,91,145,.35);
}
.ribbon a:hover{color:var(--cobalt);text-decoration-color:currentColor}
.ribbon .sep{opacity:.3;padding:0 12px}
@media(max-width:640px){.ribbon .sep{display:none}.ribbon .l2{display:block;margin-top:2px}}

/* On the home page the ribbon rides on the storefront photograph. Dr. Nguyen, the 9/15 launch
   call: the paper strip above the pill made the floating bar "look like it's still attached".
   The hero pulls up under the ribbon and the header (45px ribbon over 640px, 66px under it,
   plus the header's own 10px), the ribbon goes clear with white type, and the pill floats on
   the photograph. The hero's own top gradient carries the contrast. */
body.hero-top{--rib:45px}
@media(max-width:640px){body.hero-top{--rib:66px}}
body.hero-top .ribbon{position:relative;z-index:72;background:transparent;border-bottom:0;color:rgba(255,255,255,.86)}
body.hero-top .ribbon b{color:#fff}
body.hero-top .ribbon a{color:#fff;text-decoration-color:rgba(255,255,255,.45)}
body.hero-top .ribbon a:hover{color:#fff;text-decoration-color:#fff}
body.hero-top .ribbon .sep{opacity:.5}
body.hero-top .hero{margin-top:calc(-1 * (var(--rib) + 10px))}
body.hero-top .hero-in{padding-top:calc(clamp(100px,16vh,210px) + var(--rib) + 10px)}

/* ==================== header: the floating bar =================
   Dr. Nguyen's one ask from the Lumen reference (8/26 call): "really
   the only thing we like is the floating menu bar". The header keeps
   no height of its own; the pill inside it rides 10px under the top
   of the screen, white with a blur, and the page passes beneath it.
   ============================================================== */
header{position:sticky;top:0;z-index:70;height:0;padding:10px var(--pad) 0}
.bar{
  position:relative;display:flex;align-items:center;gap:10px;
  max-width:var(--maxw);margin:0 auto;
  padding:7px 8px 7px 12px;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border:1px solid rgba(1,63,102,.09);
  border-radius:999px;
  box-shadow:0 12px 34px rgba(0,21,40,.14),0 1px 0 rgba(255,255,255,.7) inset;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;padding:2px 6px 2px 2px;min-height:44px;border-radius:999px}
nav,.bookbtn,.mnav{flex:none}
.brand img{width:40px;flex:none}
.brand .bn{
  display:block;font-family:var(--display);
  font-size:clamp(15px,1.3vw,17px);font-weight:600;color:var(--cobalt-deep);
  letter-spacing:-.03em;line-height:1;white-space:nowrap;
}
.brand .bs{display:none}
/* Under 1300px the pill has room for the mark, the eight links and the button, not the
   name as well; the ribbon above already says whose site it is. */
@media(max-width:1439px){.brand .bn{display:none}}
@media(min-width:1440px){.bar{max-width:1320px}}
nav{margin-left:auto;display:flex;align-items:center;gap:2px;font-size:14px;font-weight:500}
nav>a,.navtop{
  position:relative;text-decoration:none;color:var(--body);
  padding:9px 10px;border-radius:999px;white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
nav>a:hover,.has-menu:hover>.navtop,.has-menu:focus-within>.navtop{color:var(--cobalt);background:var(--bone)}

/* --- the page you are on ---------------------------------------- */
nav>a[aria-current=page],.has-menu.is-current>.navtop{color:var(--cobalt);background:rgba(0,124,196,.1)}
.submenu a[aria-current=page]{color:var(--cobalt);font-weight:600;background:var(--bone)}
footer a[aria-current=page]{color:#fff;text-decoration-color:var(--brass-lift)}

/* --- the four menus, CSS only ------------------------------------
   The trigger is a real link, so a tap on touch goes somewhere and
   the item is in the tab order; tabbing onto it opens the menu
   through :focus-within and the links follow in sequence. */
.has-menu{position:relative}
.navtop{display:inline-flex;align-items:center;gap:6px}
.navtop .chev{flex:none;color:var(--brass-ink)}
.submenu{
  display:none;position:absolute;top:100%;left:0;z-index:80;
  margin-top:8px;min-width:284px;list-style:none;padding:8px;
  background:var(--white);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 22px 48px rgba(0,21,40,.16);
}
.submenu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.has-menu:hover>.submenu,.has-menu:focus-within>.submenu{display:block}
.submenu a{
  display:block;padding:10px 14px;border-radius:12px;
  font-size:14px;line-height:1.35;color:var(--body);text-decoration:none;
}
.submenu a:hover,.submenu a:focus-visible{background:var(--bone);color:var(--cobalt)}
.submenu .mh{
  padding:8px 14px 6px;font-family:var(--display);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brass-ink);
}
.has-menu.to-left .submenu{left:auto;right:0}

/* --- the same links below 1180px ----------------------------------
   A native <details>. No script, keyboard operable as it ships. */
.mnav{display:none;margin-left:auto;position:static}
.mtog{
  display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  min-height:44px;padding:0 16px;border-radius:999px;background:var(--bone);
  font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cobalt-deep);
}
.mtog::-webkit-details-marker{display:none}
.mtog .bars{position:relative;display:block;width:20px;height:12px;flex:none}
.mtog .bars::before,.mtog .bars::after{
  content:"";position:absolute;left:0;right:0;height:2px;background:var(--cobalt);
  transform-origin:center;
}
.mtog .bars::before{top:1px}
.mtog .bars::after{bottom:1px}
.mnav[open] .mtog .bars::before{top:5px;transform:rotate(45deg)}
.mnav[open] .mtog .bars::after{bottom:5px;transform:rotate(-45deg)}
.mpanel{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:75;
  background:var(--white);border:1px solid var(--line);border-radius:22px;
  box-shadow:0 26px 56px rgba(0,21,40,.2);
  max-height:calc(100vh - 120px);max-height:calc(100svh - 120px);overflow:auto;
}
@media(max-width:760px){
  .mpanel{max-height:calc(100vh - 180px);max-height:calc(100svh - 180px)}
}
.mpanel ul{list-style:none;padding:8px 16px 16px}
.mpanel a{
  display:block;padding:12px 6px;min-height:44px;
  border-bottom:1px solid var(--line);
  font-size:16px;color:var(--ink);text-decoration:none;
}
.mpanel a:hover{color:var(--cobalt)}
.mpanel a[aria-current=page]{color:var(--cobalt);font-weight:600}
.mpanel .sub a{padding-left:22px;font-size:15px;color:var(--body)}
.mpanel .mh{
  padding:18px 6px 6px;font-family:var(--display);
  font-size:var(--t-label);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-ink);
}
.mpanel .mbook{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:16px;padding:15px 18px;min-height:52px;border-bottom:0;border-radius:999px;
  background:var(--cobalt);color:#fff;font-weight:600;
}
.mpanel .mbook:hover{background:var(--blue);color:#fff}
.bookbtn{
  margin-left:6px;display:inline-flex;align-items:center;gap:8px;
  background:var(--cobalt);color:#fff;text-decoration:none;
  font-weight:600;font-size:14px;
  padding:11px 18px;min-height:44px;white-space:nowrap;border-radius:999px;
  transition:background .18s ease;
}
.bookbtn:hover{background:var(--blue)}
.bookbtn .sm{display:none}
@media(max-width:1199px){nav{display:none}.mnav{display:block}}
@media(max-width:620px){
  .bar{gap:8px;padding:6px 6px 6px 10px}
  .brand img{width:34px}
  .brand .bn{font-size:14px}
  .bookbtn{padding:11px 14px}
  .bookbtn .lg{display:none}
  .bookbtn .sm{display:inline}
  .mtog{padding:0 13px}
}
/* Below 760 the fixed call bar at the foot of the screen is already carrying
   Call and Schedule, so the bar stops carrying Schedule too. */
@media(max-width:760px){.bookbtn{display:none}}

/* ==================== hero ==================================== */
/* Their own glass. The window carries the monogram, the wordmark, a
   heavy rule and the street number, which is the whole thesis of the
   business in one frame, so the crop keeps the lettering in shot on a
   phone. */
.hero{
  position:relative;background:var(--cobalt-deep);overflow:hidden;isolation:isolate;
  display:flex;align-items:flex-end;
  min-height:min(84vh,760px);
  min-height:min(84svh,760px);
  color:#fff;--focus:var(--blue-lift);
}
@media(min-width:900px){.hero{min-height:min(88vh,880px);min-height:min(88svh,880px)}}
.hero>img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:52% 44%;z-index:0;
}
@media(min-width:900px){.hero>img{object-position:50% 50%}}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(0,21,40,.42) 0,rgba(0,21,40,.08) 30%,rgba(0,21,40,0) 52%),
    linear-gradient(0deg,
      var(--ink-navy) 0,
      rgba(0,21,40,.9) 130px,
      rgba(0,21,40,.7) 310px,
      rgba(0,21,40,.32) 480px,
      rgba(0,21,40,0) 680px);
}
.hero-in{
  position:relative;z-index:2;width:100%;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(100px,16vh,210px) var(--pad) calc(78px + env(safe-area-inset-bottom));
}
@media(min-width:761px){.hero-in{padding-bottom:clamp(54px,8vh,94px)}}
@media(min-width:900px){
  .hero-in{padding-top:clamp(190px,32vh,360px)}
  .hero::before{
    background:
      linear-gradient(180deg,rgba(0,21,40,.4) 0,rgba(0,21,40,.06) 28%,rgba(0,21,40,0) 50%),
      linear-gradient(0deg,
        var(--ink-navy) 0,
        rgba(0,21,40,.9) 160px,
        rgba(0,21,40,.68) 340px,
        rgba(0,21,40,.3) 530px,
        rgba(0,21,40,0) 750px);
  }
}
.kick{
  display:flex;align-items:center;gap:12px;
  font-family:var(--display);
  font-size:var(--t-label);font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--brass-lift);
  text-shadow:0 1px 14px rgba(0,8,20,.85);
}
.hero h1{
  font-size:var(--t-hero);color:#fff;margin-top:20px;
  letter-spacing:-.05em;line-height:.94;font-weight:600;
  text-shadow:0 2px 44px rgba(0,8,20,.55);
}
.hero h1 em{font-style:normal;color:var(--blue-lift)}
.hero .lede{
  margin-top:20px;max-width:40ch;
  font-size:clamp(16.5px,.72vw + 14.7px,20px);line-height:1.5;color:#d3e2ee;
  text-shadow:0 1px 18px rgba(0,8,20,.7);
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:11px;margin-top:clamp(24px,3.2vh,36px)}
@media(max-width:520px){
  .kick{letter-spacing:.14em;gap:9px;font-size:10px}
  .hero-ctas .btn{flex:1 1 100%}
}
@media(max-width:390px){
  .kick{align-items:flex-start;letter-spacing:.1em}
  .kick .ov{margin-top:5px}
}

/* ==================== interior page head ======================
   The home page opens on their own glass at 84vh. No interior page
   does: a patient who has clicked Dry Eye wants the page, not another
   photograph of the door. So every interior page opens on the same
   short block of paper, set in the window vinyl order the section
   heads use, and the first photograph on the page is the one that
   belongs to the first section.

     <div class="phero">
       <div class="wrap">
         <span class="eyebrow"><span class="ov" aria-hidden="true"></span>LABEL</span>
         <div class="rule"></div>
         <h1>Heading</h1>
         <p class="dek">One line.</p>
       </div>
     </div>
   ============================================================== */
.phero{
  background:var(--white);border-bottom:1px solid var(--line);
  padding-block:clamp(34px,5.4vw,62px);
  padding-top:calc(clamp(34px,5.4vw,62px) + 66px);
}
.phero h1{font-size:var(--t-display);color:var(--cobalt);max-width:20ch}
.phero .dek{
  margin-top:16px;max-width:56ch;
  font-size:var(--t-lead);line-height:1.5;color:var(--muted);
}
.phero .rule{margin:18px 0 22px}
/* On the deep ground, for the one or two pages that want to open dark. */
.phero.on-dark{background:var(--cobalt-deep);border-bottom-color:rgba(233,240,247,.24)}
.phero.on-dark h1{color:#fff}
.phero.on-dark .dek{color:var(--on-dark-2)}

/* ==================== grounds =================================
   The four backgrounds this page system uses, named, so a new
   section takes one of them instead of inventing a fifth. */
.ground-paper{background:var(--bone)}
.ground-white{background:var(--white)}
.ground-cobalt{background:var(--cobalt)}
.ground-deep{background:var(--cobalt-deep)}

/* ==================== buttons ================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;font-family:var(--sans);font-weight:600;
  font-size:15.5px;border:0;cursor:pointer;
  padding:16px 26px;min-height:52px;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease;
}
.btn svg{flex:none}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-lift);color:#00121f}
.btn-cobalt{background:var(--cobalt);color:#fff}
.btn-cobalt:hover{background:var(--blue)}
.btn-brass{background:var(--brass-lift);color:#25190a}
.btn-brass:hover{background:#e0c288}
.btn-ghost{border:1px solid rgba(255,255,255,.5);color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
/* The light twin of .btn-ghost, for the same button on paper or on white. */
.btn-line{border:1px solid var(--line);color:var(--cobalt);background:transparent}
.btn-line:hover{background:var(--bone);border-color:var(--cobalt)}
.btn:active{transform:translateY(1px)}
/* The row a bay closes on when it hands the reader to another page. Same
   shape as .dry-ctas, which is the concept page's own version of this. */
.bay-cta{margin-top:clamp(28px,3.6vw,42px);display:flex;flex-wrap:wrap;gap:11px}

/* ==================== credential band ========================= */
.creds{background:var(--cobalt);color:#fff;--focus:var(--blue-lift)}
.creds-in{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(24px,3.6vw,38px) var(--pad);
  display:grid;grid-template-columns:1fr;
  gap:0 clamp(24px,4vw,44px);
}
.cred{
  padding:15px 0;border-top:1px solid rgba(255,255,255,.18);
  display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-items:start;
}
.cred:first-child{border-top:0;padding-top:0}
.cred:last-child{padding-bottom:0}
.cred .cv{grid-column:2}
.cred .cr{grid-column:1;grid-row:1;margin:9px 0 0;color:var(--brass-lift)}
.cred .cl{grid-column:2;margin-top:6px}
@media(min-width:620px){
  /* The three spans stack once the grid is dropped. Without this they are
     inline spans and run together on one line. */
  .cred{display:block}
  .cred .cv,.cred .cl{display:block}
  .cred .cr{margin:11px 0 10px}
  .cred .cl{margin-top:0}
  .creds-in{grid-template-columns:1fr 1fr}
  .cred{padding:0 0 0 clamp(20px,3vw,32px);border-top:0;border-left:1px solid rgba(255,255,255,.18)}
  .cred:nth-child(odd){padding-left:0;border-left:0}
  .cred:nth-child(n+3){margin-top:clamp(22px,3vw,30px);padding-top:clamp(22px,3vw,30px);border-top:1px solid rgba(255,255,255,.18)}
}
@media(min-width:940px){
  .creds-in{grid-template-columns:repeat(4,1fr)}
  .cred,.cred:nth-child(odd){padding:0 0 0 clamp(22px,2.6vw,34px);border-left:1px solid rgba(255,255,255,.18)}
  .cred:first-child{padding-left:0;border-left:0}
  .cred:nth-child(n+3){margin-top:0;padding-top:0;border-top:0}
}
.cred .cv{
  font-family:var(--display);font-weight:600;
  font-size:clamp(19px,1.9vw,25px);color:#fff;line-height:1.12;letter-spacing:-.03em;
}
.cred .cl{font-size:var(--t-small);color:#bacfe0;line-height:1.5;max-width:32ch}

/* ==================== photography ============================= */
.shot{overflow:hidden;background:var(--bone-2);position:relative}
.on-dark .shot{background:var(--cobalt-deep)}
.shot img{width:100%}
/* A staff card with no photograph yet (Lia and Clyde, 9/15 call: "leave the picture blank, put the information in"). */
.shot.blank{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;background:var(--bone-2)}
.shot.blank .ini{font-family:var(--display);font-weight:600;font-size:clamp(44px,5vw,64px);line-height:1;color:var(--cobalt-deep);opacity:.22;letter-spacing:-.04em}
.cap{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 16px;
  padding-top:12px;margin-top:12px;border-top:2px solid var(--line);
}
.cap .ct{font-size:var(--t-small);font-weight:600;color:var(--ink);line-height:1.4}
.cap .cm{
  font-family:var(--display);
  font-size:var(--t-label);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-ink);
}
.on-dark .cap{border-top-color:rgba(233,240,247,.24)}
.on-dark .cap .ct{color:#fff}
.on-dark .cap .cm{color:var(--brass-lift)}

/* ==================== vision ================================== */
.vision{background:var(--bone)}
.vs-grid{display:grid;gap:clamp(28px,4vw,44px)}
@media(min-width:900px){.vs-grid{grid-template-columns:1.02fr .98fr;gap:clamp(44px,5.5vw,74px);align-items:center}}
.vs-grid .shot img{aspect-ratio:3/2;object-fit:cover;object-position:50% 32%}
.vs-big{
  font-family:var(--display);font-weight:600;
  font-size:var(--t-display);color:var(--cobalt);
  line-height:1.1;letter-spacing:-.035em;max-width:17ch;
}
.vs-grid p.vs-body{margin-top:20px;color:var(--body);max-width:var(--measure)}
.mission{
  margin-top:clamp(24px,3vw,32px);
  border-left:3px solid var(--brass);
  padding:4px 0 4px clamp(18px,2.4vw,26px);
}
.mission blockquote{
  font-family:var(--display);font-weight:500;
  font-size:clamp(16.5px,.8vw + 14.8px,20px);line-height:1.42;
  color:var(--cobalt-deep);letter-spacing:-.018em;
}
.mission .who{
  margin-top:14px;font-family:var(--display);font-size:var(--t-label);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass-ink);
}

/* ==================== THE LENS BOARD ==========================
   The centrepiece, on the cobalt of their own exam lane. Seven
   therapies, seven lenses, one construction. See the drawing notes
   above the SVG defs in the markup below.
   ============================================================== */
.dry{background:var(--cobalt-deep)}
.dry-lead{display:grid;gap:clamp(26px,3.5vw,40px);margin-top:clamp(30px,4vw,48px);align-items:start}
@media(min-width:900px){.dry-lead{grid-template-columns:.82fr 1.18fr;gap:clamp(40px,4.6vw,66px)}}
.dry-lead .shot img{aspect-ratio:2/3;object-fit:cover;object-position:50% 40%}
@media(max-width:899px){.dry-lead .shot img{aspect-ratio:4/3;object-position:50% 46%}}
.mech{list-style:none;margin-top:20px;border-top:1px solid rgba(233,240,247,.22)}
.mech li{
  display:grid;grid-template-columns:30px 1fr;gap:14px;
  padding:11px 0;border-bottom:1px solid rgba(233,240,247,.22);
  font-size:var(--t-small);line-height:1.5;color:var(--on-dark);
}
.mech li b{
  font-family:var(--display);font-size:var(--t-label);font-weight:700;
  letter-spacing:.1em;color:var(--brass-lift);padding-top:3px;
}
.dry-note{margin-top:18px;color:var(--on-dark-2);font-size:var(--t-small);line-height:1.62;max-width:48ch}
.sym-h{
  margin-top:clamp(24px,3vw,32px);font-family:var(--display);
  font-size:var(--t-label);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-lift);
}
.symptoms{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;list-style:none}
.symptoms li{
  font-size:13.5px;font-weight:500;color:#dceaf7;
  border:1px solid rgba(233,240,247,.3);padding:8px 14px;
}

/* --- the rail ---------------------------------------------------- */
.board{margin-top:clamp(38px,5vw,64px)}
.rail{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  list-style:none;
}
@media(min-width:760px){.rail{grid-template-columns:repeat(7,1fr);gap:10px}}
.lensbtn{
  appearance:none;background:rgba(255,255,255,.05);border:1px solid rgba(233,240,247,.2);
  border-top:3px solid rgba(233,240,247,.2);
  padding:14px 8px 12px;cursor:pointer;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:inherit;font-family:var(--display);
  transition:background .18s ease,border-color .18s ease;
}
.lensbtn .lens{width:100%;max-width:78px;height:auto}
.lensbtn .ln{
  font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--brass-lift);
}
.lensbtn .lt{
  font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--on-dark-2);
  line-height:1.25;text-align:center;
}
.lensbtn[aria-selected=true]{
  background:var(--cobalt-lift);border-color:rgba(233,240,247,.3);
  border-top-color:var(--brass-lift);
}
.lensbtn[aria-selected=true] .lt{color:#fff}
@media(hover:hover){.lensbtn:hover{background:rgba(255,255,255,.11)}}

/* --- the plate --------------------------------------------------- */
.plates{margin-top:10px}
.plate{
  background:var(--cobalt);border:1px solid rgba(233,240,247,.2);
  padding:clamp(24px,3.4vw,40px);
  display:grid;gap:clamp(20px,3vw,36px);align-items:center;
}
@media(min-width:700px){.plate{grid-template-columns:auto 1fr;gap:clamp(32px,4.4vw,60px)}}
.plate + .plate{margin-top:10px}
/* display:grid above outranks the user agent's [hidden]{display:none}, so the
   script's hidden attribute would do nothing without this line. */
.plate[hidden]{display:none}
.plate .lens{width:min(190px,52vw);height:auto;justify-self:center}
@media(min-width:700px){.plate .lens{width:clamp(180px,18vw,238px)}}
.plate .pn{
  font-family:var(--display);font-size:var(--t-label);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass-lift);
}
.plate h3{font-size:clamp(21px,1.5vw + 17px,30px);margin-top:11px;letter-spacing:-.03em}
.plate p{margin-top:14px;color:#cfe0ee;max-width:46ch;font-size:var(--t-small);line-height:1.66}
.plate .pmeta{
  margin-top:18px;padding-top:14px;border-top:1px solid rgba(233,240,247,.24);
  display:flex;align-items:flex-start;gap:10px;
  font-family:var(--display);
  font-size:var(--t-label);font-weight:600;letter-spacing:.12em;line-height:1.5;
  text-transform:uppercase;color:#d5e4f0;
}
.plate .pmeta .ov{color:var(--brass-lift);margin-top:2px}

/* --- the drawing itself ------------------------------------------
   Disc filled, ring stroked, mark in brass. One construction, seven
   ideas. The ring is the element that draws itself on first view. --- */
.lens .d{fill:var(--navy)}
.lens .r{fill:none;stroke:var(--blue-lift);stroke-width:4.5}
.lens .mk{fill:none;stroke:var(--brass-lift);stroke-width:3.4;stroke-linecap:round}
.lens .mkf{fill:var(--brass-lift);stroke:none}
.lens .mkthin{fill:none;stroke:var(--brass-lift);stroke-width:2.4}
/* The seven lenses are drawn identically whatever is selected. Selection is
   carried by the tile instead (brass top rule, lighter ground, white label),
   so the drawing itself never changes colour under the reader. */

.dry-ctas{margin-top:clamp(28px,3.6vw,42px);display:flex;flex-wrap:wrap;gap:11px;align-items:center}
.dry-ctas .btn{flex:1 1 260px}
.dry-close{margin-top:clamp(28px,3.6vw,42px);color:var(--on-dark-2);max-width:52ch;font-size:var(--t-small);line-height:1.62}

/* ==================== services ================================ */
.services{background:var(--white)}
.svc-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,46px);margin-top:clamp(34px,4.4vw,54px)}
@media(min-width:700px){.svc-grid{grid-template-columns:1fr 1fr;gap:clamp(34px,4vw,50px) clamp(26px,3.2vw,42px)}}
@media(min-width:1040px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc{display:flex;flex-direction:column}
.svc .shot img{aspect-ratio:5/4;object-fit:cover}
.svc h3{font-size:var(--t-h3);margin-top:18px;color:var(--cobalt)}
/* Card headings became links the moment the site grew past one page. The
   heading keeps its weight and colour; the link only shows on hover, in the
   brass, so a grid of cards does not read as a grid of blue text. */
.svc h3 a,.doc h3 a{color:inherit;text-decoration:none}
.svc h3 a:hover,.doc h3 a:hover{
  text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:5px;text-decoration-color:var(--brass);
}
.svc p{margin-top:11px;font-size:var(--t-small);line-height:1.62;color:var(--body)}
.svc .sl{margin-top:13px;list-style:none;font-size:var(--t-small);color:var(--body)}
.svc .sl li{padding:8px 0 8px 28px;position:relative;border-bottom:1px solid var(--line);line-height:1.45}
.svc .sl li:last-child{border-bottom:none}
/* A line in a service list can be a link to its own page. Quietly ruled, so
   the list still reads as a list rather than as a stack of buttons. */
.svc .sl a{
  color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--line);
}
.svc .sl a:hover{color:var(--blue-ink);text-decoration-color:var(--brass)}
/* The same two circles again, drawn with gradients so the list marker is
   the mark rather than a bullet. */
.svc .sl li::before{
  content:"";position:absolute;left:0;top:15px;width:19px;height:12px;color:var(--blue);
  background:
    radial-gradient(circle at 6px 6px,currentColor 6px,transparent 6.1px),
    radial-gradient(circle at 13px 6px,transparent 4.4px,currentColor 4.5px,currentColor 6px,transparent 6.1px);
}

/* ==================== doctors ================================= */
.doctors{background:var(--bone)}
.doc-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,44px);margin-top:clamp(34px,4.4vw,54px)}
@media(min-width:640px){.doc-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.doc-grid{grid-template-columns:repeat(4,1fr)}}
.doc figure{margin:0}
.doc .shot img{aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.doc h3{font-size:var(--t-h3);margin-top:18px;color:var(--cobalt)}
.doc .role{
  margin-top:7px;font-family:var(--display);font-size:var(--t-label);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink);
}
.doc p{margin-top:12px;font-size:var(--t-small);line-height:1.6;color:var(--body)}
/* The credentials are a keyed list rather than a paragraph: the same facts,
   a third of the words on screen, and scannable against the doctor beside it. */
.doc .facts{list-style:none;margin-top:16px;border-top:2px solid var(--line)}
.doc .facts li{padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.45}
.doc .facts .k{
  display:block;font-family:var(--display);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;
}
.doc .facts .v{color:var(--ink)}

/* ==================== team ==================================== */
.team{background:var(--cobalt)}
.tm-grid{display:grid;gap:clamp(28px,3.6vw,44px);margin-top:clamp(30px,4vw,48px)}
@media(min-width:900px){.tm-grid{grid-template-columns:1.12fr .88fr;gap:clamp(42px,5vw,72px);align-items:center}}
.tm-grid figure{margin:0}
.tm-grid .shot img{aspect-ratio:3/2;object-fit:cover}
.roles{list-style:none;border-top:1px solid rgba(233,240,247,.22)}
.roles li{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid rgba(233,240,247,.22);
  font-size:var(--t-small);line-height:1.4;color:#fff;
}
.roles li i{
  font-style:normal;font-family:var(--display);font-size:var(--t-label);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lift);text-align:right;
}
.pull{
  margin-top:clamp(28px,3.6vw,44px);
  border-left:3px solid var(--brass-lift);
  padding:4px 0 4px clamp(18px,2.4vw,28px);
  display:grid;gap:clamp(18px,2.6vw,28px);
}
@media(min-width:700px){.pull{grid-template-columns:104px 1fr;align-items:start}}
.pull .shot{border-radius:50%;overflow:hidden;max-width:104px}
.pull .shot img{aspect-ratio:1/1;object-fit:cover;object-position:50% 20%}
.pull blockquote{
  font-family:var(--display);font-weight:500;
  font-size:clamp(16.5px,1.2vw + 13px,22px);line-height:1.4;color:#fff;letter-spacing:-.022em;
}
.pull .who{
  margin-top:14px;font-family:var(--display);font-size:var(--t-label);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brass-lift);
}

/* ==================== full bleed plate ======================== */
/* One frame given the whole width, and it is deliberately the least
   clinical thing in their library. */
.plate-wide{background:var(--cobalt-deep);padding-block:0}
.plate-wide figure{margin:0}
.plate-wide img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 40%}
@media(min-width:620px){.plate-wide img{aspect-ratio:16/9}}
@media(min-width:1100px){.plate-wide img{aspect-ratio:2.3/1}}
.plate-wide .row{
  max-width:var(--maxw);margin:0 auto;padding:clamp(16px,2.6vw,26px) var(--pad);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;
}
.plate-wide .ct{
  color:#fff;font-size:var(--t-lead);font-weight:600;
  font-family:var(--display);letter-spacing:-.03em;
}
.plate-wide .cm{
  font-family:var(--display);font-size:var(--t-label);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass-lift);
}

/* ==================== words =================================== */
.words{background:var(--cobalt-deep)}
.w-grid{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.6vw,28px);margin-top:clamp(30px,4vw,48px)}
@media(min-width:820px){.w-grid{grid-template-columns:repeat(3,1fr)}}
.w{
  background:var(--cobalt);border:1px solid rgba(233,240,247,.2);
  border-top:3px solid var(--brass-lift);
  padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;
}
.w .lens{width:74px;height:auto;margin-bottom:18px}
.w p{font-size:var(--t-small);color:#d5e4f0;line-height:1.62}
.w .who{
  margin-top:auto;padding-top:18px;font-family:var(--display);
  font-size:var(--t-label);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;
}

/* ==================== office gallery ========================== */
.office{background:var(--white)}
.gallery{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.8vw,30px);margin-top:clamp(30px,4vw,50px)}
@media(min-width:640px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery figure{margin:0}
.gallery .shot img{aspect-ratio:3/2;object-fit:cover}

/* ==================== community =============================== */
.community{background:var(--bone)}
.cm-grid{display:grid;gap:clamp(24px,3.4vw,36px);margin-top:clamp(30px,4vw,48px)}
@media(min-width:760px){.cm-grid{grid-template-columns:1fr 1fr}}
.cm-grid figure{margin:0}
.cm-grid .shot img{aspect-ratio:4/3;object-fit:cover}
/* Their published numbers, kept exactly, set as figures rather than run
   into a sentence. */
.stats{
  display:grid;grid-template-columns:1fr;gap:0;
  margin-top:clamp(28px,3.6vw,40px);border-top:2px solid var(--line);
}
@media(min-width:620px){.stats{grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,44px)}}
.stat{padding:16px 0;border-bottom:1px solid var(--line)}
@media(min-width:620px){.stat{border-bottom:0;padding-bottom:0}}
.stat .sv{
  font-family:var(--display);font-weight:600;letter-spacing:-.035em;
  font-size:clamp(26px,2.6vw,38px);color:var(--cobalt);line-height:1.05;
}
.stat .sk{margin-top:8px;font-size:var(--t-small);color:var(--muted);line-height:1.45;max-width:26ch}

/* ==================== insurance =============================== */
.ins{background:var(--white)}
.ins-grid{display:grid;gap:clamp(28px,3.6vw,44px);margin-top:clamp(28px,3.6vw,44px)}
@media(min-width:900px){.ins-grid{grid-template-columns:.92fr 1.08fr;gap:clamp(40px,5vw,72px);align-items:start}}
.ins .shot img{aspect-ratio:3/2;object-fit:cover}
.ins p{color:var(--body);max-width:var(--measure);font-size:var(--t-small);line-height:1.66}
.ins p + p{margin-top:14px}
.carriers{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.carriers li{
  font-size:13.5px;font-weight:500;color:var(--cobalt);background:var(--bone);
  border:1px solid var(--line);padding:9px 14px;
}
.ins .note{margin-top:18px;font-size:var(--t-small);color:var(--muted);max-width:50ch}

/* ==================== contact ================================= */
.contact{background:var(--cobalt)}
.c-grid{display:grid;gap:clamp(30px,4vw,46px);margin-top:clamp(30px,4vw,48px)}
@media(min-width:1000px){.c-grid{grid-template-columns:.72fr 1.02fr .9fr;gap:clamp(30px,3.6vw,52px);align-items:start}}
@media(min-width:640px) and (max-width:999px){.c-grid{grid-template-columns:1fr 1fr}}
.c-grid .shot img{aspect-ratio:2/3;object-fit:cover;object-position:50% 42%}
@media(min-width:640px) and (max-width:999px){.c-grid .shot img{aspect-ratio:3/4}}
.c-line{display:block;text-decoration:none;border-top:1px solid rgba(255,255,255,.24);padding:18px 0}
.c-line:last-of-type{border-bottom:1px solid rgba(255,255,255,.24)}
.c-line .cl2{
  display:flex;align-items:center;gap:10px;font-family:var(--display);
  font-size:var(--t-label);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-lift);
}
.c-line .cv2{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(18px,2.4vw,26px);color:#fff;margin-top:8px;
  letter-spacing:-.03em;line-height:1.16;overflow-wrap:break-word;
}
.c-line .cs{display:block;font-size:var(--t-small);color:#b4cae6;margin-top:5px}
.c-line:hover .cv2{color:var(--brass-lift)}
.c-note{margin-top:clamp(20px,2.6vw,30px);color:#bcd2e4;max-width:44ch;font-size:var(--t-small);line-height:1.6}
.hours{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.2);padding:clamp(22px,2.8vw,30px)}
.hours h3{font-size:var(--t-h3)}
.hours dl{margin-top:16px}
.hours .hr{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.18);
  font-size:var(--t-small);
}
.hours .hr:last-of-type{border-bottom:none}
.hours dt{color:#c5dbec;font-weight:500}
.hours dd{color:#fff;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.hours .sat dd{color:var(--brass-lift)}
.hours .satnote{margin-top:12px;font-size:12.5px;color:#a7c0d6;line-height:1.55}
.hours .btn{width:100%;margin-top:20px}
.routes{margin-top:20px;border-top:1px solid rgba(255,255,255,.2);padding-top:14px;display:flex;flex-direction:column;gap:2px}
.routes a{
  display:flex;align-items:center;gap:11px;min-height:44px;
  font-size:var(--t-small);font-weight:500;color:#dbe8f7;text-decoration:none;
}
.routes a .ov{color:var(--brass-lift);flex:none}
.routes a:hover{color:#fff}

/* ==================== footer ================================== */
footer{
  background:var(--ink-navy);color:#9db4c8;
  font-size:var(--t-small);line-height:1.66;
  padding:clamp(44px,5.5vw,66px) 0 112px;
  --focus:var(--blue-lift);
}
@media(min-width:760px){footer{padding-bottom:clamp(42px,5vw,62px)}}
/* Three columns on the concept page, four here: the site's own pages need a
   column of their own and the NAP moves in under the mark. Two up first, then
   four across once there is room for them. */
.f-cols{display:grid;gap:clamp(24px,3.2vw,38px)}
@media(min-width:600px){.f-cols{grid-template-columns:1fr 1fr;gap:clamp(28px,3.6vw,44px)}}
@media(min-width:980px){.f-cols{grid-template-columns:1.35fr 1fr 1fr 1fr;gap:clamp(32px,4vw,54px)}}
footer .ft2{font-family:var(--display);font-weight:600;font-size:17px;color:#fff;letter-spacing:-.025em;margin-bottom:11px}
footer a{
  display:inline-flex;align-items:center;min-height:44px;padding:4px 0;color:#d0e0ee;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:transparent;
}
footer a:hover{color:#fff;text-decoration-color:var(--brass-lift)}
footer .flinks{display:flex;flex-direction:column;gap:1px}
footer .flinks a{padding:4px 0;align-self:flex-start}
.f-logo{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.f-logo img{width:52px;background:#fff;padding:5px}
.f-logo .ft2{margin-bottom:0}
.lic{
  margin-top:clamp(28px,3.6vw,40px);border-top:2px solid rgba(157,180,200,.24);
  padding-top:18px;font-size:12.5px;color:#7e97ad;line-height:1.72;max-width:92ch;
}
.lic b{color:#c0d3e3}

/* ==================== sticky call bar ========================= */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:var(--ink-navy);padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -1px 0 rgba(255,255,255,.18);
  --focus:var(--blue-lift);
}
.callbar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  text-align:center;padding:17px 8px;font-weight:600;font-size:15.5px;
  text-decoration:none;min-height:58px;
}
.callbar .c1{background:var(--blue);color:#fff}
.callbar .c2{background:transparent;color:#fff;border-left:1px solid rgba(255,255,255,.2)}
@media(max-width:760px){.callbar{display:flex}}

/* ==================== motion ==================================
   One moment, in one place: the seven lenses on the board draw
   themselves in sequence the first time the board comes into view.
   Everything else is a single hover easing. Nothing moves for a
   reader who has asked for less motion, and the default state of
   every ring is fully drawn, so a reader with no JavaScript sees the
   finished drawing rather than an empty one.
   ============================================================== */
@media(prefers-reduced-motion:no-preference){
  @keyframes nv-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes nv-settle{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
  .hero>img{animation:nv-settle 1300ms cubic-bezier(.2,.7,.2,1) both}
  .hero .kick{animation:nv-rise 700ms 240ms cubic-bezier(.2,.7,.2,1) both}
  .hero h1{animation:nv-rise 800ms 360ms cubic-bezier(.2,.7,.2,1) both}
  .hero .lede{animation:nv-rise 800ms 500ms cubic-bezier(.2,.7,.2,1) both}
  .hero-ctas{animation:nv-rise 800ms 620ms cubic-bezier(.2,.7,.2,1) both}

  .shot img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
  nav>a::after,.navtop::after{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .navtop .chev{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
  .has-menu:hover>.navtop .chev,.has-menu:focus-within>.navtop .chev{transform:rotate(180deg)}
  .mtog .bars::before,.mtog .bars::after{transition:transform .2s ease,top .2s ease,bottom .2s ease}
  .c-line{transition:padding-left .25s cubic-bezier(.2,.7,.2,1)}
  .c-line .cv2{transition:color .18s ease}
  @media(hover:hover){
    figure:hover .shot img,.svc:hover .shot img,.shot:hover img{transform:scale(1.035)}
    .c-line:hover{padding-left:12px}
  }

  /* The draw. .armed is set by script, so this state never exists
     without JavaScript; .drawn releases it, staggered by --i. */
  .board.armed .lens .r,
  .board.armed .lens .mk,
  .board.armed .lens .mkthin{stroke-dasharray:300;stroke-dashoffset:300}
  .board.armed .lens .mkf{opacity:0}
  .board.drawn .lens .r,
  .board.drawn .lens .mk,
  .board.drawn .lens .mkthin{
    stroke-dashoffset:0;
    transition:stroke-dashoffset 900ms cubic-bezier(.3,.7,.2,1);
    transition-delay:calc(var(--i,0) * 85ms);
  }
  .board.drawn .lens .mkf{
    opacity:1;transition:opacity 500ms ease;
    transition-delay:calc(var(--i,0) * 85ms + 380ms);
  }
}

/* ==================================================================
   THE BIGGER PASS, 2026-09-08. Additions only, in the order of
   Dr. Nguyen's asks: rounded, brighter, the floating bar (above),
   the full mission statement, the store, the lane bay, the films,
   the brand wall, the socials. Nothing above this line was removed.
   ================================================================== */

/* --- rounded, everywhere it looks right (his logo's font is rounded) --- */
.shot{border-radius:var(--r)}
.shot img{border-radius:inherit}
.plate,.w,.hours{border-radius:var(--r)}
.lensbtn{border-radius:var(--r-sm)}
.btn{border-radius:999px}
.symptoms li,.carriers li{border-radius:999px}
.pull .shot{border-radius:50%}
.plate-wide img{border-radius:0}
.callbar{border-radius:18px 18px 0 0;overflow:hidden}
.f-logo img{border-radius:10px}
.mech{border-radius:0}

/* --- Vision Source, under the credential band --------------------- */
.vsrow{background:var(--white);border-bottom:1px solid var(--line)}
.vsrow .wrap{
  display:flex;align-items:center;justify-content:center;gap:12px 28px;flex-wrap:wrap;
  padding-block:16px;text-align:center;
}
.vsrow img{height:22px;width:auto}
.vsrow span{font-size:var(--t-small);color:var(--muted)}

/* --- the mission statement, whole ------------------------------- */
.mission .clauses{list-style:none;margin-top:14px;display:grid;gap:6px}
.mission .clauses li{
  font-size:var(--t-small);color:var(--body);line-height:1.5;
  display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:baseline;
}
.mission .clauses b{
  font-family:var(--display);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-ink);
}
@media(max-width:420px){.mission .clauses li{grid-template-columns:1fr;gap:2px}}

/* --- the store strip inside the dark bay, and the code chip ------ */
.shopstrip{
  margin-top:clamp(28px,3.6vw,42px);background:var(--white);color:var(--body);
  border-radius:var(--r);padding:clamp(20px,2.6vw,30px);
  display:grid;gap:18px;align-items:center;
}
@media(min-width:800px){.shopstrip{grid-template-columns:1fr auto;gap:28px}}
.shopstrip h3{color:var(--cobalt);font-size:var(--t-h3)}
.shopstrip p{margin-top:8px;font-size:var(--t-small);color:var(--body);max-width:56ch;line-height:1.6}
.shopstrip .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.code{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:12px;color:var(--cobalt-deep);background:var(--bone);
  border:1px dashed var(--brass);border-radius:999px;padding:10px 16px;
}
.code{white-space:nowrap}
.code b{font-size:14px;letter-spacing:.18em;color:var(--cobalt)}
.code i{font-style:normal;color:var(--brass-ink);margin-left:2px}
@media(max-width:400px){.code{letter-spacing:.08em;padding:9px 12px;gap:6px}.code b{letter-spacing:.12em}}

/* --- the lane bay: myopia control and advanced contact lens fittings --- */
.lane{background:var(--white)}
.lane-grid{display:grid;gap:clamp(18px,2.4vw,26px);margin-top:clamp(30px,4vw,48px)}
@media(min-width:800px){.lane-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.lane-grid{grid-template-columns:1.1fr 1.1fr .95fr}}
.lane-card{
  background:var(--bone);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
}
.lane-card .shot{border-radius:0}
.lane-card .shot img{aspect-ratio:4/3;object-fit:cover;object-position:50% 30%}
.lane-card .body{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;flex:1}
.lane-card h3{font-size:clamp(20px,1.4vw + 15px,26px);color:var(--cobalt);letter-spacing:-.025em}
.lane-card p{margin-top:10px;font-size:var(--t-small);color:var(--body);line-height:1.6}
.lane-card .sl{margin-top:12px;list-style:none;font-size:var(--t-small);color:var(--body)}
.lane-card .sl li{padding:7px 0 7px 28px;position:relative;border-bottom:1px solid var(--line);line-height:1.45}
.lane-card .sl li:last-child{border-bottom:0}
.lane-card .sl li::before{
  content:"";position:absolute;left:0;top:13px;width:19px;height:12px;color:var(--blue);
  background:
    radial-gradient(circle at 6px 6px,currentColor 6px,transparent 6.1px),
    radial-gradient(circle at 13px 6px,transparent 4.4px,currentColor 4.5px,currentColor 6px,transparent 6.1px);
}
.lane-card .bay-cta{margin-top:auto;padding-top:18px}
@media(min-width:1040px){.svc-grid.four{grid-template-columns:repeat(2,1fr)}}

/* --- the films: a poster, a play button, then the player ------------
   Nothing from YouTube loads until the button is pressed. The player
   opens with captions on, and the transcript sits under it. --- */
.vid-grid{display:grid;gap:clamp(20px,2.6vw,30px);margin-top:clamp(28px,3.6vw,42px)}
@media(min-width:860px){.vid-grid{grid-template-columns:1fr 1fr}}
.ytv{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--cobalt-deep);isolation:isolate}
.ytv img{width:100%;height:100%;object-fit:cover;display:block}
.ytv .play{
  position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(0,21,40,0) 40%,rgba(0,21,40,.6));
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:clamp(14px,2vw,22px);color:#fff;font-family:var(--display);font-weight:600;
  font-size:var(--t-body);text-align:left;line-height:1.25;
}
.ytv .play small{display:block;margin-top:5px;font-family:var(--sans);font-weight:500;font-size:12.5px;color:#d3e2ee}
.ytv .play .pb{
  flex:none;width:58px;height:58px;border-radius:50%;background:#fff;color:var(--cobalt);
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:transform .18s ease,background .18s ease;
}
.ytv .play:hover .pb{background:var(--blue-lift);transform:scale(1.06)}
.ytv .play:focus-visible{outline:3px solid var(--blue-lift);outline-offset:-3px}
.ytv iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytv .cc{
  position:absolute;top:12px;left:12px;z-index:2;pointer-events:none;
  font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(255,255,255,.92);color:var(--cobalt-deep);padding:6px 10px;border-radius:999px;
}
.vcap{margin-top:12px}
.vcap .ct{display:block;font-weight:600;color:var(--ink);font-size:var(--t-small)}
.vcap .cm{display:block;margin-top:3px;font-size:13px;color:var(--muted);line-height:1.5}
.tx{margin-top:10px}
.tx summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cobalt);padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;min-height:40px;
}
.tx summary::-webkit-details-marker{display:none}
.tx summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.tx[open] summary{background:var(--bone)}
.tx[open] summary::before{transform:rotate(-135deg);margin-top:3px}
.tx .txt{
  margin-top:10px;max-height:280px;overflow:auto;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;
  font-size:14px;line-height:1.62;color:var(--body);
}
.tx .txt p+p{margin-top:10px}

/* --- the store -------------------------------------------------- */
.store-head{display:grid;gap:clamp(24px,3vw,36px);align-items:start}
@media(min-width:900px){.store-head{grid-template-columns:1.15fr .85fr;gap:clamp(36px,4.6vw,64px)}}
.store-head figure{margin:0}
.store-head .shot img{aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.steps{display:grid;gap:12px;margin-top:22px}
@media(min-width:640px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--bone);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.step b{display:block;font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-ink)}
.step h3{margin-top:8px;font-size:16.5px}
.step p{margin-top:6px;font-size:13.5px;color:var(--body);line-height:1.55}
.cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(26px,3.4vw,40px)}
.cats a{
  text-decoration:none;font-size:13.5px;font-weight:500;color:var(--cobalt);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 16px;min-height:40px;
  display:inline-flex;align-items:center;
}
.cats a:hover{border-color:var(--cobalt);background:var(--bone)}
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}
@media(min-width:700px){.prod-grid{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(min-width:1040px){.prod-grid{grid-template-columns:repeat(4,1fr);gap:20px}}
.prod{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:12px;display:flex;flex-direction:column;
}
@media(min-width:700px){.prod{padding:16px}}
.prod .pimg{aspect-ratio:1;border-radius:var(--r-sm);background:#fff;display:grid;place-items:center;overflow:hidden}
.prod .pimg img{width:100%;height:100%;object-fit:contain}
.prod h3{font-size:15px;margin-top:12px;line-height:1.3;letter-spacing:-.01em;color:var(--cobalt-deep)}
.prod p{margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--muted);flex:1}
.prod .buy{
  margin-top:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 14px;border-radius:999px;background:var(--cobalt);color:#fff;
  text-decoration:none;font-weight:600;font-size:13.5px;text-align:center;
}
.prod .buy:hover{background:var(--blue)}
.prod .buy svg{flex:none}
.prod .buy.soft{background:var(--bone);color:var(--cobalt);border:1px solid var(--line)}

/* --- the brand wall --------------------------------------------- */
.bw{margin-top:clamp(26px,3.4vw,40px)}
.bw+.bw{margin-top:clamp(20px,2.8vw,32px)}
.bw h3{
  font-family:var(--display);font-size:var(--t-label);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass-ink);
}
.brands{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
@media(min-width:560px){.brands{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.brands{grid-template-columns:repeat(5,1fr);gap:10px}}
.brands li{
  background:#fff;border:1px solid var(--line);border-radius:14px;min-height:62px;
  display:grid;place-items:center;padding:10px 12px;text-align:center;
  font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:-.01em;color:var(--cobalt-deep);
}
/* A tile carrying the brand's own mark: the mark sits in a fixed 30px band, mono, so the twenty-two marks read as one wall and the text tiles beside them keep the same height. */
.brands li.mk{padding:12px 16px}
.brands li.mk img{display:block;max-height:30px;max-width:120px;width:auto;height:auto;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.86;transition:opacity .18s ease,transform .18s ease}
@media(hover:hover){.brands li.mk:hover img{opacity:1;transform:translateY(-1px)}}
@media(min-width:900px){.brands li.mk img{max-height:34px;max-width:140px}}

/* --- the socials ------------------------------------------------ */
.socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.socials a{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px 6px 11px;
  border:1px solid rgba(157,180,200,.35);border-radius:999px;color:#fff;
  text-decoration:none;font-size:13.5px;font-weight:500;
}
.socials a:hover{background:rgba(255,255,255,.08);border-color:var(--brass-lift);color:#fff}
.socials svg{flex:none}
.contact .socials{margin-top:22px}
.contact .socials a{border-color:rgba(255,255,255,.3)}

/* --- two home page bays brought into the light ------------------ */
.team.light{background:var(--white)}
.team.light .roles{border-top-color:var(--line)}
.team.light .roles li{color:var(--ink);border-bottom-color:var(--line)}
.team.light .roles li i{color:var(--brass-ink)}
.team.light .pull{border-left-color:var(--brass)}
.team.light .pull blockquote{color:var(--cobalt-deep)}
.team.light .pull .who{color:var(--brass-ink)}
.words.light{background:var(--bone)}
.words.light .w{background:#fff;border:1px solid var(--line);border-top:3px solid var(--brass)}
.words.light .w p{color:var(--body)}
.words.light .w .who{color:var(--cobalt)}

/* --- the treatment photographs, three across --------------------- */
.strip3{display:grid;grid-template-columns:1fr;gap:14px;margin-top:clamp(26px,3.4vw,40px)}
@media(min-width:640px){.strip3{grid-template-columns:repeat(3,1fr);gap:18px}}
.strip3 figure{margin:0}
.strip3 .shot img{aspect-ratio:4/5;object-fit:cover}

/* --- the two forms (added 2026-09-22) -------------------------------
   The contact page's message form and the internship application. The
   practice asked (9/21) for its mailbox to be shown nowhere on the site,
   so these two forms are the written route to the office. Labels sit
   above their fields, every field is rounded like the rest of the site,
   and the type is 16px or larger so a phone never zooms into a field.
   The status lines show on :target when the page is reached from a
   plain form post (no script), and on .is-on when forms.js is running. */
.nvf-wrap{max-width:760px;margin-top:clamp(26px,3.4vw,40px)}
.nvf-grid{display:grid;gap:16px 18px}
@media(min-width:640px){.nvf-grid{grid-template-columns:1fr 1fr}}
.nvf-full{grid-column:1/-1}
.nvf label,.nvf .nvf-lab{
  display:block;font-family:var(--sans);font-size:var(--t-small);font-weight:600;
  color:var(--ink);line-height:1.45;margin-bottom:7px;
}
.nvf .req{font-weight:500;color:var(--muted)}
.nvf input,.nvf textarea{
  display:block;width:100%;font-family:var(--sans);font-size:16px;line-height:1.45;color:var(--ink);
  background:#fff;border:1px solid #cfc8b8;border-radius:var(--r-sm);
  padding:13px 15px;min-height:52px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.nvf textarea{min-height:150px;resize:vertical}
.nvf input:focus,.nvf textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,124,196,.2)}
.nvf fieldset{border:0;padding:0;margin:0;min-width:0}
.nvf legend{padding:0}
/* Inside a group (the address) the group name leads and the part labels step back. */
.nvf fieldset label{font-weight:500;color:var(--body)}
.nvf legend.nvf-lab{margin-bottom:10px}
.nvf .nvf-sec{
  font-family:var(--display);font-weight:600;font-size:var(--t-h3);color:var(--cobalt);
  letter-spacing:-.018em;line-height:1.25;margin-top:10px;
}
.nvf .nvf-q label{font-weight:500;color:var(--body);font-size:var(--t-small);line-height:1.55}
.nvf .btn{margin-top:6px}
.nvf button[disabled]{opacity:.6;cursor:progress}
.nvf-hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
.nvf-msg{
  display:none;margin-top:18px;padding:16px 18px;border-radius:var(--r-sm);
  font-size:var(--t-small);line-height:1.6;border:1px solid var(--line);background:#fff;color:var(--ink);
}
.nvf-msg:focus{outline:none}
.nvf-msg b{font-family:var(--display);font-weight:600;color:var(--cobalt)}
.nvf-msg.ok{border-color:var(--blue);background:#eef6fb}
.nvf-msg.err{border-color:var(--brass);background:#fbf5ec}
.nvf-msg a{color:var(--cobalt);font-weight:600}
.nvf-msg:target,.nvf-msg.is-on{display:block}
.nvf-wrap:has(#nv-sent:target) form{display:none}