/* ==========================================================================
   BCV Peak Dental, LLC - Chart Paper Records Room
   Palette:
     CHART-PAPER   #F1E4EA  body background (pale clinic-chart paper)
     INK-TEAL      #22413F  main text
     ENAMEL-GOLD   #B97930  accent (baked-enamel instrument tray gold)
     FOLDER-GREEN  #315138  wells, footer, tab edges
     FILM-SLOT     #282D4E  panels, cards, chart-clip chrome
     PLASTER-ROSE  #D6C2B4  tertiary
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  background-color: #F1E4EA;
  color: #22413F;
  font-family: Georgia, "Times New Roman", Cambria, serif;
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Trebuchet MS", "Gill Sans", Verdana, sans-serif;
  color: #22413F;
  line-height: 1.25;
  margin: 0 0 0.6em 0;
  letter-spacing: 0.01em;
}

p {
  margin: 0 0 1.1em 0;
}

a {
  color: #315138;
  text-decoration: none;
  border-bottom: 1px solid #B97930;
}

a:hover,
a:focus {
  color: #B97930;
  border-bottom-color: #315138;
}

img {
  max-width: 100%;
  display: block;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #B97930;
  margin: 0 0 0.9em 0;
}

/* ---------------- ODOGRAM RAIL NAV ---------------- */

.odogramrail {
  background-color: #315138;
  padding: 0 0 0 0;
  border-bottom: 6px solid #B97930;
}

.odogramrail-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px 0 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.brandstack {
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
}

.brandlabel {
  background-color: #F1E4EA;
  color: #22413F;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: bold;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  border-left: 5px solid #B97930;
}

.brandsub {
  color: #D6C2B4;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 2px 0 2px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

.hookcluster {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.hooklink {
  display: block;
  position: relative;
  padding-top: 14px;
}

.hookwire {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 14px;
  background-color: #282D4E;
  transform: translateX(-50%);
}

.hooktab {
  display: block;
  background-color: #F1E4EA;
  color: #22413F;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 15px;
  border-bottom: 4px solid #315138;
  border-top: 2px solid #282D4E;
  border-left: 2px solid #282D4E;
  border-right: 2px solid #282D4E;
}

.hooklink:hover .hooktab,
.hooklink:focus .hooktab {
  background-color: #B97930;
  color: #F1E4EA;
  border-bottom-color: #282D4E;
}

.hooklink.is-active .hooktab {
  background-color: #B97930;
  color: #F1E4EA;
  border-bottom-color: #282D4E;
}

.hooklink.depth-1 { margin-bottom: 26px; }
.hooklink.depth-2 { margin-bottom: 8px; }
.hooklink.depth-3 { margin-bottom: 34px; }
.hooklink.depth-4 { margin-bottom: 16px; }
.hooklink.depth-5 { margin-bottom: 2px; }

.navtoggle {
  display: none;
  background-color: #282D4E;
  color: #F1E4EA;
  border: none;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 18px;
  margin-bottom: 16px;
  cursor: pointer;
}

/* ---------------- HERO: CHART STAND ---------------- */

.chartstand {
  background-color: #F1E4EA;
  padding: 58px 0 0 0;
  position: relative;
}

.chartstand-grid {
  display: block;
}

.chartstand-copy {
  max-width: 760px;
}

.chartstand-title {
  font-size: 2.9rem;
  line-height: 1.12;
  margin: 0 0 0.35em 0;
}

.chartstand-display {
  display: block;
  font-size: 4.3rem;
  line-height: 0.98;
  color: #B97930;
  letter-spacing: -0.01em;
}

.chartstand-lede {
  font-size: 1.1rem;
  color: #22413F;
  max-width: 660px;
}

.inline-cta {
  display: inline-block;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #315138;
  border-bottom: 2px solid #B97930;
  padding-bottom: 2px;
  margin-top: 6px;
}

.inline-cta:hover {
  color: #282D4E;
  border-bottom-color: #282D4E;
}

/* full-width records band */

.recordsband {
  margin-top: 46px;
  background-color: #282D4E;
  padding: 0;
  border-top: 8px solid #315138;
}

.recordsband-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-end;
  justify-content: space-between;
}

/* left: rolling chart stand */

.chartstand-rig {
  flex: 1 1 300px;
  min-width: 280px;
}

.stand-post {
  position: relative;
  height: 250px;
  border-left: 8px solid #D6C2B4;
  padding-left: 18px;
}

.stand-rail {
  position: absolute;
  left: 0;
  top: 8px;
  width: 100%;
  height: 6px;
  background-color: #B97930;
}

.hanging-folder {
  position: relative;
  margin-left: 26px;
  margin-bottom: 14px;
  width: 82%;
  background-color: #F1E4EA;
  border: 2px solid #B97930;
  border-top: none;
  padding: 12px 12px 14px 12px;
  color: #22413F;
  font-size: 0.78rem;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  letter-spacing: 0.03em;
}

.hanging-folder::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  width: 3px;
  height: 14px;
  background-color: #D6C2B4;
  transform: translateX(-50%);
}

