:root { --navy:#535f84; --navy-deep:#303950; --coral:#cb7975; --rose:#edcfce; --paper:#faf9f6; --ink:#263149; --line:rgba(48,57,80,.18); --serif:"Playfair Display", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.55; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } .container { width:min(1160px, calc(100% - 48px)); margin:0 auto; } .skip-link { position:absolute; transform:translateY(-150%); background:var(--navy); color:white; padding:10px 18px; z-index:20; } .skip-link:focus { transform:translateY(0); }
.site-header { position:absolute; top:0; left:0; z-index:10; width:100%; padding:22px 0; } .nav-wrap { display:flex; align-items:center; gap:28px; } .brand { width:216px; height:46px; display:block; flex:0 0 auto; } .brand img { width:100%; height:100%; object-fit:contain; object-position:left center; } .nav-links { margin-left:auto; display:flex; align-items:center; gap:25px; font-size:13px; font-weight:600; } .nav-links a { transition:color .2s; } .nav-links a:hover { color:var(--coral); } .nav-action { border:1px solid var(--navy); padding:10px 14px; font-size:12px; font-weight:700; letter-spacing:.01em; } .nav-action span { color:var(--coral); margin-left:7px; font-size:16px; } .menu-toggle { display:none; }
.hero { position:relative; min-height:760px; padding:166px 0 35px; overflow:hidden; background:#f3f1ed; } .hero:after { content:""; position:absolute; inset:auto 0 0; height:1px; background:var(--line); } .hero-monogram { position:absolute; top:105px; left:50%; transform:translateX(-50%); font-family:var(--serif); color:rgba(83,95,132,.07); font-size:clamp(250px, 38vw, 610px); letter-spacing:-.16em; font-weight:700; line-height:.72; pointer-events:none; } .hero-grid { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; } .eyebrow, .section-label { margin:0 0 20px; color:var(--coral); text-transform:uppercase; font-size:11px; letter-spacing:.16em; font-weight:700; } h1, h2, h3, p { margin-top:0; } h1 { max-width:600px; margin-bottom:25px; font-family:var(--serif); font-size:clamp(51px, 6.1vw, 83px); line-height:.99; font-weight:500; letter-spacing:-.055em; } h1 em, .display-title em { color:var(--coral); font-weight:500; } .hero-text { max-width:460px; margin-bottom:34px; font-size:18px; color:#4a5367; } .hero-actions { display:flex; align-items:center; gap:25px; flex-wrap:wrap; } .button { display:inline-flex; align-items:center; gap:18px; padding:14px 18px; font-weight:700; font-size:13px; transition:transform .2s, background .2s; } .button:hover { transform:translateY(-2px); } .button-primary { color:#fff; background:var(--coral); } .button-primary span { font-size:18px; } .text-link { border-bottom:1px solid var(--navy); padding-bottom:4px; font-size:13px; font-weight:700; } .text-link span { margin-left:8px; color:var(--coral); } .hero-image { position:relative; margin:0; height:450px; box-shadow:18px 18px 0 var(--rose); overflow:hidden; } .hero-image img { width:100%; height:100%; object-fit:cover; object-position:center 60%; filter:saturate(.84) contrast(1.03); } .hero-image figcaption { position:absolute; left:0; bottom:0; padding:10px 15px; background:var(--paper); font-size:11px; letter-spacing:.07em; text-transform:uppercase; } .hero-footer { position:relative; display:flex; justify-content:center; gap:23px; margin-top:65px; color:var(--navy); font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; } .hero-footer span:before { content:""; display:inline-block; width:5px; height:5px; margin:0 8px 2px 0; border-radius:50%; background:var(--coral); }
.section { padding:120px 0; } .intro { background:var(--paper); } .intro-grid { display:grid; grid-template-columns:28% 1fr; gap:30px; } .display-title { margin-bottom:26px; font:500 clamp(42px, 5vw, 68px)/1.03 var(--serif); letter-spacing:-.055em; } .intro-copy { max-width:590px; font-size:18px; color:#535c70; } .services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:70px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .service-card { min-height:300px; padding:27px 29px 25px; border-right:1px solid var(--line); display:flex; flex-direction:column; transition:background .25s; } .service-card:last-child { border-right:0; } .service-card:hover { background:#f0eeea; } .service-card-accent { background:var(--navy); color:white; } .service-card-accent:hover { background:var(--navy-deep); } .service-number { color:var(--coral); font-size:12px; font-weight:700; letter-spacing:.1em; } .service-card h3 { margin:48px 0 12px; font:500 32px/1 var(--serif); letter-spacing:-.04em; } .service-card p { color:#697187; font-size:14px; } .service-card-accent p { color:#d9dce5; } .service-rule { width:100%; height:1px; margin-top:auto; margin-bottom:14px; background:currentColor; opacity:.35; } .service-detail { font-size:11px; letter-spacing:.04em; }
.space { background:var(--navy-deep); color:white; overflow:hidden; } .space-heading { display:flex; align-items:end; justify-content:space-between; gap:45px; margin-bottom:60px; } .section-label-light { color:var(--rose); } .display-title-light { margin-bottom:0; color:white; } .space-copy { width:min(100%,320px); margin-bottom:4px; color:#d6d9e3; font-size:15px; } .space-carousel { overflow:hidden; } .carousel-viewport { overflow:hidden; background:#232a3c; border:1px solid rgba(255,255,255,.08); border-radius:4px; } .carousel-track { display:flex; align-items:center; transition:transform .55s cubic-bezier(.22,.61,.36,1); } .carousel-slide { flex:0 0 100%; height:clamp(360px, 54vw, 620px); margin:0; display:flex; align-items:center; justify-content:center; background:#232a3c; } .carousel-slide img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; } .carousel-footer { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:20px; } .carousel-footer p { max-width:370px; margin:0; font:500 20px/1.3 var(--serif); color:var(--rose); } .carousel-controls { display:flex; align-items:center; gap:8px; } .carousel-counter { display:flex; align-items:center; gap:10px; margin-right:14px; color:#e0e3ec; font:600 11px var(--sans); letter-spacing:.12em; } .carousel-counter b { color:var(--rose); } .carousel-counter i { width:24px; height:1px; background:rgba(255,255,255,.35); } .carousel-counter em { font-style:normal; } .carousel-button { width:39px; height:39px; border:1px solid rgba(255,255,255,.45); color:white; background:transparent; cursor:pointer; font:400 20px/1 var(--sans); transition:background .2s,color .2s; } .carousel-button:hover,.carousel-button:focus-visible { color:var(--navy-deep); background:var(--rose); outline:0; } .carousel-dots { display:flex; gap:5px; margin-top:25px; } .carousel-dots button { flex:1; height:2px; border:0; padding:0; background:rgba(255,255,255,.23); cursor:pointer; } .carousel-dots button[aria-selected="true"] { background:var(--coral); }
.team { background:#f1eeea; } .team-heading { display:grid; grid-template-columns:28% 1fr; gap:30px; margin-bottom:60px; } .team-heading .display-title { margin:0; } .doctor-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .doctor-card { display:grid; grid-template-columns:37% 63%; background:white; min-height:360px; } .doctor-card-reverse { grid-template-columns:63% 37%; } .doctor-initial { display:flex; align-items:end; justify-content:center; overflow:hidden; padding-bottom:4px; font:500 clamp(180px,19vw,285px)/.62 var(--serif); letter-spacing:-.15em; } .doctor-initial-coral { color:var(--coral); background:var(--rose); } .doctor-initial-blue { color:var(--paper); background:var(--navy); } .doctor-content { padding:34px 28px 28px; display:flex; flex-direction:column; height:100%; } .doctor-role { margin-bottom:40px; color:var(--coral); text-transform:uppercase; font-size:10px; font-weight:700; letter-spacing:.14em; } .doctor-content h3 { margin-bottom:15px; font:500 30px/1.02 var(--serif); letter-spacing:-.045em; } .doctor-content > p:not(.doctor-role) { color:#647087; font-size:13px; } .doctor-content a { margin-top:auto; color:var(--navy); border-bottom:1px solid var(--coral); align-self:flex-start; font-size:11px; font-weight:700; padding-bottom:3px; }
.visit { background:var(--paper); } .visit-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; } .visit-copy .display-title { margin-bottom:35px; } .contact-details { border-top:1px solid var(--line); } .contact-row { position:relative; min-height:90px; padding:18px 30px 18px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:38% 1fr; gap:15px; transition:padding .2s; } a.contact-row:hover { padding-left:9px; } .contact-row span { color:var(--coral); text-transform:uppercase; font-size:10px; letter-spacing:.12em; font-weight:700; } .contact-row strong { font-size:14px; line-height:1.45; font-weight:600; } .contact-row i { position:absolute; right:2px; top:50%; transform:translateY(-50%); color:var(--coral); font-style:normal; font-size:20px; }
.site-footer { padding:40px 0 18px; color:white; background:var(--navy-deep); } .footer-top { display:flex; align-items:center; justify-content:space-between; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.2); } .footer-top img { width:185px; filter:brightness(0) invert(1) grayscale(1) contrast(3); } .footer-top p { margin:0; color:#dce0ea; font-size:12px; letter-spacing:.08em; text-transform:uppercase; } .footer-bottom { display:flex; justify-content:space-between; padding-top:17px; color:#c0c6d3; font-size:11px; } .footer-bottom a { color:var(--rose); }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease, transform .65s ease; } .reveal.is-visible { opacity:1; transform:translateY(0); }
@media (max-width:820px) { .container { width:min(100% - 36px, 620px); } .site-header { padding:15px 0; background:rgba(250,249,246,.92); backdrop-filter:blur(10px); position:fixed; } .nav-wrap { gap:15px; justify-content:space-between; } .brand { width:176px; height:38px; } .menu-toggle { display:flex; align-items:center; gap:8px; border:0; padding:8px 0; color:var(--navy); background:transparent; font:700 12px var(--sans); } .menu-toggle span,.menu-toggle:before,.menu-toggle:after { content:""; display:block; width:15px; height:1px; background:var(--navy); } .menu-toggle span { width:10px; } .nav-links { position:absolute; top:100%; left:0; right:0; margin:0; padding:16px 18px 22px; display:none; align-items:flex-start; flex-direction:column; gap:14px; background:var(--paper); border-bottom:1px solid var(--line); } .nav-links.is-open { display:flex; } .nav-action { display:none; } .hero { min-height:auto; padding:135px 0 34px; } .hero-grid,.intro-grid,.team-heading,.visit-grid { grid-template-columns:1fr; gap:25px; } .hero-monogram { top:150px; font-size:270px; } h1 { font-size:55px; } .hero-text { font-size:16px; } .hero-image { height:360px; margin-top:15px; } .hero-footer { display:none; } .section { padding:80px 0; } .display-title { font-size:46px; } .services-grid { grid-template-columns:1fr; margin-top:45px; } .service-card { min-height:250px; border-right:0; border-bottom:1px solid var(--line); } .service-card:last-child { border-bottom:0; } .space-heading { display:block; margin-bottom:38px; } .space-copy { margin-top:25px; } .carousel-footer { align-items:flex-start; flex-direction:column; gap:20px; } .doctor-grid { grid-template-columns:1fr; } .doctor-card { min-height:315px; } .visit-grid { gap:55px; } .contact-row { grid-template-columns:42% 1fr; } .footer-top,.footer-bottom { align-items:flex-start; flex-direction:column; gap:18px; } }
@media (max-width:430px) { .hero-image { height:310px; box-shadow:11px 11px 0 var(--rose); } .hero-actions { align-items:flex-start; flex-direction:column; gap:20px; } .display-title { font-size:40px; } .doctor-card { grid-template-columns:34% 66%; min-height:340px; } .doctor-card-reverse { grid-template-columns:66% 34%; } .doctor-content { padding:25px 19px; } .doctor-role { margin-bottom:30px; } .doctor-content h3 { font-size:26px; } .doctor-initial { font-size:150px; } .contact-row { grid-template-columns:1fr; gap:4px; padding-right:25px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition-duration:.01ms!important; animation-duration:.01ms!important; } .reveal { opacity:1; transform:none; } }