/* ==========================================================================
   Center for Advanced Aesthetic and Implant Dentistry
   Palette matched to the live site (implantsdentist.com) screenshots
   ========================================================================== */
:root{
  --color-primary: #2E5A66;      /* deep teal — headings, strong accents */
  --color-primary-light: #5B93A6;/* dusty teal — bars, hero panel, footer, testimonials */
  --color-primary-lighter: #EAF2F3; /* pale teal tint for alternating sections */
  --color-bg: #FEFDFB;           /* warm white page background */
  --color-cream: #EAE6DA;        /* cream/ivory — secondary buttons, matches live site */
  --color-cream-dark: #D9D2BE;
  --color-text: #1F2421;
  --color-text-muted: #566068;
  --color-border: #DCE3DD;
  --color-footer-dark: #3F4142;  /* darker teal-gray copyright bar */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, sans-serif;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 32px rgba(46,90,102,0.14);
  --shadow-sm: 0 4px 16px rgba(46,90,102,0.08);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
body{
  margin:0; font-family:var(--font-body); color:var(--color-text);
  background:var(--color-bg); line-height:1.65; font-size:16px;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--color-primary); text-decoration:none;}
a:hover{color:var(--color-primary-light);}
h1,h2,h3{font-family:var(--font-display); font-weight:500; color:var(--color-primary); line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em;}
h1{font-size:clamp(2.4rem,5vw,3.8rem);}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1em;}
.wrap{max-width:1440px; margin:0 auto; padding:0 clamp(24px, 4vw, 64px);}
:focus-visible{outline:3px solid var(--color-primary-light); outline-offset:2px;}