.hanging-folder::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -19px;
  width: 14px;
  height: 7px;
  border: 2px solid #D6C2B4;
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  transform: translateX(-50%);
}

.hanging-folder.folder-a { margin-left: 40px; width: 70%; }
.hanging-folder.folder-b { margin-left: 18px; width: 86%; }
.hanging-folder.folder-c { margin-left: 52px; width: 64%; }
.hanging-folder.folder-d { margin-left: 26px; width: 78%; }
.hanging-folder.folder-e { margin-left: 60px; width: 58%; }

.folder-edge {
  display: block;
  font-weight: bold;
  color: #315138;
}

/* center: odontogram chart */

.odontogram {
  flex: 1 1 340px;
  min-width: 300px;
  background-color: #F1E4EA;
  border: 3px solid #B97930;
  padding: 18px;
}

.odontogram-cap {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #282D4E;
  margin: 0 0 12px 0;
}

.toothgrid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}

.toothcell {
  position: relative;
  aspect-ratio: 1 / 1.2;
  border: 1px solid #22413F;
  background-color: #F1E4EA;
}

.toothcell::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid #B97930;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.toothcell.filled {
  background-color: #D6C2B4;
}

.toothnum-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.toothnum {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.6rem;
  text-align: center;
  color: #282D4E;
}

/* right: plaster shelf + date-stamp wheel */

.plastershelf {
  flex: 1 1 240px;
  min-width: 220px;
}

.shelf-board {
  height: 10px;
  background-color: #B97930;
  margin-bottom: 10px;
}

.plaster-arch {
  width: 120px;
  height: 54px;
  border: 4px solid #D6C2B4;
  border-bottom: none;
  border-radius: 60px 60px 0 0;
  margin: 0 auto 14px auto;
  background-color: #F1E4EA;
  position: relative;
}

.plaster-arch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 46px;
  height: 20px;
  border: 2px solid #315138;
  border-radius: 0 0 24px 24px;
  border-top: none;
  transform: translateX(-50%);
}

.stampwheel {
  width: 78px;
  height: 78px;
  border: 4px solid #B97930;
  border-radius: 50%;
  margin: 18px auto 24px auto;
  position: relative;
  background-color: #F1E4EA;
}

.stampwheel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  border: 2px solid #282D4E;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.stampwheel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  width: 2px;
  height: 90px;
  background-color: #282D4E;
  transform: translateX(-50%);
}

/* primary CTA bar */

.ctabar {
  display: block;
  background-color: #B97930;
  color: #F1E4EA;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  padding: 22px 32px;
  border-bottom: none;
}

.ctabar:hover,
.ctabar:focus {
  background-color: #315138;
  color: #F1E4EA;
  border-bottom: none;
}

.ctabar-arrow {
  float: right;
  font-size: 1.2rem;
}

/* ---------------- SECTION SHELL ---------------- */

.band {
  padding: 72px 0;
}

.band-chart {
  background-color: #F1E4EA;
}

.band-well {
  background-color: #315138;
  color: #F1E4EA;
}

.band-well h2,
.band-well h3 {
  color: #F1E4EA;
}

.band-well .eyebrow {
  color: #D6C2B4;
}

.intro-block {
  max-width: 780px;
  margin: 0 0 44px 0;
}

.intro-block h2 {
  font-size: 2rem;
}

/* ---------------- ODOGRAM LADDER ROWS ---------------- */

.odoladder {
  position: relative;
  border-left: 6px solid #B97930;
  padding-left: 28px;
}

.odopage {
  background-color: #F1E4EA;
  border: 2px solid #282D4E;
  padding: 24px 26px;
  margin-bottom: 26px;
  position: relative;
}

.odopage::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 22px;
  width: 26px;
  height: 6px;
  background-color: #B97930;
}

