/* ============================================================
   Clearstone Dental — design system v2
   Matched to the reference site: ivory + deep navy + copper,
   sage highlight boxes, rounded corners, outline buttons.
   Cream swapped for white per brief.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=Montserrat:wght@500;600;700&family=Public+Sans:wght@400;500;600;700&family=Fraunces:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root{
  --ink:      #16233B;
  --ink-2:    #1E2E4A;
  --ink-soft: #9FB0C3;
  --paper:    #FFFFFF;
  --panel:    #F4F6F5;
  --sage:     #E4EBE4;
  --sage-line:#CBDCCC;
  --copper:   #B96A34;
  --copper-lt:#D08850;
  --copper-dk:#8F4F22;
  --line:     #E3E5E5;
  --text:     #232B36;
  --text-mut: #626C78;
  --white:    #FFFFFF;
  --radius:   14px;
  --radius-sm:8px;
  --maxw:     1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:'Public Sans', system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
body::before{
  content:'';
  position:fixed;
  top:50%;left:50%;
  width:1100px;height:1100px;
  max-width:130vw;max-height:130vw;
  transform:translate(-50%,-50%);
  background:url('assets/logo.png') center/contain no-repeat;
  opacity:.14;
  z-index:0;
  pointer-events:none;
}
.topbar, .site-footer, section{
  position:relative;
  z-index:1;
}
.site-header{
  position:relative;
  z-index:70;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  color:var(--ink);
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.2rem,4.5vw,3.2rem); font-weight:600;}
h2{font-size:clamp(1.5rem,2.8vw,2.1rem);}
h3{font-size:1.15rem;}
p{margin:0 0 1em;color:var(--text);}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.eyebrow{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--copper);
  font-weight:600;
  margin-bottom:.9em;
}
.rule{
  width:56px;height:2px;background:var(--copper);
  border:none;margin:0 0 1.4em;
}

/* ---------- Top contact bar ---------- */
.topbar{background:var(--ink);color:var(--ink-soft);}
.topbar .container{
  display:flex;justify-content:space-between;align-items:center;gap:22px;
  height:38px;font-size:.8rem;flex-wrap:wrap;
}
.topbar .address{display:flex;align-items:center;gap:6px;color:var(--ink-soft);}
.topbar .contacts{display:flex;align-items:center;gap:22px;}
.topbar a{display:flex;align-items:center;gap:6px;color:var(--ink-soft);}
.topbar a:hover{color:var(--copper-lt);}
.topbar svg{width:14px;height:14px;flex-shrink:0;}

/* ---------- Header ---------- */
.site-header{
  background:rgba(255,255,255,.95);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  height:112px;gap:24px;
}
.logo{display:flex;align-items:center;gap:16px;}
.logo img.mark{height:60px;width:auto;flex-shrink:0;}
.logo-text{display:flex;flex-direction:column;line-height:1.2;}
.logo-text .name{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:1.5rem;letter-spacing:.1em;
  background:linear-gradient(90deg,var(--copper-dk),var(--copper-lt));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.logo-text .tagline{
  font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--copper);margin-top:1px;
}
.logo-text .subtitle{
  font-family:'Public Sans',sans-serif;font-size:.74rem;color:var(--text-mut);
  margin-top:5px;
}
.nav{display:flex;align-items:center;gap:28px;}
.nav-close-btn{display:none;}
.nav a{
  font-size:.88rem;font-weight:500;color:var(--ink);
  position:relative;padding:4px 0;
}
.nav a:hover{color:var(--copper);}
.nav-cta{
  background:var(--copper);color:var(--white)!important;
  padding:12px 24px!important;border-radius:var(--radius-sm);
  font-weight:600!important;
}
.nav-cta:hover{background:var(--copper-dk);color:var(--white)!important;}
.header-book-btn{display:none;}
.menu-toggle{display:none;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer;}

