/* THE ONLY STYLESHEET for carolinaseyecenter. Source: build/site-src/site.css, written to site/assets/ by build/build-site.py. url() paths are relative to /assets/. Merged 2026-09-15 from the homepage's inline style plus request-appointment's own block. */ /* Self-hosted fonts. See the note in . */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-normal-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-normal-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-normal-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-normal-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/source-serif-4-italic-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/source-serif-4-italic-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/source-serif-4-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/source-serif-4-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root{ --navy:#14366e; --navy-deep:#0b1e40; --navy-ink:#081630; --blue:#2b8bd4; --sky:#e9f3fc; --sky-soft:#f3f8fd; --ivory:#faf8f3; --cream:#f4eee1; --gold:#c19a3f; --gold-bright:#dcb75e; --gold-soft:rgba(193,154,63,.35); --ink:#17233a; --ink-soft:#4a5872; --line:rgba(20,54,110,.12); --serif:'Source Serif 4',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--sans);color:var(--ink);background:var(--ivory);line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:1240px;margin:0 auto;padding:0 32px} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px} .eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)} h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;color:var(--navy-deep)} .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)} .reveal.in{opacity:1;transform:none} .goldrule{width:56px;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-bright));margin:22px 0;transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.6,.2,1) .2s} .in .goldrule{transform:scaleX(1)} /* ── top bar ─────────────────────────────── */ .topbar{background:var(--navy-ink);color:#c8d6ee;font-size:12.5px;letter-spacing:.02em} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px} .topbar span{display:flex;align-items:center;gap:8px} .topbar .dot{width:3px;height:3px;border-radius:50%;background:var(--gold)} .topbar a{color:#fff;font-weight:600} .topbar a:hover{color:var(--gold-bright)} /* ── nav ─────────────────────────────── */ .nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:82px} .nav img.logo{height:46px;width:auto} .nav ul{display:flex;gap:30px;list-style:none;font-size:13.5px;font-weight:500;color:var(--ink-soft)} .nav ul a{padding:6px 0;border-bottom:2px solid transparent;transition:.25s} .nav ul a:hover,.nav ul a.on{color:var(--navy);border-color:var(--gold)} .navtoggle{position:absolute;opacity:0;pointer-events:none} .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;align-items:center;cursor:pointer;border:1px solid var(--line);border-radius:4px} .burger span{display:block;width:22px;height:2px;background:var(--navy);transition:.3s} .nav-cta-m{display:none} .btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14px;padding:14px 26px;border-radius:3px;transition:.3s;cursor:pointer;border:0} .btn-gold{background:linear-gradient(135deg,var(--gold),#a9852f);color:#fff;box-shadow:0 8px 22px -8px rgba(193,154,63,.55)} .btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(193,154,63,.6)} .btn-ghost{border:1px solid rgba(255,255,255,.4);color:#fff;background:transparent} .btn-ghost:hover{border-color:var(--gold-bright);color:var(--gold-bright)} .btn-navy{background:var(--navy);color:#fff} .btn-navy:hover{background:var(--navy-deep);transform:translateY(-2px)} .nav .btn{padding:11px 20px;font-size:13px} /* ── hero ─────────────────────────────── */ .hero{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden} .hero-bg{position:absolute;inset:0;background:url('hero-lobby-v3.jpg') center/cover no-repeat;opacity:.5;animation:kb 26s ease-in-out infinite alternate} @keyframes kb{from{transform:scale(1)}to{transform:scale(1.07)}} .hero-veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,22,48,.96) 0%,rgba(11,30,64,.88) 38%,rgba(11,30,64,.45) 68%,rgba(8,22,48,.72) 100%)} .hero-goldline{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold-bright) 55%,var(--gold) 75%,transparent);transform:scaleX(0);transform-origin:left;animation:goldSweep 1.6s cubic-bezier(.2,.6,.2,1) 1s forwards} @keyframes goldSweep{to{transform:scaleX(1)}} .hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;padding:96px 32px 110px} .hero h1{color:#fff;font-size:clamp(40px,4.6vw,64px);font-weight:400;letter-spacing:-.01em;line-height:1.08;margin:26px 0 30px} .hero h1 em{font-style:normal;color:var(--gold-bright)} .hero h1 .hl{display:block;opacity:0;transform:translateY(28px);filter:blur(12px);animation:hlIn 1.1s cubic-bezier(.2,.6,.2,1) forwards} .hero h1 .hl1{animation-delay:.15s} .hero h1 .hl2{animation-delay:.45s} .hero h1 .hl3{animation:hl3In 1.8s cubic-bezier(.2,.6,.2,1) .85s forwards} @keyframes hlIn{to{opacity:1;transform:none;filter:blur(0)}} @keyframes hl3In{0%{opacity:0;transform:translateY(28px);filter:blur(20px)}55%{opacity:1;transform:none;filter:blur(6px)}100%{opacity:1;transform:none;filter:blur(0)}} .clarify{background:linear-gradient(90deg,var(--gold),var(--gold-bright)) left calc(100% - 1px) / 0% 2px no-repeat;padding-bottom:3px;animation:uline 1.1s cubic-bezier(.6,0,.2,1) 2.2s forwards} @keyframes uline{to{background-size:100% 3px}} .hero .eyebrow{color:var(--gold-bright);animation:fadeUp .9s cubic-bezier(.2,.6,.2,1) .05s both} .hero p.lede{font-size:17px;color:#c3d2ea;max-width:46ch;font-weight:300;line-height:1.75;animation:fadeUp .9s cubic-bezier(.2,.6,.2,1) .6s both} .hero .cta{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;animation:fadeUp .9s cubic-bezier(.2,.6,.2,1) .85s both} @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .hero-duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:end} .doc{position:relative;opacity:0;transform:translateY(44px);animation:docIn 1.2s cubic-bezier(.2,.6,.2,1) .5s forwards} .doc.second{animation:docIn2 1.2s cubic-bezier(.2,.6,.2,1) .75s forwards} @keyframes docIn{to{opacity:1;transform:none}} @keyframes docIn2{to{opacity:1;transform:translateY(34px)}} .doc .frame{position:relative;border-radius:170px 170px 6px 6px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)} .doc .frame::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,54,110,.16),rgba(11,30,64,.34));mix-blend-mode:multiply} .doc .frame::after{content:"";position:absolute;inset:0;border:1px solid rgba(220,183,94,.5);border-radius:170px 170px 6px 6px;pointer-events:none} .doc .frame img{width:100%;aspect-ratio:4/4.9;object-fit:cover;object-position:top} .doc .plate{position:relative;margin:-26px auto 0;background:linear-gradient(160deg,#10294f,var(--navy-ink));border:1px solid var(--gold-soft);border-radius:4px;padding:14px 16px 13px;text-align:center;width:88%;box-shadow:0 18px 34px -14px rgba(0,0,0,.65)} .doc .plate b{display:block;font-family:var(--serif);font-weight:500;font-size:16.5px;color:#fff;letter-spacing:.01em} .doc .plate span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-bright);margin-top:5px;line-height:1.6} /* ── credential strip ─────────────────────────────── */ .creds{background:var(--navy);color:#fff} .creds .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:0 32px} .cred{display:flex;gap:16px;align-items:center;padding:26px 26px;border-left:1px solid rgba(255,255,255,.14)} .cred:first-child{border-left:0} .cred svg{flex:0 0 34px;stroke:var(--gold-bright);fill:none;stroke-width:1.5} .cred b{display:block;font-size:14px;font-weight:600;letter-spacing:.01em;line-height:1.35} .cred span{display:block;font-size:12px;color:#a9bcdf;margin-top:2px;line-height:1.45} @media(max-width:960px){.creds .wrap{grid-template-columns:1fr 1fr}.cred{border-left:0;border-top:1px solid rgba(255,255,255,.12);padding:20px 14px}} /* ── legacy / future ─────────────────────────────── */ .story{padding:92px 0 72px;background:var(--ivory)} .story-head{max-width:720px;margin-bottom:52px} .story-head h2{font-size:clamp(30px,3.2vw,44px);margin-top:20px} .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px} .story-card{border-radius:8px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 50px -30px rgba(11,30,64,.35);border:1px solid var(--line);background:#fff} .story-card .photo{position:relative;overflow:hidden} .story-card .photo img{width:100%;aspect-ratio:16/11.5;object-fit:cover;object-position:top;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)} .story-card.shah .photo img{object-position:center 62%} .story-card:hover .photo img{transform:scale(1.04)} .story-card .body{padding:36px 38px 40px;flex:1;display:flex;flex-direction:column} .story-card h3{font-size:26px;margin:16px 0 14px} .story-card p{font-size:14.5px;color:var(--ink-soft);line-height:1.75} .story-card .more{margin-top:auto;padding-top:24px;font-weight:600;font-size:13.5px;color:var(--navy);display:inline-flex;align-items:center;gap:8px} .story-card .more:hover{color:var(--gold)} .story-card.clement{background:linear-gradient(180deg,#fdfaf3,var(--cream))} .story-card.shah{background:linear-gradient(180deg,#f7fbff,var(--sky))} .bridge{max-width:880px;margin:64px auto 0;text-align:center} .bridge p{font-family:var(--serif);font-size:clamp(19px,2vw,24px);font-weight:400;font-style:italic;color:var(--navy);line-height:1.65} .bridge .sig{margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)} /* The bridge lost its attribution line (Zubin, 2026-08-25: it read as a personal statement about succession). Without a signature the paragraph needed its own opening beat, so the first line carries the weight the sig used to. */ .bridge .bridge-lead{font-style:normal;font-weight:500;font-size:clamp(21px,2.2vw,27px);color:var(--navy);margin-bottom:14px} @media(max-width:960px){.story-grid{grid-template-columns:1fr}} /* ── services ─────────────────────────────── */ .services{padding:92px 0;background:var(--sky-soft);border-top:1px solid var(--line)} .services .head{display:flex;justify-content:space-between;align-items:end;margin-bottom:46px;gap:30px;flex-wrap:wrap} .services h2{font-size:clamp(30px,3.2vw,44px);margin-top:20px} .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .svc{background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px 24px;transition:.35s;position:relative} .svc:hover{transform:translateY(-5px);box-shadow:0 22px 40px -22px rgba(11,30,64,.3);border-color:var(--gold-soft)} .svc svg{stroke:var(--navy);fill:none;stroke-width:1.5;width:34px;height:34px;margin-bottom:16px} .svc b{display:block;font-family:var(--serif);font-weight:600;font-size:16.5px;color:var(--navy-deep);margin-bottom:6px} .svc span{font-size:12.5px;color:var(--ink-soft);line-height:1.55;display:block} .svc.star{background:linear-gradient(170deg,var(--navy),var(--navy-deep));border-color:var(--gold);display:flex;flex-direction:column} .svc.star svg{stroke:var(--gold-bright)} .svc.star b{color:#fff;font-size:21px} .svc.star span{color:#b9c9e4;font-size:13px} .svc.star .tag{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--navy-ink);background:var(--gold-bright);padding:5px 9px;border-radius:2px} .svc.star .more{margin-top:auto;padding-top:20px;color:var(--gold-bright);font-weight:600;font-size:13px} .svc.star .esp{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#8fa8cf;text-transform:uppercase} @media(max-width:960px){.svc-grid{grid-template-columns:1fr 1fr}.svc.star{grid-column:auto}} /* ── why + reviews (navy band) ─────────────────────────────── */ .voices{background:linear-gradient(180deg,var(--navy-deep),var(--navy-ink));color:#fff;padding:74px 0} .voices .eyebrow{color:var(--gold-bright)} .voices h2{color:#fff;font-size:clamp(30px,3.2vw,44px);margin-top:20px} .why{list-style:none;display:flex;flex-direction:column;gap:4px} .why li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:15px;color:#dce6f5} .why li:last-child{border-bottom:0} .why svg{flex:0 0 20px;stroke:var(--gold-bright);fill:none;stroke-width:2;margin-top:3px} .why small{display:block;color:#8fa5c9;font-size:12.5px;margin-top:2px} .rev-feature{background:rgba(255,255,255,.05);border:1px solid rgba(220,183,94,.35);border-radius:8px;padding:40px 44px;position:relative} .rev-feature .q{position:absolute;top:-24px;left:36px;font-family:var(--serif);font-size:110px;line-height:1;color:var(--gold);opacity:.9} .stars{color:var(--gold-bright);letter-spacing:4px;font-size:15px;margin-bottom:18px} .rev-feature blockquote{font-family:var(--serif);font-size:clamp(18px,1.7vw,22px);font-weight:400;line-height:1.6;color:#f2f6fc} .rev-feature cite{display:block;margin-top:22px;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-bright)} .rev-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px;align-items:start} .rev-mini{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:20px 20px 18px} .rev-mini .stars{font-size:11px;margin-bottom:10px;letter-spacing:2px} .rev-mini p{font-size:12.5px;color:#c3d2ea;line-height:1.6} .rev-mini cite{display:block;margin-top:12px;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#9db4da} .rev-link{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:13.5px;font-weight:600;color:var(--gold-bright)} .rev-link:hover{color:#fff} /* ── referral band ─────────────────────────────── */ .referral{background:var(--cream);border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);padding:54px 0} .referral .wrap{display:grid;grid-template-columns:1.2fr auto 1fr;gap:44px;align-items:center} .referral h3{font-size:24px} .referral p{font-size:13.5px;color:var(--ink-soft);margin-top:6px} .referral .fax{text-align:right;font-size:14px;color:var(--ink)} .referral .fax b{font-family:var(--serif);font-size:20px;color:var(--navy);display:block;margin-bottom:4px} .referral .fax span{font-size:12.5px;color:var(--ink-soft)} @media(max-width:960px){.referral .wrap{grid-template-columns:1fr;text-align:center}.referral .fax{text-align:center}} /* ── final cta ─────────────────────────────── */ .finale{position:relative;background:var(--navy-deep);color:#fff;padding:120px 0;text-align:center;overflow:hidden} .finale::before{content:"";position:absolute;inset:0;background:url('hero-lobby-v3.jpg') center/cover;opacity:.14} .finale .wrap{position:relative} .finale h2{color:#fff;font-size:clamp(32px,3.6vw,52px);max-width:20ch;margin:22px auto 18px} .finale h2 em{font-style:normal;color:var(--gold-bright)} .finale p{color:#b9c9e4;max-width:52ch;margin:0 auto;font-weight:300} .finale .cta{display:flex;gap:16px;justify-content:center;margin-top:40px;flex-wrap:wrap} .finale .eyebrow{justify-content:center} .finale .eyebrow::after{content:"";width:34px;height:1px;background:var(--gold)} .finale .phone{display:inline-block;margin-top:48px;font-family:var(--serif);font-size:26px;color:#fff;letter-spacing:.02em} /* NO mailto: ANYWHERE ON THIS SITE. Dustin, 2026-09-08: "it shouldn't be a working mailto link". A mailto is unreliable in exactly the way the client hit himself, a blank compose window on any machine with no mail handler registered, and a link that appears broken is worse than no link. The address is published as selectable TEXT instead, so a visitor copies it into whatever mail they actually use. Do not turn these back into links. */ .finale .mail{display:block;margin-top:10px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--gold-bright);user-select:all} .foot-main .foot-brand-in .footmail{color:var(--navy);font-weight:500;user-select:all} .finale .phone:hover{color:var(--gold-bright)} /* ── motion details ─────────────────────────────── */ .cred svg{transition:transform .5s cubic-bezier(.2,.6,.2,1)} .cred:hover svg{transform:translateY(-3px) scale(1.08)} .svc{transition:transform .35s,box-shadow .35s,border-color .35s} .svc svg{transition:stroke .35s,transform .5s cubic-bezier(.2,.6,.2,1)} .svc:hover svg{stroke:var(--gold);transform:scale(1.12) rotate(-4deg)} .svc.star{animation:starGlow 4.5s ease-in-out infinite alternate} @keyframes starGlow{from{box-shadow:0 0 0 rgba(220,183,94,0)}to{box-shadow:0 22px 48px -16px rgba(220,183,94,.4)}} .svc.star .tag{animation:tagPulse 4.5s ease-in-out infinite alternate} @keyframes tagPulse{from{box-shadow:0 0 0 0 rgba(220,183,94,.45)}to{box-shadow:0 0 0 7px rgba(220,183,94,0)}} .why li.reveal{transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)} .why li.in svg path{stroke-dasharray:26;animation:draw .55s ease .35s} @keyframes draw{from{stroke-dashoffset:26}to{stroke-dashoffset:0}} .reveal.in .stars{animation:starsIn .8s cubic-bezier(.2,.6,.2,1) .3s} @keyframes starsIn{from{opacity:0;letter-spacing:16px;transform:translateX(-6px)}to{opacity:1;letter-spacing:4px;transform:none}} .rev-mini{transition:transform .35s,border-color .35s,background .35s} .rev-mini:hover{transform:translateY(-4px);border-color:rgba(220,183,94,.45);background:rgba(255,255,255,.07)} .rev-feature .q{opacity:.9} .reveal.in .rev-feature .q{animation:qIn 1s ease .4s} @keyframes qIn{from{opacity:0;transform:translateY(12px)}to{opacity:.9;transform:none}} .story-card{transition:box-shadow .5s,transform .5s} .story-card:hover{transform:translateY(-4px);box-shadow:0 34px 64px -30px rgba(11,30,64,.45)} .btn{position:relative;overflow:hidden} .btn-gold::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease} .btn-gold:hover::after{left:130%} .finale::after{content:"";position:absolute;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(220,183,94,.14),transparent 65%);top:-260px;right:-160px;animation:orb 12s ease-in-out infinite alternate;pointer-events:none} @keyframes orb{from{transform:translate(0,0) scale(1)}to{transform:translate(-70px,50px) scale(1.15)}} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .reveal,.hero h1 .hl,.doc{opacity:1!important;transform:none!important;filter:none!important} .clarify{background-size:100% 2px!important} } /* ── footer ─────────────────────────────── */ /* 15px, not 13px. The audience of an eye clinic is selected for impaired vision, so the footer does not get the usual small-print treatment. Everything below scales from this. */ footer{background:var(--navy-ink);color:#93a7c9;font-size:17px;position:relative;overflow:hidden} /* THE FOOTER RUNS WIDER THAN THE REST OF THE PAGE, deliberately, and it is what makes the pane read as a third rather than a half. The pane's width is (page side margin) + column one + 20px. At 1865 the side margin against a 1240 wrap is 344px, more than the column itself, so narrowing the column shrinks the LOGO without shrinking the pane and just leaves emptier white. Widening the footer's own wrap attacks the margin instead: it shrinks the pane, grows the logo, and spreads the link columns into the dead space on the right, all at once. */ /* The footer runs EDGE TO EDGE with fluid padding, not on the site's 1240 wrap. The pane bleeds to the left edge, so anything that stops at a centred wrap leaves the right side short and the whole footer reads left-heavy: measured 20px between the pane and the first link column against 185px of dead space on the right. Full width with symmetric padding balances it and gives the columns the room the larger type needs. */ footer .wrap{max-width:none;padding:0 clamp(32px,4vw,96px)} .foot-main{display:grid;grid-template-columns:minmax(257px,1.35fr) 1fr 1fr 1fr 1.1fr;gap:40px;padding:70px 0 50px} /* ── footer brand pane ───────────────────────────────────────────────────────── THE RIGHT EDGE IS CONSTRAINED BY THE GRID GAP, WHICH IS 40px. An earlier version used right:-118px and shipped covering the whole left edge of the "Quick Links" column by 78px. It passed review because the check asked "does the logo clear the fade", which is a proxy. The property is "does the pane clear the next column". Assert paneRight < column2Left. Measured after the fix: the pane clears column two by 20px at every width, and the tightest case for the logo is the 961px boundary, where it clears the fade by 7px. Both are minima; widening the logo or the fade eats them. Zubin asked for the full-colour logo in the footer. On navy that is not possible: the wordmark is #001C68 on #081630, measured at 1.17:1, invisible. Rather than recolour the logo, the GROUND changes. The first column sits on a light pane that bleeds to the viewport's left edge and dissolves into the navy on its right, so the lockup ships exactly as supplied, at 14.48:1, with no new asset and nothing hand-edited. The pane is a pseudo-element on .foot-brand, so it tracks that column's height by itself. --pad must match the .wrap padding at each breakpoint (32px, 20px under 720) or the pane stops short of the viewport edge and reads as a floating box instead of a panel. footer carries overflow:hidden because 100vw includes the scrollbar in some browsers, which would otherwise push the pane past the left edge and scroll the page sideways. */ /* --bleed is simply the footer's padding now, because the wrap is full width. --pane-in is how far the pane reaches INTO the row, set explicitly rather than derived from the column, which is what lets the link columns move right without the pane following them. It is capped at (column - 40px) so the pane can never reach the gap, let alone column two. */ /* 2026-09-15: the pane used to stop 40px short of its column, and the text block was as wide as the COLUMN while the white area is narrower, so the email and address ran 17-33px into the fade at every width from 961 to 1440 (Dustin caught it). The property is "every text line ends before the fade starts", not "the logo clears the fade". Now the pane reaches the column edge (still 40px of grid gap before column two), and .foot-brand-in is sized to the solid white area minus --m on each side, so text wraps inside it. The email line used to hold the brand column open at 257px (its min-content); once the text could wrap, the column collapsed and the link columns widened. minmax(257px,...) on .foot-main puts that floor back explicitly, so the link columns keep the widths they had. */ .foot-brand{position:relative;--bleed:clamp(32px,4vw,96px);--pane-in:min(340px,100%);--m:16px} .foot-brand::before{ content:"";position:absolute;z-index:0; top:-70px;bottom:-50px; left:calc(-1 * var(--bleed)); right:calc(100% - var(--pane-in)); background:linear-gradient(90deg,var(--ivory) 0,var(--ivory) calc(100% - 32px),rgba(250,248,243,0) 100%)} /* Centre the brand block in the PANE, not in its grid column. The pane's left edge is pinned to the viewport while the column is pinned to the centred wrap, so the two centres diverge as the window widens: measured 123px out at 1920, which left a large empty ivory area to the left of the logo. The pane spans [colLeft - bleed, colRight + 118], so the column's centre sits exactly ((bleed - 20px)/2) to the right of the pane's centre. Cancel that and it is centred at every width. Reset to none under 960, where the pane goes full width and is symmetric already. */ .foot-brand-in{position:relative;z-index:1;text-align:center; width:calc(var(--bleed) + var(--pane-in) - 32px - 2 * var(--m)); transform:translateX(calc(var(--m) - var(--bleed)))} /* Sized by WIDTH, never by height. A fixed height plus max-width is what silently squashed the old footer logo 27%: the width got capped and the height did not follow. height:auto keeps the 6.358 ratio at every column width. */ /* Three bounds, and the third is the one that matters. 70% keeps it proportionate to the column, 275px caps it on big screens, and the calc bounds it by the PANE'S SOLID WIDTH: pane is (bleed + pane-in), minus 2x the 32px fade and a 13px margin each side. Without that third term the logo is sized off the column while being centred in the pane, and at 965px it came within 6px of sitting in the fade, where the navy shows through the wordmark. */ .foot-brand-in .foot-logo{width:min(70%,275px,calc(var(--bleed) + var(--pane-in) - 90px)); height:auto;margin:0 auto 22px;display:block} /* The navy footer palette inverts on the pane. Gold text is only 2.49:1 on ivory, so the Espanol badge keeps the gold border and takes navy text. */ .foot-main .foot-brand-in .addr{line-height:1.85;font-size:16px;color:var(--ink-soft)} .foot-main .foot-brand-in a{color:var(--navy);font-weight:500} .foot-main .foot-brand-in a:hover{color:var(--gold)} .foot-main .foot-brand-in .esp{color:var(--navy);border-color:var(--gold)} .foot-main h3{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:22px} .foot-main ul{list-style:none;display:flex;flex-direction:column;gap:15px} .foot-main a:hover{color:#fff} .foot-main .addr{line-height:1.8} .foot-hours b{color:#dce6f5;font-weight:600} .foot-hours .nw{white-space:nowrap} .esp{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright);border:1px solid var(--gold-soft);padding:7px 12px;border-radius:3px} .foot-bar{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14.5px} /* The Narrows credit, strategy/Brand-Footer-Credit.md. Selector carries footer .foot-bar so it beats any footer link rule: in a flex row an `inline` anchor blockifies and align-items stops working, which is the greatcopiers trap recorded in that file. Dark-ground colours, measured on #081630. */ footer .foot-bar a.nwc{display:inline-flex;align-items:center;gap:9px;color:#cfd8e4;padding:4px 0} footer .foot-bar a.nwc svg{width:26px;height:auto;flex:none} footer .foot-bar a.nwc .lo{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:none} footer .foot-bar a.nwc .lo b{color:#E8579B;font-weight:700} footer .foot-bar a.nwc:hover{color:#fff} @media(max-width:960px){.foot-main{grid-template-columns:1fr 1fr}} @media(max-width:960px){ /* The pane becomes a full-width band across the top of the footer. It ends on a HARD EDGE with the gold rule the page heads use, not a fade: a downward fade from ivory to navy passes through grey and read as a smudge on phones (Dustin chose the hard edge, 2026-09-15). */ .foot-brand{grid-column:1 / -1} .foot-brand-in{transform:none;width:auto} .foot-brand{padding-bottom:30px} .foot-brand::before{ left:calc(-1 * var(--bleed));right:calc(-1 * var(--bleed));bottom:0;background:var(--ivory)} .foot-brand::after{content:"";position:absolute;z-index:1;left:calc(-1 * var(--bleed));right:calc(-1 * var(--bleed)); bottom:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold-bright) 55%,var(--gold) 75%,transparent)} } @media(max-width:720px){ .foot-brand{--pad:20px} .foot-brand::before{top:-40px} } /* ── pro polish ── */ ::selection{background:var(--gold);color:#fff} a:focus-visible,.btn:focus-visible,summary:focus-visible,.burger:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px} section[id]{scroll-margin-top:96px} .nav.scrolled{box-shadow:0 10px 30px -14px rgba(11,30,64,.18)} .skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 18px;z-index:100;font-size:13px} .skip:focus{left:12px;top:12px} .faq{background:var(--ivory);padding:92px 0;border-top:1px solid var(--line)} .faq .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start} .faq h2{font-size:clamp(28px,3vw,40px);margin-top:20px} .faq p.sub{color:var(--ink-soft);font-size:15px;margin-top:14px;max-width:38ch;line-height:1.7} details.qa{border-bottom:1px solid var(--line)} details.qa:first-of-type{border-top:1px solid var(--line)} details.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-family:var(--serif);font-size:18px;font-weight:500;color:var(--navy-deep);transition:color .25s} details.qa summary::-webkit-details-marker{display:none} details.qa summary::after{content:"+";font-family:var(--sans);font-weight:400;font-size:24px;color:var(--gold);transition:transform .3s;flex:0 0 auto} details.qa[open] summary::after{transform:rotate(45deg)} details.qa summary:hover{color:var(--gold)} details.qa .a{padding:0 4px 24px;font-size:14.5px;color:var(--ink-soft);line-height:1.75;max-width:62ch} details.qa .a a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--gold-soft)} details.qa .a a:hover{color:var(--gold)} .emg{margin-top:36px;font-size:12.5px;color:#8fa5c9;line-height:1.7;max-width:56ch;margin-left:auto;margin-right:auto} .emg b{color:#dce6f5;font-weight:600} .callfab{display:none;position:fixed;right:18px;bottom:18px;z-index:60;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#a9852f);box-shadow:0 14px 30px -8px rgba(193,154,63,.6);align-items:center;justify-content:center;animation:fabIn .6s cubic-bezier(.2,.6,.2,1) 1.4s both} .callfab svg{stroke:#fff;fill:none;stroke-width:1.8;width:26px;height:26px} @keyframes fabIn{from{opacity:0;transform:translateY(20px) scale(.8)}to{opacity:1;transform:none}} @media(max-width:960px){.callfab{display:flex}.faq .wrap{grid-template-columns:1fr;gap:36px}.faq{padding:64px 0}} /* ── responsive (source-order critical: keep last) ── */ @media(max-width:1024px){ .nav ul{gap:18px;font-size:12.5px} .nav .btn{padding:11px 14px;font-size:12px} .hero .wrap{gap:40px} } @media(max-width:960px){ .hero .wrap{grid-template-columns:1fr;padding:64px 32px 80px} .hero-duo{max-width:560px} .nav .btn{display:none} .burger{display:flex} .nav-cta-m{display:list-item} .nav ul{position:absolute;top:82px;left:0;right:0;background:#fff;display:flex;flex-direction:column;gap:0;padding:0 32px;border-bottom:2px solid var(--gold);box-shadow:0 30px 44px -22px rgba(11,30,64,.3);max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.6,.2,1),padding .45s} .nav ul li{border-top:1px solid var(--line)} .nav ul a{display:block;padding:15px 0;font-size:15px} .navtoggle:checked ~ ul{max-height:520px;padding:8px 32px 18px} .navtoggle:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .navtoggle:checked ~ .burger span:nth-child(2){opacity:0} .navtoggle:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } @media(max-width:720px){ .wrap{padding:0 20px} .topbar .wrap{height:auto;padding:8px 20px;flex-direction:column;gap:4px;align-items:flex-start;font-size:11.5px} .nav .wrap{height:68px;padding:0 20px} .nav img.logo{height:38px} .nav ul{top:68px;padding:0 20px} .navtoggle:checked ~ ul{padding:6px 20px 14px} .hero .wrap{padding:52px 20px 66px;gap:48px} .hero h1{font-size:clamp(34px,9vw,44px)} .hero p.lede{font-size:15.5px} .hero .cta .btn{width:100%;justify-content:center;padding:16px 20px} .hero-duo{gap:14px;max-width:100%} .doc .plate{padding:11px 10px 10px;width:92%} .doc .plate b{font-size:13.5px} .doc .plate span{font-size:8px;letter-spacing:.14em} .creds .wrap{grid-template-columns:1fr 1fr;padding:0 20px} .story{padding:64px 0 52px} .story-card .body{padding:26px 24px 30px} .bridge{margin-top:52px} .services{padding:64px 0} .services .head{margin-bottom:38px} .svc-grid{grid-template-columns:1fr 1fr;gap:12px} .svc{padding:20px 16px} .voices{padding:52px 0} .rev-feature{padding:30px 24px} .rev-row{grid-template-columns:1fr 1fr;gap:10px} .referral{padding:40px 0} .finale{padding:72px 0} .foot-main{grid-template-columns:1fr 1fr;gap:32px;padding:40px 0 40px} .foot-bar{flex-direction:column;gap:8px} } @media(max-width:480px){ .svc-grid{grid-template-columns:1fr} .svc.star{grid-column:auto} .rev-row{grid-template-columns:1fr} /* Two columns of links on phones too: one column made the footer 1799px tall at 375. The footer uses the site's 20px phone padding (it kept 32px) and a 16px gap, giving 159px columns at 375, so "NPI Registry Listing" (157px at 17px) fits. Hours times break only at the dash (.nw pieces). */ footer .wrap{padding:0 20px} .foot-main{grid-template-columns:1fr 1fr;column-gap:16px} .hero-duo{grid-template-columns:1fr 1fr;gap:10px} .doc .frame{border-radius:90px 90px 5px 5px} .doc .frame::after{border-radius:90px 90px 5px 5px} } /* HERO: one photograph of both physicians, with a credential callout each. Replaces the two arch portraits. The group shot cannot also be the background without putting the same two men in front of and behind themselves. */ .hero-duo{display:block!important} .hero-duo .duo{position:relative;margin:0;border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)} .hero-duo .duo::after{content:"";position:absolute;inset:0;border:1px solid rgba(220,183,94,.5);border-radius:10px;pointer-events:none} .hero-duo .duo img{width:100%;display:block;aspect-ratio:16/9.4;object-fit:cover;object-position:center 22%} .hero-duo .duo-plates{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:-24px 16px 0} .hero-duo .duo-plates .plate{position:relative;margin:0;width:auto;background:linear-gradient(160deg,#10294f,var(--navy-ink));border:1px solid var(--gold-soft);border-radius:4px;padding:14px 16px 13px;text-align:center;box-shadow:0 18px 34px -14px rgba(0,0,0,.65)} .hero-duo .duo-plates .plate b{display:block;font-family:var(--serif);font-weight:500;font-size:16.5px;color:#fff;letter-spacing:.01em} .hero-duo .duo-plates .plate span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-bright);margin-top:5px;line-height:1.6} @media(max-width:560px){ .hero-duo .duo-plates .plate{padding:11px 8px 10px} .hero-duo .duo-plates .plate b{font-size:13px} .hero-duo .duo-plates .plate span{font-size:8px;letter-spacing:.12em} } @media(max-width:560px){ .hero-duo .duo-plates{gap:8px;margin:-18px 8px 0} .hero-duo .duo img{aspect-ratio:16/11} } /* BBB rating, linked to the primary source. It is a RATING, not accreditation: BBB rates non-accredited businesses too, and this one is not accredited, so the wording must never imply an accreditation seal. Verified at bbb.org 2026-08-07. */ .creds .wrap{grid-template-columns:repeat(5,1fr)} @media(max-width:900px){ .creds .wrap{grid-template-columns:1fr 1fr} /* 5 items in a 2-col grid leaves an orphan; let the verify link own the last row */ .creds .cred-link{grid-column:1/-1;justify-content:center} } .creds .cred-link{text-decoration:none;color:inherit} .creds .cred-link:hover b{color:var(--gold-bright)} /* ── reviews, relaid out 2026-08-25 ───────────────────────────────────────── The two-column version put a 327px list beside an 839px stack of reviews, so 512px of the left column was empty and the section ran 1230px tall at 1280. Measured, not eyeballed. Everything is full width now and stacks down the page instead: heading, a four-across strip of reasons, then the reviews. Nothing sits beside a short column, so there is nowhere for dead space to collect, and the heading gets the full 1176px it needs to hold one line. */ .voices .why{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:34px; border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)} .voices .why li{border-bottom:0;border-left:1px solid rgba(255,255,255,.09); padding:18px 22px;align-items:flex-start} .voices .why li:first-child{border-left:0;padding-left:0} .voices .why small{margin-top:3px} .voices-reviews{margin-top:30px} /* The featured quote now has the full width, so it needs fewer lines and less padding to say the same thing. Shrinking it here is what pays for the height the strip above costs. */ .voices .rev-feature{padding:30px 36px 26px} .voices .rev-feature blockquote{font-size:clamp(17px,1.45vw,19.5px);line-height:1.55} .voices .rev-feature cite{margin-top:16px} .voices .rev-feature .q{top:-20px;left:28px;font-size:88px} /* Four across at full width gives each card ~285px, which is wider than the 159px they had in the old right column and lets the longest quote settle in fewer lines. */ /* align-items:start let each card size to its own text, which was honest and looked ragged: four cards of four different heights in one row. Stretched, they read as a set. The cost is the gap under the shorter quotes, which is cheaper than the untidiness. */ .voices .rev-row{grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px;align-items:stretch} .voices .rev-mini{display:flex;flex-direction:column;padding:18px 18px 16px} .voices .rev-link{margin-top:22px} @media(max-width:1000px){ .voices .why{grid-template-columns:repeat(2,1fr)} .voices .why li{border-left:0;padding-left:0;padding-right:18px} .voices .why li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.09)} .voices .rev-row{grid-template-columns:repeat(2,1fr)} } /* Phones are where a tall band costs the most: every empty stripe is another thumb flick between the visitor and the thing that converts. The display sizes that earn their space on a 1176px row do not earn it on a 390px one, so they come down. */ @media(max-width:620px){ .voices{padding:46px 0} .voices h2{font-size:clamp(26px,7.4vw,34px);margin-top:14px} .voices .why{grid-template-columns:1fr;margin-top:24px} .voices .why li{padding:12px 0} .voices .why li+li{border-top:1px solid rgba(255,255,255,.09)} .voices .why small{font-size:12px;line-height:1.5} .voices-reviews{margin-top:22px} .voices .rev-feature{padding:24px 22px 20px} .voices .rev-feature blockquote{font-size:16.5px;line-height:1.5} .voices .rev-feature .q{font-size:64px;top:-14px;left:18px} .voices .rev-feature cite{margin-top:14px} .voices .rev-row{grid-template-columns:1fr;gap:10px} .voices .rev-mini{padding:15px 16px 14px} .voices .rev-mini p{font-size:13px;line-height:1.55} .voices .rev-link{margin-top:18px} } /* HERO v2. Dustin, 2026-08-07: "incorporate it more into the hero holistically...blur background more if you need to for the text to pop over it." The lobby photograph IS the hero now, not a card sitting on top of one. It is anchored RIGHT so the physicians land under the right-hand column and the reception desk fills the left, and the veil is heavier on the left so the headline reads against flat navy rather than against detail. The photo stays sharp on the right; blurring it would waste the only real environmental image we have. */ .hero-bg{background-image:url('hero-lobby-v3.jpg')!important;background-position:75% center!important;opacity:.95!important;animation:none!important} .hero-veil{background:linear-gradient(100deg,rgba(8,22,48,.97) 0%,rgba(9,25,54,.95) 26%,rgba(10,28,60,.78) 44%,rgba(11,30,64,.34) 60%,rgba(8,22,48,.30) 100%)!important} /* a soft vertical wash so the callouts at the bottom keep their contrast */ .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,rgba(8,22,48,0),rgba(8,22,48,.55));pointer-events:none} .hero-duo{align-self:end} /* The right column used to hold a photo card; now it only holds the two callouts, so the headline gets the room. At 1.05fr the h1 broke "Exceptional Eye Care." across two lines. */ @media(min-width:961px){ .hero .wrap{grid-template-columns:1.25fr .75fr} } /* 1.45/.55 fixed the headline but squeezed the callouts until both names broke onto two lines. 1.25/.75 clears "Exceptional Eye Care." at 64px AND leaves each plate wide enough for its name on one line. */ .hero-duo .duo-plates .plate b{white-space:nowrap} .hero-duo .duo-plates{margin:0} @media(max-width:900px){ /* A landscape photo in a tall narrow hero cover-crops hard: at 390px it zoomed into Dr. Shah's face directly behind the headline. Pull the framing up to the heads and weight the veil so the image reads as atmosphere rather than a portrait. */ /* Show the LOBBY, not a cropped face. At 390px any framing of the physicians becomes a head-and-shoulders crop sitting directly behind the headline. The reception side of the same photograph is quiet and still says "our practice". */ /* 37%, not 16%. Same intent, one flaw removed: at 16% the window opens on source x~203-602, and the logo PAINTED ON THE WALL occupies x=127-446, so a half-cropped "...Eye Center" floated behind the body copy. Measured, not eyeballed: at 390px the image renders 1635px wide in a 390px box, so X% maps to source x = X% * 1245 / 0.9787. 37% opens at x~471, clearing the painted logo by ~25px and stopping short of Dr. Clement's shoulder. The ken-burns scale(1.07) only crops tighter toward centre, so it cannot pull the logo back in. If the hero is replaced again, re-measure: build-og-card.py's wall_logo_edge() returns the number this depends on. SCOPE, measured across the whole band this rule covers, not just at 390: 360px window 487-842 clears by 41px 390px window 471-869 clears by 25px 620px window 375-1032 does NOT clear, logo enters by 71px 899px window 235-1270 does NOT clear, logo enters by 211px Above ~500px the window grows faster than any single percentage can outrun, so no one value clears the logo across 0-900. Left as is on purpose: at 620+ the veil is heavy and the wordmark reads as faint atmosphere rather than the half-cropped word that sat behind the body copy on a phone. That is the case this fix existed to kill. Do not record the tablet band as verified clean; it is knowingly accepted. */ .hero-bg{background-position:37% 40%!important;opacity:.62!important} .hero-veil{background:linear-gradient(180deg,rgba(8,22,48,.90) 0%,rgba(9,25,54,.88) 40%,rgba(10,28,60,.82) 70%,rgba(8,22,48,.88) 100%)!important} /* the call FAB was sitting on top of the second callout */ .hero .wrap{padding-bottom:132px} /* stack the callouts so the fixed call button cannot clip a credential line */ .hero-duo .duo-plates{grid-template-columns:1fr;gap:10px} } /* NAV. Reported 2026-08-07: items wrapping onto two lines and the CTA overlapping "Contact" at ~1424px. Two causes. Nothing stopped a link breaking mid-item, so "About Us" and "Patient Forms" each became two lines and blew the bar's height; and the burger only appeared below 960px, so 8 links plus a button had to fit widths where they cannot. nowrap keeps each item whole, and the burger now takes over at 1100px. */ .nav ul a{white-space:nowrap} .nav .wrap{gap:20px} .nav ul{flex-wrap:nowrap} @media(max-width:1100px){ .nav .btn{display:none} .burger{display:flex} .nav ul{position:absolute;left:0;right:0;top:82px;flex-direction:column;gap:0;background:#fff; border-top:1px solid var(--line);padding:0 32px;display:none} .nav ul.open{display:flex} .nav-cta-m{display:list-item} } @media(min-width:1101px) and (max-width:1320px){ .nav ul{gap:20px;font-size:12.5px} .nav .btn{padding:10px 14px;font-size:12px} } /* ── FINAL POLISH, Dustin 2026-08-07 ──────────────────────────────────────────────── "dim in terms of viewability" on the hero buttons and the doctor callouts, the nav CTA wrapping to two lines, and the logo tagline being unreadable. */ /* 1. LOGO: back to the upscaled artwork WITH the tagline, rebuilt as a horizontal lockup. Stacked, the icon eats 60% of the height and crushes the tagline to ~4px at any sane header size. Side by side, the tagline gets ~10px at a 50px header, which is why the upscale was made in the first place. The lockup is 6.35:1, so the nav has to give way: burger now takes over at 1280 rather than 1100. */ .nav img.logo{height:56px} /* tagline lands ~12px, which is the point of the upscale */ @media(max-width:1280px){ .nav .btn{display:none} .burger{display:flex} .nav ul{position:absolute;left:0;right:0;top:82px;flex-direction:column;gap:0;background:#fff; border-top:1px solid var(--line);padding:0 32px;display:none} .nav ul.open{display:flex} .nav-cta-m{display:list-item} } /* THE HEADER, SOLVED PROPERLY RATHER THAN ONE WIDTH AT A TIME. Two separate faults were stacked here. 1. The logo was being SQUASHED. Its is a flex item that shrinks, and max-width:100% let the image compress instead of overflow: a 6.36:1 lockup was rendering at 3.68:1, the wordmark and tagline horizontally crushed to 58%. That is why it read as "bad" rather than merely tight. flex-shrink:0 and max-width:none fix the distortion. 2. .nav .wrap is capped at max-width:1240px, so a wider monitor NEVER buys more room. Undistorted, the logo needs 356px at a 56px height (the size where the tagline is legible, which is the entire reason for the new artwork). 356 + 578 of links + 112 of gaps + 104 of padding leaves 90px spare; adding the 142px CTA overflows at every width. So the CTA leaves the nav for good. It is still on the page three times: the gold hero button, "Call us today" in the top bar, and inside the mobile menu. */ .nav .wrap > a:first-child{flex:0 0 auto} .nav img.logo{max-width:none} @media(min-width:1281px){ .nav ul{gap:16px;font-size:12.5px} .nav > .wrap > .btn{display:none} } /* 2. HERO BUTTONS: they sat on a photograph, so a translucent ghost and a mid-gold fill both lost contrast. Solid brighter gold with a real shadow, and the ghost gets a glass backing instead of pure transparency. */ .hero .btn-gold{background:linear-gradient(135deg,#e0bb62,#c19a3f);color:#1a1205;font-weight:700; box-shadow:0 10px 26px -8px rgba(0,0,0,.55),0 0 0 1px rgba(224,187,98,.5)} .hero .btn-gold:hover{background:linear-gradient(135deg,#eccb7c,#cfa848)} .hero .btn-ghost{border:1.5px solid rgba(255,255,255,.85);color:#fff;font-weight:600; background:rgba(8,22,48,.42);backdrop-filter:blur(3px)} .hero .btn-ghost:hover{background:rgba(8,22,48,.62);border-color:#fff} /* 3. CALLOUT PLATES: same problem, sitting over a photo. Deeper, more opaque ground and a brighter gold edge so the names read as labels rather than watermarks. */ .hero-duo .duo-plates .plate{background:linear-gradient(160deg,rgba(12,32,64,.94),rgba(8,22,48,.96)); border:1px solid rgba(220,183,94,.75);box-shadow:0 20px 40px -14px rgba(0,0,0,.8); backdrop-filter:blur(4px)} .hero-duo .duo-plates .plate b{color:#fff;font-size:17px} .hero-duo .duo-plates .plate span{color:#e8c880} /* 4. NAV CTA: it was wrapping to two lines and growing the bar. One line, wider. */ .nav .btn{white-space:nowrap;padding:12px 24px} /* The 56px rule above is appended after the original mobile rule, so it was overriding the 38px phone size and the lockup nearly collided with the burger. Restore a phone size; the tagline still reads on desktop, and on mobile it is carried by the hero eyebrow anyway. */ @media(max-width:760px){ .nav img.logo{height:36px} } @media(max-width:400px){ .nav img.logo{height:32px} } /* MOBILE FIXES, reported 2026-08-07. 1. "A Vision for the Future." rendered sharp then resolved soft. Not an actual blur: the keyframes end at blur(0), but ANY filter keeps the element on its own GPU layer, and on mobile that layer is frequently rasterised below device pixel ratio, so the text stays permanently fuzzy. The fix is to remove the filter entirely once the animation ends, which drops the compositing layer and returns the text to normal rendering. Done in JS below, because a keyframe cannot un-set a property. 2. The referral button is a grid item, so it stretches to the full column, and .btn sets display:inline-flex with no justify-content: the label sat at flex-start, i.e. left. */ @media(max-width:900px){ .referral .btn{justify-content:center;width:100%} .referral .wrap > div,.referral .fax{text-align:center} } /* ── MOBILE HEADER: icon | centred wordmark | burger ───────────────────────────── Dustin, 2026-08-07. The single lockup left everything hugging the left edge and the tagline shrank with it. Split into two images so the wordmark can be centred in the bar and sized independently of the mark. Desktop keeps the one-piece lockup. */ .brand{display:flex;align-items:center} .logo-icon,.logo-word{display:none} @media(max-width:1280px){ /* space-between keeps the burger pinned right; the brand stays content-width and the wordmark is out of flow, so the two never fight for space. flex-start plus a growing brand put the burger at x=104, on top of the wordmark. */ .nav .wrap{position:relative;justify-content:space-between} .brand{flex:0 0 auto;align-items:center;gap:0} .logo{display:none} .logo-icon{display:block;height:44px;width:auto;flex:0 0 auto} /* Centre against the BAR, not against the space left over after the icon. margin:auto inside the brand only centred it in the remainder, which still read as left-aligned. Absolute centring is independent of how wide the mark or the burger happen to be; max-width keeps it clear of both. */ .logo-word{display:block;position:absolute;left:50%;transform:translateX(-50%); height:auto;width:auto;max-height:40px;max-width:min(210px,52vw)} } @media(max-width:420px){ .logo-icon{height:38px} .logo-word{max-height:32px;max-width:48vw} } /* ── HEADLINE BLUR: keep the animation, drop the LAYER it leaves behind ───────── The blur-to-focus is the concept on an eye practice's page, so it stays. The bug is not the animation, it is what survives it: fill-mode forwards leaves filter:blur(0) applied, and an element holding ANY filter keeps its own GPU layer, which iOS often rasterises below device pixel ratio. Sharp while animating, soft forever after. The JS below therefore clears the animation AND the filter once it ends, which returns the element to normal text rendering. Reduced-motion users skip the animation entirely. */ @media(prefers-reduced-motion:reduce){ .hero h1 .hl,.clarify,.lede{animation:none!important;filter:none!important;opacity:1!important; transform:none!important} } /* Top bar stacked to two rows on mobile but kept align-items:flex-start, so the hours and the phone hugged the left edge while the header above them is centred. */ @media(max-width:1280px){ .topbar .wrap{align-items:center;text-align:center} .topbar span{justify-content:center;flex-wrap:wrap} } /* ── request-appointment page only ─────────────────────────────── */ .page-head{background:var(--navy-deep);color:#fff;padding:64px 0 72px;position:relative;overflow:hidden} .page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px; background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold-bright) 55%,var(--gold) 75%,transparent)} .page-head .eyebrow{color:var(--gold-bright)} .page-head .eyebrow::before{background:var(--gold-bright)} .page-head h1{color:#fff;font-size:clamp(34px,4vw,52px);font-weight:400;margin:22px 0 18px} .page-head p{color:#c8d6ee;max-width:60ch;font-size:17px;line-height:1.7} .ra-body{padding:56px 0 80px;background:var(--ivory)} .ra-grid{display:grid;grid-template-columns:1.55fr .95fr;gap:44px;align-items:start} /* Grid items default to min-width:auto, so any unbreakable string (a long form URL, a pasted ID) blows the track wider than the viewport and scrolls the whole page sideways. Caught at 390px on 2026-09-07. */ .ra-grid > *{min-width:0} .ra-form{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden; box-shadow:0 30px 60px -40px rgba(11,30,64,.45)} .ra-form-head{background:linear-gradient(160deg,var(--navy),var(--navy-deep));color:#fff;padding:30px 34px 30px;position:relative} .ra-form-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px; background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold-bright) 55%,var(--gold) 75%,transparent)} .ra-form-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-bright)} .ra-form-head h2{color:#fff;font-weight:400;font-size:clamp(26px,2.6vw,32px);margin:8px 0 22px} .ra-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .ra-steps li{display:flex;align-items:center;gap:12px} .ra-steps b{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center; font-family:var(--serif);font-weight:500;font-size:16px;color:var(--gold-bright)} .ra-steps span{font-size:15px;line-height:1.35;color:#c8d6ee} .ra-frame{padding:18px 18px 0} .ra-form-foot{margin:0;padding:16px 26px 18px;border-top:1px solid var(--line);background:var(--sky-soft); font-size:13.5px;color:var(--ink-soft)} .ra-form-foot .ra-form-note{font-size:15px;line-height:1.65;color:var(--navy-deep);margin-bottom:8px} /* Sized to Dr. Shah's form. 2026-09-16: four questions, 980px. 2026-09-17: he added a fifth (Reason for visit) and 980px clipped Google's footer, so 1140px. Re-measure whenever the question count changes. */ .ra-form iframe{width:100%;min-height:1140px;border:0;display:block;border-radius:2px} .ra-aside{display:flex;flex-direction:column;gap:22px;position:sticky;top:104px} .ra-card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:26px 24px} .ra-card h2{font-size:19px;margin-bottom:14px} .ra-card p{font-size:14.5px;color:var(--ink-soft);line-height:1.75} .ra-card .tel{display:block;font-family:var(--serif);font-size:26px;color:var(--navy);margin:6px 0 4px} .ra-card .tel:hover{color:var(--gold)} .ra-hours{font-size:14.5px;line-height:1.9;color:var(--ink-soft)} .ra-hours b{color:var(--navy-deep);font-weight:600} .ra-sat{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:10.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-soft); padding:6px 11px;border-radius:3px} .ra-emg{background:var(--sky-soft);border-left:3px solid var(--blue);padding:20px 22px;border-radius:0 3px 3px 0} .ra-emg b{display:block;color:var(--navy-deep);margin-bottom:6px;font-weight:600} .ra-emg p{font-size:14px;color:var(--ink-soft);line-height:1.7} @media(max-width:960px){ .ra-grid{grid-template-columns:1fr;gap:30px} .ra-aside{position:static} .page-head{padding:48px 0 54px} .ra-body{padding:40px 0 60px} .ra-form iframe{min-height:1380px} .ra-form-head{padding:24px 22px 26px} .ra-steps{grid-template-columns:1fr;gap:10px} .ra-frame{padding:10px 8px 0} .ra-form-foot{padding:12px 18px 14px} } /* ── inner pages ─────────────────────────────── */ /* .page-head was .ra-head (request-appointment only) until 2026-09-15; every inner page shares it. */ .prose p{font-size:17px;line-height:1.8;color:var(--ink);margin:0 0 20px} .prose p:last-child{margin-bottom:0} .inner-cta{padding:0 0 88px;text-align:center} .doctors-page .inner-cta{padding-top:8px} .inner-cta .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* about: the practice's story, told through Dr. Clement, closing on the bridge to Dr. Shah */ .about-story{padding:76px 0 8px;background:var(--ivory)} .about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start} .about-photo{margin:0;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#fff; box-shadow:0 24px 50px -30px rgba(11,30,64,.35);position:sticky;top:112px} .about-photo img{width:100%;height:auto;display:block} .about-photo figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);padding:14px 18px} .about-story h2{font-size:clamp(28px,3vw,38px);margin:14px 0 22px} .about-bridge{background:var(--ivory);padding:0 0 72px} .about-bridge .bridge{margin-top:72px} .about-page .inner-cta{background:var(--ivory)} /* The partner paragraph sits quietly under the practice's own story: their page, our credit. Centred in a card because the bridge above it and the buttons below it are both centred, and left-aligned prose between them read as something bolted on (Dustin, 2026-09-21). The heading is set as an eyebrow, not a section title, so the practice's own headings stay the loudest thing on the page. */ .about-credit{background:var(--ivory);padding:16px 0 48px} .credit-card{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:6px; padding:30px 40px 32px;text-align:center;position:relative;overflow:hidden; box-shadow:0 18px 40px -34px rgba(11,30,64,.45)} .credit-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold-bright) 55%,var(--gold) 75%,transparent)} .credit-card h2{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase; color:var(--gold);font-weight:400;margin-bottom:14px} .credit-card p{font-size:16px;line-height:1.75;color:var(--ink-soft);max-width:58ch;margin:0 auto} .credit-card a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--gold-soft)} .credit-card a:hover{color:var(--gold);border-color:var(--gold)} @media(max-width:600px){.credit-card{padding:26px 22px 28px}} /* doctors: legacy tint for Dr. Clement, future tint for Dr. Shah, the pairing the homepage cards set */ .doc-profile{padding:84px 0} .doc-profile.legacy{background:linear-gradient(180deg,#fdfaf3,var(--cream))} .doc-profile.future{background:linear-gradient(180deg,#f7fbff,var(--sky))} .doc-grid{display:grid;grid-template-columns:340px 1fr;gap:60px;align-items:start} .doc-profile.future .doc-grid{grid-template-columns:1fr 340px} .doc-profile.future .doc-photo{order:2} .doc-photo{margin:0;position:sticky;top:112px} .doc-photo img{width:100%;height:auto;aspect-ratio:4/4.7;object-fit:cover;object-position:top;border-radius:6px; border:1px solid var(--line);box-shadow:0 24px 50px -30px rgba(11,30,64,.4);display:block} .doc-profile h2{font-size:clamp(30px,3.3vw,42px);margin:14px 0 10px} .doc-creds{font-family:var(--mono);font-size:12px;letter-spacing:.06em;line-height:1.9;color:var(--navy);margin:0 0 26px} .doc-link{display:inline-flex;gap:8px;margin-top:24px;font-weight:600;font-size:14px;color:var(--navy)} .doc-link:hover{color:var(--gold)} .doctors-page .inner-cta{background:var(--sky)} @media(max-width:900px){ .about-grid,.doc-grid,.doc-profile.future .doc-grid{grid-template-columns:1fr;gap:30px} .doc-profile.future .doc-photo{order:0} .about-photo,.doc-photo{position:static;max-width:420px} .about-story{padding:52px 0 8px} .doc-profile{padding:56px 0} .prose p{font-size:16px} } /* services: Dr. Shah's list; the descriptions are a draft for his review (see the page comment) */ .sv-body{padding:64px 0 56px;background:var(--sky-soft)} .sv-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .sv-item{background:#fff;border:1px solid var(--line);border-radius:6px;padding:30px 30px 32px;scroll-margin-top:130px} .sv-item svg{stroke:var(--navy);fill:none;stroke-width:1.5;width:36px;height:36px;margin-bottom:14px;display:block} .sv-item h2{font-size:23px;margin-bottom:10px} .sv-item p{font-size:16.5px;line-height:1.75;color:var(--ink-soft)} .sv-item p a{color:var(--navy);font-weight:600} .sv-urgent,.sv-item.star{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start} .sv-urgent{background:#fff;border-left:3px solid var(--blue)} .sv-item.star{grid-template-columns:auto 1fr auto;align-items:center;background:linear-gradient(170deg,var(--navy),var(--navy-deep));border-color:var(--gold)} .sv-urgent svg,.sv-item.star svg{margin:0} .sv-item.star svg{stroke:var(--gold-bright)} .sv-item.star h2{color:#fff} .sv-item.star p{color:#c8d6ee} .sv-item.star .tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy-ink);background:var(--gold-bright);padding:5px 9px;border-radius:2px;margin-bottom:12px} .sv-item.star .esp{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#8fa8cf;text-transform:uppercase} .sv-cta{background:var(--sky-soft);padding-bottom:80px} /* pterygium: the flyer's own text, set as HTML beside the flyer */ .pt-body{padding:64px 0 64px;background:var(--ivory)} .page-head .page-head-es{margin-top:6px;font-size:16px;color:#9fb3d6} .pt-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:56px;align-items:start} .pt-grid > *{min-width:0} .pt-section + .pt-section{margin-top:56px} .pt-section h2{font-size:clamp(26px,2.6vw,34px);margin:14px 0 22px} .pt-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px} .pt-compare figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden} .pt-compare img{width:100%;height:auto;display:block} .pt-compare figcaption{padding:18px 22px 22px;border-top:1px solid var(--line)} .pt-compare b{display:block;font-family:var(--serif);font-size:22px;color:var(--navy-deep);font-weight:600} .pt-compare .es{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:4px 0 10px} .pt-compare p{font-size:16.5px;color:var(--ink);line-height:1.55} .pt-compare p[lang=es]{color:var(--ink-soft);font-size:15px;margin-top:4px} .pt-checks{list-style:none;padding:0;margin:0;background:#fff;border:1px solid var(--line);border-radius:6px} .pt-checks li{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:16px 22px} .pt-checks li + li{border-top:1px solid var(--line)} .pt-checks svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:2.4;margin-top:3px} .pt-checks span{display:block;font-size:17px;line-height:1.5;color:var(--ink)} .pt-checks span[lang=es]{font-size:15px;color:var(--ink-soft);margin-top:2px} .pt-safe{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:var(--sky);border-left:3px solid var(--navy);padding:22px 26px;border-radius:0 4px 4px 0} .pt-safe b{display:block;color:var(--navy-deep);font-size:17px;font-weight:600} .pt-safe span{font-size:15.5px;color:var(--ink-soft)} .pt-flyer{margin:0;position:sticky;top:112px} .pt-flyer img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:4px;box-shadow:0 24px 50px -30px rgba(11,30,64,.4)} .pt-flyer figcaption{font-size:14px;margin-top:12px;color:var(--ink-soft)} .pt-flyer figcaption a{color:var(--navy);font-weight:600} .pt-close{background:var(--navy-deep);color:#fff;text-align:center;padding:64px 0 70px} .pt-close h2{color:#fff;font-size:clamp(28px,3vw,38px);font-weight:400} .pt-close p{color:#c8d6ee;font-size:17px;margin-top:10px} .pt-close p[lang=es]{color:#9fb3d6;font-size:16px;margin-top:4px} .pt-close .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px} .pt-close .btn-navy{background:transparent;border:1px solid rgba(255,255,255,.45)} .pt-week{display:inline-block;margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright)} /* providers: the practice's fax referral process, from its own form */ .pv-main{background:#fff;border:1px solid var(--line);border-radius:4px;padding:40px 38px} .pv-main > h2{font-size:27px;margin-bottom:26px} .pv-steps{list-style:none;counter-reset:s;padding:0;margin:0 0 30px} .pv-steps li{counter-increment:s;position:relative;padding:0 0 26px 66px} .pv-steps li::before{content:counter(s);position:absolute;left:0;top:-6px;width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);color:var(--navy-deep);font-family:var(--serif);font-size:20px;display:grid;place-items:center;background:var(--cream)} .pv-steps h3{font-size:21px;margin-bottom:6px} .pv-steps p{font-size:16.5px;line-height:1.75;color:var(--ink-soft)} .pv-steps a,.pv-priority a{color:var(--navy);font-weight:600} .pv-priority a,.sv-item p a{white-space:nowrap} .pv-priority{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .pv-priority div{border:1px solid var(--line);border-radius:4px;padding:18px 18px 20px;background:var(--sky-soft)} .pv-priority b{display:block;font-family:var(--serif);font-size:19px;color:var(--navy-deep);font-weight:600;margin-bottom:4px} .pv-priority span{font-size:15px;color:var(--ink-soft);line-height:1.6} .pv-form img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:3px} .pv-form .btn{margin-top:16px;width:100%;justify-content:center} /* patient forms: the practice's own intake PDF, described page by page because it is a scan */ .page-head .pf-head-cta{margin-top:26px} .pf-meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:12px} .pf-bring{list-style:none;margin:0;padding:0} .pf-bring li{position:relative;padding:0 0 12px 26px;font-size:16.5px;line-height:1.7;color:var(--ink-soft)} .pf-bring li::before{content:"";position:absolute;left:4px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--gold)} /* contact */ .ct-main{display:flex;flex-direction:column;gap:22px} .ct-card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:32px 32px 34px} .ct-card h2{font-size:24px;margin-bottom:14px} .ct-card p{font-size:16px;color:var(--ink-soft);line-height:1.7} .ct-card p a{color:var(--navy);font-weight:600} .ct-addr{font-style:normal;font-family:var(--serif);font-size:25px;line-height:1.45;color:var(--navy-deep)} .ct-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px} .btn-line{border:1px solid var(--navy);color:var(--navy);background:transparent} .btn-line:hover{background:var(--navy);color:#fff} .ct-two{display:grid;grid-template-columns:1fr 1fr;gap:22px} .ct-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:10px} .ct-big{display:block;font-family:var(--serif);font-size:27px;color:var(--navy);margin:2px 0 6px} a.ct-big:hover{color:var(--gold)} .ct-email{display:block;font-family:var(--serif);font-size:19px;color:var(--navy-deep);margin-top:2px} @media(max-width:900px){ .sv-grid,.pt-grid,.pt-compare,.pt-safe,.ct-two,.pv-priority{grid-template-columns:1fr} .sv-item.star,.sv-urgent{grid-template-columns:1fr;gap:14px} .pt-flyer{position:static;max-width:420px} .pv-main,.ct-card{padding:28px 22px} .pv-steps li{padding-left:58px} }