/* Paleta herdada de css/guaru-tokens.css (preto/branco/amarelo). Cada página define só --paper e --surface-accent pra ter identidade própria sem sair do sistema da Guaru. */ :root{--ink:var(--gs-ink,#146C94);--muted:var(--gs-muted,#4C6478);--line:var(--gs-line,rgba(20,108,148,.12));--paper:#fff;--white:#fff;--accent:var(--gs-accent,#19A7CE);--radius:24px;--shadow:0 20px 60px rgba(20,108,148,.10)} /* A família era Inter, mas nenhuma das páginas carregava Inter — o texto caía em system-ui sem ninguém perceber, num site cujo produto é justamente o acabamento. Agora é Poppins + Manrope, as mesmas do site da Guaru, e as duas páginas carregam a fonte de verdade no . */ *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.65 Poppins,system-ui,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .wrap{width:min(1180px,calc(100% - 48px));margin:auto} .site-nav{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)} .brand{font:700 17px/1 Manrope,system-ui;letter-spacing:-.04em}.brand small{display:block;color:var(--muted);font:600 9px/1.5 ui-monospace;letter-spacing:.16em;text-transform:uppercase;margin-top:6px} .nav-links{display:flex;gap:28px;color:var(--muted);font-size:13px}.nav-links a:hover{color:var(--ink)} .nav-cta,.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:999px;background:var(--gs-black,#043D57);color:#fff;padding:13px 19px;font-weight:700;cursor:pointer;transition:.25s ease} .nav-cta:hover,.button:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(25,167,206,.28)} .hero{min-height:680px;padding:78px 0 46px;display:grid;grid-template-columns:1fr 1.08fr;gap:70px;align-items:center} /* NAV SÓLIDA + HERO COM TEXTO SOBRE A FOTO (dr-rafael.html) — composição fiel ao Vireon: header de cor cheia full-bleed emendando num hero de imagem única com overlay escuro à esquerda pro texto. Tudo vive atrás de modificadores próprios (--solid/--overlay/--full) pra clinica-vitta.html, que usa .site-nav/.hero puros, continuar exatamente como estava. */ .site-nav-bar{background:var(--gs-black,#043D57)} .site-nav--solid{border-bottom:none} .site-nav--solid .brand{color:#fff} .site-nav--solid .brand small{color:rgba(255,255,255,.5)} .site-nav--solid .nav-links{color:rgba(255,255,255,.68)} .site-nav--solid .nav-links a:hover{color:#fff} .site-nav--solid .nav-cta{background:var(--accent);color:var(--gs-black,#043D57)} .site-nav--solid .nav-toggle{border-color:rgba(255,255,255,.28)} .site-nav--solid .nav-toggle span,.site-nav--solid .nav-toggle span:before,.site-nav--solid .nav-toggle span:after{background:#fff} .hero-overlay{padding:36px 0 0} .hero-media--full{position:relative} .hero-media--full .hero-media-frame{aspect-ratio:auto;min-height:760px;border-radius:32px} .hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(9,9,10,.92) 0%,rgba(9,9,10,.66) 30%,rgba(9,9,10,.18) 54%,rgba(9,9,10,0) 70%);pointer-events:none} .hero-overlay-content{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:0 64px;max-width:680px;color:#fff} .hero-overlay-content .eyebrow--dark{margin-bottom:0} .hero-overlay-content h1{font:500 clamp(38px,4.6vw,60px)/1.08 Manrope,system-ui;letter-spacing:-.04em;margin:0;color:#fff} .hero-overlay-content h1 em{font-family:Georgia,serif;font-weight:400} .hero-overlay-content>p{margin:0;max-width:440px;color:rgba(255,255,255,.78);font-size:16px} .hero-overlay-content .hero-actions{margin:0} .hero-overlay-content .button{background:#fff;color:var(--gs-black,#043D57)} .hero-overlay-content .button:hover{box-shadow:0 12px 28px rgba(255,255,255,.25)} .ghost--light{border-color:rgba(255,255,255,.4);color:#fff} .ghost--light:hover{border-color:rgba(255,255,255,.7)} .hero-badges{list-style:none;display:flex;flex-wrap:wrap;gap:14px 26px;margin:4px 0 0;padding:0} .hero-badges li{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.88)} .hero-badges li svg{flex:0 0 auto;width:16px;height:16px;color:var(--accent)} .media-note--corner{left:auto;right:28px;bottom:28px} .eyebrow{font:700 10px ui-monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:18px;display:inline-flex;align-items:center;gap:8px} .eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto} .eyebrow--dark{color:rgba(255,255,255,.72)} .hero h1{font:500 clamp(48px,6.2vw,88px)/.96 Manrope,system-ui;letter-spacing:-.075em;margin:0 0 25px;max-width:650px} .hero h1 em{font-family:Georgia,serif;font-weight:400} .hero p{max-width:480px;color:var(--muted);font-size:17px} .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px} .ghost{border:1px solid var(--line);background:transparent;color:var(--ink)} /* Duas camadas (foto + véu em multiply) que andam em velocidades diferentes no scroll. O recorte é num wrapper próprio (.hero-media-frame) e não em .hero-media, senão o selo .media-note — que sai pra fora da caixa de propósito — seria cortado junto. As camadas são 116% da altura pra que o deslocamento nunca revele borda vazia. */ .hero-media{position:relative} .hero-media-frame{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:1.05/1;border-radius:var(--radius);box-shadow:var(--shadow)} .hero-media-frame img{position:absolute;left:0;top:-8%;display:block;width:100%;height:116%;object-fit:cover;filter:grayscale(90%) sepia(8%) saturate(1.6) hue-rotate(-6deg) contrast(1.12) brightness(1.03);will-change:transform} .hero-media-veil{position:absolute;left:0;top:-8%;width:100%;height:116%;background:linear-gradient(165deg,rgba(25,167,206,.14) 0%,rgba(4,61,87,.05) 40%,rgba(4,61,87,.35) 100%);mix-blend-mode:multiply;pointer-events:none;will-change:transform} .media-note{position:absolute;z-index:2;left:-25px;bottom:28px;background:var(--white);padding:15px 18px;border-radius:16px;box-shadow:0 14px 35px rgba(0,0,0,.12);font-size:12px} .media-note strong{display:block;font-size:20px;letter-spacing:-.04em} /* Cards de "porta de entrada" sobrepostos na borda inferior do hero (padrão Vireon adaptado). Overlap via margin negativo sobre o fim do .hero — o card primário (preto) marca a ação principal, os outros dois são rotas alternativas (ver a jornada / falar direto no WhatsApp) pro visitante que não quer preencher formulário ainda. */ .entry-cards{position:relative;z-index:3;margin-top:-58px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .entry-card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .35s ease} .entry-card:hover,.entry-card:focus-visible{transform:translateY(-6px);box-shadow:0 22px 46px rgba(20,108,148,.16)} .entry-card-icon{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--gs-black,#043D57);display:flex;align-items:center;justify-content:center} .entry-card-icon svg{width:19px;height:19px} .entry-card-title{font:700 16px Manrope,system-ui;letter-spacing:-.02em;display:flex;align-items:center;gap:7px;color:var(--ink)} .entry-card-arrow{display:inline-block;transition:transform .3s cubic-bezier(.16,1,.3,1)} .entry-card:hover .entry-card-arrow{transform:translate(3px,-3px)} .entry-card-desc{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0} .entry-card--primary{background:var(--gs-black,#043D57);border-color:transparent} .entry-card--primary .entry-card-icon{background:var(--accent);color:var(--gs-black,#043D57)} .entry-card--primary .entry-card-title{color:#fff} .entry-card--primary .entry-card-desc{color:rgba(255,255,255,.68)} .section{padding:110px 0} .section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:38px} .section h2{font:500 clamp(32px,4vw,56px)/1 Manrope;letter-spacing:-.065em;margin:0;max-width:680px} .section-head p{max-width:350px;color:var(--muted);margin:0} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .feature{position:relative;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:27px;min-height:220px;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s} .feature:hover{transform:translateY(-4px);border-color:rgba(25,167,206,.45);box-shadow:0 16px 40px rgba(25,167,206,.22),0 4px 12px rgba(20,108,148,.08)} .feature b{display:block;font:600 30px Manrope;letter-spacing:-.06em;margin-bottom:25px;color:rgba(20,108,148,.18)} .feature h3{margin:0 0 8px;font-size:17px} .feature p{color:var(--muted);margin:0;font-size:14px} /* SOBRE — deliberadamente sem imagem (a única foto do case já aparece no hero e na seção de credenciais; uma 3ª repetição pesaria). Título grande no topo como assinatura de seção, texto em 2 colunas com um "widget" operacional (formato da consulta) no lugar do horário de funcionamento da referência. */ .about-head{max-width:760px;margin-bottom:44px} .about-head h2{font:500 clamp(28px,3.6vw,44px)/1.12 Manrope;letter-spacing:-.045em;margin:14px 0 0} .about-body{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;border-top:1px solid var(--line);padding-top:40px} .about-lead{margin:0;font:500 20px/1.5 Manrope,system-ui;letter-spacing:-.02em;color:var(--ink)} .about-text p{margin:0 0 24px;color:var(--muted);max-width:520px} .about-widget{display:flex;gap:16px;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:22px} .about-widget-icon{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--ink);display:flex;align-items:center;justify-content:center} .about-widget-icon svg{width:19px;height:19px} .about-widget strong{display:block;font-size:13px;margin-bottom:8px} .about-widget ul{margin:0;padding-left:18px;color:var(--muted);font-size:13.5px;line-height:1.7} /* TICKER de procedimentos — marquee full-bleed, faixa escura pra alternar contraste com as seções claras vizinhas. Duplicar os itens 1x no HTML pra o loop (translateX -50%) fechar sem salto. Pausa no hover/foco. */ .ticker{background:var(--gs-black,#043D57);overflow:hidden;padding:24px 0} .ticker-track{display:flex;width:max-content;animation:ticker-scroll 32s linear infinite} .ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused} .ticker-item{display:inline-flex;align-items:center;gap:12px;padding:0 30px;white-space:nowrap;color:#fff;font:600 21px Manrope,system-ui;letter-spacing:-.02em} .ticker-item b{color:var(--accent);font-weight:700} @keyframes ticker-scroll{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.ticker-track{animation:none}} /* PAINEL DE AUTORIDADE — checklist de diferenciais reais do case (nada de número inventado tipo "X anos"), em painel escuro pra quebrar o ritmo entre duas seções claras. */ .authority{padding:0 0 110px} .authority-panel{background:var(--gs-black,#043D57);color:#fff;border-radius:28px;padding:52px;display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center} .authority-copy h2{font:500 clamp(28px,3.2vw,38px)/1.12 Manrope;letter-spacing:-.05em;margin:0 0 14px} .authority-copy p{color:rgba(255,255,255,.62);margin:0;max-width:340px;font-size:14.5px} .authority-checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 30px} .authority-checklist li{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.5;color:rgba(255,255,255,.9)} .authority-checklist li:before{content:"✓";flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--gs-black,#043D57);font:700 11px/20px Manrope;text-align:center} /* CREDENCIAIS — lista com linha divisória + destaque no hover/foco (inspirada na "lista de médicos" da referência), adaptada pra 1 médico só: em vez de trocar a foto por linha (não existe 2ª foto real do Dr. Rafael pra isso fingir), a única foto fica fixa em position:sticky ao lado da lista — decisão explícita, não a ambiguidade do original. */ .doctor-list{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 300px;gap:52px;align-items:start} .doctor-rows{list-style:none;margin:0;padding:0} .doctor-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:26px 2px;border-bottom:1px solid var(--line);cursor:default;transition:padding-left .3s cubic-bezier(.16,1,.3,1),background-color .3s ease} .doctor-row-name{font:600 clamp(19px,2.2vw,27px)/1.15 Manrope;letter-spacing:-.03em;color:var(--ink);transition:color .3s ease} .doctor-row-tags{display:flex;gap:8px;flex-wrap:wrap;max-width:400px;justify-content:flex-end} .tag{font-size:11px;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(20,108,148,.05);color:var(--muted);transition:background-color .3s ease,color .3s ease} .doctor-row:hover,.doctor-row:focus-within{padding-left:16px;background:rgba(25,167,206,.06)} .doctor-row:hover .doctor-row-name,.doctor-row:focus-within .doctor-row-name{color:var(--gs-black,#043D57)} .doctor-row:hover .tag,.doctor-row:focus-within .tag{background:var(--accent-soft);color:var(--ink)} .doctor-photo{position:sticky;top:110px;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:3/4} .doctor-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(90%) sepia(8%) saturate(1.6) hue-rotate(-6deg) contrast(1.12) brightness(1.03)} .process{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:start} .steps{border-top:1px solid var(--line)} /* A coluna do selo tinha 60px e rótulos como "03 / ACOMPANHAR" precisam de 139px: o selo quebrava em duas linhas, estourava a coluna e passava POR CIMA do título do passo. Coluna dimensionada pelo rótulo mais longo + nowrap. */ .step{display:grid;grid-template-columns:150px 1fr;gap:16px;border-bottom:1px solid var(--line);padding:22px 0} .step span{font:700 12px ui-monospace;color:var(--ink);background:var(--accent);border-radius:999px;padding:3px 8px;height:fit-content;justify-self:start;white-space:nowrap} .step h3{margin:0;font-size:17px} .step p{margin:5px 0 0;color:var(--muted);font-size:14px} /* SPLIT "DEPARTAMENTOS" (dr-rafael.html, #atendimento) — texto fixo à esquerda + LISTA vertical de cards horizontais à direita, no lugar do grid-3 genérico compartilhado com clinica-vitta.html (que continua usando .grid-3/.feature sem alteração nenhuma). */ .dept-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start} .dept-copy{position:sticky;top:110px} .dept-copy h2{font:500 clamp(28px,3.6vw,42px)/1.08 Manrope,system-ui;letter-spacing:-.05em;margin:14px 0 16px} .dept-copy p{color:var(--muted);max-width:340px;margin:0 0 26px} .dept-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .dept-item{display:flex;align-items:flex-start;gap:20px;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:26px 28px;position:relative;transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .35s} .dept-item:hover,.dept-item:focus-within{transform:translateX(6px);border-color:rgba(25,167,206,.5);box-shadow:0 16px 40px rgba(25,167,206,.16)} .dept-item-icon{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:var(--accent-soft);color:var(--gs-black,#043D57);display:flex;align-items:center;justify-content:center} .dept-item-icon svg{width:22px;height:22px} .dept-item-body{flex:1 1 auto} .dept-item-body h3{margin:0 0 6px;font-size:17px} .dept-item-body p{margin:0;color:var(--muted);font-size:14px} .dept-item-arrow{margin-left:auto;flex:0 0 auto;font-size:16px;color:var(--muted);transition:transform .3s ease,color .3s ease} .dept-item:hover .dept-item-arrow,.dept-item:focus-within .dept-item-arrow{transform:translate(3px,-3px);color:var(--ink)} /* GRID "3 DIFERENCIAIS NUMERADOS" (dr-rafael.html, #estrutura) — substitui a lista .process/.steps genérica (clinica-vitta.html mantém .process/.steps originais, sem mudança). */ .diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .diff-item{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:18px;padding:30px 26px 28px;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s} .diff-item:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(20,108,148,.1)} .diff-chip{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--gs-black,#043D57);color:var(--accent);font:700 14px ui-monospace,monospace;margin-bottom:16px} .diff-kicker{display:block;font:700 10px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 6px} .diff-item h3{margin:0 0 8px;font-size:18px} .diff-item p{margin:0;color:var(--muted);font-size:14px} .booking{background:var(--gs-black,#043D57);color:#fff;border-radius:28px;padding:38px;display:grid;grid-template-columns:.8fr 1.2fr;gap:42px} .booking h2{font-size:38px;line-height:1;margin:0 0 15px;letter-spacing:-.06em} .booking p{color:rgba(255,255,255,.65)} /* Bloco de estatística real (duração média já citada em #sobre — não é dado novo/fabricado) ecoando o "número gigante + assinatura" do banner do Vireon, com decoração de anéis concêntricos no canto — sem inventar anos de experiência nem qualquer credencial. */ .booking--stat{position:relative;overflow:hidden} .booking--stat>div,.booking--stat>form{position:relative;z-index:1} .booking-stat{display:flex;align-items:baseline;gap:16px;margin:16px 0 22px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.14)} .booking-stat strong{font:600 52px/1 Manrope,system-ui;letter-spacing:-.04em;color:var(--accent);flex:0 0 auto} .booking-stat strong span{font-size:19px;margin-left:2px;font-weight:600} .booking-stat-label{color:rgba(255,255,255,.55);font-size:12.5px;max-width:190px;line-height:1.5} .booking--stat:before{content:"";position:absolute;right:-70px;top:-70px;width:280px;height:280px;border:1px solid rgba(255,255,255,.08);border-radius:50%} .booking--stat:after{content:"";position:absolute;right:30px;top:30px;width:180px;height:180px;border:1px solid rgba(255,255,255,.06);border-radius:50%} .booking-form{display:grid;gap:12px} .booking-form label{font-size:11px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.1em} .booking-form input,.booking-form select,.booking-form textarea{width:100%;padding:13px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;transition:border-color .2s ease,box-shadow .2s ease} .booking-form option{color:#111} /* Havia um outline:0 aqui com especificidade maior que o :focus-visible global — resultado: o formulário de agendamento, que é o caminho de conversão inteiro deste case, ficava SEM nenhum indicador de foco pra quem navega por teclado. O anel volta (amarelo sobre o preto do bloco, contraste alto) e some só no :focus não-visível, pra clique de mouse não ganhar moldura. */ .booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus{border-color:var(--accent)} .booking-form input:focus-visible,.booking-form select:focus-visible,.booking-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent);box-shadow:0 0 0 4px rgba(25,167,206,.18)} .booking-form input:focus:not(:focus-visible),.booking-form select:focus:not(:focus-visible),.booking-form textarea:focus:not(:focus-visible){outline:none} .booking-form .button{background:var(--accent);color:var(--gs-black,#043D57);margin-top:6px} .privacy-note{margin:4px 0 0;color:rgba(255,255,255,.5);font-size:11.5px;line-height:1.5} .notice{display:none;margin-top:10px;color:var(--accent);font-size:13px} .footer{padding:35px 0 50px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line)} .footer-guaru{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:600} .footer-guaru:hover{color:var(--muted)} .demo-bar{background:var(--gs-black,#043D57);color:rgba(255,255,255,.75);font-size:12.5px;padding:10px 0} .demo-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .demo-bar a{color:var(--accent);font-weight:700} /* 44x44 é o mínimo de alvo de toque (WCAG 2.5.8 / HIG) — estava 42. */ .nav-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:10px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer} .nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);position:relative} .nav-toggle span:before,.nav-toggle span:after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)} .nav-toggle span:before{top:-6px}.nav-toggle span:after{top:6px} @media(max-width:800px){ .wrap{width:min(100% - 32px,620px)} .nav-toggle{display:inline-flex} .nav-links{position:absolute;top:78px;left:0;right:0;z-index:20;flex-direction:column;gap:0;background:var(--white);border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none} .nav-links.is-open{display:flex} .nav-links a{padding:16px 24px;border-bottom:1px solid var(--line);font-size:15px} .site-nav{position:relative} .hero{grid-template-columns:1fr;padding:55px 0 40px;gap:35px} .hero-media{order:-1} .hero h1{font-size:56px} .grid-3,.process,.booking{grid-template-columns:1fr} .section{padding:75px 0} .section-head{display:block} .section-head p{margin-top:16px} .booking{padding:28px} .media-note{left:14px} .footer{display:block} .footer span{display:block;margin-top:8px} .entry-cards{grid-template-columns:1fr;margin-top:-30px} .about-body{grid-template-columns:1fr;gap:24px} .about-head{margin-bottom:28px} .authority{padding:0 0 75px} .authority-panel{grid-template-columns:1fr;padding:32px;border-radius:22px} .authority-copy p{max-width:none} .authority-checklist{grid-template-columns:1fr;margin-top:8px} .doctor-list{grid-template-columns:1fr;gap:24px} .doctor-photo{position:static;order:-1;aspect-ratio:16/10} .doctor-row{padding:20px 2px} .doctor-row-tags{justify-content:flex-start;max-width:none} .ticker-item{font-size:17px;padding:0 20px} .hero-overlay{padding:24px 0 0} .hero-media--full .hero-media-frame{min-height:840px;border-radius:24px} .hero-scrim{background:linear-gradient(180deg,rgba(9,9,10,.05) 0%,rgba(9,9,10,.55) 46%,rgba(9,9,10,.94) 100%)} .hero-overlay-content{padding:26px 26px 112px;justify-content:flex-end;max-width:none;gap:14px} .hero-overlay-content>p{max-width:none} .hero-badges{gap:10px 16px} .hero-badges li{font-size:11.5px} .media-note--corner{right:14px;bottom:14px} .dept-split{grid-template-columns:1fr;gap:28px} .dept-copy{position:static} .dept-copy p{max-width:none} .dept-item{padding:20px} .diff-grid{grid-template-columns:1fr} .booking-stat{gap:12px} .booking-stat strong{font-size:42px} } @media(prefers-reduced-motion:reduce){.feature,.nav-cta,.button,.entry-card,.doctor-row,.dept-item,.diff-item{transition:none}}