/* =========================================================
   DENTAL CORNER v3.0
   New visual system based on the observed design language of
   Lucid Dental: floating white navigation, pale blue/lavender
   hero, bold sans-serif typography, large photographic hero,
   restrained cards and generous whitespace.
   Original Dental Corner branding/content.
   ========================================================= */

:root{
    --navy:#0b2d59;
    --navy2:#123b68;
    --blue:#159ed0;
    --blue-dark:#0b82b4;
    --lavender:#eaf0ff;
    --aqua:#edfafa;
    --aqua2:#dff4f5;
    --text:#506779;
    --line:#dce7ee;
    --white:#fff;
    --dark:#082c57;
    --shadow:0 18px 45px rgba(22,58,100,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    color:var(--navy);
    background:#fff;
    font-family:"DM Sans","Manrope",Arial,sans-serif;
    font-size:16px;
    line-height:1.65;
    overflow-x:hidden
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.container{width:min(1250px,calc(100% - 80px));margin:auto}

.eyebrow{
    display:block;
    color:#087fae;
    font-size:11px;
    font-weight:700;
    letter-spacing:.19em;
    margin-bottom:17px
}

/* HEADER */
.site-header{
    position:absolute;
    top:18px;
    left:0;
    right:0;
    z-index:100
}
.header-inner{
    width:min(1600px,calc(100% - 110px));
    min-height:80px;
    margin:auto;
    padding:10px 18px 10px 28px;
    background:rgba(255,255,255,.97);
    border-radius:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow:0 12px 35px rgba(25,70,100,.06)
}
.brand{display:flex;align-items:center;gap:13px}
.brand-symbol{
    width:52px;height:52px;border-radius:50%;
    background:var(--blue);color:#fff;
    display:grid;place-items:center;
    font-size:12px;font-weight:800
}
.brand-name{
    font-size:34px;
    font-weight:800;
    letter-spacing:-.045em;
    color:#122f50
}
.brand-name small{
    display:block;
    margin-top:1px;
    font-size:9px;
    letter-spacing:.2em;
    font-weight:700;
    color:#72859a
}
.main-nav{display:flex;align-items:center;gap:31px;font-size:15px;font-weight:600;color:#082c57}
.main-nav>a:hover,.nav-dropdown>button:hover{color:var(--blue)}
.main-nav>a.active{color:var(--blue)}
.nav-phone{
    background:var(--blue);
    color:#fff!important;
    border-radius:28px;
    padding:13px 26px;
    min-width:157px;
    text-align:center;
    font-weight:700
}
.nav-dropdown{position:relative}
.nav-dropdown>button{
    border:0;background:none;color:inherit;cursor:pointer;
    padding:10px 0;font-weight:600;font-size:15px
}
.nav-dropdown>button span{font-size:14px;margin-left:5px}
.dropdown-menu{
    position:absolute;
    top:43px;
    left:-18px;
    width:255px;
    padding:10px;
    background:#fff;
    border-radius:14px;
    box-shadow:0 20px 45px rgba(18,58,90,.15);
    opacity:0;
    visibility:hidden;
    transform:translateY(7px);
    transition:.2s
}
.nav-dropdown:hover .dropdown-menu{
    opacity:1;visibility:visible;transform:none
}
.dropdown-menu a{
    display:block;padding:9px 11px;border-radius:8px;
    font-size:14px
}
.dropdown-menu a:hover{background:var(--lavender);color:var(--blue-dark)}
.mobile-menu{display:none;border:0;background:none;font-size:24px;color:var(--navy)}

/* HERO */
.hero{
    position:relative;
    min-height:880px;
    background:var(--lavender);
    overflow:hidden
}
.hero-image{
    position:absolute;
    top:0;right:0;
    width:62%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}
.hero-fade{
    position:absolute;inset:0;
    background:linear-gradient(
        90deg,
        #eaf0ff 0%,
        #eaf0ff 34%,
        rgba(234,240,255,.96) 43%,
        rgba(234,240,255,.62) 53%,
        rgba(234,240,255,0) 69%
    )
}
.hero-content{
    position:relative;
    z-index:2;
    width:min(1600px,calc(100% - 110px));
    min-height:880px;
    margin:auto;
    display:flex;
    align-items:center
}
.hero-copy{width:52%;padding-top:75px}
.hero h1{
    margin:0 0 27px;
    color:var(--dark);
    font-size:clamp(55px,5.5vw,88px);
    line-height:.94;
    letter-spacing:-.055em;
    font-weight:800
}
.hero h1 strong{font-weight:800}
.hero-copy>p{
    max-width:600px;
    color:#122f50;
    font-size:21px;
    line-height:1.35;
    font-weight:600;
    margin:0 0 30px
}
.hero-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    min-height:58px;
    padding:16px 30px;
    border-radius:9px;
    background:var(--blue);
    color:#fff;
    font-size:16px;
    font-weight:700;
    transition:.2s;
    border:0;
    cursor:pointer
}
.hero-button:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(21,158,208,.22)}
.hero-button.dark{background:var(--blue-dark)}
.hero-button.white{background:#fff;color:var(--navy);border:1px solid #d9e5ed}
.hero-button.outline-white{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.hero-slide-label{
    position:absolute;
    right:43%;
    bottom:45px;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--blue-dark);
    font-size:11px;
    font-weight:800
}
.hero-slide-label i{display:block;width:55px;height:1px;background:var(--blue)}
.hero-controls{
    position:absolute;
    z-index:5;
    left:43%;
    bottom:39px;
    display:flex;
    gap:8px
}
.hero-controls button{
    width:40px;height:40px;
    border:1px solid rgba(12,70,100,.18);
    border-radius:50%;
    background:rgba(255,255,255,.8);
    color:var(--navy);
    cursor:pointer
}

/* SECTIONS */
.section{padding:120px 0}
.section-top{
    display:grid;
    grid-template-columns:1fr 430px;
    gap:90px;
    align-items:end;
    margin-bottom:60px
}
.section-top h2,.expertise h2,.doctor-copy h2,.appointment h2,.clinic-cta h2,.center-heading h2{
    margin:0;
    color:var(--dark);
    font-size:clamp(44px,4.4vw,66px);
    line-height:1;
    letter-spacing:-.045em;
    font-weight:800
}
.section-top h2 strong,.expertise h2 strong,.doctor-copy h2 strong,.appointment h2 strong,.clinic-cta h2 strong,.center-heading h2 strong{font-weight:800}
.section-intro p,.appointment>div>p,.clinic-cta p{
    color:var(--text);
    font-size:16px;
    line-height:1.8;
    margin:0
}
.line-link{
    display:inline-block;
    margin-top:22px;
    color:var(--blue-dark);
    font-size:14px;
    font-weight:700
}
.line-link span{margin-left:8px}

/* ABOUT */
.about{background:#fff}
.about-feature{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center
}
.about-image{
    height:520px;
    border-radius:4px;
    position:relative;
    overflow:hidden;
    background:#e8f2f7
}
.about-image img{width:100%;height:100%;object-fit:cover;display:block}
.about-image:before{
    content:"";
    position:absolute;
    width:390px;height:390px;
    border-radius:50%;
    border:1px solid rgba(21,158,208,.18);
    left:50%;top:50%;
    transform:translate(-50%,-50%)
}
.image-circle{
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    width:190px;height:190px;
    border-radius:50%;
    display:grid;place-items:center;
    background:#fff;
    color:var(--blue-dark);
    font-size:52px;font-weight:800;
    box-shadow:var(--shadow)
}
.about-copy h3{
    margin:0 0 20px;
    font-size:52px;
    line-height:1;
    letter-spacing:-.045em
}
.about-copy h3 strong{font-weight:800}
.about-copy>p{
    max-width:570px;
    color:var(--text);
    font-size:16px;
    line-height:1.8
}
.value-grid{
    margin-top:32px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    border-top:1px solid var(--line)
}
.value-grid div{
    padding:20px 15px 20px 0;
    border-bottom:1px solid var(--line)
}
.value-grid b{display:block;color:var(--blue-dark);font-size:11px}
.value-grid strong{display:block;margin-top:6px;font-size:16px}
.value-grid span{display:block;color:#6b7f8a;font-size:11px;margin-top:3px}

/* SERVICES */
.services{background:#f7fbff}
.service-list{border-top:1px solid #cbdde7}
.service-item{
    display:grid;
    grid-template-columns:60px 1.1fr 1.5fr 35px;
    align-items:center;
    gap:25px;
    padding:24px 8px;
    border-bottom:1px solid #cbdde7;
    transition:.2s
}
.service-item:hover{background:#eef5ff;padding-left:18px;padding-right:18px}
.service-no{font-size:11px;color:var(--blue-dark);font-weight:800}
.service-item h3{
    margin:0;
    font-size:25px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:-.025em
}
.service-item p{margin:0;color:#637986;font-size:14px}
.service-arrow{text-align:right;font-size:21px;color:var(--blue-dark)}

/* EXPERTISE */
.expertise{background:var(--aqua)}
.expertise-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:100px;
    align-items:center
}
.large-copy{
    color:#244d63!important;
    font-size:21px!important;
    line-height:1.55!important;
    font-weight:600
}
.expertise-copy .hero-button{margin-top:25px}
.expertise-points{border-top:1px solid #c5dde4}
.expertise-points article{
    display:grid;
    grid-template-columns:55px 1fr;
    gap:20px;
    padding:25px 0;
    border-bottom:1px solid #c5dde4
}
.expertise-points article>span{
    color:var(--blue-dark);
    font-size:11px;
    font-weight:800
}
.expertise-points h3{margin:0 0 4px;font-size:17px}
.expertise-points p{margin:0;color:#637a84;font-size:14px;line-height:1.7}

/* DOCTOR */
.doctor{background:#fff}
.doctor-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:center
}
.doctor-visual{position:relative;height:570px}
.doctor-photo-placeholder{
    width:100%;
    height:100%;
    background:#e8f2f7;
    display:block;
    overflow:hidden
}
.doctor-photo-placeholder img{width:100%;height:100%;object-fit:cover;display:block}

.doctor-card{
    position:absolute;
    left:25px;bottom:25px;
    padding:17px 20px;
    background:#fff;
    box-shadow:var(--shadow);
    min-width:270px
}
.doctor-card small{display:block;color:#758995;font-size:9px;letter-spacing:.18em}
.doctor-card strong{display:block;margin-top:5px;font-size:17px}
.doctor-copy>p{color:var(--text);font-size:16px;line-height:1.8}
.doctor-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 20px;
    margin:25px 0
}
.doctor-list span{font-size:13px;color:#4d6875}

/* METRICS */
.metrics{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.metrics-grid div{padding:28px 20px;border-right:1px solid var(--line)}
.metrics-grid div:last-child{border-right:0}
.metrics-grid strong{display:block;color:var(--blue-dark);font-size:35px;font-weight:800}
.metrics-grid span{font-size:12px;color:#667d88}

/* GALLERY */
.gallery{background:#f7fbff}
.gallery-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:14px;height:440px}
.gallery-box{background-position:center;background-size:cover}
.gallery-box{overflow:hidden;background:#e8f2f7}
.gallery-box img{width:100%;height:100%;object-fit:cover;display:block}

/* STORIES */
.stories{background:#edf5ff}
.center-heading{text-align:center;margin-bottom:50px}
.center-heading p{color:#677b89;font-size:14px}
.stories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stories-grid article{
    background:#fff;
    padding:30px;
    min-height:250px;
    border:1px solid var(--line)
}
.stars{color:var(--blue);letter-spacing:3px}
.stories-grid p{font-size:17px;line-height:1.6;font-weight:500;color:#294e64}
.stories-grid small{font-size:11px;color:#738690}

/* APPOINTMENT */
.appointment{background:#fff}
.appointment-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:90px;
    align-items:center
}
.contact-details{margin-top:30px;display:grid;gap:15px}
.contact-details a{display:flex;flex-direction:column}
.contact-details small{color:#7b8d97;font-size:9px;letter-spacing:.15em}
.contact-details b{font-size:14px;color:var(--navy)}
.appointment-form{
    background:#f1f6ff;
    padding:38px;
    border-radius:3px
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
label{display:block;color:#234b62;font-size:11px;font-weight:700;margin-bottom:15px}
input,select,textarea{
    display:block;width:100%;
    margin-top:7px;
    padding:14px 15px;
    border:1px solid #d6e2ea;
    border-radius:3px;
    background:#fff;
    color:var(--navy);
    outline:0;
    font-size:14px
}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}

/* CLINIC */
.clinic-cta{
    background:var(--navy);
    color:#fff;
    padding:110px 0
}
.clinic-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:85px;
    align-items:center
}
.clinic-cta .eyebrow{color:#69c9e7}
.clinic-cta h2{color:#fff}
.clinic-cta p{color:#d3e3ed}
.cta-actions{display:flex;gap:12px;margin-top:25px;flex-wrap:wrap}
.map{height:420px;background:#dcebf0}
.map iframe{width:100%;height:100%;border:0}

/* FOOTER */
footer{background:#eaf0ff;padding:35px 0 20px}
.footer{display:flex;align-items:center;justify-content:space-between;gap:25px}
.footer-nav{display:flex;gap:22px;font-size:12px;color:#526c7d}
.footer>small{font-size:10px;color:#708493}

/* RESPONSIVE */
@media(max-width:1150px){
    .header-inner{width:calc(100% - 42px)}
    .main-nav{gap:19px;font-size:13px}
    .nav-phone{padding:12px 18px;min-width:auto}
    .container{width:calc(100% - 48px)}
    .hero-content{width:calc(100% - 48px)}
    .hero h1{font-size:70px}
}
@media(max-width:950px){
    .site-header{top:12px}
    .header-inner{min-height:70px;padding:8px 15px 8px 20px}
    .mobile-menu{display:block}
    .main-nav{
        display:none;
        position:absolute;
        top:78px;
        left:15px;right:15px;
        padding:16px 22px;
        background:#fff;
        border-radius:20px;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        box-shadow:0 20px 45px rgba(15,60,95,.14)
    }
    .main-nav.open{display:flex}
    .main-nav>a,.nav-dropdown>button{padding:11px 0}
    .nav-phone{text-align:center;margin-top:8px}
    .dropdown-menu{position:static;width:auto;box-shadow:none;display:none;opacity:1;visibility:visible;transform:none;padding:0 10px}
    .nav-dropdown:hover .dropdown-menu{display:block}
    .hero{min-height:780px}
    .hero-image{width:67%;opacity:.9}
    .hero-fade{background:linear-gradient(90deg,#eaf0ff 0%,#eaf0ff 35%,rgba(234,240,255,.8) 55%,rgba(234,240,255,.05) 78%)}
    .hero-content{min-height:780px;width:calc(100% - 48px)}
    .hero-copy{width:65%;padding-top:100px}
    .hero h1{font-size:62px}
    .section-top,.about-feature,.expertise-grid,.doctor-grid,.appointment-grid,.clinic-grid{grid-template-columns:1fr;gap:45px}
    .section-top{margin-bottom:45px}
    .metrics-grid{grid-template-columns:1fr 1fr}
    .metrics-grid div:nth-child(2){border-right:0}
    .metrics-grid div{border-bottom:1px solid var(--line)}
    .gallery-grid{height:500px}
    .stories-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
    .container{width:calc(100% - 30px)}
    .header-inner{width:calc(100% - 24px)}
    .brand-name{font-size:26px}
    .brand-symbol{width:44px;height:44px}
    .hero{min-height:730px}
    .hero-image{width:100%;opacity:.3}
    .hero-fade{background:rgba(234,240,255,.82)}
    .hero-content{min-height:730px;width:calc(100% - 30px);align-items:center}
    .hero-copy{width:100%;padding-top:100px}
    .hero h1{font-size:50px}
    .hero-copy>p{font-size:18px}
    .hero-button{width:100%}
    .hero-slide-label{right:25px}
    .hero-controls{left:15px}
    .section{padding:75px 0}
    .section-top h2,.expertise h2,.doctor-copy h2,.appointment h2,.clinic-cta h2,.center-heading h2{font-size:42px}
    .about-image{height:350px}
    .about-copy h3{font-size:40px}
    .value-grid,.doctor-list,.form-row{grid-template-columns:1fr}
    .service-item{grid-template-columns:35px 1fr 30px;gap:10px;padding:20px 3px}
    .service-item p{display:none}
    .service-item h3{font-size:20px}
    .expertise-points article{grid-template-columns:38px 1fr}
    .doctor-visual{height:380px}
    .doctor-photo-placeholder span{font-size:27px}
    .metrics-grid strong{font-size:28px}
    .gallery-grid{grid-template-columns:1fr;height:850px}
    .stories-grid{grid-template-columns:1fr}
    .appointment-form{padding:24px 18px}
    .map{height:320px}
    .footer{flex-direction:column;text-align:center}
    .footer-nav{flex-wrap:wrap;justify-content:center}
}
\n\n/* SEO/AI content additions — preserves v3.0 visual language */\n.seo-information{background:#f7fbff}\n.seo-faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}\n.seo-faq-grid article{background:#fff;border:1px solid #dce7ef;padding:28px}\n.seo-faq-grid h3{margin:0 0 10px;font-size:18px;color:#082c57}\n.seo-faq-grid p{margin:0;color:#536c7d;font-size:14px;line-height:1.8}\n.faq{background:#fff}\n.center-heading{text-align:center;margin-bottom:45px}\n.center-heading h2{margin:0;color:#082c57;font-size:clamp(42px,4vw,60px);line-height:1;letter-spacing:-.045em}\n.center-heading strong{font-weight:800}\n.faq-list{max-width:900px;margin:auto;border-top:1px solid #dce7ef}\n.faq-list details{border-bottom:1px solid #dce7ef;padding:20px 0}\n.faq-list summary{cursor:pointer;font-size:16px;font-weight:700;color:#082c57;list-style:none;display:flex;justify-content:space-between;gap:20px}\n.faq-list summary::-webkit-details-marker{display:none}\n.faq-list summary:after{content:'+';color:#159ed0;font-size:22px;line-height:1}\n.faq-list details[open] summary:after{content:'−'}\n.faq-list p{color:#536c7d;font-size:14px;line-height:1.8;max-width:800px}\n@media(max-width:900px){.seo-faq-grid{grid-template-columns:1fr 1fr}}\n@media(max-width:600px){.seo-faq-grid{grid-template-columns:1fr}}\n