/* dropdown mega-menu */
.nav-item{position:relative;display:flex;align-items:center;gap:2px;}
.dropdown-toggle{
  background:none;border:0;padding:4px;cursor:pointer;
  color:var(--text-mut);font-size:.7em;line-height:1;
}
.dropdown-toggle:hover{color:var(--copper);}
.dropdown-panel{
  display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
  padding-top:14px;margin-top:-14px;
  z-index:60;white-space:nowrap;
}
.dropdown-panel-inner{
  display:flex;gap:28px;
  background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 20px 40px -12px #16233B33;padding:20px;
}
.nav-item:hover .dropdown-panel,
.dropdown-panel.open{display:block;}
.dropdown-col{display:flex;flex-direction:column;gap:8px;min-width:170px;}
.dropdown-col-title{
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--copper);margin-bottom:4px;
}
.dropdown-col a{font-size:.86rem;padding:2px 0;}

/* ---------- Hero ---------- */
.hero{
  padding:88px 0 76px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 82% 12%, #B96A3422, transparent 45%),
    var(--paper);
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;}
.hero p.lead{font-size:1.1rem;color:var(--text-mut);max-width:46ch;}
.hero-title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:clamp(1.8rem,2.8vw,2.35rem);
  line-height:1.2;
  letter-spacing:-.005em;
  max-width:100%;
}
.hero-art.hero-art-full{
  margin-top:1.6em;
  border-radius:0;
  overflow:hidden;
  box-shadow:0 20px 50px -20px #16233B33;
}
.hero-art.hero-art-full img{
  width:100%;
  aspect-ratio:2/1;
  object-fit:cover;
  object-position:center 40%;
  display:block;
}
.welcome-card{margin-top:1.6em;}
.welcome-card .hero-actions{margin-top:1.4em;}
.hero-actions{display:flex;gap:14px;margin-top:1.6em;flex-wrap:wrap;}
.btn{
  display:inline-block;padding:14px 26px;border-radius:var(--radius-sm);
  font-weight:600;font-size:.92rem;border:1.5px solid var(--ink);
  transition:.15s ease;
}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-copper{background:var(--copper);border-color:var(--copper);color:var(--white);}
.btn-copper:hover{background:var(--copper-dk);border-color:var(--copper-dk);}
.btn-primary:hover{background:var(--copper);border-color:var(--copper);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}
.hero-art{
  border-radius:var(--radius);background:var(--panel);
  overflow:hidden;
  box-shadow:0 20px 50px -20px #16233B33;
}
.hero-art img{width:100%;height:auto;display:block;}
.hero-art svg{width:100%;height:100%;}

