/*
Theme Name: Emergency Dentist Dudley – Highview
Author: Highview Dental
Description: Bespoke, lightweight emergency dentist landing page for Highview Dental.
Version: 1.0.0
*/
:root{--black:#080808;--charcoal:#151515;--gold:#D7AD62;--light-gold:#F0CC7D;--cream:#F7F5F0;--grey:#B9B5AE;--white:#fff;--line:rgba(215,173,98,.22)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:#fff;font-family:Arial,Helvetica,sans-serif;line-height:1.5}a{text-decoration:none;color:inherit}.container{width:min(1180px,calc(100% - 48px));margin:auto}
.top{background:#000;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px}.top .container{height:38px;display:flex;align-items:center;justify-content:space-between;color:var(--grey)}.top strong{color:var(--gold)}
nav{background:rgba(8,8,8,.96);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:50;backdrop-filter:blur(14px)}.nav-inner{height:82px;display:flex;align-items:center;justify-content:space-between}.logo{font-weight:900;letter-spacing:-1px;font-size:24px}.logo small{display:block;color:var(--gold);font-size:8px;letter-spacing:3px;margin-top:1px}.nav-links{display:flex;align-items:center;gap:28px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.nav-links a{color:#e9e5de}.nav-links a:hover{color:var(--gold)}
.gold-btn,.outline-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 21px;border-radius:2px;text-transform:uppercase;font-size:12px;letter-spacing:.06em;font-weight:900;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}.gold-btn{background:var(--gold);color:#080808}.gold-btn:hover{background:var(--light-gold);transform:translateY(-2px);box-shadow:0 10px 28px rgba(215,173,98,.18)}.outline-btn{border:1px solid var(--gold);color:var(--gold)}.outline-btn:hover{background:rgba(215,173,98,.08);transform:translateY(-2px)}
.hero{min-height:720px;position:relative;display:flex;align-items:center;overflow:hidden;background:linear-gradient(90deg,rgba(8,8,8,.98) 0%,rgba(8,8,8,.88) 49%,rgba(8,8,8,.38) 100%),radial-gradient(circle at 76% 48%,rgba(215,173,98,.22),transparent 30%),linear-gradient(135deg,#080808,#1b1813)}.hero:after{content:"";position:absolute;right:-180px;top:-180px;width:620px;height:620px;border:1px solid rgba(215,173,98,.18);border-radius:50%;box-shadow:0 0 0 80px rgba(215,173,98,.025),0 0 0 160px rgba(215,173,98,.018);animation:slowspin 30s linear infinite}.hero-content{position:relative;z-index:2;padding:100px 0 90px;max-width:730px;animation:rise .8s ease both}.eyebrow{color:var(--gold);font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}h1,h2,h3{font-family:Arial,Helvetica,sans-serif}h1{font-size:clamp(48px,7vw,86px);line-height:.9;letter-spacing:-.055em;text-transform:uppercase;margin:18px 0 27px;font-weight:950}h1 span{color:var(--gold)}.hero-copy{font-size:18px;color:#d0cbc3;max-width:650px;margin-bottom:30px}.hero-copy strong{color:#fff}.actions{display:flex;gap:12px;flex-wrap:wrap}.hero-small{margin-top:19px;font-size:11px;color:var(--grey)}.hero-side{position:absolute;right:7%;bottom:62px;width:300px;z-index:3;border-left:2px solid var(--gold);padding:22px 24px;background:rgba(21,21,21,.82);backdrop-filter:blur(10px);animation:fadein 1.1s .25s ease both}.hero-side strong{display:block;font-size:22px;text-transform:uppercase;line-height:1.05;margin-bottom:7px}.hero-side span{color:var(--grey);font-size:12px}
.quick{background:var(--gold);color:#080808}.quick .container{display:grid;grid-template-columns:repeat(3,1fr)}.quick-item{padding:19px 20px;border-right:1px solid rgba(8,8,8,.18);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.quick-item:last-child{border:0}
.section{padding:96px 0}.cream{background:var(--cream);color:var(--black)}.kicker{font-size:11px;color:var(--gold);font-weight:900;letter-spacing:.2em;text-transform:uppercase}.cream .kicker{color:#87652c}.heading{max-width:760px;margin-bottom:48px}.heading h2{font-size:clamp(38px,5vw,62px);line-height:.94;letter-spacing:-.05em;text-transform:uppercase;margin:11px 0 15px;font-weight:950}.heading p{font-size:17px;color:#69645e;max-width:670px;margin:0}.black-section .heading p{color:var(--grey)}
.emergency-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.emergency-card{background:#fff;border:1px solid #ded9d0;padding:32px;min-height:240px;position:relative;transition:transform .25s ease,box-shadow .25s ease}.emergency-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.08)}.emergency-card .num{color:#9b7a42;font-size:11px;font-weight:900;letter-spacing:.15em}.emergency-card h3{font-size:26px;text-transform:uppercase;line-height:1;margin:15px 0 10px}.emergency-card p{color:#6b6761;font-size:14px;margin:0}.emergency-card:after{content:"↗";position:absolute;right:26px;top:24px;font-size:25px;color:#b9b1a5}
.black-section{background:var(--black)}.two-col{display:grid;grid-template-columns:1fr .8fr;gap:80px;align-items:start}.reassure{border-top:1px solid var(--line);margin-top:25px}.reassure-row{padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:34px 1fr;gap:14px}.icon{width:28px;height:28px;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-size:11px}.reassure strong{display:block;text-transform:uppercase;font-size:14px}.reassure span{display:block;color:var(--grey);font-size:12px;margin-top:3px}.call-panel{background:var(--charcoal);border:1px solid var(--line);padding:35px}.call-panel .big{font-size:38px;font-weight:950;letter-spacing:-1px;margin:9px 0 20px}.call-panel p{color:var(--grey);font-size:13px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.step{border:1px solid rgba(255,255,255,.11);padding:30px;background:var(--charcoal);transition:transform .25s ease}.step:hover{transform:translateY(-4px)}.step-num{color:var(--gold);font-size:12px;font-weight:900;letter-spacing:.15em}.step h3{font-size:22px;text-transform:uppercase;line-height:1;margin:18px 0 10px}.step p{color:var(--grey);font-size:13px;margin:0}
.faq{max-width:900px}details{border-top:1px solid #d8d2c8;padding:21px 0}details:last-child{border-bottom:1px solid #d8d2c8}summary{font-size:17px;font-weight:900;text-transform:uppercase;cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}summary:after{content:"+";float:right;color:#967238}details[open] summary:after{content:"−"}details p{color:#6b6761;font-size:14px;max-width:760px}
.final{padding:90px 0;text-align:center;background:linear-gradient(135deg,#151515,#080808)}.final h2{font-size:clamp(42px,6vw,70px);line-height:.9;letter-spacing:-.055em;text-transform:uppercase;max-width:800px;margin:10px auto 18px;font-weight:950}.final p{color:var(--grey);max-width:620px;margin:0 auto 26px;font-size:17px}
footer{background:#000;border-top:1px solid rgba(255,255,255,.08);padding:40px 0 80px}.footer-grid{display:flex;justify-content:space-between;gap:30px}footer .brand{font-weight:900}footer .tag{color:var(--gold);font-size:9px;letter-spacing:3px}footer p{color:var(--grey);font-size:12px;margin:8px 0}.mobile-bar{display:none}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes fadein{from{opacity:0;transform:translateX(25px)}to{opacity:1;transform:none}}@keyframes slowspin{to{transform:rotate(360deg)}}
@media(max-width:900px){.nav-links{display:none}.hero{min-height:700px}.hero-side{display:none}.quick .container{grid-template-columns:1fr}.quick-item{border-right:0;border-bottom:1px solid rgba(8,8,8,.16)}.two-col,.emergency-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.two-col{gap:45px}}
@media(max-width:560px){.container{width:min(100% - 30px,1180px)}.top .container{font-size:10px}.hero-content{padding:85px 0 75px}h1{letter-spacing:-3px}.hero-copy{font-size:16px}.section{padding:70px 0}.mobile-bar{display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:100;background:#080808;border-top:1px solid var(--gold)}.mobile-bar a{padding:14px 4px;text-align:center;color:#fff;font-size:10px;font-weight:900;text-transform:uppercase;border-right:1px solid rgba(255,255,255,.1)}.mobile-bar a:nth-child(2){background:var(--gold);color:#080808}.footer-grid{display:block}}