
/* PREMIUM REFERENCE DESIGN • 2026 */
:root{--navy:#23364a;--ink:#27384b;--sand:#b99b84;--paper:#f8f6f2}
html{scroll-behavior:smooth}body{background:var(--paper)!important;color:var(--ink)!important;font-family:'IBM Plex Sans Arabic',Tahoma,sans-serif!important}h1,h2,h3{color:inherit}header{background:#223448!important;box-shadow:none!important;min-height:76px;padding:12px clamp(18px,4vw,72px)!important;gap:28px}header .brandmark{width:clamp(145px,19vw,235px)}header .brandmark img{filter:brightness(0) invert(1)!important}header nav{display:flex!important;align-items:center;gap:clamp(8px,1.6vw,26px);flex-wrap:wrap}header nav a{margin:0!important;font-size:13px!important;color:#f9f7f3!important}header nav a:last-child{background:#efe9e1;color:#243548!important;border-radius:40px;padding:10px 18px}
.hero{background:linear-gradient(90deg,rgba(24,42,59,.94),rgba(24,42,59,.12)),url('doctor-operating-wide.jpg') center/cover!important;min-height:530px!important;padding:0 clamp(20px,5vw,76px)!important;color:white!important}.hero>.hero-inner{max-width:1350px!important;min-height:530px;grid-template-columns:1fr 1fr!important;gap:30px!important}.hero-copy{position:relative;z-index:1;max-width:540px}.hero-copy .eyebrow{font-size:12px;letter-spacing:.22em;color:#d8b99f!important}.hero-copy h1{color:white!important;font-size:clamp(36px,5.2vw,68px)!important;line-height:1.25!important;letter-spacing:-.04em!important}.hero-copy p{color:#f1f0ef!important;line-height:1.9!important;font-size:17px}.hero-photo{height:480px!important;border-radius:0!important;box-shadow:none!important;align-self:end;overflow:hidden}.hero-photo img{width:100%;height:100%;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 20px 40px #14203066)}.hero .btn{background:#f2ebe4!important;color:#233448!important;border-radius:50px!important;padding:13px 28px!important}.hero .outline-btn{border-radius:50px!important}
.premium-stats{background:#24384d!important;color:#fff!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;padding:25px 5%!important;gap:0!important}.premium-stats>div{padding:12px 24px!important;border-inline-start:1px solid #ffffff36}.premium-stats strong{font-size:18px!important;color:#fff!important}.premium-stats span{color:#e1e2e4!important;font-size:13px!important}
#procedures{max-width:1320px!important;padding:65px 24px!important}#procedures h2{font-size:clamp(30px,4vw,46px)!important}#procedures h2:before{content:'OUR PROCEDURES';display:block;color:#b4957e;font:11px Arial,sans-serif;letter-spacing:.32em;margin-bottom:10px}.sub{color:#657180!important}.grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}.card{border-radius:12px!important;border:1px solid #e7e1da!important;box-shadow:0 8px 24px #1e2f4210!important;overflow:hidden;background:#fff!important}.card .art{height:auto!important;aspect-ratio:4/4.3!important;background:#eee7e0!important;display:block}.card .art img{width:100%;height:100%;object-fit:cover!important;transition:transform .5s}.card:hover .art img{transform:scale(1.045)}.card .body{padding:17px 17px 20px!important}.card h3{font-size:20px!important;margin:5px 0!important}.card p{font-size:13px!important;line-height:1.8!important;margin:6px 0 14px!important}.card .tag{color:#aa8a71!important}.card .procedure-link{background:#f1eee9!important;color:#24374b!important;border-radius:40px;padding:10px 16px;text-decoration:none;font-size:13px;text-align:center}.filters button{border-radius:30px!important}.filters button.active{background:#25384b!important}
.gallery-section{background:#f4f0eb!important}.photo-grid img,.premium-gallery-more img{border-radius:14px!important}.premium-lead{background:#f9f7f3!important}.info{background:#f0eee9!important}.contact-section{background:#f5f2ed!important}.contact-panel{border:1px solid #e6e0d9!important;border-radius:18px!important}footer{background:#223448!important}footer small{display:block;color:#c9ced4!important}a:focus-visible,button:focus-visible{outline:3px solid #c9a88e!important}
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}header{justify-content:center!important}header nav{justify-content:center}}
@media(max-width:700px){header{padding:13px 12px!important;gap:8px!important}header .brandmark{width:180px!important}header nav{gap:7px!important;justify-content:center}header nav a{font-size:12px!important;padding:4px 2px}header nav a:last-child{padding:6px 11px}.hero{min-height:unset!important;padding:0 18px 36px!important;background:linear-gradient(180deg,#25394de8,#25394df0),url('doctor-operating-wide.jpg') center/cover!important}.hero>.hero-inner{display:flex!important;flex-direction:column-reverse;min-height:0;gap:0!important}.hero-photo{width:100%;height:280px!important;align-self:center;order:0}.hero-photo img{object-fit:contain!important;object-position:center bottom!important}.hero-copy{text-align:center!important;padding:15px 0 0}.hero-copy h1{font-size:clamp(31px,8vw,43px)!important}.hero-copy p{font-size:14px!important}.premium-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:15px 12px!important}.premium-stats>div{padding:12px!important}.premium-stats strong{font-size:14px!important}.premium-stats span{font-size:11px!important}.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}#procedures{padding:45px 14px!important}.card .art{aspect-ratio:4/4.5!important}.card .body{padding:12px!important}.card h3{font-size:16px!important}.card p{font-size:12px!important}.card .procedure-link{font-size:11px;padding:8px 9px}.search{max-width:100%}.photo-grid img{height:200px!important}}
@media(max-width:390px){.grid{grid-template-columns:1fr!important}.card .art{aspect-ratio:4/3!important}.hero-photo{height:240px!important}}
