/*
Theme Name: Sargon Dental
Theme URI: https://www.sargondental.com
Author: Sargon Dental
Description: Custom theme recreating the Sargon Dental website (cosmetic, implant & restorative dentistry, Encino & West Hollywood).
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: sargon-dental
*/


:root{
  /* Black & white theme to match sargondental.com */
  --blue:#1a1a1a;        /* primary accent (near-black) */
  --blue-dark:#000000;   /* hover / links */
  --blue-light:#cfcfcf;  /* light grey accent text on dark */
  --blue-pale:#f5f5f5;   /* light grey section background */
  --blue-pale2:#e8e8e8;
  --navy:#0a0a0a;        /* headings & dark sections */
  --ink:#313131;
  --muted:#6e6e6e;
  --white:#ffffff;
  --line:#e6e6e6;
  --shadow:0 14px 40px rgba(0,0,0,.12);
  --accent:#3a9fd8;       /* brand blue accent (Book CTA, hero script) */
  --accent-dark:#2b87bd;
  --accent-light:#92d6ff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Roboto','Raleway',Arial,sans-serif;color:var(--ink);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;color:var(--navy);line-height:1.2;font-weight:700}
a{color:var(--blue-dark);text-decoration:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 22px}
.btn{display:inline-block;font-family:'Montserrat',sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;padding:14px 30px;border-radius:40px;cursor:pointer;transition:.25s;border:2px solid transparent}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn-ghost{background:transparent;color:#fff;border-color:#fff}
.btn-ghost:hover{background:#fff;color:var(--navy)}
.btn-outline{background:transparent;color:var(--blue-dark);border-color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:#fff}

/* Top bar */
.topbar{background:var(--navy);color:#dbe7f1;font-size:.8rem;font-family:'Montserrat',sans-serif}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px;flex-wrap:wrap}
.topbar a{color:#dbe7f1}
.topbar a:hover{color:var(--blue-light)}
.topbar .phones span{margin-right:18px;display:inline-block}

/* Header */
header.site{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.08)}
.headrow{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:84px}
.brand{display:flex;align-items:center;gap:12px;font-family:'Playfair Display',serif;color:var(--navy);font-weight:700}
.brand .mark{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-light));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;flex:none}
.brand .name{font-size:1.4rem;line-height:1}
.brand .name small{display:block;font-family:'Montserrat',sans-serif;font-weight:500;font-size:.6rem;letter-spacing:.32em;color:var(--blue-dark);text-transform:uppercase;margin-top:3px}
nav.main{display:flex;align-items:center;gap:4px}
nav.main>ul{display:flex;list-style:none;align-items:center}
nav.main>ul>li{position:relative}
nav.main>ul>li>a,nav.main>ul>li>span{display:block;padding:14px 13px;font-family:'Montserrat',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);cursor:pointer}
nav.main>ul>li:hover>a,nav.main>ul>li:hover>span{color:var(--blue-dark)}
nav.main .drop{position:absolute;top:100%;left:0;background:#fff;min-width:268px;box-shadow:var(--shadow);border-top:3px solid var(--blue);list-style:none;padding:8px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;border-radius:0 0 10px 10px}
nav.main>ul>li:hover .drop{opacity:1;visibility:visible;transform:translateY(0)}
nav.main .drop li a{display:block;padding:10px 20px;font-family:'Montserrat',sans-serif;font-size:.8rem;font-weight:500;color:var(--ink)}
nav.main .drop li a:hover{background:var(--blue-pale);color:var(--blue-dark)}
.nav-cta{margin-left:8px}
.menu-toggle{display:none;background:none;border:0;font-size:1.6rem;color:var(--navy);cursor:pointer}

/* Hero */
.hero{position:relative;background:linear-gradient(120deg,var(--navy) 0%,var(--blue-dark) 60%,var(--blue) 100%);color:#fff;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:480px;height:480px;border-radius:50%;background:rgba(255,255,255,.06)}
.hero .container{position:relative;padding:118px 22px;z-index:2;max-width:1000px;text-align:center}
.hero .eyebrow{font-family:'Montserrat',sans-serif;letter-spacing:.28em;text-transform:uppercase;font-size:.74rem;color:#e6e6e6;margin-bottom:22px}
.hero h1{color:#fff;font-size:3.4rem;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.hero .hero-script{font-family:'Pinyon Script',cursive;color:var(--accent-light);font-size:3.4rem;line-height:1.1;margin-bottom:34px;font-weight:400}
.hero p{font-size:1.12rem;color:#ededed;max-width:640px;margin:0 auto 30px}
.hero .btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* page header (interior) */
.pagehead{background:linear-gradient(120deg,var(--navy),var(--blue-dark));color:#fff;padding:62px 0}
.pagehead .crumb{font-family:'Montserrat',sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-light);margin-bottom:12px}
.pagehead h1{color:#fff;font-size:2.5rem}
.pagehead p{color:#e4eef6;max-width:680px;margin-top:14px}

/* Sections */
section{padding:72px 0}
section.tight{padding:48px 0}
.alt{background:var(--blue-pale)}
.sec-head{text-align:center;max-width:760px;margin:0 auto 48px}
.sec-head .eyebrow{font-family:'Montserrat',sans-serif;letter-spacing:.22em;text-transform:uppercase;font-size:.74rem;color:var(--blue-dark);margin-bottom:12px;font-weight:600}
.sec-head h2{font-size:2.2rem;margin-bottom:14px}
.sec-head p{color:var(--muted)}
.lead{font-size:1.12rem;color:var(--muted)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.split .photo{border-radius:16px;min-height:340px;background:linear-gradient(135deg,var(--blue-pale2),var(--blue-light));box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:var(--blue-dark);font-family:'Playfair Display',serif;font-size:1.1rem;text-align:center;padding:20px}
.split h2{font-size:2rem;margin-bottom:16px}
.split p{color:var(--muted);margin-bottom:16px}
.checklist{list-style:none;margin:18px 0}
.checklist li{padding:7px 0 7px 32px;position:relative;color:var(--ink)}
.checklist li::before{content:"\2713";position:absolute;left:0;top:7px;width:20px;height:20px;background:var(--blue);color:#fff;border-radius:50%;font-size:.72rem;display:flex;align-items:center;justify-content:center}

.grid{display:grid;gap:26px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 26px;transition:.25s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.card .ico{width:56px;height:56px;border-radius:14px;background:var(--blue-pale);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:18px}
.ico-svg{display:block}
.card h3{font-size:1.2rem;margin-bottom:10px}
.card p{color:var(--muted);font-size:.95rem;margin-bottom:14px}
.card a.more{font-family:'Montserrat',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-dark)}
.card a.more:hover{color:var(--navy)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stats .num{font-family:'Playfair Display',serif;font-size:2.6rem;color:var(--blue);font-weight:700}
.stats .lab{font-family:'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:var(--muted);margin-top:6px}

.cta{background:linear-gradient(120deg,var(--blue-dark),var(--blue));color:#fff;text-align:center}
.cta h2{color:#fff;font-size:2.2rem;margin-bottom:14px}
.cta p{color:#ededed;max-width:620px;margin:0 auto 28px}

.ba{display:grid;grid-template-columns:1fr 1fr;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.ba div{padding:60px 20px;text-align:center;font-family:'Playfair Display',serif;color:#fff;font-size:1.2rem}
.ba .before{background:#7d8a96}
.ba .after{background:linear-gradient(135deg,var(--blue),var(--blue-light));color:var(--navy)}

.quote{background:#fff;border-left:4px solid var(--blue);border-radius:0 12px 12px 0;padding:26px 28px;box-shadow:var(--shadow)}
.quote p{font-style:italic;color:var(--ink);margin-bottom:12px}
.quote .who{font-family:'Montserrat',sans-serif;font-weight:600;font-size:.84rem;color:var(--blue-dark)}
.stars{color:#f5a623;letter-spacing:2px;margin-bottom:8px}

.faq{max-width:820px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:14px;background:#fff}
.faq summary{font-family:'Montserrat',sans-serif;font-weight:600;color:var(--navy);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary{color:var(--blue-dark)}
.faq p{color:var(--muted);margin-top:12px}

.prose{max-width:860px;margin:0 auto}
.prose h2{font-size:1.85rem;margin:0 0 20px;padding-top:18px;position:relative}
.prose h2::before{content:"";position:absolute;top:0;left:0;width:54px;height:3px;background:var(--accent);border-radius:2px}
.prose h3{font-size:1.22rem;margin:28px 0 10px;color:var(--navy)}
.prose p{color:#41474e;margin-bottom:18px;font-size:1.04rem;line-height:1.85}
.prose .lead-p{font-size:1.16rem;line-height:1.7;color:var(--ink)}
.prose ul:not(.checks){margin:0 0 18px 22px;color:#41474e}
.prose ul:not(.checks) li{margin-bottom:8px}
/* styled checklist for scraped bullet lists */
.prose ul.checks{list-style:none;margin:22px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 30px}
.prose ul.checks li{position:relative;padding-left:34px;color:var(--ink);font-weight:500;line-height:1.5;align-self:start}
.prose ul.checks li::before{content:"\2713";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center}
/* alternating prose bands */
.prose-sec{padding:54px 0}
.prose-sec.alt{background:var(--blue-pale)}
.prose-sec + .prose-sec{padding-top:54px}
@media(max-width:640px){.prose ul.checks{grid-template-columns:1fr}}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.form label{display:block;font-family:'Montserrat',sans-serif;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--navy);margin:14px 0 6px}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:.95rem}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--blue-light);border-color:var(--blue)}
.form-status{display:none;margin-top:14px;padding:14px 16px;border-radius:10px;font-size:.96rem}
.form-status.ok{display:block;background:#e9f6ef;border:1px solid #b7e3c9;color:#1c6b3f}
.form-status.err{display:block;background:#fdecec;border:1px solid #f3c2c2;color:#9b2c2c}
.loc-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;margin-bottom:22px}
.loc-card h3{color:var(--navy);font-size:1.2rem;margin-bottom:8px}
.loc-card p{color:var(--muted);font-size:.95rem;margin-bottom:6px}

/* Footer */
footer.site{background:var(--navy);color:#c3d3e0;padding:64px 0 26px;font-size:.92rem}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px}
footer.site h4{color:#fff;font-family:'Montserrat',sans-serif;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
footer.site a{color:#c3d3e0}
footer.site a:hover{color:var(--blue-light)}
footer.site ul{list-style:none}
footer.site ul li{margin-bottom:9px}
footer.site .fbrand{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:#fff;font-family:'Playfair Display',serif;font-size:1.3rem}
footer.site .fbrand .mark{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-light));display:flex;align-items:center;justify-content:center}
.footbottom{border-top:1px solid rgba(255,255,255,.12);margin-top:42px;padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.82rem;color:#90a6b8}

/* Real logo */
.brand img{height:58px;width:auto;display:block}
footer.site .fbrand img{height:50px;width:auto;margin-bottom:4px}

/* Image wrappers (real photos in split sections / cards) */
.photo.imgwrap{padding:0;overflow:hidden;background:#fff}
.photo.imgwrap img{width:100%;height:100%;min-height:340px;object-fit:cover;border-radius:16px;display:block}
.photo.contain{background:linear-gradient(135deg,var(--blue-pale),#fff)}
.photo.contain img{object-fit:contain;padding:18px;min-height:300px}
.card .cardimg{width:100%;height:170px;object-fit:cover;border-radius:12px;margin-bottom:16px}
.card .cardimg.icon{height:90px;width:90px;object-fit:contain;margin:0 auto 16px;display:block}

/* Hero with video */
.hero video.bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:1}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.4));z-index:1}
.hero .scrim::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,80vw);height:min(620px,80vw);border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.4) 0%,rgba(0,0,0,.22) 45%,transparent 72%)}

/* Credential badges */
.badges{display:flex;align-items:center;justify-content:center;gap:46px;flex-wrap:wrap;padding:8px 0}
.badges img{height:84px;width:auto;opacity:.92;filter:none}

/* Emergency & Accident band */
.emergency{background:#0a0a0a;color:#fff;position:relative;overflow:hidden;border-top:3px solid var(--accent)}
.emergency .container{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center}
.emergency .ezicon{width:74px;height:74px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;color:var(--accent-light);flex:none}
.emergency .ezlabel{font-family:'Montserrat',sans-serif;letter-spacing:.24em;text-transform:uppercase;font-size:.72rem;color:var(--accent-light);margin-bottom:10px;font-weight:600}
.emergency h2{color:#fff;font-size:2rem;margin-bottom:10px}
.emergency p{color:#c9c9c9;max-width:660px}
.emergency .ezbtn{white-space:nowrap}
.video-feature{border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.video-feature video{width:100%;display:block}
.vidtile{width:100%;height:190px;object-fit:cover;display:block;background:#111;cursor:pointer}
.ytfacade{position:relative;display:block;width:100%;height:200px;padding:0;border:0;cursor:pointer;background:#111;overflow:hidden}
.ytfacade img{width:100%;height:200px;object-fit:cover;display:block;transition:.3s}
.ytfacade:hover img{transform:scale(1.05)}
.ytfacade::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.22);transition:.2s}
.ytfacade:hover::after{background:rgba(0,0,0,.06)}
.ytplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.ytplay span{width:62px;height:62px;border-radius:50%;background:rgba(0,0,0,.72);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;padding-left:5px;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:.2s;border:2px solid rgba(255,255,255,.85)}
.ytfacade:hover .ytplay span{transform:scale(1.12);background:#000}
.vidframe{width:100%;height:200px;border:0;display:block}
/* 16:9 video box (no letterboxing / black borders) */
.videobox{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;box-shadow:var(--shadow)}
.videobox .ytfacade{position:absolute;inset:0;width:100%;height:100%}
.videobox .ytfacade img{width:100%;height:100%;object-fit:cover}
.videobox .vidframe{position:absolute;inset:0;width:100%;height:100%}
.hero-sub{font-family:'Montserrat',sans-serif;color:#eef5fb;font-size:1.05rem;max-width:720px;margin:0 auto 28px}
.hero-sub strong{color:#fff}
.hero.short .container{padding:88px 22px}
.hero.short h1{font-size:2.7rem}
.photo.logobox{display:flex;align-items:center;justify-content:center;background:var(--blue-pale);border:1px solid var(--line);padding:40px}
.photo.logobox img{width:auto;max-width:78%;max-height:170px;object-fit:contain}
.photo-credit{font-size:.72rem;color:#9aa3ab;margin-top:8px;text-align:right}
.photo-credit a{color:#9aa3ab;text-decoration:underline}
.mapwrap{border-radius:14px;overflow:hidden;box-shadow:var(--shadow);line-height:0}
.mapwrap iframe{width:100%;height:430px;border:0;display:block}
.medialink{text-decoration:none;color:inherit}
.medialink h3{color:var(--navy);margin:4px 0 12px}
.media-outlet{font-family:'Montserrat',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.medialink:hover h3{color:var(--accent-dark)}

/* Instagram feed section */
.ig-handle{font-family:'Montserrat',sans-serif;font-weight:600;color:var(--accent);font-size:1.05rem}
.lightwidget-widget{width:100%;border:0;overflow:hidden}
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:8px}
.ig-tile{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a1a,#3a3a3a);color:#fff;transition:.25s}
.ig-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ig-tile .ico-svg{width:34px;height:34px;opacity:.92}
@media(max-width:780px){.ig-grid{grid-template-columns:repeat(3,1fr)}}

/* Video hero (Vimeo poster + click-to-play, full-width like the mp4 heroes) */
.vhero .vhero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vhero .vidframe{position:absolute;inset:0;width:100%;height:100%;z-index:6}
.vheroplay{cursor:pointer}

/* Scroll-reveal entrance animations (emulating the original site) */
.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.16,.7,.3,1),transform .8s cubic-bezier(.16,.7,.3,1);will-change:opacity,transform}
.js [data-reveal].in{opacity:1;transform:none}
.js main>section:first-child [data-reveal]{opacity:1;transform:none;transition:none}
/* text bodies slide in from alternating sides */
.prose-sec{overflow:hidden}
.js [data-reveal].slide-l{transform:translateX(-60px)}
.js [data-reveal].slide-r{transform:translateX(60px)}
.js [data-reveal].slide-l.in,.js [data-reveal].slide-r.in{transform:none}
@media(prefers-reduced-motion:reduce){.js [data-reveal],.js [data-reveal].in{opacity:1!important;transform:none!important;transition:none!important}}

@media(max-width:980px){
  .emergency .container{grid-template-columns:1fr;text-align:center;gap:18px}
  .badges{gap:28px}.badges img{height:62px}
  nav.main>ul{display:none}
  .menu-toggle{display:block}
  nav.main.open>ul{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:var(--shadow);padding:10px 0;max-height:78vh;overflow:auto}
  nav.main.open>ul>li>a,nav.main.open>ul>li>span{padding:12px 22px}
  nav.main.open .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-top:0;padding:0 0 8px 12px;min-width:0;display:none}
  nav.main.open>ul>li:hover .drop{display:block}
  .nav-cta{display:none}
  .split,.contact-grid{grid-template-columns:1fr;gap:30px}
  .grid.g3,.grid.g4{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  footer.site .cols{grid-template-columns:1fr 1fr}
  .hero h1{font-size:2.2rem}
}
@media(max-width:600px){
  .grid.g3,.grid.g4,.grid.g2,.ba,.stats,footer.site .cols{grid-template-columns:1fr}
  .topbar .phones{display:none}
}