/* ---------- Sections ---------- */
section{padding:74px 0;}
.section-alt{background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-alt h2, .section-alt h1{color:var(--white);}
.section-alt p{color:var(--ink-soft);}
.section-alt .eyebrow{color:var(--copper-lt);}
.section-head{max-width:64ch;margin-bottom:2.4em;}

.grid{display:grid;gap:28px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

#care-section{z-index:5;}

.card{
  background:rgba(255,255,255,.78);border:1px solid var(--line);
  padding:32px 28px;border-radius:var(--radius);
}
.card h3{margin-bottom:.5em;}
.card p{color:var(--text-mut);margin-bottom:0;font-size:.96rem;}

/* feature card with photo/graphic panel — used for 3-up feature grids */
.feature-card{
  background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 14px 30px -18px #16233B30;
  transition:.2s ease;
  display:block;text-decoration:none;color:inherit;
}
.feature-card:hover{transform:translateY(-3px);box-shadow:0 20px 36px -16px #16233B3d;}
.feature-card .panel{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.panel-tint{opacity:.9;}
.feature-card .panel-body{padding:24px 24px 28px;}
.feature-card .panel-body h3{margin-bottom:.4em;}
.feature-card .panel-body p{color:var(--text-mut);margin-bottom:0;font-size:.94rem;}

/* highlight / sage box — used for pricing, callouts */
.box-sage{
  background:rgba(228,235,228,.70);border:1px solid var(--sage-line);
  padding:36px 32px;border-radius:var(--radius);
}
.box-sage .eyebrow{color:var(--copper-dk);}

/* dark framed box — used for address / final CTA cards */
.box-dark{
  background:var(--ink);color:var(--white);
  border:1px solid var(--copper);border-radius:var(--radius);
  padding:36px 32px;
  transition:.2s ease;
}
a.box-dark:hover{background:var(--ink-2);border-color:var(--copper-lt);}
.box-dark .eyebrow{color:var(--copper-lt);}
.box-dark h2,.box-dark h3{color:var(--white);}
.box-dark p{color:var(--ink-soft);}
.box-dark .price{color:var(--copper-lt);}

/* divided list inside a box */
.divided-list{list-style:none;margin:0;padding:0;}
.divided-list li{
  padding:16px 0;border-bottom:1px solid var(--line);
  display:flex;gap:12px;align-items:flex-start;color:var(--text-mut);
}
.divided-list li:last-child{border-bottom:none;}
.divided-list .mark{color:var(--copper);font-weight:700;flex-shrink:0;}
.divided-list .mark.x{color:#8A93A0;}

.arch-motif{
  width:34px;height:34px;color:var(--copper);margin-bottom:16px;
}

/* fee table */
.fee-table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.fee-table th,.fee-table td{
  text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);font-size:.95rem;
}
.fee-table th{
  font-family:'Montserrat',sans-serif;font-weight:500;color:var(--ink);background:var(--panel);
}
.fee-table td.price{font-weight:600;color:var(--copper-dk);white-space:nowrap;}
.fee-table tr:last-child td{border-bottom:none;}

/* steps (genuine sequence only) */
.steps{counter-reset:step;}
.step{display:flex;gap:22px;padding:26px 0;border-bottom:1px solid var(--line);}
.step:last-child{border-bottom:none;}
.step-num{
  counter-increment:step;font-family:'IBM Plex Mono',monospace;color:var(--copper);
  font-size:1.3rem;min-width:48px;font-weight:600;
}
.step-num::before{content:counter(step,decimal-leading-zero);}
.section-alt .step{border-color:#2b3c58;}

/* team */
.person{text-align:left;}
.person .avatar{
  width:100%;aspect-ratio:1;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--copper);
}
.person h3{margin-bottom:.1em;font-size:1.1rem;}
.person .role{color:var(--copper-dk);font-size:.85rem;font-weight:600;margin-bottom:.3em;}
.person .gdc{color:var(--text-mut);font-size:.82rem;}

/* CTA band */
.cta-band{
  background:var(--ink);color:var(--paper);text-align:center;
}
.cta-band h2{color:var(--paper);}
.cta-band p{color:var(--ink-soft);}
.cta-band .btn-primary{background:var(--copper);border-color:var(--copper);color:var(--white);}
.cta-band .btn-primary:hover{background:var(--copper-lt);border-color:var(--copper-lt);}
.cta-band .btn-ghost{color:var(--paper);border-color:#3d4a5e;}
.cta-band .btn-ghost:hover{background:var(--paper);color:var(--ink);}

/* breadcrumb / page intro (subpages) */
.page-intro{padding:56px 0 10px;border-bottom:1px solid var(--line);}
.breadcrumb{font-size:.82rem;color:var(--text-mut);margin-bottom:1.2em;}
.breadcrumb a:hover{color:var(--copper);}

/* booking chip used on service pages */
.booking-chip{
  display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;
  background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 26px;margin:1.8em 0;
}
.booking-chip .meta{font-size:.85rem;color:var(--text-mut);}
.booking-chip .price{font-family:'Montserrat',sans-serif;font-size:1.4rem;color:var(--ink);}
.booking-chip .btn{margin-left:auto;}

/* opening hours */
.hours-list{list-style:none;margin:0;padding:0;}
.hours-list li{
  display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.hours-list li:last-child{border-bottom:none;}
.hours-list .day{color:var(--ink);font-weight:600;}
.hours-list .time{color:var(--text-mut);}

/* map embed */
.map-embed{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);}
.map-embed iframe{width:100%;height:100%;min-height:320px;border:0;display:block;}

/* testimonials */
.testimonial{
  background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;
}
.testimonial .quote-mark{font-family:'Montserrat',sans-serif;font-size:2.4rem;color:var(--copper);line-height:1;display:block;margin-bottom:8px;}
.testimonial p{color:var(--text);font-style:normal;margin-bottom:1em;}
.testimonial .name{font-weight:600;color:var(--ink);font-size:.9rem;}
.testimonial .stars{color:var(--copper);letter-spacing:2px;margin-bottom:.6em;display:block;}

.take-a-look{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-weight:600;color:var(--copper-dk);
}
.take-a-look:hover{color:var(--ink);}
.take-a-look-btn{margin-top:20px;}
.site-footer{background:var(--ink);color:var(--ink-soft);padding:60px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;}
.site-footer h4{color:var(--paper);font-family:'Montserrat',sans-serif;font-weight:500;margin-bottom:.9em;font-size:1rem;}
.site-footer a{color:var(--ink-soft);font-size:.9rem;}
.site-footer a:hover{color:var(--copper-lt);}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;}
.footer-bottom{
  margin-top:44px;padding-top:22px;border-top:1px solid #2a374c;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.78rem;color:#7b8494;
}

@media (max-width:860px){
  .topbar .container{justify-content:center;gap:10px 16px;font-size:.72rem;flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:8px;}
  .topbar .address, .topbar .contacts{flex:1 1 100%;justify-content:center;}
  .hero-grid{grid-template-columns:1fr;}
  .grid-3,.grid-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .nav{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--paper);
    flex-direction:column;align-items:flex-start;padding:96px 28px 40px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    display:none;gap:16px;z-index:65;}
  .nav.open{display:flex;}
  .nav-close-btn{
    position:fixed;top:20px;right:24px;z-index:66;
    background:none;border:1px solid var(--line);border-radius:50%;
    width:44px;height:44px;font-size:1.4rem;line-height:1;color:var(--ink);
    display:none;align-items:center;justify-content:center;cursor:pointer;
  }
  .nav.open .nav-close-btn{display:flex;}
  body.nav-open{overflow:hidden;}
  .menu-toggle{display:block;}
  .site-header .container{height:auto;padding-top:14px;padding-bottom:14px;flex-wrap:nowrap;}
  .logo{gap:10px;min-width:0;}
  .logo img.mark{height:40px;}
  .logo-text{min-width:0;}
  .logo-text .name{font-size:1.05rem;letter-spacing:.06em;}
  .logo-text .tagline{font-size:.52rem;letter-spacing:.16em;}
  .logo-text .subtitle{display:none;}
  .header-book-btn{
    display:inline-block;background:var(--copper);color:var(--white)!important;
    padding:8px 13px;border-radius:var(--radius-sm);
    font-weight:600;font-size:.76rem;white-space:nowrap;
  }
  .header-book-btn:hover{background:var(--copper-dk);}
  .nav-cta{align-self:flex-start;}
  .nav-item{width:100%;flex-direction:column;align-items:flex-start;}
  .dropdown-toggle{display:none;}
  .dropdown-panel{
    display:block!important;position:static;transform:none;
    padding:0;margin:0;width:100%;
  }
  .dropdown-panel-inner{
    display:flex!important;flex-direction:column;
    border:none;box-shadow:none;background:transparent;padding:6px 0 0 14px;gap:14px;
    white-space:normal;
  }
  .dropdown-col{min-width:0;gap:6px;border-left:2px solid var(--line);padding-left:12px;}
  .hero{padding:32px 0 40px;}
  section{padding:44px 0;}
  .hero-art.hero-art-full{margin-top:1.1em;}
  .take-a-look-btn{margin-top:16px;}
}