.odopage h3 {
  font-size: 1.28rem;
  margin-bottom: 0.45em;
}

.odopage p {
  margin-bottom: 0.5em;
  font-size: 0.98rem;
}

.odopage .pagetag {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #317f6b;
  color: #B97930;
  display: inline-block;
  margin-bottom: 6px;
}

.clip-a {
  position: absolute;
  right: 22px;
  top: -11px;
  width: 30px;
  height: 16px;
  border: 3px solid #282D4E;
  border-bottom: none;
  border-radius: 15px 15px 0 0;
  background-color: #D6C2B4;
}

.clip-b {
  position: absolute;
  right: 66px;
  top: -11px;
  width: 22px;
  height: 22px;
  border: 3px solid #282D4E;
  border-radius: 50%;
  background-color: #F1E4EA;
}

/* widths and offsets make no two pages align */

.odopage.w-wide { width: 100%; margin-left: 0; }
.odopage.w-med { width: 88%; margin-left: 7%; }
.odopage.w-narrow { width: 72%; margin-left: 2%; }
.odopage.w-tall { width: 94%; margin-left: 11%; }
.odopage.w-slim { width: 80%; margin-left: 4%; }
.odopage.w-full { width: 97%; margin-left: 1%; }

/* ---------------- CASSETTE SLOT BAND ---------------- */

.cassetteband {
  background-color: #282D4E;
  padding: 0;
}

.cassetteband-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 24px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.cassetteslot {
  flex: 0 0 130px;
  height: 34px;
  background-color: #F1E4EA;
  border: 3px solid #B97930;
  border-radius: 3px;
  position: relative;
}

.cassetteslot::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 6px;
  background-color: #282D4E;
  transform: translateY(-50%);
}

.cassetteprose {
  flex: 1 1 420px;
  color: #F1E4EA;
  font-size: 1.05rem;
  margin: 0;
}

/* ---------------- CONTENT PIECES ---------------- */

.prose-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
}

.prose-col {
  flex: 1 1 320px;
  min-width: 280px;
}

.panel {
  background-color: #282D4E;
  color: #F1E4EA;
  padding: 30px 28px;
}

.panel h3 {
  color: #F1E4EA;
}

.panel a {
  color: #D6C2B4;
  border-bottom-color: #B97930;
}

.panel a:hover {
  color: #B97930;
}

.papercard {
  background-color: #F1E4EA;
  border: 2px solid #315138;
  padding: 26px 24px;
}

.papercard h3 {
  color: #315138;
}

.statrow {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 26px;
}

.statblk {
  flex: 1 1 160px;
  border-top: 4px solid #B97930;
  padding-top: 12px;
}

.statblk strong {
  display: block;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 1.5rem;
  color: #B97930;
}

.statblk span {
  font-size: 0.85rem;
  color: #D6C2B4;
}

.band-well .statblk span {
  color: #D6C2B4;
}

.callout {
  border-left: 6px solid #B97930;
  background-color: #D6C2B4;
  color: #22413F;
  padding: 20px 24px;
  margin: 26px 0;
}

.callout p {
  margin: 0;
}

.linkgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 22px;
}

.linkchip {
  display: inline-block;
  background-color: #315138;
  color: #F1E4EA;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 18px;
  border-bottom: 3px solid #B97930;
}

.linkchip:hover {
  background-color: #B97930;
  color: #F1E4EA;
  border-bottom-color: #282D4E;
}

/* ---------------- FOOTER: PLASTER ROOM ---------------- */

.plasterroom {
  background-color: #315138;
  color: #F1E4EA;
  padding: 60px 0 0 0;
  border-top: 8px solid #B97930;
}

.plasterroom-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 40px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  justify-content: space-between;
}

.room-label {
  flex: 1 1 320px;
  background-color: #F1E4EA;
  color: #22413F;
  padding: 26px 24px;
  border-left: 6px solid #B97930;
}

.room-label h4 {
  font-size: 1.15rem;
  margin-bottom: 0.4em;
}

.room-label p {
  font-size: 0.92rem;
  margin: 0 0 0.7em 0;
}

.room-columns {
  flex: 1 1 420px;
  display: flex;
  gap: 46px;
  flex-wrap: wrap;
}

.linkcol {
  min-width: 150px;
}

.linkcol-head {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #D6C2B4;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #B97930;
  display: flex;
  align-items: center;
  gap: 10px;
}

