/* ============================================================================ SHERBIN /homepage2, the homepage template. Michael Sherbin, D.O. and Associates · ENT & Facial Plastic Surgery. Layers, in order: 1. tokens 2. reset 3. base + type 4. shared components 5. sections 6. utilities 7. responsive 8. reduced motion + print Breakpoints (documented constants; custom properties cannot drive media queries): shell max 1360 · queries at 1200px, 1000px, 720px. ============================================================================ */ /* ---- 1 · tokens ---------------------------------------------------------- */ :root{ /* palette */ --ink-950:#050F1C; --navy-900:#071E36; --navy-850:#08243F; --navy-800:#0A2B4C; --navy-750:#0D3157; --marine-700:#10406B; --marine-600:#175488; --sky-300:#A9C4DC; --sky-200:#C9DBEB; --bone:#EFEBE1; --ivory:#F4F1EA; --frost:#EDF3F9; --paper:#F7FAFD; --white:#FFFFFF; --ink:#14212E; --muted:#4E6172; --gold-300:#F2C766; --gold-400:#E8B03B; --gold-500:#D89A1E; --gold-600:#B77E12; /* edges */ --edge-d:rgba(255,255,255,.14); --edge-d2:rgba(255,255,255,.07); --edge-l:rgba(7,30,54,.12); --edge-l2:rgba(7,30,54,.07); /* type */ --display:'Fraunces',Georgia,serif; --body:'Inter',system-ui,-apple-system,sans-serif; --script:'Pinyon Script',cursive; /* spacing scale (4px base) + approved section rhythm */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-11:44px; --sp-16:64px; --sp-24:96px; --pad-ent:104px; --pad-facial:118px 0 104px; --pad-band:92px; --pad-quiet:88px; /* depth (navy-tinted, never gray) */ --e1:0 1px 2px rgba(7,30,54,.05), 0 6px 18px rgba(7,30,54,.07); --e2:0 2px 6px rgba(7,30,54,.08), 0 16px 40px rgba(7,30,54,.14); --e3:0 8px 20px rgba(5,15,28,.24), 0 30px 70px rgba(5,15,28,.34); /* motion */ --ease:cubic-bezier(.2,.7,.3,1); --t-fast:.2s; --t-med:.25s; /* shell */ --w:1360px; --measure:66ch; /* chrome heights, so the opening stage can add up to one viewport */ --hd-h:94px; --util-h:44px; --doors-h:236px; /* corner depth: two background layers that darken opposite corners so a flat band reads as a lit surface. Applied as extra background layers (never pseudo-elements) because ::before/::after are already spoken for by the seams and the grain. */ --corner-l: radial-gradient(78% 62% at 0% 0%, rgba(7,30,54,.075), rgba(7,30,54,0) 68%), radial-gradient(78% 62% at 100% 100%, rgba(7,30,54,.06), rgba(7,30,54,0) 68%); --corner-d: radial-gradient(80% 64% at 0% 0%, rgba(3,10,20,.5), rgba(3,10,20,0) 70%), radial-gradient(80% 64% at 100% 100%, rgba(3,10,20,.42), rgba(3,10,20,0) 70%); /* grain */ --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } /* ---- 2 · reset ------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0} html{scroll-behavior:smooth} img{display:block;max-width:100%} a{text-decoration:none;color:inherit} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul{list-style:none} address{font-style:normal} /* ---- 3 · base + type ------------------------------------------------------ */ /* Pinyon self-hosted from the site's own fonts dir. Declared AFTER the Google stylesheet (which loads in ), so this definition wins and the wordmark renders Pinyon even when fonts.googleapis.com is blocked or offline. */ @font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pinyon-script-400.woff2) format('woff2')} body{ font:400 16.5px/1.7 var(--body); color:var(--ink); background:var(--navy-900); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.012em} ::selection{background:var(--gold-300);color:var(--ink-950)} :focus-visible{outline:2px solid var(--gold-400);outline-offset:3px} .skip-link{position:absolute;left:-9999px;top:0;z-index:400;background:var(--navy-900);color:#fff;padding:var(--sp-3) 18px;font:600 13px/1 var(--body)} .skip-link:focus{left:0} /* ---- 4 · shared components ------------------------------------------------ */ .w{max-width:var(--w);margin:0 auto;padding:0 var(--sp-11);position:relative} /* labels: the gold eyebrow (sparingly) and the quiet kicker */ .eyebrow{font:600 11px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-400);display:inline-flex;align-items:center;gap:var(--sp-3)} .eyebrow::before{content:"";width:26px;height:2px;background:var(--gold-400)} .ent .eyebrow{color:var(--gold-500)} .kick{font:600 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .team-sec .kick,.faq .kick{color:var(--sky-300)} .gild{font-style:italic;color:var(--gold-400)} /* buttons: ONE primary (marine + gold left edge), thin-line secondaries */ .btn{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:15px 24px;border:1px solid transparent;transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)} .btn-primary{background:var(--marine-700);color:#fff;border-left:3px solid var(--gold-400)} .btn-primary:hover{background:var(--marine-600);transform:translateY(-2px);box-shadow:var(--e2)} .btn-line-d{color:#fff;border-color:var(--edge-d)} .btn-line-d:hover{border-color:var(--gold-400);transform:translateY(-2px)} .btn-line-l{color:var(--marine-700);border-color:var(--edge-l)} .btn-line-l:hover{border-color:var(--marine-700);transform:translateY(-2px)} /* the logo lockup (text composition of the locked name) */ .lockup{display:inline-flex;flex-direction:column;align-items:center;text-align:center;line-height:1;flex-shrink:0} .lockup__name{font-family:var(--script);font-size:33px;color:#fff;line-height:.9} .lockup__assoc{display:flex;align-items:center;gap:var(--sp-3);width:100%;font:600 8.5px/1.3 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-400);margin-top:9px} .lockup__assoc::before,.lockup__assoc::after{content:"";height:1px;flex:1;background:var(--edge-d)} .lockup--left{align-items:flex-start;text-align:left} /* placeholder image frames (photoreal to follow; CSS-only, no fake photos) */ .ph{position:relative;display:flex;align-items:flex-end;overflow:hidden;min-height:120px;border:1px solid var(--edge-d);background: repeating-linear-gradient(-45deg,rgba(255,255,255,.028) 0 11px,transparent 11px 22px), linear-gradient(155deg,var(--navy-750),var(--navy-900))} .ph--light{border-color:var(--edge-l);background: repeating-linear-gradient(-45deg,rgba(7,30,54,.035) 0 11px,transparent 11px 22px), linear-gradient(155deg,#E7E1D4,#DCD5C7)} .ph__tag{position:relative;font:600 9.5px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--sky-300);padding:var(--sp-2) 11px;background:rgba(5,15,28,.55);margin:var(--sp-3);display:inline-block} .ph--light .ph__tag{color:var(--muted);background:rgba(255,255,255,.62)} .ph__frame{position:absolute;inset:var(--sp-3);border:1px solid var(--edge-d);pointer-events:none} .ph--light .ph__frame{border-color:var(--edge-l)} /* the finished-ground variant: a clean tonal gradient, no placeholder hatching */ /* grain + structural grid overlays */ .hero::after,.folio::after,.team-sec::after,.faq::after{content:"";position:absolute;inset:0;background:var(--noise);background-size:200px;opacity:.05;mix-blend-mode:overlay;pointer-events:none} .ent::after,.locs-sec::after{content:"";position:absolute;inset:0;background:var(--noise);background-size:200px;opacity:.03;mix-blend-mode:multiply;pointer-events:none} /* gold seam: draws in at section entries (JS adds .in; visible by default no-JS) */ .seam{position:absolute;top:0;left:0;right:0;height:1px;background:var(--gold-400);opacity:.45;transform-origin:left} /* ---- 5 · sections --------------------------------------------------------- */ /* utility bar */ .util{background:var(--ink-950);border-bottom:1px solid var(--edge-d2)} .util .w{display:flex;align-items:center;justify-content:space-between;min-height:44px;flex-wrap:wrap;gap:var(--sp-1) 0} .util__locs{display:flex} .pin{display:inline-flex;align-items:center;gap:9px;color:var(--sky-200);font:600 12px/1 var(--body);letter-spacing:.03em;padding:0 var(--sp-5);border-left:1px solid var(--edge-d2)} .pin:first-child{padding-left:0;border-left:0} .pin::before{content:"";width:11px;height:13px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat} .pin b{color:#fff;font-weight:600} .pin a{color:var(--sky-200);font-variant-numeric:tabular-nums;white-space:nowrap} .pin a:hover{color:var(--gold-400)} .util__right{display:flex;gap:22px;align-items:center} .util__right a{color:var(--sky-300);font:600 11.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;transition:color var(--t-fast)} .util__right a:hover{color:var(--gold-400)} .pin__l2{display:inline-flex;align-items:center;gap:9px} .pin__dir{display:none;color:var(--gold-400);font:600 10.5px/1 var(--body);letter-spacing:.09em;text-transform:uppercase} /* header: sticks, frosts once scrolled */ /* header z sits ABOVE the drawer (60) so the burger stays reachable as the X, and BELOW the apps (80) so overlays cover the chrome */ /* transparent while the hero is under it, frosted the moment the page moves. The negative margin lifts the hero up behind the header so the photograph runs edge to edge; the hero pays the height back as padding. */ .hd{background:transparent;border-bottom:1px solid transparent;position:sticky;top:0;z-index:70;margin-bottom:calc(var(--hd-h) * -1);transition:background-color var(--t-med) var(--ease),border-color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)} .hd.is-stuck{background:rgba(7,30,54,.92);border-bottom-color:var(--edge-d);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(5,15,28,.35)} .hd .w{display:flex;align-items:center;gap:40px;height:94px} .nav{margin-left:auto;display:flex;align-items:center;gap:26px} .nav a{position:relative;color:#EAF1F8;font:500 13.5px/1 var(--body);letter-spacing:.01em;opacity:.9;padding:6px 0;transition:opacity var(--t-fast)} .nav a:hover{opacity:1} .nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--gold-400);transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease)} .nav a:hover::after{transform:scaleX(1)} .nav__pillar{width:1px;height:22px;background:var(--edge-d)} .nav__t{position:relative;color:#EAF1F8;font:500 13.5px/1 var(--body);letter-spacing:.01em;opacity:.9;padding:6px 0;background:none;border:0;cursor:pointer;transition:opacity var(--t-fast)} .nav__t:hover,.nav__t[aria-expanded="true"]{opacity:1} .nav__t::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--gold-400);transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease)} .nav__t:hover::after,.nav__t[aria-expanded="true"]::after{transform:scaleX(1)} .mm{position:absolute;left:0;right:0;top:100%;background:var(--navy-850);border-bottom:1px solid var(--gold-400);box-shadow:0 24px 48px rgba(3,10,20,.45);z-index:69} .mm[hidden]{display:none} .mm .mm__g{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:44px;align-items:start;height:auto;padding-top:28px;padding-bottom:32px} .mm__hub{display:flex;flex-direction:column;gap:9px;padding-right:38px;border-right:1px solid var(--edge-d)} .mm__hubk{font:600 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400)} .mm__hub b{font-family:var(--display);font-weight:500;font-size:20px;color:#fff;line-height:1.3} .mm__go{font:600 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-400);margin-top:2px} .mm__hub:hover .mm__go{text-decoration:underline} .mm__col{display:flex;flex-direction:column} .mm__k{font:600 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--sky-300);margin-bottom:9px} .mm__col a{color:#EAF1F8;font:400 14px/1.4 var(--body);padding:6px 0;opacity:.88;transition:opacity var(--t-fast),color var(--t-fast)} .mm__col a:hover{opacity:1;color:var(--gold-400)} @media (max-width:1000px){.mm{display:none !important}} .nav__search{display:grid;place-items:center;color:#EAF1F8;opacity:.9;padding:6px 2px;transition:color var(--t-fast),opacity var(--t-fast)} .nav__search svg{width:19px;height:19px} .nav__search:hover{color:var(--gold-400);opacity:1} .burger{display:none;width:44px;height:36px;margin-left:auto;border:1px solid var(--edge-d);flex-direction:column;justify-content:center;gap:5px;padding:0 10px} .burger span{height:2px;background:#fff;display:block;transition:transform var(--t-med) var(--ease),opacity var(--t-fast)} .burger.is-x span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.is-x span:nth-child(2){opacity:0} .burger.is-x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* drawer */ /* The header offset lives on the SHELL, not inside the scroll box: padding inside a scroller scrolls away, and a pixel sweep caught the reviews promo riding up over the logo through the transparent header. */ .drawer{display:none;position:fixed;inset:0;z-index:60;background:linear-gradient(160deg,var(--navy-900),var(--ink-950));flex-direction:column;justify-content:space-between;padding-top:var(--drawer-top,152px)} .drawer.on{display:flex} .drawer nav{display:flex;flex-direction:column;padding:0 var(--sp-8) 12px;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;flex:1} .drawer .dr summary,.drawer nav .dr__s{color:#fff;font-family:var(--display);font-size:20px;padding:13px 0;border-bottom:1px solid var(--edge-d2);display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none} .drawer .dr summary::-webkit-details-marker{display:none} .drawer .dr summary::after{content:"+";color:var(--gold-400);font-family:var(--body);font-size:18px;line-height:1} .drawer .dr[open] summary::after{content:"\2212"} .dr__l{display:flex;flex-direction:column;padding:2px 0 12px 16px;border-bottom:1px solid var(--edge-d2)} .dr__l a{color:var(--sky-200);font:400 15.5px/1.4 var(--body);padding:10px 0} .dr__l a.dr__hub{color:var(--gold-400);font-weight:600;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase} .drawer__foot{padding:var(--sp-6) var(--sp-8) var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-4)} .drawer__tel{display:flex;justify-content:space-between;color:var(--sky-300);font:600 13px/1 var(--body)} .drawer__tel a{color:#fff;font-variant-numeric:tabular-nums} /* hero: the full-bleed photograph under a navy scrim; text left, panel right */ .hero{position:relative;background:var(--navy-900);overflow:hidden} .hero__img{position:absolute;inset:0;z-index:0} .hero__img img{width:100%;height:100%;object-fit:cover;object-position:64% 26%} .hero__img::after{content:"";position:absolute;inset:0;background: var(--corner-d), linear-gradient(78deg,rgba(5,15,28,.92) 10%,rgba(7,30,54,.6) 48%,rgba(7,30,54,.28) 80%), linear-gradient(180deg,transparent 0%,transparent 68%,rgba(5,15,28,.6) 100%)} .hero .w{position:relative;z-index:2;padding-top:calc(var(--hd-h) + 34px);padding-bottom:var(--pad-quiet)} /* the opening stage: contact strip + hero + the three doors add up to exactly one viewport height on desktop. min-height, not height, so a short window or long copy grows the hero instead of clipping it. */ @media (min-width:1001px){ .hero{min-height:calc(100vh - var(--util-h) - var(--doors-h));display:flex;align-items:center} .hero .w{width:100%;padding-top:calc(var(--hd-h) + 20px);padding-bottom:52px} } .hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center} .hero__eyebrow{display:flex;flex-direction:column} .hero__spec{font:600 13.5px/1.35 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400)} .hero h1{color:#fff;font-size:clamp(38px,4.3vw,60px);margin:22px 0 0;max-width:19ch;letter-spacing:-.02em} .hero__body{position:relative;margin-top:30px;padding-top:26px;max-width:46ch;color:var(--sky-200);font-size:16.5px;line-height:1.7} .hero__body::before{content:"";position:absolute;top:0;left:0;width:46px;height:2px;background:var(--gold-400)} .hero__actions{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap} /* hero panel + finder; on mobile the panel collapses to a single disclosure */ .panel{background:rgba(10,43,76,.5);border:1px solid var(--edge-d);padding:30px 30px 28px;position:relative} .panel::before{content:"";position:absolute;top:0;left:0;width:44px;height:3px;background:var(--gold-400)} .panel__toggle{display:none;width:100%;justify-content:space-between;align-items:center;color:#fff;font:600 14px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:18px 2px;text-align:left} .panel__toggle span{color:var(--gold-400);font-size:20px;line-height:1} .panel__kick{font:600 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-400)} .panel__svcs{display:flex;flex-direction:column;margin-top:18px;border-top:1px solid var(--edge-d2)} .panel__svcs a{display:flex;justify-content:space-between;align-items:center;padding:15px 2px;border-bottom:1px solid var(--edge-d2);color:#EAF1F8;font:500 16.5px/1 var(--body);transition:padding-left var(--t-fast) var(--ease),color var(--t-fast)} .panel__svcs a span{color:var(--sky-300);transition:color var(--t-fast),transform var(--t-fast) var(--ease)} .panel__svcs a:hover{padding-left:9px;color:#fff} .panel__svcs a:hover span{color:var(--gold-400);transform:translateX(3px)} .panel__find{margin-top:var(--sp-6)} .panel__find label{display:block;min-height:44px;font:italic 400 15px/1.45 var(--display);letter-spacing:0;color:#EAF1F8;transition:opacity .26s var(--ease)} .panel__find label.is-swap{opacity:0} .panel__find .sbar{margin-top:var(--sp-3)} /* ---- sbar: THE search bar (one recipe sitewide: "like the one in the hero the best"). One white field, one primary button, every inline search bar on the site: the /search hero (dark), the category ask bands (light, add .sbar--light), the homepage menu panel (dark). The palette overlay and the scheduler's in-dialog fields keep their own idiom: they are dialogs, not bars. ---- */ .sbar{display:flex;gap:10px;width:100%;max-width:640px} /* 16px floor on focusable text inputs: anything smaller makes iOS Safari zoom on focus, which unlocks sideways panning until the keyboard closes */ .sbar__q{flex:1 1 auto;min-width:0;background:#fff;border:1px solid var(--edge-l);border-radius:0;padding:14px 16px;font:500 16px/1.2 var(--body);color:var(--ink);-webkit-appearance:none;appearance:none} .sbar__q::placeholder{color:#8FA2B3} .sbar__q:focus,.sbar__q:focus-visible{outline:none;border-color:var(--marine-600);box-shadow:0 0 0 3px rgba(23,84,136,.12)} .sbar--light .sbar__q{box-shadow:var(--e1)} @media (max-width:720px){.sbar{flex-direction:column}.sbar .btn{width:100%}} /* the two doors */ .doors{background:var(--navy-850);position:relative} /* the gold seam draws OVER the tiles: sharp, unbroken, 1px to match the header rule */ .doors::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--gold-400);z-index:3} .doors .w{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;max-width:none;padding:0} .door{position:relative;min-height:var(--doors-h);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)} .door:hover{transform:translateY(-3px);box-shadow:var(--e3)} .door--ent{background:var(--marine-700)} /* the sinuplasty photo is the bright daytime window; a light bottom-up scrim (far gentler than the ramp removed in 9a727d7) lifts the white copy off it without the heavy gradient look. This tile only, on its own __inner. */ .door--ent .door__inner{background:linear-gradient(0deg,rgba(5,15,28,.72) 0%,rgba(5,15,28,.5) 40%,rgba(5,15,28,.22) 72%,rgba(5,15,28,0) 100%)} .door--facial{background:var(--navy-900)} .door--hearing{background:var(--marine-700)} /* the hearing door is washed in the hero button's marine so the three tiles read as one set rather than three photographs */ .door--hearing .door__img{filter:saturate(.3) contrast(1.04) brightness(1.06)} .door--hearing .door__scrim{background:linear-gradient(90deg,rgba(16,64,107,.9) 0%,rgba(16,64,107,.74) 34%,rgba(16,64,107,.5) 62%,rgba(16,64,107,.6) 100%)} .door__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%} .door__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,15,28,.35),transparent 45%)} .door__frame{position:absolute;inset:var(--sp-3);border:1px solid var(--edge-d);pointer-events:none;z-index:2} .door__inner{position:relative;z-index:2;display:block;padding:24px 30px 26px} .door__k{display:block;font:600 10.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-400)} .door__t{display:block;color:#fff;font-family:var(--display);font-size:24px;margin:9px 0 0;line-height:1.1} .door__p{display:block;color:var(--sky-200);font-size:13.5px;margin-top:var(--sp-2);max-width:38ch;line-height:1.6} .door__go{margin-top:var(--sp-4);color:#fff;font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;display:inline-flex;gap:var(--sp-2);align-items:center} .door__go span{color:var(--gold-400);transition:transform var(--t-fast) var(--ease)} .door:hover .door__go span{transform:translateX(4px)} /* THE FOLIO — the homepage middle as one engraved object: masthead colophon, letterhead manifesto and roster, ONE merged index of everything treated (each specialty wearing its own engraved mark), resting on the consultation plate. Replaces the old ENT + facial sections. */ .folio{background:var(--corner-d),var(--navy-900);color:#fff;padding:84px 0 0;position:relative;overflow:hidden} .folio::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--gold-400);opacity:.45} .folio__mast{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--edge-d);padding-bottom:18px} .folio__colophon{display:flex;gap:34px} .folio__colophon span{color:var(--sky-200);font-size:12.5px;letter-spacing:.02em} .folio__colophon i{font-style:normal;color:var(--gold-400);font-family:var(--display);margin-right:8px} .folio__grid{display:grid;grid-template-columns:0.9fr 1.35fr;gap:76px;padding:54px 0 70px} .folio__left h2{color:#fff;font-size:clamp(32px,3.6vw,44px);letter-spacing:-.02em;max-width:14ch} .folio__body{color:var(--sky-200);font-size:14.5px;line-height:1.75;margin-top:18px;max-width:48ch} .folio__k{font:600 10.5px/1.5 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400)} .folio__roster{margin-top:34px;border-top:2px solid var(--gold-500);padding-top:16px} .folio__person{border-bottom:1px solid var(--edge-d);padding:12px 0} .folio__person b{display:block;font-family:var(--display);font-weight:400;font-size:18.5px;letter-spacing:-.01em} .folio__person span{display:block;color:var(--sky-300);font-size:12px;margin-top:3px} .folio__phil{color:var(--sky-200);font-family:var(--display);font-style:italic;font-size:17px;line-height:1.55;margin-top:28px;max-width:40ch} .folio__left .btn{margin-top:22px} .folio__intro{color:var(--sky-300);font-size:13.5px;line-height:1.65;margin-top:10px;max-width:60ch} .folio__index{margin-top:26px;border-top:1px solid var(--edge-d)} .folio__index a{display:grid;grid-template-columns:64px 1fr auto 26px;gap:18px;align-items:center;border-bottom:1px solid var(--edge-d);padding:15px 2px;color:#fff;transition:padding-left var(--t-fast) var(--ease)} .folio__index a:hover{padding-left:var(--sp-2)} .folio__mark{width:52px;height:52px} .folio__mark svg{width:100%;height:100%;display:block} .folio__t{font-family:var(--display);font-size:27px;letter-spacing:-.015em;line-height:1.12} .folio__t small{display:block;font-family:var(--body);font-size:12.5px;color:var(--sky-300);margin-top:4px;line-height:1.5;max-width:58ch} .folio__tag{font:600 9.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--sky-300);border:1px solid var(--edge-d);padding:5px 8px} .folio__tag--f{color:var(--gold-300);border-color:var(--gold-500)} .folio__arw{color:var(--gold-400);opacity:0;transition:opacity var(--t-fast)} .folio__index a:hover .folio__arw{opacity:1} .folio__featline{margin-top:20px;color:var(--sky-300);font-size:12.5px;line-height:1.65;max-width:72ch} .folio__featline a{color:#fff;font-weight:600;border-bottom:1px solid var(--gold-500)} .folio__chip{display:inline-block;border:1px solid var(--gold-500);color:var(--gold-300);font:600 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:6px 9px;margin-right:10px} .folio__plate{position:relative;height:360px;overflow:hidden} .folio__plate img{width:100%;height:100%;object-fit:cover;object-position:78% 24%} .folio__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,15,28,.94) 22%,rgba(7,30,54,.66) 55%,rgba(7,30,54,.24))} .folio__plate-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px} .folio__ptag{align-self:flex-start;font:600 10.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-300);background:rgba(5,15,28,.55);padding:7px 10px} .folio__pull{font-family:var(--display);font-size:34px;color:#fff;letter-spacing:-.015em;max-width:22ch} .folio__pnote{color:var(--sky-200);font-family:var(--display);font-style:italic;font-size:15.5px;max-width:44ch} .video__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%} .close__bg{position:absolute;inset:0} .close__bg img{width:100%;height:100%;object-fit:cover;object-position:80% 50%} .close__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,13,26,.92) 0%,rgba(4,13,26,.55) 55%,rgba(4,13,26,.22) 100%)} /* physicians */ .team-sec{background:var(--corner-d),var(--marine-700);color:#fff;padding:var(--pad-band) 0;position:relative} .team-sec__head{max-width:60ch} .team-sec__head h2{color:#fff;font-size:clamp(28px,3.4vw,42px);margin-top:var(--sp-3)} .team-sec__head p{color:var(--sky-200);margin-top:14px;max-width:var(--measure)} .team{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:48px;background:rgba(255,255,255,.12)} .member{background:var(--marine-700);padding-bottom:22px} .member__go{display:inline-block;margin-top:12px;color:var(--gold-300);font:600 10.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--gold-400);padding-bottom:3px;transition:color var(--t-fast)} .member__go:hover{color:var(--gold-400)} /* the physicians page nests the go as a SPAN, and ".member__info span" would block it full-width - the underline hugs the words. */ .member__info .member__go{display:inline-block} .member__info{padding:18px 20px 0} .member__info b{font-family:var(--display);font-weight:400;font-size:21px;color:#fff;display:block} .member__info em{font-style:normal;color:var(--gold-400);font:600 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:6px} .member__info span{color:#CFE0EF;font-size:12.5px;display:block;margin-top:var(--sp-2);line-height:1.45} /* Sherbin's portrait rides his card only, in the house portrait slot (full-width 4/5, framed like the bio rail); the other three stay text-only until the full portrait set exists. */ .member__ph{position:relative;display:block;margin:20px 20px 0;aspect-ratio:4/5;min-height:0} .member__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%} /* the portrait card is a compact row at EVERY width. NOTE: no card carries member--ph right now - one framed face among three text cards read wrong, so card portraits are retired until the practice shoot delivers the full set (bio-page rail portrait unaffected). These rules are the ready-made dress for that day. */ .member.member--ph{display:flex;gap:16px;align-items:flex-start;padding:18px 20px 22px} .member--ph .member__ph{flex:0 0 104px;margin:0} .member--ph .member__ph .ph__frame{inset:5px} .member--ph .member__info{flex:1;min-width:0;padding:0} /* team: the link below the grid */ .team__more{margin-top:26px} .team__more a{color:#fff;font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--gold-400);padding-bottom:4px} .team__more a span{color:var(--gold-400)} .team__more a:hover{color:var(--gold-300)} /* faq */ .faq{background:var(--corner-d),var(--navy-900);color:#fff;padding:var(--pad-quiet) 0;position:relative} .faq__head{max-width:56ch} .faq__head h2{color:#fff;font-size:clamp(28px,3.4vw,42px);margin-top:var(--sp-3)} .faq__list{margin-top:40px;border-top:1px solid var(--edge-d)} .faq details{border-bottom:1px solid var(--edge-d2)} .faq summary{list-style:none;cursor:pointer;padding:22px 0;font-family:var(--display);font-size:20px;color:#fff;display:flex;justify-content:space-between;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--sky-300);font-size:24px;font-family:var(--body);transition:color var(--t-fast)} .faq details[open] summary::after{content:"\2013";color:var(--gold-400)} .faq details p{color:var(--sky-300);font-size:15px;padding:0 0 22px;max-width:var(--measure)} /* locations */ .locs-sec{background:var(--corner-l),var(--bone);color:var(--ink);padding:var(--sp-24) 0;position:relative} .locs-sec__head{max-width:60ch} .locs-sec__head h2{color:var(--ink);font-size:clamp(28px,3.4vw,42px);margin-top:var(--sp-3)} .locs{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:var(--sp-11);background:var(--edge-l)} /* the contact page recomposed: facts as a tile row under the offices, form + list as one two-column band, the referral lane as its own official card */ .kick--gap{margin-top:var(--sp-11)} .cfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px} .cfact{background:var(--paper);border:1px solid var(--edge-l);border-top:2px solid var(--ink);box-shadow:var(--e1);padding:17px 19px 19px} .cfact b{display:block;font:700 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--marine-700)} .cfact p{margin-top:10px;color:var(--muted);font-size:13.5px;line-height:1.65} .cfact p a{color:var(--marine-700);text-decoration:underline;text-underline-offset:2px} .cfact i{font-style:normal;display:block;font-size:12px;margin-top:4px;color:var(--muted)} .write-sec{background:var(--paper);color:var(--ink);padding:var(--sp-24) 0;position:relative} .cwrite{display:grid;grid-template-columns:1.55fr 1fr;gap:52px;align-items:start;margin-top:6px} .cwrite .cform{max-width:none} .updates-card{background:var(--frost);border:1px solid var(--edge-l);padding:26px 28px 30px;margin-top:22px} .updates-card h3{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.25;color:var(--ink);margin-top:10px} .updates-card .cform--list{margin-top:4px;max-width:none} .updates-card .cform__row{max-width:none} .refer-sec{background:var(--corner-l),var(--ivory);padding:var(--sp-16) 0} .refer{display:grid;grid-template-columns:1.6fr 1fr;gap:44px;align-items:center;background:var(--frost);border:1px solid var(--edge-l);border-left:3px solid var(--gold-500);padding:36px 42px} .refer__body h2{color:var(--ink);font-size:clamp(24px,2.6vw,32px);margin-top:var(--sp-3)} .refer__body p{color:var(--muted);font-size:15px;line-height:1.75;margin-top:14px} .refer__body p a{color:var(--marine-700);font-weight:600} .refer__fax{border-left:1px solid var(--edge-l);padding-left:40px} .refer__fax b{display:block;font:700 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--marine-700)} .refer__fax .num{display:block;font-family:var(--display);font-size:clamp(26px,2.4vw,34px);color:var(--ink);margin-top:10px;letter-spacing:.01em} .refer__fax i{display:block;font-style:normal;color:var(--muted);font-size:12.5px;margin-top:8px} @media (max-width:1000px){ .cfacts{grid-template-columns:1fr 1fr} .cwrite{grid-template-columns:1fr;gap:36px} .refer{grid-template-columns:1fr;gap:24px;padding:30px 28px} .refer__fax{border-left:0;border-top:1px solid var(--edge-l);padding:24px 0 0} } @media (max-width:720px){ .cfacts{grid-template-columns:1fr} .refer{padding:24px 20px} .updates-card{padding:22px 20px 26px} } .loc{background:var(--paper);padding:34px} .loc h3{font-size:26px;color:var(--ink)} .loc__map{display:block;width:100%;height:180px;margin:18px 0;border:1px solid var(--edge-l);filter:grayscale(.35) contrast(.95)} .loc address{color:var(--ink);font-size:15px;line-height:1.7;margin-top:var(--sp-1)} .loc__hours{font-size:13.5px;color:var(--muted);margin:4px 0 0} .loc__tel{font-family:var(--display);font-size:22px;color:var(--marine-700);display:block;margin-top:10px} .loc__cta{margin-top:18px;display:flex;gap:var(--sp-3);flex-wrap:wrap} /* video visits: a light band between the navy FAQ and the ink close */ .video{background:var(--corner-l),var(--paper);color:var(--ink);padding:var(--pad-quiet) 0;position:relative} .video::after{content:"";position:absolute;inset:0;background:var(--noise);background-size:200px;opacity:.03;mix-blend-mode:multiply;pointer-events:none} .video__grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;position:relative;z-index:1} .video h2{color:var(--ink);font-size:clamp(28px,3.4vw,44px);max-width:16ch;margin-top:var(--sp-4)} .video__body{color:var(--muted);margin-top:var(--sp-4);max-width:46ch} .video__actions{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap} .video__ph{height:260px;min-height:0} /* the appointment close: the page's final conversion, on the deepest ground */ .close{background:var(--corner-d),var(--ink-950);color:#fff;padding:var(--sp-24) 0;position:relative;overflow:hidden} .close::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--gold-400);opacity:.45} .close__inner{position:relative;z-index:1;max-width:56ch} .close h2{color:#fff;font-size:clamp(30px,3.8vw,48px);margin-top:var(--sp-4)} .close__body{color:var(--sky-200);margin-top:var(--sp-4);max-width:46ch} .close__actions{margin-top:26px} /* footer */ .ft{background:var(--corner-d),linear-gradient(rgba(5,15,28,.88),rgba(5,15,28,.88)),url(/homepage2/img/bg-navy-wall.jpg) center/cover,var(--ink-950);color:var(--sky-300);padding:70px 0 40px;border-top:1px solid var(--edge-d)} .ft__logohead{margin-bottom:38px} .ft__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:34px} .ft__brand p{font-size:13px;margin-top:var(--sp-5);max-width:34ch} .ft__locs{margin-top:46px;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--edge-d2);border:1px solid var(--edge-d2);border-top:2px solid var(--gold-500)} .ft__loc{background:var(--ink-950);padding:18px 22px} .ft__loc b{display:block;font:600 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#fff} .ft__loc span{display:block;color:var(--sky-300);font-size:13px;margin-top:7px;line-height:1.55} .ft__loc .ft__locline{margin-top:9px} .ft__loc .ft__locline a{color:#fff;font-family:var(--display);font-size:16.5px} .ft__loc .ft__locline i{font-style:normal;color:var(--sky-300);font-size:12.5px;margin-left:10px;white-space:nowrap} .ft__loc>span:not(.ft__locline) a{color:inherit;text-decoration:underline dotted;text-underline-offset:3px} .ft__loc>span:not(.ft__locline) a:hover{color:var(--gold-400)} @media (max-width:720px){.ft__locs{grid-template-columns:1fr}.ft__loc .ft__locline i{display:block;margin-left:0;margin-top:3px}} .ft h4{font:600 11px/1.35 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:var(--sp-4)} /* in the narrow desktop window the longest title wraps to two lines; reserve the two lines on every column so the lists below stay aligned */ @media (min-width:1001px) and (max-width:1200px){.ft h4{min-height:2.7em}} .ft ul{display:flex;flex-direction:column;gap:9px} .ft ul a{color:var(--sky-300);font-size:13.5px;transition:color var(--t-fast)} .ft ul a:hover{color:var(--gold-400)} .ft__bar{margin-top:48px;padding-top:22px;border-top:1px solid var(--edge-d2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:12.5px} .ft__bar a{color:var(--gold-400)} .ft__legal{display:flex;gap:18px;flex-wrap:wrap} .ft__legal a{color:var(--sky-300)} .ft__legal a:hover{color:var(--gold-400)} /* the builder's stamp: Web Everything signs in its own teal */ .ft a.ft__we{color:#00C4BC;font-weight:600} .ft a.ft__we:hover{color:#5EEAD4} /* search overlay (AEOptim Ask), the frosted navy palette */ .search{position:fixed;inset:0;z-index:80;opacity:0;visibility:hidden;transition:opacity .24s var(--ease),visibility .24s} .search.on{opacity:1;visibility:visible} .search__bg{position:absolute;inset:0;background:rgba(5,15,28,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .search__panel{position:relative;max-width:620px;margin:11vh auto 0;background:var(--navy-850);border:1px solid var(--edge-d);box-shadow:var(--e3);display:flex;flex-direction:column;max-height:72vh;transform:translateY(10px);opacity:0;transition:transform .28s var(--ease),opacity .28s var(--ease)} .search.on .search__panel{transform:none;opacity:1} .search__bar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 10px var(--sp-2) 18px;border-bottom:1px solid var(--edge-d2);color:var(--sky-300)} .search__glyph{width:18px;height:18px;flex:0 0 auto;color:var(--gold-400)} .search__input{flex:1;background:transparent;border:0;outline:0;color:#fff;font:400 16px/1.4 var(--body);padding:13px 0} .search__input::placeholder{color:#7F97AD} .search__x{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;color:var(--sky-300);transition:color var(--t-fast)} .search__x svg{width:17px;height:17px} .search__x:hover{color:var(--gold-400)} .search__results{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch} .search__opt{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 18px;cursor:pointer;border-bottom:1px solid var(--edge-d2);transition:background-color .16s var(--ease)} .search__opt:hover,.search__opt[aria-selected="true"]{background:rgba(255,255,255,.06)} .search__opt__t{display:block;font:600 15px/1.3 var(--body);color:#fff} .search__opt__d{display:block;font:400 13px/1.5 var(--body);color:var(--sky-300);margin-top:3px} .search__cat{flex:0 0 auto;font:600 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400);border:1px solid var(--edge-d);padding:6px 9px} .search__empty{padding:20px 18px;color:var(--sky-300);font-size:14.5px} .search__all{display:block;padding:13px 18px;border-top:1px solid var(--edge-d2);color:var(--gold-400);font:600 13px/1 var(--body);letter-spacing:.02em} .search__all:hover{color:var(--gold-300)} .search__brand{padding:var(--sp-3) 18px;border-top:1px solid var(--edge-d2);color:var(--sky-300);font:600 11.5px/1 var(--body);letter-spacing:.06em} /* THE ASK WORDMARK (acts as a logo): one rust, one weight, one face everywhere it signs — the palette's basement row, the wizard's describe field, the results-page credit. Contexts may size it; nothing may recolor, reweigh, or re-case it. */ .ask{color:#D97757;font-family:var(--body);font-style:normal;font-weight:800;letter-spacing:.02em;text-transform:none} .search__brand a{color:var(--sky-300)} .search__brand a:hover{color:var(--gold-400)} /* scheduler: the proven 4-step flow, restyled to the locked system. A light sheet over the dark site; hard corners; gold as line and edge. */ .sched{position:fixed;inset:0;z-index:80;opacity:0;visibility:hidden;transition:opacity .24s var(--ease),visibility .24s} .sched.on{opacity:1;visibility:visible} .sched__bg{position:absolute;inset:0;background:rgba(5,15,28,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .sched__panel{position:relative;max-width:780px;margin:4.5vh auto;max-height:91vh;background:var(--paper);border:1px solid var(--edge-l);box-shadow:var(--e3);display:flex;flex-direction:column;overflow:hidden;transform:translateY(12px);opacity:0;transition:transform .3s var(--ease),opacity .3s var(--ease)} .sched.on .sched__panel{transform:none;opacity:1} /* the head wears the practice's dress: navy band, the gold rule, ivory serif, and the stepper lit in gold */ /* the gold thread: the bar's underline IS the progress, and the title speaks in the step label's voice */ .sched__head{position:relative;display:flex;align-items:center;gap:var(--sp-5);padding:15px 22px;background:linear-gradient(160deg,#0E2437,var(--ink-950));border-bottom:3px solid rgba(232,176,59,.18)} .sched__t1{font:700 12.5px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#F4F1EA;white-space:nowrap} .sched__prog{position:absolute;left:0;right:0;bottom:-3px;height:3px;pointer-events:none} .sched__prog i{display:block;height:100%;width:25%;background:var(--gold-400);transition:width .35s var(--ease)} .sched__head:has(li[data-s="2"].is-on) .sched__prog i{width:50%} .sched__head:has(li[data-s="3"].is-on) .sched__prog i{width:75%} .sched__head:has(li[data-s="4"].is-on) .sched__prog i, .sched__head:has(li[data-s="4"].is-done) .sched__prog i{width:100%} .sched__steps{display:flex;margin-left:auto;flex:0 0 auto} .sched__steps li{display:none} .sched__steps li.is-on{display:flex;flex-direction:row-reverse;align-items:center;gap:9px;font:600 10.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--sky-300);white-space:nowrap} .sched__steps li span{font:700 10.5px/1 var(--body);letter-spacing:.14em;color:var(--gold-300);white-space:nowrap} .sched__steps li span::after{content:" of 4"} .sched__x{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;color:var(--sky-300);transition:color var(--t-fast)} .sched__x:hover{color:var(--gold-400)} .sched__x svg{width:17px;height:17px} .sched__body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:30px 28px} .sched__step{display:none} .sched__step.is-active{display:block;animation:stepIn .3s var(--ease)} @keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .sched__h{font-family:var(--display);font-size:30px;line-height:1.15;letter-spacing:-.015em;color:var(--ink);margin-bottom:6px} .sched__q{font:600 11.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:var(--sp-6) 0 var(--sp-3)} .sched__lead{font-size:15.5px;color:var(--muted);margin-bottom:18px} .sched__lead b{color:var(--marine-700)} .chips{display:flex;flex-wrap:wrap;gap:10px} .chip{font:600 14.5px/1 var(--body);padding:13px 18px;background:#fff;border:1px solid var(--edge-l);color:var(--ink);box-shadow:var(--e1);transition:transform .18s var(--ease),border-color .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)} .chip:hover{transform:translateY(-1px);border-color:var(--marine-600);box-shadow:var(--e2)} .chip.is-on{background:var(--marine-700);border-color:var(--marine-700);border-left:3px solid var(--gold-400);color:#fff} .chip--wide{width:100%;margin-top:14px} .pill{font:600 13px/1 var(--body);padding:10px 15px;border:1px solid var(--edge-l);background:#fff;color:var(--ink);transition:border-color .18s,background-color .18s,color .18s} .pill:hover{border-color:var(--marine-600)} .pill.is-on{background:var(--marine-700);border-color:var(--marine-700);color:#fff} .sched__field{display:block;font:600 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:18px} .sched__field span{text-transform:none;letter-spacing:0;font-weight:400} .sched__field input,.sched__field textarea,.sched__search{display:block;width:100%;margin-top:9px;padding:14px 16px;font:400 16px/1.4 var(--body);color:var(--ink);background:#fff;border:1px solid var(--edge-l);outline:0;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)} .sched__field input:focus,.sched__field textarea:focus,.sched__search:focus{border-color:var(--marine-600);box-shadow:0 0 0 3px rgba(23,84,136,.12)} .sched__search{margin:0 0 14px} /* the describe-it row and the timing row: plain fields, no mark */ .sched__askrow,.sched__nl{display:flex;align-items:center;gap:var(--sp-3);background:#fff;border:1px solid var(--marine-600);padding:var(--sp-1) var(--sp-1) var(--sp-1) 14px} .sched__askrow input,.sched__nl input{flex:1;border:0;outline:0;background:transparent;font:400 16px/1.2 var(--body);color:var(--ink);padding:var(--sp-3) 0;min-width:0} .sched__nomatch{font:500 12.5px/1.5 var(--body);color:var(--muted);padding:4px 2px} .sched__nl{margin-bottom:var(--sp-4)} .sched__pills{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)} /* the phone lane: calling is the fast path, and step one says so */ .sched__call{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;background:var(--frost);border:1px solid var(--edge-l);border-left:3px solid var(--gold-500);padding:12px 16px;margin:16px 0 0} .sched__call + .sched__q{margin-top:20px} .sched__callt{font:700 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--marine-700)} .sched__call a{font:600 14.5px/1.2 var(--body);color:var(--marine-700);white-space:nowrap} .sched__call a b{font-weight:700;color:var(--ink);margin-right:6px} .sched__call a:hover{color:var(--marine-600)} .sched__callor{flex-basis:100%;font:500 12.5px/1.4 var(--body);color:var(--muted)} .sched__fine{font-size:13px;color:var(--muted);margin-top:var(--sp-4)} /* Turnstile's home in step 4. No :has() (old Safari/Chrome lack it): the margins collapse through the empty 0-height div while the check runs invisibly, and become real breathing room when Cloudflare shows the box */ .sched__ts{margin:16px 0 12px} /* the submit-error line lands outside the scroll body, beside the foot bar */ p#schedErr{margin:10px 22px} .sched__fine a{color:var(--marine-600);font-weight:600} .sched__opts{display:grid;gap:var(--sp-3)} .sched__opt{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;background:#fff;border:1px solid var(--edge-l);box-shadow:var(--e1);padding:18px 20px;transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)} .sched__opt:hover{transform:translateY(-1px);border-color:var(--marine-600);box-shadow:var(--e2)} .sched__opt.is-sel{border-color:var(--marine-700);box-shadow:inset 0 0 0 1px var(--marine-700),var(--e1)} .sched__optn{font-family:var(--display);font-size:19px;line-height:1.2;color:var(--ink)} .sched__optmeta{font-size:13.5px;color:var(--muted)} .sched__optnote{display:inline-block;margin-top:var(--sp-2);font:700 10px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#8A3F27;border:1px solid #E0A87F;padding:4px 8px} /* step 3: preference pill groups (replaced the old slot calendar). Spacing law from the 09-25 scan: a label HUGS its own pills (9px) and stands off the previous group (26px), so labels read as captions, not floaters; the uppercase transform spares the (optional) whisper. */ .sched__provfilter,.sched__cal{display:block} .sched__pillrow{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 2px} .sched__cal .sched__q,.sched__provfilter .sched__q{margin:26px 0 9px} .sched__cal .sched__q:first-child{margin-top:2px} .sched__q span{text-transform:none;letter-spacing:.02em;font-weight:500;color:var(--muted)} .sched__hold{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp-4);margin-top:10px} .sched__field--wide{grid-column:1/-1} .sched__ins{display:grid;grid-template-columns:1fr 1fr;gap:10px} .sched__insopt{text-align:left;font:500 14.5px/1.3 var(--body);padding:13px 15px;background:#fff;border:1px solid var(--edge-l);color:var(--ink);transition:border-color .18s,background-color .18s,color .18s} .sched__insopt:hover{border-color:var(--marine-600)} .sched__insopt.is-on{background:var(--marine-700);border-color:var(--marine-700);color:#fff} .sched__insnote{font:600 13.5px/1.5 var(--body);color:#8A3F27;margin:0 0 var(--sp-3)} .sched__insnote button{display:inline;padding:0;color:#D97757;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px} .sched__foot{display:flex;justify-content:space-between;gap:var(--sp-3);padding:15px 22px;border-top:1px solid var(--edge-l);background:#fff} .sched__foot .btn:disabled{opacity:.38;cursor:not-allowed;transform:none;box-shadow:none} .sched__done{text-align:center;padding:26px 0 var(--sp-3)} .sched__check{width:60px;height:60px;margin:0 auto var(--sp-5);border:2px solid var(--gold-500);color:var(--gold-600);display:grid;place-items:center;box-shadow:0 0 0 6px rgba(232,176,59,.1)} .sched__check svg{width:30px;height:30px} .sched__summary{font-size:16px;color:var(--ink);line-height:1.8;margin:10px 0 var(--sp-4)} .sched__summary b{color:var(--marine-700)} .sched__done .btn{margin-top:14px} /* ---- 6 · utilities --------------------------------------------------------- */ .no-scroll{overflow:hidden} /* ---- 7 · responsive -------------------------------------------------------- */ /* 1200: tighten the shell */ @media (max-width:1200px){ .hero__grid{gap:44px} .folio__grid{gap:44px} } /* 1000: nav -> drawer, grids stack. The search icon STAYS (deliberate: the header carries search) — without it, 38 of 50 pages had no search at all on phones. The nav keeps flowing; everything in it except the icon hides. */ @media (max-width:1000px){ .hd .w{gap:14px} .nav{gap:0} .nav > :not(.nav__search){display:none} .nav__search{width:44px;height:44px;padding:0} .nav__search svg{width:21px;height:21px} .door--ent{order:-1} .burger{display:flex;margin-left:0} .hero__grid{grid-template-columns:1fr} .doors .w,.folio__grid,.locs,.video__grid2{grid-template-columns:1fr} .folio__grid{padding-bottom:54px} .folio__colophon{gap:20px;flex-wrap:wrap} .team{grid-template-columns:1fr 1fr} /* two independent stacks, not a 2x2 grid: the shorter column never leaves a hole (facial plastic surgery tucks straight under ear and hearing) */ .ft__grid{display:block;column-count:2;column-gap:26px} .ft__grid>div{break-inside:avoid;margin-bottom:26px} .ft__brand{column-span:all} .ft h4{margin-bottom:10px} } /* 720: compress the chrome */ @media (max-width:720px){ .w{padding:0 22px} .util__right{display:none} .ft__bar{gap:10px} .ft__legal{gap:8px 16px} /* the two offices read as two blocks, not one run-on line: each gets its own ground, split by a hairline. Directions is underlined because it leaves the site (Google Maps). */ .util .w{padding:0} /* minmax(0,1fr): a bare 1fr floors at min-content, and the nowrap phone number plus DIRECTIONS pushed the pair 3px past the viewport */ .util__locs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;width:100%} .pin{flex-direction:column;align-items:flex-start;gap:4px;font-size:11px; padding:9px 12px;border-left:0;min-width:0} .pin:first-child{padding-left:12px} .pin:last-child{box-shadow:inset 1px 0 0 var(--edge-d)} .pin::before{display:none} .pin__l2{gap:8px;flex-wrap:wrap} .pin__dir{display:inline;font-size:9.5px;letter-spacing:.05em;text-decoration:underline;text-underline-offset:2px} .doors .w{grid-template-columns:1fr} .door{min-height:216px} .hd .w{height:78px;gap:var(--sp-4)} :root{--hd-h:78px} .lockup__name{font-size:27px} .hero .w{padding-top:calc(var(--hd-h) + 26px);padding-bottom:var(--sp-16)} .ent{padding:var(--sp-16) 0} .folio{padding-top:64px} .team-sec,.faq,.locs-sec,.video,.close{padding:var(--sp-16) 0} .folio__mast{flex-direction:column;align-items:flex-start;gap:12px} .folio__index a{grid-template-columns:44px 1fr 22px;gap:12px} .folio__tag{display:none} .folio__mark{width:38px;height:38px} .folio__t{font-size:21px} .folio__pull{font-size:26px} .folio__plate{height:300px} .team{grid-template-columns:1fr} .member{padding:14px 16px 18px} /* phones present the portrait differently (full-bleed was too big): a compact row, photo beside the name at contact-card scale */ .member.member--ph{display:flex;gap:14px;align-items:flex-start} .member--ph .member__ph{flex:0 0 104px;margin:0} .member--ph .member__info{flex:1;min-width:0;padding:0} .member__ph .ph__frame{inset:5px} .member__info{padding:0} .member__info b{font-size:18px} .member__info span{font-size:11.5px;margin-top:5px} .video__ph{height:180px} /* mobile compression: the panel collapses to one disclosure, the finder hides (search lives in the header icon), and the fifth FAQ folds away. (An animated open/close was tried and reverted; the ruling: "it was fine before.") */ .panel{padding:0 20px} .panel__toggle{display:flex} .panel__body{display:none;padding:0 0 20px} .panel.is-open .panel__body{display:block} .panel.is-open .panel__toggle span{transform:rotate(45deg);display:inline-block} .panel__kick{display:none} .panel__svcs{margin-top:0;border-top:0} .panel__find{display:none} /* the apps as mobile sheets: search top-aligned, scheduler full-screen */ .search__panel{margin:8px auto 0;max-width:none;width:calc(100% - 16px);max-height:calc(100dvh - 16px)} .sched__panel{margin:0;max-width:none;width:100%;height:100dvh;max-height:100dvh;border:0} /* the thread on phones: title and step tighten, nothing folds */ .sched__head{gap:10px;padding:13px 14px 13px 16px} .sched__t1{font-size:10.5px;letter-spacing:.15em} .sched__x{width:44px;height:44px} .sched__body{padding:24px 20px} .sched__hold{grid-template-columns:1fr} .sched__ins{grid-template-columns:1fr} .sched__cal{display:flex;flex-direction:column;align-items:stretch;gap:14px;overflow-x:visible} } @media (max-width:400px){ .sched__t1{font-size:10px;letter-spacing:.12em} .sched__steps li.is-on{font-size:10px;letter-spacing:.1em;gap:7px} .sched__steps li span{font-size:10px;letter-spacing:.1em} } @media (max-width:360px){ /* where the width runs out, the step keeps only its gold count */ .sched__steps li.is-on{font-size:0;letter-spacing:0;gap:0} } /* ---- 8 · reduced motion + print -------------------------------------------- */ @media (prefers-reduced-motion: no-preference){ /* page-load reveal: hero elements rise once, staggered */ [data-rise]{animation:rise .55s var(--ease) both} [data-rise="2"]{animation-delay:.07s} [data-rise="3"]{animation-delay:.14s} [data-rise="4"]{animation-delay:.21s} [data-rise="5"]{animation-delay:.16s} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* scroll reveals + seams: hidden states only when JS is present */ html.js .r{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)} html.js .r.in{opacity:1;transform:none} html.js .r-d1.in{transition-delay:.08s} html.js .r-d2.in{transition-delay:.16s} html.js .r-d3.in{transition-delay:.24s} html.js .seam{transform:scaleX(0);transition:transform .9s var(--ease)} html.js .seam.in{transform:scaleX(1)} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} } @media print{ /* Legibility first: every band prints black on white, because browsers drop backgrounds by default and light-on-navy text would otherwise vanish. */ *,*::before,*::after{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important} body{background:#fff!important} /* Screen furniture stays on the screen. */ .util,.hd,.drawer,.search,.burger,.sched,.lib-call,.lib-next,.lib-rail,.ft__grid,.ft__bar{display:none!important} /* Scroll reveals and hero rises print visible even if never scrolled to. */ html.js .r{opacity:1!important;transform:none!important;transition:none!important} [data-rise]{animation:none!important;opacity:1!important;transform:none!important} a{text-decoration:underline} } /* offscreen validation field */ .sched__hp{position:absolute !important;left:-9999px !important;top:auto !important;width:1px;height:1px;overflow:hidden} /* ---- ask strip + continue doors (the close band's two lives) */ .close--ask .askq{font-style:italic;font-size:clamp(26px,3.2vw,40px);max-width:22ch;min-height:2.2em} /* the reservation holds only if no question ever needs a third line; at very narrow widths the longest pool question breaks 2 lines at 26px, so step down */ @media (max-width:380px){.close--ask .askq{font-size:22px}} .askq a{color:#fff;transition:opacity .26s var(--ease),color var(--t-fast)} .askq a:hover{color:var(--gold-300)} .askq.is-swap a{opacity:0} .close--ask .sbar{margin-top:26px} .close__doors{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .close__doors a{border:1px solid var(--edge-d);padding:11px 16px;color:#fff;font:600 12.5px/1 var(--body);letter-spacing:.04em;transition:border-color var(--t-fast),color var(--t-fast)} .close__doors a:hover{border-color:var(--gold-400);color:var(--gold-300)} .close__doors a span{color:var(--gold-400);margin-left:4px} /* ---- Google reviews bar (homepage, live): the ASK ------------------------ G mark, five stars as the review gesture (no rating claimed), the line in the CTA's own type, one write-review action per office. Arrives after the first screen, yields to the footer, X dismisses for the session. */ .rvw{position:fixed;z-index:55;transition:transform .5s var(--ease),opacity .5s var(--ease)} @media (prefers-reduced-motion:reduce){.rvw{transition:none}} body:has(.drawer.on) .rvw,body:has(.sched.on) .rvw{display:none} @media print{.rvw{display:none!important}} .rvw__g{width:20px;height:20px;flex:none} .rvw__stars{display:flex;gap:3px;flex:none} .rvw__stars svg{width:15px;height:15px} .rvw__t{font:600 10.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#fff} .rvw__btns{display:flex;gap:10px;margin-left:auto;align-items:center;flex-wrap:wrap} .rvw__btn{font:600 10.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#fff;border:1px solid var(--edge-d);padding:10px 14px;transition:border-color var(--t-fast),color var(--t-fast)} .rvw__btn:hover{border-color:var(--gold-400);color:var(--gold-300)} .rvw__x{background:none;border:0;cursor:pointer;line-height:0;padding:7px;flex:none;color:var(--sky-300);transition:color var(--t-fast)} .rvw__x svg{width:11px;height:11px} .rvw__x:hover{color:#fff} .rvw--1{left:0;right:0;bottom:0;transform:translateY(110%);background:var(--ink-950);border-top:2px solid var(--gold-500);box-shadow:0 -16px 40px rgba(5,15,28,.5)} .rvw--1.is-in{transform:none} .rvw--1 .rvw__in{display:flex;align-items:center;gap:16px;padding:13px 0} @media (max-width:720px){ /* centered composition: the G and stars as one badge row, the ask line on its own centered row, the office buttons full width. Only the X stays pinned, clear of the centered content by the symmetric side padding. */ .rvw--1 .rvw__in{flex-wrap:wrap;row-gap:9px;padding:12px 0;justify-content:center} .rvw--1 .rvw__t{width:100%;text-align:center} .rvw--1 .rvw__x{position:absolute;top:9px;right:12px} .rvw__btns{margin-left:0;width:100%;justify-content:center} .rvw__btn{flex:1;text-align:center;padding:11px 8px;white-space:nowrap} } /* ---- patient reviews band (ink): six Zocdoc quotes, laid plain ----------- */ .rev{background:var(--corner-d),var(--ink-950);color:#fff;padding:var(--pad-band) 0;position:relative} .rev .kick{color:var(--sky-300)} .rev__head h2{color:#fff;font-size:clamp(28px,3.4vw,42px);margin-top:var(--sp-3)} /* the source line sits UNDER the cards, small */ .rev__src{color:var(--sky-300);margin-top:26px;font-size:12.5px;line-height:1.7;max-width:64ch} .rev__src a{color:#fff;text-decoration:underline;text-underline-offset:3px;transition:color var(--t-fast)} .rev__src a:hover{color:var(--gold-300)} .rev__src b{font-family:var(--display);font-size:16.5px} .rev__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px} .rev__card{background:var(--paper);color:var(--ink);border-top:2px solid var(--gold-500);padding:24px 24px 20px;margin:0;display:flex;flex-direction:column;gap:16px} .rev__card blockquote{margin:0;font-family:var(--display);font-size:16.5px;line-height:1.5;color:var(--navy-900);flex:1} .rev__card figcaption b{display:block;font:600 12.5px/1.2 var(--body);color:var(--navy-900)} .rev__card figcaption span{display:block;margin-top:4px;font-size:11.5px;color:var(--muted)} @media (max-width:1000px){.rev__grid{grid-template-columns:1fr 1fr}} @media (max-width:720px){.rev__grid{grid-template-columns:1fr;gap:14px}} /* ---- the drawer banner: the changeable space at the top of the menu ------ */ .drawer__promo{display:flex;flex-wrap:wrap;gap:9px 16px;justify-content:center;align-items:center;background:var(--ink-950);border:1px solid var(--edge-d2);border-top:2px solid var(--gold-500);padding:14px 14px 16px;margin-bottom:22px} .drawer__promo .rvw__t{width:100%;text-align:center} .drawer__promo .rvw__btns{margin-left:0;width:100%;justify-content:center} .drawer__promo .rvw__btn{flex:1;text-align:center;padding:10px 8px;white-space:nowrap} /* cross-page fragment landings clear the sticky header (red team L9) */ :where(#ent,#physicians,#locations,#faq,#video,#reviews){scroll-margin-top:110px} /* ---- The review placements ("B on condition pages, C on categories"). Data + renderers: scripts/lib/sherbin-reviews.mjs; a page without an entry has no band at all. ---- */ /* B: the Proof Seam - paper band, one centered voice, between the article and the navy FAQ */ .pvseam{background:var(--paper);border-top:2px solid var(--gold-500);padding:58px 0 62px;text-align:center} .pvseam__stars{margin:0;font-size:13px;letter-spacing:7px;color:var(--gold-500)} .pvseam__q{margin:16px auto 0;max-width:56ch;font:italic 400 clamp(19px,2.5vw,24.5px)/1.55 var(--display);color:var(--navy-900)} .pvseam__by{margin:18px 0 0;font:400 12.5px/1.5 var(--body);letter-spacing:.04em;color:var(--muted)} .pvseam__by b{font-weight:600;color:var(--ink)} /* C: the FAQ Neighbor - a compact starred card above the category FAQ */ .pvnb{padding:50px 0 56px} .pvnb .kick{margin-bottom:14px} .pvnb__card{margin:0;max-width:660px;background:var(--paper);border-top:2px solid var(--gold-500);box-shadow:0 10px 30px rgba(7,30,54,.07);padding:24px 26px 20px} .pvnb__stars{font-size:12px;letter-spacing:6px;color:var(--gold-500)} .pvnb__card blockquote{margin:12px 0 0;font-family:var(--display);font-size:16.5px;line-height:1.55;color:var(--navy-900)} .pvnb__card figcaption{margin-top:14px;font-size:12px;color:var(--muted)} .pvnb__card figcaption b{color:var(--ink);font-weight:600} /* 360 and under: the script lockup cannot shrink on its own, and at 320 the header row (lockup + search + burger) ran 23px past the glass. Caught by the responsive matrix the night the search icon joined the header tighten the row instead of hiding anything. */ @media (max-width:360px){ .hd .w{gap:10px} .lockup__name{font-size:22px} .lockup__assoc{letter-spacing:.18em} }