/* Animated underline links (in body copy, not nav/buttons) */
.text-link{position:relative; font-weight:600; color:var(--color-primary);}
.text-link::after{content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
.text-link:hover::after{transform:scaleX(1);}

/* Buttons */
.btn{display:inline-block; padding:14px 28px; border-radius:100px; font-weight:600; font-size:.95rem; transition:.2s ease; border:1.5px solid transparent;}
.btn-primary{background:var(--color-primary); color:#fff;}
.btn-primary:hover{background:var(--color-primary-light); color:#fff; transform:translateY(-2px);}
.btn-cream{background:var(--color-cream); color:var(--color-primary);}
.btn-cream:hover{background:var(--color-cream-dark); transform:translateY(-2px);}
.btn-outline{border-color:var(--color-primary); color:var(--color-primary);}
.btn-outline:hover{background:var(--color-primary); color:#fff;}
.btn-outline-light{border-color:#fff; color:#fff;}
.btn-outline-light:hover{background:#fff; color:var(--color-primary);}

/* Header */
.site-header{background:var(--color-primary-light); position:sticky; top:0; z-index:100;}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:24px;}
.brand-name{color:#fff; font-family:var(--font-display); font-size:1.05rem; line-height:1.25; font-weight:500;}
.main-nav{display:flex;}
.nav-list{display:flex; gap:6px; flex-wrap:wrap; list-style:none; margin:0; padding:0;}
.nav-item{position:relative;}
.nav-item > a{display:inline-flex; align-items:center; gap:6px; padding:10px 12px; color:rgba(255,255,255,.85); font-size:.92rem; font-weight:500; position:relative; border-radius:8px; transition:.15s ease;}
.nav-item > a:hover{color:#fff; background:rgba(255,255,255,.12);}
.nav-caret{font-size:.6rem; opacity:.75;}
.nav-cta{white-space:nowrap;}
.header-actions{display:flex; align-items:center; gap:14px;}

/* Dropdown — light hover per item so the active row is always clear */
.dropdown{position:absolute; top:100%; left:0; margin-top:6px; background:#fff; min-width:230px; border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:8px; list-style:none; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:200;}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown li + li{margin-top:2px;}
.dropdown a{display:block; padding:10px 14px; border-radius:8px; color:var(--color-primary); font-size:.88rem; font-weight:500; transition:background .15s ease;}
.dropdown a:hover{background:var(--color-primary-lighter);}

/* Mobile nav — checkbox-driven drawer, no JS required */
.hamburger{display:none; position:relative; width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.mobile-nav-toggle{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer;}
.hamburger-bars{position:relative; width:22px; height:2px; background:#fff; transition:background .2s ease;}
.hamburger-bars::before,.hamburger-bars::after{content:""; position:absolute; left:0; width:22px; height:2px; background:#fff; transition:transform .2s ease, top .2s ease;}
.hamburger-bars::before{top:-7px;}
.hamburger-bars::after{top:7px;}
.mobile-nav-toggle:checked ~ .hamburger-bars{background:transparent;}
.mobile-nav-toggle:checked ~ .hamburger-bars::before{top:0; transform:rotate(45deg);}
.mobile-nav-toggle:checked ~ .hamburger-bars::after{top:0; transform:rotate(-45deg);}
.mobile-nav-toggle:focus-visible ~ .hamburger-bars{outline:2px solid #fff; outline-offset:6px;}

.mobile-nav-backdrop{display:none;}
.mobile-nav{display:none;}

@media (max-width:900px){
  .main-nav{display:none;}
  .hamburger{display:flex;}

  .mobile-nav-backdrop{display:block; position:fixed; inset:0; background:rgba(31,36,33,.45); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s; z-index:150;}
  .mobile-nav{display:flex; flex-direction:column; position:fixed; top:0; right:0; bottom:0; width:min(340px,86vw); background:var(--color-bg); box-shadow:var(--shadow); padding:20px; z-index:151; transform:translateX(100%); transition:transform .25s ease; overflow-y:auto;}
  .site-header:has(.mobile-nav-toggle:checked) .mobile-nav-backdrop{opacity:1; visibility:visible;}
  .site-header:has(.mobile-nav-toggle:checked) .mobile-nav{transform:translateX(0);}

  .mobile-nav-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
  .mobile-nav-title{font-family:var(--font-display); font-size:1.1rem; color:var(--color-primary);}
  .mobile-nav-close{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; color:var(--color-primary); font-size:1.1rem; cursor:pointer;}
  .mobile-nav-close:hover{background:var(--color-primary-lighter);}

  .mobile-nav-list{list-style:none; margin:0 0 20px; padding:0; border-top:1px solid var(--color-border);}
  .mobile-nav-list > li{border-bottom:1px solid var(--color-border);}
  .mobile-nav-list > li > a{display:block; padding:14px 4px; color:var(--color-text); font-weight:500;}

  .mobile-nav-group summary{list-style:none; display:flex; align-items:center; justify-content:space-between; padding:14px 4px; color:var(--color-text); font-weight:500; cursor:pointer;}
  .mobile-nav-group summary::-webkit-details-marker{display:none;}
  .mobile-nav-caret{font-size:.7rem; color:var(--color-text-muted); transition:transform .2s ease;}
  .mobile-nav-group details[open] .mobile-nav-caret{transform:rotate(180deg);}
  .mobile-dropdown{list-style:none; margin:0 0 10px; padding:0 0 0 12px;}
  .mobile-dropdown a{display:block; padding:10px 4px; color:var(--color-text-muted); font-size:.94rem;}
  .mobile-dropdown a:hover{color:var(--color-primary);}

  .mobile-nav-cta{text-align:center;}

  body:has(.mobile-nav-toggle:checked){overflow:hidden;}
}

@media (prefers-reduced-motion: reduce){ .mobile-nav,.mobile-nav-backdrop,.hamburger-bars,.hamburger-bars::before,.hamburger-bars::after{transition:none;} }

/* Breadcrumbs — rounded pills matching the site's button language */
.breadcrumbs{background:var(--color-primary-lighter); padding:16px 0;}
.crumb-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.crumb{display:inline-flex; align-items:center; padding:6px 16px; border-radius:100px; font-size:.82rem; font-weight:600; color:var(--color-primary); background:#fff; border:1px solid var(--color-border); transition:.2s ease;}
.crumb:hover{background:var(--color-primary); color:#fff; border-color:var(--color-primary);}
.crumb-current{background:var(--color-primary); color:#fff; border:1px solid var(--color-primary);}
.crumb-sep{font-size:.6rem; color:var(--color-primary-light);}

/* Hero — asymmetric with overlapping stat card */
.hero{padding:72px 0 96px; background:var(--color-bg); position:relative; overflow:visible;}
.hero-inner{display:grid; grid-template-columns:1fr .95fr; gap:56px; align-items:stretch; position:relative;}
.hero-eyebrow{color:var(--color-primary-light); font-weight:600; letter-spacing:.06em; font-size:.85rem; text-transform:uppercase; margin-bottom:14px; display:block;}
.hero-media-wrap{position:relative; transform:translateX(18px); min-height:420px;}
.hero-media{position:absolute; inset:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.hero-media img{position:absolute; top:50%; left:50%; width:100%; height:100%; object-fit:cover; border:0; transform:translate(-50%,-50%);}
/* object-fit is unreliable on <iframe> across browsers, so instead of relying
   on it, the iframe is deliberately oversized (140% in both directions,
   centered via -20% offsets) so it always overflows the box; the parent's
   overflow:hidden clips the excess, guaranteeing full coverage regardless of
   the source video's native aspect ratio. */
.hero-media iframe{position:absolute; top:-20%; left:-20%; width:140%; height:140%; border:0;}
.hero-stat-card{position:absolute; left:-36px; bottom:-32px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 26px; z-index:5; border:1px solid var(--color-border);}
.hero-stat-card .stat-num{font-family:var(--font-display); font-size:2.1rem; color:var(--color-primary); line-height:1; display:block;}
.hero-stat-card .stat-label{font-size:.8rem; color:var(--color-text-muted); font-weight:500;}
.cta-row{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
@media (max-width:860px){ .hero-inner{grid-template-columns:1fr;} .hero-media-wrap{transform:none; min-height:320px;} .hero-stat-card{left:16px; bottom:-24px;} }

/* Sections */
.section{padding:64px 0;}
.section-alt{background:var(--color-primary-lighter);}
.section-header{max-width:640px; margin:0 auto 44px; text-align:center;}
.eyebrow{color:var(--color-primary-light); font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em;}

/* Trust strip */
/* Trust slider — auto-scrolling loop of pill chips */
.trust-slider{overflow:hidden; padding:36px 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);}
.trust-track{display:flex; gap:16px; width:max-content; animation:trust-scroll 32s linear infinite;}
.trust-slider:hover .trust-track{animation-play-state:paused;}
.trust-chip{display:flex; align-items:center; gap:10px; white-space:nowrap; background:var(--color-primary-lighter); border:1.5px solid var(--color-primary-light); color:var(--color-primary); font-weight:600; font-size:.92rem; padding:14px 26px; border-radius:100px;}
.trust-chip i{font-size:18px; color:var(--color-primary-light);}
@keyframes trust-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .trust-track{animation:none;} }

/* Card grids */
.grid{display:grid; gap:26px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid-3,.grid-4{grid-template-columns:1fr;} }

.card{background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid var(--color-border); transition:.25s ease; box-shadow:var(--shadow-sm);}
.card:hover{box-shadow:var(--shadow); transform:translateY(-4px);}
.card .photo-wrap{position:relative; aspect-ratio:4/3; overflow:hidden;}
.card .photo-wrap img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.card:hover .photo-wrap img{transform:scale(1.05);}
.card .photo-wrap::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(46,90,102,0) 40%, rgba(46,90,102,.55) 100%);}
.card-body{padding:22px;}
.card-body h2,.card-body h3{margin-bottom:8px; font-size:1.15rem;}
.card-body p{color:var(--color-text-muted); font-size:.92rem; margin-bottom:14px;}
.card-link{font-size:.88rem; font-weight:600; position:relative;}
.card-link::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s ease;}
.card-link:hover::after{transform:scaleX(1);}

/* Memory module — editorial pull-quote treatment */
.memory-module{background:var(--color-primary); color:#fff; padding:80px 0; text-align:center; position:relative; overflow:hidden;}
.memory-module::before{content:"“"; font-family:var(--font-display); font-size:9rem; line-height:1; color:rgba(255,255,255,.12); position:absolute; top:8px; left:50%; transform:translateX(-50%); pointer-events:none;}
.memory-module .memory-photo{width:104px; height:104px; border-radius:50%; object-fit:cover; margin:0 auto 22px; border:3px solid rgba(255,255,255,.3); position:relative;}
.memory-module .memory-name{font-family:var(--font-display); font-size:1.4rem; margin-bottom:4px; position:relative;}
.memory-module .memory-dates{color:rgba(255,255,255,.6); font-size:.85rem; margin-bottom:26px; letter-spacing:.04em; text-transform:uppercase; position:relative;}
.memory-module p.memory-copy{max-width:620px; margin:0 auto; color:rgba(255,255,255,.92); font-family:var(--font-display); font-size:1.25rem; line-height:1.6; font-weight:400; position:relative;}

/* Doctor cards */
.doctor-card{background:#fff; border-radius:var(--radius); padding:26px; text-align:center; border:1px solid var(--color-border); box-shadow:var(--shadow-sm); transition:.25s ease;}
.doctor-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.doctor-photo{width:144px; height:144px; border-radius:50%; object-fit:cover; margin:0 auto 18px; border:4px solid var(--color-primary-lighter);}
.doctor-photo-placeholder{width:144px; height:144px; border-radius:50%; margin:0 auto 18px; background:var(--color-primary-lighter); display:flex; align-items:center; justify-content:center; color:var(--color-primary-light); font-family:var(--font-display); font-size:1.4rem;}

/* Two column content — alternating rhythm via .reverse modifier */
.two-col{display:grid; grid-template-columns:1.15fr 1fr; gap:52px; align-items:center;}
.two-col.reverse{grid-template-columns:1fr 1.15fr;}
.two-col.reverse .two-col-media{order:-1;}
@media (max-width:860px){ .two-col, .two-col.reverse{grid-template-columns:1fr;} .two-col.reverse .two-col-media{order:0;} }
.two-col-media{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.two-col-media img{position:relative;}
.two-col-media::after{content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(46,90,102,.18), rgba(46,90,102,0) 55%);}

/* Areas list */
.area-pill-list{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px;}
.area-pill{background:#fff; border:1px solid var(--color-border); padding:9px 20px; border-radius:100px; font-size:.9rem; font-weight:500; transition:.2s ease;}
.area-pill:hover{background:var(--color-primary); color:#fff; border-color:var(--color-primary);}

/* Map embed */
.map-embed{border-radius:var(--radius); overflow:hidden; border:1px solid var(--color-border); box-shadow:var(--shadow-sm);}
.map-embed iframe{width:100%; height:340px; border:0; display:block;}

/* Gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.gallery-grid .photo-wrap{border-radius:var(--radius-sm); aspect-ratio:1; overflow:hidden; position:relative;}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.gallery-grid .photo-wrap:hover img{transform:scale(1.06);}
@media (max-width:700px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }

/* Forms / insurance */
.info-list{list-style:none; padding:0; margin:0;}
.info-list li{padding:12px 0; border-bottom:1px solid var(--color-border);}
.form-embed-placeholder{background:var(--color-primary-lighter); border:1px dashed var(--color-primary-light); border-radius:var(--radius); padding:48px; text-align:center; color:var(--color-text-muted);}
.form-embed{width:100%; height:960px; margin-top:16px;}

/* Footer */
.site-footer{background:var(--color-primary-light); color:rgba(255,255,255,.8);}
.footer-inner{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding:48px 24px 32px;}
.footer-brand{color:#fff; font-family:var(--font-display); font-size:1.05rem; margin-bottom:6px;}
.footer-muted{font-size:.85rem; color:rgba(255,255,255,.7);}
.footer-muted a{color:rgba(255,255,255,.85);}
.footer-heading{color:#fff; font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px;}
.footer-col a{display:block; font-size:.88rem; color:rgba(255,255,255,.75); margin-bottom:9px;}
.footer-col a:hover{color:#fff;}
.footer-bottom{background:var(--color-footer-dark); padding:18px 24px; font-size:.8rem; color:rgba(255,255,255,.6);}
.footer-bottom .wrap{padding:0 24px;}
@media (max-width:860px){ .footer-inner{grid-template-columns:1fr 1fr;} }

/* Subnav pills for service/area sub-pages */
.subnav{display:flex; flex-wrap:wrap; gap:10px; margin:24px 0;}
.subnav a{background:#fff; border:1px solid var(--color-border); padding:8px 16px; border-radius:100px; font-size:.85rem; font-weight:500;}
.subnav a.active{background:var(--color-primary); color:#fff; border-color:var(--color-primary);}

/* Why Choose Us */
.why-us-grid{grid-template-columns:repeat(2,1fr); gap:36px 48px;}
@media (max-width:700px){ .why-us-grid{grid-template-columns:1fr;} }
.why-item{padding:8px;}
.why-item i{font-size:26px; color:var(--color-primary-light); margin-bottom:14px; display:block;}
.why-item h3{font-size:1.1rem; margin-bottom:8px;}
.why-item p{color:var(--color-text-muted); font-size:.92rem; margin-bottom:0;}

/* FAQ accordion (native <details>/<summary>, no JS needed) */
.faq-list{display:flex; flex-direction:column; gap:12px;}
.faq-item{background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-sm); overflow:hidden;}
.faq-item summary{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; cursor:pointer; font-weight:600; color:var(--color-primary); list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary i{font-size:.8rem; color:var(--color-primary-light); transition:transform .25s ease; flex-shrink:0;}
.faq-item[open] summary i{transform:rotate(180deg);}
.faq-item[open] summary{border-bottom:1px solid var(--color-border);}
.faq-answer{padding:4px 22px 20px;}
.faq-answer p{color:var(--color-text-muted); margin:0; font-size:.94rem;}

/* CTA band — background image with a color wash so text stays legible */
.cta-band{position:relative; border-radius:var(--radius); overflow:hidden; padding:72px 40px; text-align:center; isolation:isolate;}
.cta-bg-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;}
.cta-band::before{content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(46,90,102,.92), rgba(46,90,102,.78)); z-index:-1;}
.cta-band h2{color:#fff; max-width:560px; margin:0 auto .5em;}
.cta-band p{color:rgba(255,255,255,.88); max-width:520px; margin:0 auto 24px;}

/* Content split — used for Benefits / Candidacy / Process / Comparison so
   these sections use the page width properly instead of a cramped centered strip */
.content-split{display:grid; grid-template-columns:.85fr 1.4fr; gap:56px; align-items:start;}
.content-split h2{margin-bottom:12px;}
.content-split > div:first-child p{color:var(--color-text-muted); margin-bottom:0;}
@media (max-width:860px){ .content-split{grid-template-columns:1fr; gap:20px;} }

.checklist{list-style:none; padding:0; margin:0;}
.checklist li{padding:12px 0; border-bottom:1px solid var(--color-border); display:flex; gap:10px; align-items:flex-start;}
.checklist li i{color:var(--color-primary-light); margin-top:3px; flex-shrink:0;}
.checklist-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px;}
@media (max-width:640px){ .checklist-grid{grid-template-columns:1fr;} }

.process-list{list-style:none; padding:0; margin:0;}
.process-list li{display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--color-border);}
.process-list .step-num{font-family:var(--font-display); color:var(--color-primary-light); font-size:1.4rem; flex-shrink:0; line-height:1;}
.process-list .step-text{color:var(--color-text-muted);}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:0.001ms !important; animation-duration:0.001ms !important;}
}