.miniwheel {
  width: 18px;
  height: 18px;
  border: 2px solid #B97930;
  border-radius: 50%;
  position: relative;
  display: inline-block;
}

.miniwheel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  background-color: #B97930;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.linkcol ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.linkcol li {
  margin-bottom: 10px;
}

.linkcol a {
  color: #F1E4EA;
  border-bottom: 1px solid #315138;
  font-size: 0.95rem;
}

.linkcol a:hover {
  color: #B97930;
  border-bottom-color: #B97930;
}

.plaster-ledge {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 40px;
  align-items: flex-end;
}

.ledge-arch {
  width: 140px;
  height: 60px;
  border: 5px solid #D6C2B4;
  border-bottom: none;
  border-radius: 70px 70px 0 0;
  background-color: #315138;
  position: relative;
}

.ledge-arch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  width: 54px;
  height: 22px;
  border: 3px solid #B97930;
  border-top: none;
  border-radius: 0 0 27px 27px;
  transform: translateX(-50%);
}

.roomstrip {
  background-color: #22413F;
  color: #F1E4EA;
  margin-top: 30px;
  padding: 18px 0;
}

.roomstrip-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.86rem;
}

.roomstrip a {
  color: #D6C2B4;
  border-bottom-color: #B97930;
}

.roomstrip a:hover {
  color: #B97930;
}

.stripclip {
  display: inline-block;
  width: 22px;
  height: 12px;
  border: 2px solid #B97930;
  border-bottom: none;
  border-radius: 11px 11px 0 0;
  margin-right: 8px;
  vertical-align: middle;
}

/* ---------------- CONTACT / FORMS ---------------- */

.form-shell {
  background-color: #F1E4EA;
  border: 3px solid #282D4E;
  padding: 30px 28px;
}

.form-row {
  margin-bottom: 18px;
}

.form-row label {
  display: block;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #315138;
  margin-bottom: 6px;
}

.form-row input,
.form-row textarea {
  width: 100%;
  font-family: Georgia, serif;
  font-size: 0.98rem;
  padding: 12px 14px;
  border: 2px solid #22413F;
  background-color: #F1E4EA;
  color: #22413F;
}

.form-row textarea {
  min-height: 150px;
  resize: vertical;
}

.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: #B97930;
}

.formsubmit {
  display: inline-block;
  background-color: #B97930;
  color: #F1E4EA;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: none;
  cursor: pointer;
}

.formsubmit:hover {
  background-color: #315138;
}

.formnote {
  font-size: 0.82rem;
  color: #315138;
  margin-top: 12px;
}

.infoblock {
  background-color: #282D4E;
  color: #F1E4EA;
  padding: 26px 24px;
  margin-bottom: 22px;
}

.infoblock h3 {
  color: #F1E4EA;
  font-size: 1.05rem;
}

.infoblock a {
  color: #D6C2B4;
  border-bottom-color: #B97930;
}

.infoblock a:hover {
  color: #B97930;
}

.faqitem {
  border-top: 3px solid #B97930;
  padding-top: 16px;
  margin-bottom: 22px;
}

.faqitem h3 {
  font-size: 1.05rem;
  color: #315138;
}

/* ---------------- REVEAL ---------------- */

.reveal-el {
  opacity: 1;
}

html.js-ready .reveal-el {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease, transform 520ms ease;
}

html.js-ready .reveal-el.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 900px) {
  .chartstand-title { font-size: 2.2rem; }
  .chartstand-display { font-size: 3rem; }
  .recordsband-inner { flex-direction: column; align-items: stretch; }
  .odontogram { order: 1; }
  .chartstand-rig { order: 2; }
  .plastershelf { order: 3; }
  .odopage.w-wide,
  .odopage.w-med,
  .odopage.w-narrow,
  .odopage.w-tall,
  .odopage.w-slim,
  .odopage.w-full {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .odogramrail-inner { align-items: stretch; }
  .hookcluster { display: none; flex-direction: column; gap: 0; width: 100%; }
  .hookcluster.open { display: flex; }
  .hooklink { margin-bottom: 0; padding-top: 0; }
  .hookwire { display: none; }
  .hooktab { border-top: none; border-bottom: 2px solid #282D4E; padding: 14px 16px; }
  .navtoggle { display: block; }
  .brandstack { padding-bottom: 12px; }
  .plasterroom-inner { flex-direction: column; }
  .ledge-arch { width: 110px; height: 48px; }
}